pagination

// src/components/template-components/pagination/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/pagination
additionalProperties: false
type: object
required:
  - label
  - current
  - ellipses
  - items
properties:
  label:
    type: string
  current:
    type: number
  ellipses:
    type: object
    additionalProperties: false
    properties:
      previous:
        type: boolean
      next:
        type: boolean
  items:
    type: object
    additionalProperties: false
    required:
      - pages
    properties:
      first:
        $ref: '#/$defs/page'
      previous:
        $ref: '#/$defs/page'
      last:
        $ref: '#/$defs/page'
      next:
        $ref: '#/$defs/page'
      pages:
        type: object
        additionalProperties: false
        patternProperties:
          \d:
            $ref: '#/$defs/page'
$defs:
  page:
    type: object
    properties:
      href:
        type: string
        format: uri-reference

// src/components/template-components/pagination/mocks.yaml

$hidden: true
label: Pagination
$variants:
  - $name: First
    current: 1
    ellipses:
      previous: false
      next: true
    items:
      last:
        href: href
      next:
        href: href
      pages:
        '1':
          href: href
        '2':
          href: href
        '3':
          href: href
        '4':
          href: href
        '5':
          href: href
  - $name: Middle
    current: 8
    ellipses:
      previous: true
      next: true
    items:
      first:
        href: href
      previous:
        href: href
      last:
        href: href
      next:
        href: href
      pages:
        '6':
          href: href
        '7':
          href: href
        '8':
          href: href
        '9':
          href: href
        '10':
          href: href
  - $name: Last
    current: 12
    ellipses:
      previous: true
      next: false
    items:
      first:
        href: href
      previous:
        href: href
      pages:
        '8':
          href: href
        '9':
          href: href
        '10':
          href: href
        '11':
          href: href
        '12':
          href: href

// src/components/template-components/pagination/pagination.twig

{% if items %}
	<nav class="Pagination" aria-label="{{ label }}">
		<ul class="Pagination-items">
			{# Print first item if we are not on the first page. #}
			{% if items.first %}
				<li class="Pagination-item Pagination-item--first">
					<a class="Pagination-link" href="{{ items.first.href }}">
						<span class="u-hiddenVisually">{{ 'First page'|t }}</span>
						<span aria-hidden="true">{{ items.first.text|default('« First'|t) }}</span>
					</a>
				</li>
			{% endif %}
			{# Print previous item if we are not on the first page. #}
			{% if items.previous %}
				<li class="Pagination-item Pagination-item--previous">
					<a class="Pagination-link" href="{{ items.previous.href }}" rel="prev">
						<span class="u-hiddenVisually">{{ 'Previous page'|t }}</span>
						<span aria-hidden="true">{{ items.previous.text|default('‹ Previous'|t) }}</span>
					</a>
				</li>
			{% endif %}
			{# Add an ellipsis if there are further previous pages. #}
			{% if ellipses.previous %}
				<li class="Pagination-item Pagination-item--ellipsis">&hellip;</li>
			{% endif %}
			{# Now generate the actual pager piece. #}
			{% for key, item in items.pages %}
				{% set is_current = current == key %}
				<li class="Pagination-item">
					<a class="Pagination-link" href="{{ item.href }}" {% if is_current %}aria-current="page"{% endif %}>
						<span class="u-hiddenVisually">{{ 'Page'|t }}</span>
						<span class="Pagination-number">{{ key }}</span>
					</a>
				</li>
			{% endfor %}
			{# Add an ellipsis if there are further next pages. #}
			{% if ellipses.next %}
				<li class="Pagination-item Pagination-item--ellipsis">&hellip;</li>
			{% endif %}
			{# Print next item if we are not on the last page. #}
			{% if items.next %}
				<li class="Pagination-item Pagination-item--next">
					<a class="Pagination-link" href="{{ items.next.href }}" rel="next">
						<span class="u-hiddenVisually">{{ 'Next page'|t }}</span>
						<span aria-hidden="true">{{ items.next.text|default('Next ›'|t) }}</span>
					</a>
				</li>
			{% endif %}
			{# Print last item if we are not on the last page. #}
			{% if items.last %}
				<li class="Pagination-item Pagination-item--last">
					<a class="Pagination-link" href="{{ items.last.href }}">
						<span class="u-hiddenVisually">{{ 'Last page'|t }}</span>
						<span aria-hidden="true">{{ items.last.text|default('Last »'|t) }}</span>
					</a>
				</li>
			{% endif %}
		</ul>
	</nav>
{% endif %}