page-nav

// src/components/patterns/page-nav/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/page-nav
$defs:
  link:
    type: object
    required:
      - title
      - href
    properties:
      title:
        type: string
      href:
        type: string
        format: uri-reference
additionalProperties: false
type: object
required:
  - label
anyOf:
  - required:
      - previous
  - required:
      - next
properties:
  label:
    type: string
  previous:
    $ref: '#/$defs/link'
  next:
    $ref: '#/$defs/link'

// src/components/patterns/page-nav/mocks.yaml

$hidden: true
label: Previous and next page
$variants:
  - $name: previous
    previous:
      title: Chapter 1 title
      href: url
  - $name: next
    next:
      title: Chapter 2 title
      href: url
  - $name: previous and next
    previous:
      title: Chapter 1 title
      href: url
    next:
      title: Chapter 3 title
      href: url

// src/components/patterns/page-nav/page-nav.twig

<nav class="PageNav" aria-label="{{ label }}">
	{% if previous.href %}
		<a
			class="PageNav-link PageNav-link--previous"
			href="{{ previous.href }}"
			rel="prev"
		>
			<small class="PageNav-linkLabel">
				{{ "Previous page"|t }}
			</small>
			{{ previous.title }}
		</a>
	{% endif %}

	{% if next.href %}
		<a
			class="PageNav-link PageNav-link--next"
			href="{{ next.href }}"
			rel="next"
		>
			<small class="PageNav-linkLabel">
				{{ "Next page"|t }}
			</small>
			{{ next.title }}
		</a>
	{% endif %}
</nav>