name: Step by step navigation related links
description: Links to step by step navigations that a page is part of
body: |
  The component is designed to go on a content page to accompany a small step by step navigation in a sidebar. It provides links to one or more step by step navigation pages.

  The component has two uses:

  - above the step by step navigation sidebar, it provides a link to the main step by step navigation
  - below the step by step navigation sidebar, it shows and links to any other step by step navigations that this page belongs to

  In the first use case, only one link should be present and the entire text of the component should be contained in a heading. In the second use case, if more than one link is provided, the links should be shown in a list, separate from the heading.
accessibility_criteria: |
  The component must:

  - display a single link as part of a heading
  - display multiple links outside of a heading in a separate list
shared_accessibility_criteria:
  - link
uses_component_wrapper_helper: true
examples:
  default:
    data:
      links: [
        {
          href: '/learn-to-drive-a-car',
          text: 'Learn to drive a car: step by step'
        }
      ]
  with_more_than_one_link:
    description: If more than one link is passed to the component it should output them as a list outside of the heading.
    data:
      links: [
        {
          href: '/learn-to-drive-a-car',
          text: 'Learn to drive a car: step by step'
        },
        {
          href: '/learn-to-drive-a-motorbike',
          text: 'Learn to drive a motorbike: step by step'
        }
      ]
  with_a_different_title:
    description: The default title 'Part of' can be replaced if required.
    data:
      pretitle: 'Also part of'
      links: [
        {
          href: '/learn-to-drive-a-car',
          text: 'Learn to drive a car: step by step'
        },
        {
          href: '/learn-to-drive-a-motorbike',
          text: 'Learn to drive a motorbike: step by step'
        }
      ]
  always_display_as_a_list:
    description: |
      when this component is rendered alongside an expanded step by step, we want it to render as a heading.
      However, in some cases the component will not be followed by a step by step, for example [Book Driving Test](https://www.gov.uk/book-driving-test).
      In these cases, the heading is not followed by any content, so it should be rendered as a list instead.
    data:
      pretitle: 'Also part of'
      always_display_as_list: true
      links: [
        {
          href: '/learn-to-drive-a-motorbike',
          text: 'Learn to drive a motorbike: step by step'
        }
      ]
  without_ga4_tracking:
    description: Disables GA4 tracking on the component. Tracking is enabled by default. This includes the `ga4-link-tracker` module and `data-ga4-link` attributes. See the [ga4-link-tracker docs](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
    data:
      disable_ga4: true
      pretitle: 'Example pretitle'
      links: [
        {
          href: '#',
          text: 'With ga4 tracking'
        }
      ]