name: Layout super navigation header
description: The super navigation header provides a consistent header across GOV.UK.
body: |
shared_accessibility_criteria:
  - link
accessibility_criteria: |
  The component must:

  * have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

  Images in the super navigation header must:

  * be presentational when linked to from accompanying text (crown icon).

  Landmarks and Roles in the super navigation header should:

  * have a role of banner at the root of the component (<header>) (ARIA 1.1)
accessibility_excluded_rules:
   # The header element can not be top level in the examples.
  - landmark-banner-is-top-level
  # Banners will be duplicated in component examples list.
  - duplicate-id
  - duplicate-id-active
  - duplicate-id-aria
  - landmark-no-duplicate-banner
  - landmark-unique
examples:
  default:
  with_custom_logo_link:
    description: |
      The header logo links to root by default. This option allows us to override that in certain instances.

      Remember to update the title, as the default is "Go to the GOV.UK homepage".
    data:
      logo_link: "https://www.example.com"
      logo_link_title: "Go to example"
  homepage:
    description: |
      This variant is used for the homepage. It toggles the following attributes: hide_button_left_border, hide_logo_text and blue_background
    data:
      hide_logo_text: true
      hide_button_left_border: true
      blue_background: true
      large_navbar: true      
  hide_logo_text:
    description: |
      Logo text is shown by default. This option allows us to hide the text for the homepage.
    data:
      hide_logo_text: true
  remove_left_button_border:
    description: |
      The left border for the toggle button is shown by default. This option allows us to hide the text for the homepage.
    data:
      hide_button_left_border: true
  blue_blackground_colour:
    description: |
      The black background is shown by default. This option allows us to change the background colour for the homepage.
    data:
      blue_background: true
  large_navbar:
    description: |
      Make the links and buttons large on desktop only. Used for the homepage.
    data:
      large_navbar: true
      hide_logo_text: true