From fa9b6c2f36c30b77f923699ceef0703e0ed27fc8 Mon Sep 17 00:00:00 2001 From: beeps Date: Fri, 30 Aug 2024 10:32:58 +0100 Subject: [PATCH 1/3] =?UTF-8?q?Add=20=E2=80=98complex=20header=E2=80=99=20?= =?UTF-8?q?example=20to=20review=20app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../companies-you-follow/index.njk | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow/index.njk diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow/index.njk new file mode 100644 index 0000000000..948579da89 --- /dev/null +++ b/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow/index.njk @@ -0,0 +1,101 @@ +--- +title: Companies you follow +name: Companies you follow (service navigation) +scenario: | + You are a user logged into Companies House WebFiling service, looking at a + list of companies you are following. +notes: Based on Companies House "Find an update company information" service +--- + +{% extends "layouts/full-page-example.njk" %} + +{% from "govuk/components/button/macro.njk" import govukButton %} +{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %} +{% from "govuk/components/header/macro.njk" import govukHeader %} +{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %} +{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %} + +{% set pageTitle = example.title %} +{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %} + +{% block head %} + {{ super() }} + +{% endblock %} + +{% set signOutButton %} +
  • + {{ govukButton({ + type: "button", + classes: "govuk-button--inverse", + text: "Sign out" + }) }} +
    • +{% endset %} + +{% block header %} + {{ govukHeader({ + classes: "govuk-header--full-width-border", + serviceName: "Find and update company information", + serviceUrl: "#0" + }) }} + {{ govukServiceNavigation({ + classes: "app-service-navigation", + navigation: [ + { + href: '#1', + text: 'Search the register' + }, + { + href: '#2', + text: 'Your details' + }, + { + href: '#3', + text: 'Your filings' + }, + { + href: '#4', + text: 'Companies you follow', + current: true + } + ], + slots: { + navigationEnd: signOutButton + } + }) }} +{% endblock %} + +{% block beforeContent %} + {{ govukPhaseBanner({ + tag: { + text: "Alpha" + }, + html: 'This is a new service. Help us improve it and give your feedback by email.' + }) }} + {{ govukBreadcrumbs({ + items: [ + { + text: "Home", + href: "#0" + } + ] + }) }} +{% endblock %} + +{% block content %} +

    Companies you follow

    +

    You are not following any companies.

    +{% endblock %} From 273984a605091ed58458d1b630270bc35ff5f2fe Mon Sep 17 00:00:00 2001 From: beeps Date: Fri, 30 Aug 2024 10:34:04 +0100 Subject: [PATCH 2/3] Update/remove GOV.UK header nav from examples MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We don’t expect users to use the navigation function of the header component anymore, instead preferring the service navigation component. --- .../full-page-examples/announcements/index.njk | 4 +++- .../full-page-examples/upload-your-photo/index.njk | 13 +------------ 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/announcements/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/announcements/index.njk index 242a3514a9..a1a708ef55 100644 --- a/packages/govuk-frontend-review/src/views/full-page-examples/announcements/index.njk +++ b/packages/govuk-frontend-review/src/views/full-page-examples/announcements/index.njk @@ -5,6 +5,7 @@ notes: Based on https://www.gov.uk/government/news/strictly-vampires-and-sausage --- {% extends "layouts/full-page-example.njk" %} +{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %} {% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %} {% from "govuk/components/inset-text/macro.njk" import govukInsetText %} @@ -12,7 +13,8 @@ notes: Based on https://www.gov.uk/government/news/strictly-vampires-and-sausage {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %} {% block header %} -{{ govukHeader({ +{{ govukHeader({}) }} +{{ govukServiceNavigation({ navigation: [ { href: "#1", diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/upload-your-photo/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/upload-your-photo/index.njk index e3e2b4d8f6..6612671c5e 100644 --- a/packages/govuk-frontend-review/src/views/full-page-examples/upload-your-photo/index.njk +++ b/packages/govuk-frontend-review/src/views/full-page-examples/upload-your-photo/index.njk @@ -25,18 +25,7 @@ scenario: | {% block header %} {{ govukHeader({ - serviceName: "Apply for a passport", - navigation: [ - { - href: "/", - text: "Home" - }, - { - href: "#upload-a-photo", - text: "Upload a photo", - active: true - } - ] + serviceName: "Apply for a passport" }) }} {% endblock %} From 0d2370a7d1a9536489835ad6e0d2c70ec7efdbf0 Mon Sep 17 00:00:00 2001 From: beeps Date: Mon, 2 Sep 2024 12:09:42 +0100 Subject: [PATCH 3/3] Split complex header example into two Create examples with and without the service name in the Service navigation component to demonstrate differences in HTML landmarks --- .../companies-you-follow-slot/index.njk | 101 ++++++++++++++++++ .../companies-you-follow/index.njk | 40 +------ 2 files changed, 106 insertions(+), 35 deletions(-) create mode 100644 packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow-slot/index.njk diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow-slot/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow-slot/index.njk new file mode 100644 index 0000000000..84b6ef088b --- /dev/null +++ b/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow-slot/index.njk @@ -0,0 +1,101 @@ +--- +title: Companies you follow +name: Companies you follow (service navigation with slots) +scenario: | + You are a user logged into Companies House WebFiling service, looking at a + list of companies you are following. +notes: Based on Companies House "Find an update company information" service +--- + +{% extends "layouts/full-page-example.njk" %} + +{% from "govuk/components/button/macro.njk" import govukButton %} +{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %} +{% from "govuk/components/header/macro.njk" import govukHeader %} +{% from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation %} +{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %} + +{% set pageTitle = example.title %} +{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %} + +{% block head %} + {{ super() }} + +{% endblock %} + +{% set signOutButton %} +
  • + {{ govukButton({ + type: "button", + classes: "govuk-button--inverse", + text: "Sign out" + }) }} +
    • +{% endset %} + +{% block header %} + {{ govukHeader({ + classes: "govuk-header--full-width-border", + serviceName: "Find and update company information", + serviceUrl: "#0" + }) }} + {{ govukServiceNavigation({ + classes: "app-service-navigation", + navigation: [ + { + href: '#1', + text: 'Search the register' + }, + { + href: '#2', + text: 'Your details' + }, + { + href: '#3', + text: 'Your filings' + }, + { + href: '#4', + text: 'Companies you follow', + current: true + } + ], + slots: { + navigationEnd: signOutButton + } + }) }} +{% endblock %} + +{% block beforeContent %} + {{ govukPhaseBanner({ + tag: { + text: "Alpha" + }, + html: 'This is a new service. Help us improve it and give your feedback by email.' + }) }} + {{ govukBreadcrumbs({ + items: [ + { + text: "Home", + href: "#0" + } + ] + }) }} +{% endblock %} + +{% block content %} +

    Companies you follow

    +

    You are not following any companies.

    +{% endblock %} diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow/index.njk index 948579da89..8723b2a921 100644 --- a/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow/index.njk +++ b/packages/govuk-frontend-review/src/views/full-page-examples/companies-you-follow/index.njk @@ -1,6 +1,6 @@ --- title: Companies you follow -name: Companies you follow (service navigation) +name: Companies you follow (service navigation with service name) scenario: | You are a user logged into Companies House WebFiling service, looking at a list of companies you are following. @@ -18,41 +18,14 @@ notes: Based on Companies House "Find an update company information" service {% set pageTitle = example.title %} {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %} -{% block head %} - {{ super() }} - -{% endblock %} - -{% set signOutButton %} -
  • - {{ govukButton({ - type: "button", - classes: "govuk-button--inverse", - text: "Sign out" - }) }} -
    • -{% endset %} - {% block header %} {{ govukHeader({ - classes: "govuk-header--full-width-border", - serviceName: "Find and update company information", - serviceUrl: "#0" + classes: "govuk-header--full-width-border" }) }} {{ govukServiceNavigation({ classes: "app-service-navigation", + serviceName: "Find company information", + serviceUrl: "#0", navigation: [ { href: '#1', @@ -71,10 +44,7 @@ notes: Based on Companies House "Find an update company information" service text: 'Companies you follow', current: true } - ], - slots: { - navigationEnd: signOutButton - } + ] }) }} {% endblock %}