Remove primary navigation component

docs/examples/masthead-below-primary-navigation.njk → docs/examples/masthead-below-service-navigation.njk

@@ -1,26 +1,19 @@
 ---
 eleventyExcludeFromCollections: true
 layout: example-full-width.njk
-title: Masthead example below primary navigation
+title: Masthead example below service navigation
 ---
-<style>
-  .app-header--full-width-border {
-    border-bottom: 10px solid #1f70b8;
-  }
-</style>
-
 {% from "govuk/components/header/macro.njk" import govukHeader %}
 {{ govukHeader({
-  classes: "app-header--full-width-border"
+  classes: "govuk-header--full-width-border"
 }) }}
 
-{% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}
-{{ xGovukPrimaryNavigation({
-  visuallyHiddenTitle: "Navigation",
-  items: [{
+{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %}
+{{ govukServiceNavigation({
+  navigation: [{
     text: "Home",
     href: "#",
-    current: true
+    active: true
   }, {
     text: "Support",
     href: "#"

docs/masthead.md

@@ -36,10 +36,10 @@ To ensure there is no gap between the header and the masthead, create a modifier
   example: "masthead-below-header"
 }) }}
 
-If your service uses [the primary navigation component](primary-navigation), this should appear directly above the masthead:
+If your service uses [the service navigation component](https://design-system.service.gov.uk/components/service-navigation/), this should appear directly above the masthead:
 
 {{ appExample({
-  example: "masthead-below-primary-navigation"
+  example: "masthead-below-service-navigation"
 }) }}
 
 You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

docs/primary-navigation.md

@@ -1,120 +1,12 @@
 ---
+eleventyExcludeFromCollections: true
 layout: sub-navigation
-order: 5
 title: Primary navigation
-description: Link to the primary sections of your service.
 ---
 
 {% from "example/macro.njk" import appExample %}
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
 
-{{ appExample({
-  example: "primary-navigation"
+{{ govukNotificationBanner({
+  html: "### This component has been retired\n\nUse the [service navigation component](https://design-system.service.gov.uk/components/service-navigation/) in the GOV.UK Design System to help users navigate to the main sections of your service." | markdown
 }) }}
-
-## When to use this component
-
-Use the primary navigation component to let users navigate to the main sections of your service.
-
-You must use this component with [the header component](https://design-system.service.gov.uk/components/header/).
-
-## How it works
-
-The primary navigation component takes up the full width of the page. To ensure there is no gap between the header and this component, create a modifying class to make the bottom border on the header also take up the full width of the page:
-
-{{ appExample({
-  example: "primary-navigation-below-header"
-}) }}
-
-Only include links to top level sections within your service.
-
-One of the items should be highlighted if it matches the current page or parent section. This item remains a link, but includes an `aria-current="page"` attribute with a line displayed beneath it to indicate that it is the current section.
-
-If your service uses [the phase banner component](https://design-system.service.gov.uk/components/phase-banner/), this should appear directly above the primary navigation component.
-
-To ensure there is no border between the phase banner and navigation, create a modifying class to remove the bottom border from the phase banner:
-
-{{ appExample({
-  example: "primary-navigation-below-phase-banner"
-}) }}
-
-You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
-
-## Nunjucks macro options
-
-Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
-
-Some options are required for the macro to work; these are marked as “Required” in the option description.
-
-If you’re using Nunjucks macros in production with `html` options, or ones ending with `html`, you must sanitise the HTML to protect against [cross-site scripting exploits](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting).
-
-{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
-  firstCellIsHeader: true,
-  head: [
-    { text: "Name" },
-    { text: "Type" },
-    { text: "Description" }
-  ],
-  rows: [
-    [
-      { text: "items" },
-      { text: "Array" },
-      { text: "**Required**. An array of navigation links. See [items](#items)." | markdown }
-    ],
-    [
-      { text: "visuallyHiddenTitle" },
-      { text: "string" },
-      { text: "A visually-hidden label to describe the navigation (default is ‘Menu’). " }
-    ],
-    [
-      { text: "classes" },
-      { text: "string" },
-      { text: "Classes to add to the primary navigation container." }
-    ],
-    [
-      { text: "attributes" },
-      { text: "object" },
-      { text: "HTML attributes (for example data attributes) to add to the navigation container." }
-    ]
-  ]
-}) }}
-
-{{ govukTable({
-  attributes: { id: "items" },
-  caption: "Options for items",
-  captionClasses: "govuk-table__caption--m",
-  firstCellIsHeader: true,
-  head: [
-    { text: "Name" },
-    { text: "Type" },
-    { text: "Description" }
-  ],
-  rows: [
-    [
-      { text: "text" },
-      { text: "string" },
-      { text: "**Required**. Text of the navigation link." | markdown }
-    ],
-    [
-      { text: "href" },
-      { text: "string" },
-      { text: "**Required**. The value of the navigation link’s `href` attribute." | markdown }
-    ],
-    [
-      { text: "current" },
-      { text: "boolean" },
-      { text: "Indicate that the item is the current page." }
-    ],
-    [
-      { text: "classes" },
-      { text: "string" },
-      { text: "Classes to add to the navigation item." }
-    ]
-  ]
-}) }}
-
-## Research on this component
-
-This component is based on [the Primary navigation component originally developed as part of the Ministry of Justice Design System](https://design-patterns.service.justice.gov.uk/components/primary-navigation/).
-
-It also follows the design of the [GOV.UK One Login service header](https://github.com/govuk-one-login/service-header).

docs/secondary-navigation.md

@@ -13,7 +13,7 @@ description: Allow users to navigate between pages scoped to a section.
 
 ## When to use this component
 
-Use the secondary navigation when you already have a [primary navigation](primary-navigation) and need to let users navigate between pages that are scoped to a particular section or concept.
+Use the secondary navigation when you already have [service navigation](https://design-system.service.gov.uk/components/service-navigation/) and need to let users navigate between pages that are scoped to a particular section or concept.
 
 For example, if your service is a case management system, you might use the secondary navigation if there are multiple pages associated with a single case.
 

docs/supported-versions.md

@@ -6,8 +6,8 @@ title: Supported versions
 
 GOV.UK Prototype Components are actively maintained and support the latest stable versions of the [GOV.UK Frontend](https://frontend.design-system.service.gov.uk), [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk) and [Node JS](https://nodejs.org).
 
-| GOV.UK Prototype Components | {{ pkg.version }} | 2.2.2   |
-| --------------------------- | ----------------- | ------- |
-| GOV.UK Frontend             | 5.0.0             | 4.7.0   |
-| GOV.UK Prototype Kit        | 13.16.0           | 13.16.0 |
-| Node JS                     | 18.0.0            | 18.0.0  |
+| GOV.UK Prototype Components | {{ pkg.version }} | 3.0.7   | 2.2.2   |
+| --------------------------- | ----------------- | ------- | ------- |
+| GOV.UK Frontend             | 5.0.0             | 5.0.0   | 4.7.0   |
+| GOV.UK Prototype Kit        | 13.16.0           | 13.16.0 | 13.16.0 |
+| Node JS                     | 18.0.0            | 18.0.0  | 18.0.0  |

eleventy.config.js

@@ -105,7 +105,6 @@ module.exports = function (eleventyConfig) {
       .getFilteredByGlob([
         'docs/autocomplete.md',
         'docs/masthead.md',
-        'docs/primary-navigation.md',
         'docs/secondary-navigation.md',
         'docs/sub-navigation.md',
         'docs/related-navigation.md',

govuk-prototype-kit.config.json

@@ -17,10 +17,6 @@
       "importFrom": "masthead/macro.njk",
       "macroName": "xGovukMasthead"
     },
-    {
-      "importFrom": "primary-navigation/macro.njk",
-      "macroName": "xGovukPrimaryNavigation"
-    },
     {
       "importFrom": "related-navigation/macro.njk",
       "macroName": "xGovukRelatedNavigation"
@@ -47,11 +43,6 @@
       "path": "/govuk-prototype-kit/templates/masthead.html",
       "type": "nunjucks"
     },
-    {
-      "name": "Primary navigation page",
-      "path": "/govuk-prototype-kit/templates/primary-navigation.html",
-      "type": "nunjucks"
-    },
     {
       "name": "Related navigation page",
       "path": "/govuk-prototype-kit/templates/related-navigation.html",