Pager

// src/components/patterns/pager/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/pager
additionalProperties: false
required:
  - items
  - current_page
properties:
  items:
    type: object
    required:
      - pages
    properties:
      first:
        type: object
        required:
          - href
          - text
        properties:
          href:
            type: string
            format: uri
          text:
            type: string
      previous:
        type: object
        required:
          - href
          - text
        properties:
          href:
            type: string
            format: uri
          text:
            type: string
      pages:
        type: array
        items:
          type: object
          required:
            - href
            - text
          properties:
            href:
              type: string
              format: uri
            text:
              type: string
      next:
        type: object
        required:
          - href
          - text
        properties:
          href:
            type: string
            format: uri
          text:
            type: string
      last:
        type: object
        required:
          - href
          - text
        properties:
          href:
            type: string
            format: uri
          text:
            type: string
  ellipses:
    type: object
    required:
      - previous
      - next
    properties:
      previous:
        type: boolean
      next:
        type: boolean
  current_page:
    type: number

// src/components/patterns/pager/mocks.yaml

items:
  first:
    href: ttp://example.com/first
    text: Erste
  previous:
    href: http://example.com/previous
    text: Zurück
  pages:
    - href: http://example.com/page1
      text: '1'
    - href: http://example.com/page2
      text: '2'
    - href: http://example.com/page3
      text: '3'
  next:
    href: http://example.com/next
    text: Weiter
  last:
    href: http://example.com/last
    text: Letzte
ellipses:
  previous: true
  next: true
current_page: 1

// src/components/patterns/pager/pager.html.twig

<nav class="Pager" aria-labelledby="pagination-heading">
  <h2 id="pagination-heading" class="u-hiddenVisually">{{ 'Paginierung'|t }}</h2>
  <ul class="Pager-items js-pager__items">
    {% if items.previous %}
      <li class="Pager-item Pager-item--previous">
        <a class="u-brandLink Pager-itemLink" href="{{ items.previous.href }}" rel="prev">
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Pager-itemIcon--prev"
          } only %}
          <span class="u-hiddenVisually">{{ 'Vorherige Seite'|t }}</span>
          <span aria-hidden="true">{{ items.previous.text }}</span>
        </a>
      </li>
    {% else %}
      <li class="Pager-item Pager-item--previous Pager-item--disabled" aria-hidden="true">
        <span class="Pager-itemLink" title="{{ 'Gehe zur vorherigen Seite'|t }}">
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Pager-itemIcon--prev"
          } only %}
          Zurück
        </span>
      </li>
    {% endif %}
    {% if ellipses.previous %}
      <li class="Pager-item Pager-item--ellipses" role="presentation">&hellip;</li>
    {% endif %}
    {% for key, item in items.pages %}
      <li class="Pager-item">
        <a class="Pager-pageNumber{{ current_page == key ? ' Pager-pageNumber--active' : '' }}" href="{{ item.href }}" title="{{ current_page == key ? 'Aktuelle Seite'|t : 'Gehe zur Seite ' ~ (key + 1) }}" {{ current_page == key ? ' aria-current' : '' }}>
          <span class="u-hiddenVisually">{{ 'Seite'|t }}</span>
          {{ item.text }}
        </a>
      </li>
    {% endfor %}
    {% if ellipses.next %}
      <li class="Pager-item" role="presentation">&hellip;</li>
    {% endif %}
    {% if items.next %}
      <li class="Pager-item Pager-item--next">
        <a class="u-brandLink Pager-itemLink" href="{{ items.next.href }}" title="{{ 'Zur nächsten Seite gehen'|t }}" rel="next">
          <span class="u-hiddenVisually">{{ 'Nächste Seite'|t }}</span>
          <span aria-hidden="true">{{ items.next.text }}</span>
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Pager-itemIcon--next"
          } only %}
        </a>
      </li>
    {% else %}
      <li class="Pager-item Pager-item--next Pager-item--disabled" aria-hidden="true">
        <span class="Pager-itemLink">
          Weiter
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Pager-itemIcon--next"
          } only %}
        </span>
      </li>
    {% endif %}
  </ul>
</nav>