From b7313360e71901736b116fd56458c674570fce75 Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Mon, 24 Jul 2023 14:22:55 +0100 Subject: [PATCH 01/43] footer done --- app/components/footer-new/index.njk | 33 + app/components/header-new/header-logo.njk | 14 + .../header-new/header-navigation.njk | 40 + .../header-new/header-org-white-nav.njk | 42 + .../header-new/header-org-white.njk | 42 + app/components/header-new/header-org.njk | 41 + app/components/header-new/header-search.njk | 40 + .../header-service-name-with-nav.njk | 39 + .../header-new/header-service-name.njk | 15 + .../header-transactional-service-name.njk | 17 + .../header-new/header-transactional.njk | 15 + app/components/header-new/index.njk | 40 + app/pages/examples.njk | 12 + packages/components/footer-new/README.md | 77 ++ .../components/footer-new/_footer-new.scss | 64 ++ packages/components/footer-new/macro.njk | 3 + packages/components/footer-new/template.njk | 17 + packages/components/header-new/README.md | 947 ++++++++++++++++++ .../components/header-new/_header-new.scss | 255 +++++ packages/components/header-new/header.js | 7 + packages/components/header-new/header.test.js | 9 + packages/components/header-new/macro.njk | 3 + packages/components/header-new/menuToggle.js | 32 + .../components/header-new/menuToggle.test.js | 85 ++ .../components/header-new/searchToggle.js | 34 + packages/components/header-new/template.njk | 154 +++ packages/nhsuk.scss | 2 + 27 files changed, 2079 insertions(+) create mode 100644 app/components/footer-new/index.njk create mode 100644 app/components/header-new/header-logo.njk create mode 100644 app/components/header-new/header-navigation.njk create mode 100644 app/components/header-new/header-org-white-nav.njk create mode 100644 app/components/header-new/header-org-white.njk create mode 100644 app/components/header-new/header-org.njk create mode 100644 app/components/header-new/header-search.njk create mode 100644 app/components/header-new/header-service-name-with-nav.njk create mode 100644 app/components/header-new/header-service-name.njk create mode 100644 app/components/header-new/header-transactional-service-name.njk create mode 100644 app/components/header-new/header-transactional.njk create mode 100644 app/components/header-new/index.njk create mode 100644 packages/components/footer-new/README.md create mode 100644 packages/components/footer-new/_footer-new.scss create mode 100644 packages/components/footer-new/macro.njk create mode 100644 packages/components/footer-new/template.njk create mode 100644 packages/components/header-new/README.md create mode 100644 packages/components/header-new/_header-new.scss create mode 100644 packages/components/header-new/header.js create mode 100644 packages/components/header-new/header.test.js create mode 100644 packages/components/header-new/macro.njk create mode 100644 packages/components/header-new/menuToggle.js create mode 100644 packages/components/header-new/menuToggle.test.js create mode 100644 packages/components/header-new/searchToggle.js create mode 100644 packages/components/header-new/template.njk diff --git a/app/components/footer-new/index.njk b/app/components/footer-new/index.njk new file mode 100644 index 000000000..d4ec291ac --- /dev/null +++ b/app/components/footer-new/index.njk @@ -0,0 +1,33 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Footer (new)' %} +{% from 'components/footer-new/macro.njk' import footerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ footerNew({ + "links": [ + { + "URL": "#", + "label": "Accessibility statement" + }, + { + "URL": "#", + "label": "Contact us" + }, + { + "URL": "#", + "label": "Cookies" + }, + { + "URL": "#", + "label": "Privacy policy" + }, + { + "URL": "#", + "label": "Terms and conditions" + } + ] + })}} + +{% endblock %} diff --git a/app/components/header-new/header-logo.njk b/app/components/header-new/header-logo.njk new file mode 100644 index 000000000..7fcf65942 --- /dev/null +++ b/app/components/header-new/header-logo.njk @@ -0,0 +1,14 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ headerNew({ + "showNav": "false", + "showSearch": "false" + }) + }} + +{% endblock %} diff --git a/app/components/header-new/header-navigation.njk b/app/components/header-new/header-navigation.njk new file mode 100644 index 000000000..fb6f1abc2 --- /dev/null +++ b/app/components/header-new/header-navigation.njk @@ -0,0 +1,40 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header with navigation (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ headerNew({ + "showNav": "true", + "showSearch": "false", + "primaryLinks": [ + { + "url" : "https://www.nhs.uk/conditions", + "label" : "Health A-Z" + }, + { + 'url' : 'https://www.nhs.uk/live-well/', + 'label' : 'Live Well' + }, + { + 'url' : 'https://www.nhs.uk/mental-health/', + 'label' : 'Mental health' + }, + { + 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', + 'label' : 'Care and support' + }, + { + 'url' : 'https://www.nhs.uk/pregnancy/', + 'label' : 'Pregnancy' + }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + } + ] + }) + }} + +{% endblock %} diff --git a/app/components/header-new/header-org-white-nav.njk b/app/components/header-new/header-org-white-nav.njk new file mode 100644 index 000000000..a5c3a01c9 --- /dev/null +++ b/app/components/header-new/header-org-white-nav.njk @@ -0,0 +1,42 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header organisational with white header and navigation (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + +{{ headerNew({ + "showNav": "true", + "showSearch": "true", + "classes": "nhsuk-header--white nhsuk-header--white-nav", + "organisation": { + "name": "Anytown Anyplace", + "split": "Anywhere", + "descriptor": "NHS Foundation Trust" + }, + "primaryLinks": [ + { + "url" : "#", + "label" : "Your hospital visit" + }, + { + 'url' : '#', + 'label' : 'Wards and departments' + }, + { + 'url' : '#', + 'label' : 'Conditions and treatments' + }, + { + 'url' : '#', + 'label' : 'Our people' + }, + { + 'url' : '#', + 'label' : 'Our research' + } + ] + }) +}} + +{% endblock %} diff --git a/app/components/header-new/header-org-white.njk b/app/components/header-new/header-org-white.njk new file mode 100644 index 000000000..7f6a16507 --- /dev/null +++ b/app/components/header-new/header-org-white.njk @@ -0,0 +1,42 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header organisational with white header (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + +{{ headerNew({ + "showNav": "true", + "showSearch": "true", + "classes": "nhsuk-header--white", + "organisation": { + "name": "Anytown Anyplace", + "split": "Anywhere", + "descriptor": "NHS Foundation Trust" + }, + "primaryLinks": [ + { + "url" : "#", + "label" : "Your hospital visit" + }, + { + 'url' : '#', + 'label' : 'Wards and departments' + }, + { + 'url' : '#', + 'label' : 'Conditions and treatments' + }, + { + 'url' : '#', + 'label' : 'Our people' + }, + { + 'url' : '#', + 'label' : 'Our research' + } + ] + }) +}} + +{% endblock %} diff --git a/app/components/header-new/header-org.njk b/app/components/header-new/header-org.njk new file mode 100644 index 000000000..1d1503ebe --- /dev/null +++ b/app/components/header-new/header-org.njk @@ -0,0 +1,41 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header organisational (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + +{{ headerNew({ + "showNav": "true", + "showSearch": "true", + "organisation": { + "name": "Anytown Anyplace", + "split": "Anywhere", + "descriptor": "NHS Foundation Trust" + }, + "primaryLinks": [ + { + "url" : "#", + "label" : "Your hospital visit" + }, + { + 'url' : '#', + 'label' : 'Wards and departments' + }, + { + 'url' : '#', + 'label' : 'Conditions and treatments' + }, + { + 'url' : '#', + 'label' : 'Our people' + }, + { + 'url' : '#', + 'label' : 'Our research' + } + ] + }) +}} + +{% endblock %} diff --git a/app/components/header-new/header-search.njk b/app/components/header-new/header-search.njk new file mode 100644 index 000000000..3d73dcdcf --- /dev/null +++ b/app/components/header-new/header-search.njk @@ -0,0 +1,40 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header with search (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ headerNew({ + "showNav": "false", + "showSearch": "true", + "primaryLinks": [ + { + "url" : "https://www.nhs.uk/conditions", + "label" : "Health A-Z" + }, + { + 'url' : 'https://www.nhs.uk/live-well/', + 'label' : 'Live Well' + }, + { + 'url' : 'https://www.nhs.uk/mental-health/', + 'label' : 'Mental health' + }, + { + 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', + 'label' : 'Care and support' + }, + { + 'url' : 'https://www.nhs.uk/pregnancy/', + 'label' : 'Pregnancy' + }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + } + ] + }) + }} + +{% endblock %} diff --git a/app/components/header-new/header-service-name-with-nav.njk b/app/components/header-new/header-service-name-with-nav.njk new file mode 100644 index 000000000..6b7b9d962 --- /dev/null +++ b/app/components/header-new/header-service-name-with-nav.njk @@ -0,0 +1,39 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header transactional with service name (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ headerNew({ + "service": { + "name": "Digital service manual" + }, + "showNav": "true", + "showSearch": "true", + "primaryLinks": [ + { + "url" : "#", + "label" : "NHS service standard" + }, + { + 'url' : '#', + 'label' : 'Design system' + }, + { + 'url' : '#', + 'label' : 'Content style guide' + }, + { + 'url' : '#', + 'label' : 'Accessibility' + }, + { + 'url' : '#', + 'label' : 'Community and contribution' + } + ] + }) + }} + +{% endblock %} diff --git a/app/components/header-new/header-service-name.njk b/app/components/header-new/header-service-name.njk new file mode 100644 index 000000000..296c7d90c --- /dev/null +++ b/app/components/header-new/header-service-name.njk @@ -0,0 +1,15 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header transactional with service name (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ headerNew({ + "service": { + "name": "Prototype kit" + } + }) + }} + +{% endblock %} diff --git a/app/components/header-new/header-transactional-service-name.njk b/app/components/header-new/header-transactional-service-name.njk new file mode 100644 index 000000000..0c74682ac --- /dev/null +++ b/app/components/header-new/header-transactional-service-name.njk @@ -0,0 +1,17 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header transactional with service name (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ headerNew({ + "transactionalService": { + "name": "Register with a GP" + }, + "showNav": "false", + "showSearch": "false" + }) + }} + +{% endblock %} diff --git a/app/components/header-new/header-transactional.njk b/app/components/header-new/header-transactional.njk new file mode 100644 index 000000000..bb7c45838 --- /dev/null +++ b/app/components/header-new/header-transactional.njk @@ -0,0 +1,15 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header transactional (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ headerNew({ + "transactional": "true", + "showNav": "false", + "showSearch": "false" + }) + }} + +{% endblock %} diff --git a/app/components/header-new/index.njk b/app/components/header-new/index.njk new file mode 100644 index 000000000..97d0bb18e --- /dev/null +++ b/app/components/header-new/index.njk @@ -0,0 +1,40 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Header (new)' %} +{% from 'components/header-new/macro.njk' import headerNew %} +{% extends 'layout.njk' %} + +{% block body %} + + {{ headerNew({ + "showNav": "true", + "showSearch": "true", + "primaryLinks": [ + { + "url" : "https://www.nhs.uk/conditions", + "label" : "Health A-Z" + }, + { + 'url' : 'https://www.nhs.uk/live-well/', + 'label' : 'Live Well' + }, + { + 'url' : 'https://www.nhs.uk/mental-health/', + 'label' : 'Mental health' + }, + { + 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', + 'label' : 'Care and support' + }, + { + 'url' : 'https://www.nhs.uk/pregnancy/', + 'label' : 'Pregnancy' + }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + } + ] + }) + }} + +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 36c2d6f6f..4bfb1483d 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -69,6 +69,7 @@
  • Fieldset as page heading
  • Fieldset with inputs
  • Footer
    • +
  • Footer (new)
  • Header
  • Header with navigation
  • Header with search
    • @@ -80,6 +81,17 @@
  • Header organisational
  • Header organisational with white header
  • Header organisational with white header and navigation
    • +
  • Header (new)
    • +
  • Header with navigation (new)
    • +
  • Header with search (new)
    • +
  • Header with logo only (new)
    • +
  • Header with a service name (new)
    • +
  • Header with a service name, search and navigation (new)
    • +
  • Header transactional (new)
    • +
  • Header transactional with service name (new)
    • +
  • Header organisational (new)
    • +
  • Header organisational with white header (new)
    • +
  • Header organisational with white header and navigation (new)
  • Hero
  • Hero with image
  • Hero with image with content
    • diff --git a/packages/components/footer-new/README.md b/packages/components/footer-new/README.md new file mode 100644 index 000000000..b3695fe30 --- /dev/null +++ b/packages/components/footer-new/README.md @@ -0,0 +1,77 @@ +# Footer (new) + +## Guidance + +Find out more about the new footer component and when to use it in the [NHS digital service manual](https://service-manual.nhs.uk/design-system/components/footer-new). + +## Quick start examples + +### Footer (new) + +[Preview the new footer component](https://nhsuk.github.io/nhsuk-frontend/components/footer-new/index.html) + +#### HTML markup + +```html + +``` + +#### Nunjucks macro + +``` +{% from 'components/footer-new/macro.njk' import footerNew %} + +{{ footerNew({ + "links": [ + { + "URL": "#", + "label": "Accessibility statement" + }, + { + "URL": "#", + "label": "Contact us" + }, + { + "URL": "#", + "label": "Cookies" + }, + { + "URL": "#", + "label": "Privacy policy" + }, + { + "URL": "#", + "label": "Terms and conditions" + } + ] +})}} +``` + +### Nunjucks arguments + +The new footer Nunjucks macro takes the following arguments: + +| Name | Type | Required | Description | +| ------------------ | ------ | -------- | --------------------------------------------------------------------------------------------- | +| **links** | array | No | Array of primary navigation items for use in the footer. | +| **links.[].url** | string | No | The href of a primary navigation item in the footer. | +| **links.[].label** | string | No | The label of a primary navigation item in the footer. | +| **classes** | string | No | Optional additional classes to add to the footer container. Separate each class with a space. | +| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the footer container. | +| **copyright** | string | No | The label for the copyright notice in the footer. | + +If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning). diff --git a/packages/components/footer-new/_footer-new.scss b/packages/components/footer-new/_footer-new.scss new file mode 100644 index 000000000..23ddda4e3 --- /dev/null +++ b/packages/components/footer-new/_footer-new.scss @@ -0,0 +1,64 @@ +/* ========================================================================== + COMPONENTS / #FOOTER-NEW + ========================================================================== */ + +.new-nhsuk-footer { + @include clearfix(); + @include print-hide(); + @include nhsuk-responsive-padding(5, bottom); + @include nhsuk-responsive-padding(5, top); + + background-color: $color_nhsuk-grey-4; + border-top: nhsuk-spacing(1) solid $color_nhsuk-blue; + border-bottom: 10px solid $color_nhsuk-grey-1; +} + +.beta-nhsuk-footer { + margin-bottom: 15px; + border-bottom: 10px solid $color_nhsuk-grey-1; + + @include mq($from: desktop) { + display: flex; + } +} + +.beta-nhsuk-footer__list { + margin-bottom: 25px; + + &:last-child { + margin-bottom: 15px; + } + + @include mq($from: desktop) { + padding-right: 40px; + + &:last-child { + padding-right: 0; + } + } +} + +.beta-nhsuk-footer__list-item { + @include mq($from: desktop) { + float: none; + margin-right: 0; + } +} + +$beta-link-aaa: rgb(0, 48, 135); +$beta-copyright-aaa: rgb(35, 31, 32); + +.beta-nhsuk-footer__list .beta-nhsuk-footer__list-item-link { + color: $beta-link-aaa; + + &:hover { + color: $nhsuk-link-hover-color; + text-decoration: none; + } +} + +.beta-nhsuk-footer__copyright { + @include nhsuk-font(16); + color: $beta-copyright-aaa; + margin-bottom: 0; +} diff --git a/packages/components/footer-new/macro.njk b/packages/components/footer-new/macro.njk new file mode 100644 index 000000000..f2501baf5 --- /dev/null +++ b/packages/components/footer-new/macro.njk @@ -0,0 +1,3 @@ +{% macro footerNew(params) %} + {%- include './template.njk' -%} +{% endmacro %} diff --git a/packages/components/footer-new/template.njk b/packages/components/footer-new/template.njk new file mode 100644 index 000000000..382570b8d --- /dev/null +++ b/packages/components/footer-new/template.njk @@ -0,0 +1,17 @@ + diff --git a/packages/components/header-new/README.md b/packages/components/header-new/README.md new file mode 100644 index 000000000..36719bc1f --- /dev/null +++ b/packages/components/header-new/README.md @@ -0,0 +1,947 @@ +# Header + +## Guidance + +Find out more about the header component and when to use it in the [NHS digital service manual](https://service-manual.nhs.uk/design-system/components/header). + +## Dependencies + +For this component to work, you need to make sure you include the required JavaScript. You can either include the +compiled JavaScript for all components `nhsuk.min.js` or the individual component JavaScript `header.js`. + +## Quick start examples + +### Header + +[Preview the header component](https://nhsuk.github.io/nhsuk-frontend/components/header/index.html) + +#### HTML markup + +```html + +``` + +#### Nunjucks macro + +``` +{% from 'components/header/macro.njk' import header %} + +{{ header({ + "showNav": "true", + "showSearch": "true", + "primaryLinks": [ + { + "url" : "https://www.nhs.uk/conditions", + "label" : "Health A-Z" + }, + { + 'url' : 'https://www.nhs.uk/live-well/', + 'label' : 'Live Well' + }, + { + 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', + 'label' : 'Care and support' + }, + { + 'url' : 'https://www.nhs.uk/news/', + 'label' : 'Health news' + }, + { + 'url' : 'https://www.nhs.uk/service-search', + 'label' : 'Services near you' + } + ] + }) +}} +``` + +### Header with navigation + +[Preview the header with navigation component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-navigation.html) + +#### HTML markup + +```html + +``` + +#### Nunjucks macro + +``` +{% from 'components/header/macro.njk' import header %} + +{{ header({ + "showNav": "true", + "showSearch": "false", + "primaryLinks": [ + { + "url" : "https://www.nhs.uk/conditions", + "label" : "Health A-Z" + }, + { + 'url' : 'https://www.nhs.uk/live-well/', + 'label' : 'Live Well' + }, + { + 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', + 'label' : 'Care and support' + }, + { + 'url' : 'https://www.nhs.uk/news/', + 'label' : 'Health news' + }, + { + 'url' : 'https://www.nhs.uk/service-search', + 'label' : 'Services near you' + } + ] + }) +}} +``` + +### Header with search + +[Preview the header with search component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-search.html) + +#### HTML markup + +```html + +``` + +#### Nunjucks macro + +``` +{% from 'components/header/macro.njk' import header %} + +{{ header({ + "showNav": "false", + "showSearch": "true" + }) +}} +``` + +### Header with logo + +[Preview the header with logo component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-logo.html) + +#### HTML markup + +```HTML + +``` + +#### Nunjucks macro + +``` +{% from 'components/header/macro.njk' import header %} + +{{ header({ + "showNav": "false", + "showSearch": "false" + }) +}} +``` + +--- + +### Header transactional + +[Preview the header transactional component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-transactional.html) + +#### HTML markup + +```HTML + +``` + +#### Nunjucks macro + +``` +{% from 'components/header/macro.njk' import header %} + +{{ header({ + "transactional": "true", + "showNav": "false", + "showSearch": "false" + }) +}} +``` + +--- + +### Header transactional with service name + +[Preview the header transactional with service name component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-transactional-service-name.html) + +#### HTML markup + +```HTML + +``` + +#### Nunjucks macro + +``` +{% from 'components/header/macro.njk' import header %} + +{{ header({ + "transactionalService": { + "name": "Register with a GP", + "href": "https://beta.nhs.uk/book-a-gp-appointment/" + }, + "showNav": "false", + "showSearch": "false" + }) +}} +``` + +### Header organisational + +[Preview the header organisational component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-org.html) + +#### HTML markup + +```HTML + +``` + +#### Nunjucks macro + +``` +{{ header({ + "showNav": "true", + "showSearch": "true", + "organisation": { + "name": "Anytown Anyplace", + "split": "Anywhere", + "descriptor": "NHS Foundation Trust" + }, + "primaryLinks": [ + { + "url" : "#", + "label" : "Your hospital visit" + }, + { + 'url' : '#', + 'label' : 'Wards and departments' + }, + { + 'url' : '#', + 'label' : 'Conditions and treatments' + }, + { + 'url' : '#', + 'label' : 'Our people' + }, + { + 'url' : '#', + 'label' : 'Our research' + } + ] + }) +}} +``` + +### Header organisational with white header + +[Preview the header organisational with white header component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-org-white.html) + +#### HTML markup + +```html + +``` + +#### Nunjucks macro + +``` +{{ header({ + "showNav": "true", + "showSearch": "true", + "classes": "nhsuk-header--white", + "organisation": { + "name": "Anytown Anyplace", + "split": "Anywhere", + "descriptor": "NHS Foundation Trust" + }, + "primaryLinks": [ + { + "url" : "#", + "label" : "Your hospital visit" + }, + { + 'url' : '#', + 'label' : 'Wards and departments' + }, + { + 'url' : '#', + 'label' : 'Conditions and treatments' + }, + { + 'url' : '#', + 'label' : 'Our people' + }, + { + 'url' : '#', + 'label' : 'Our research' + } + ] + }) +}} +``` + +### Header organisational with white header and navigation + +[Preview the header organisational with white header and navigation component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-org-white-nav.html) + +#### HTML markup + +```html + +``` + +#### Nunjucks macro + +``` +{{ header({ + "showNav": "true", + "showSearch": "true", + "classes": "nhsuk-header--white nhsuk-header--white-nav", + "organisation": { + "name": "Anytown Anyplace Anywhere", + "descriptor": "NHS Foundation Trust" + }, + "primaryLinks": [ + { + "url" : "#", + "label" : "Your hospital visit" + }, + { + 'url' : '#', + 'label' : 'Wards and departments' + }, + { + 'url' : '#', + 'label' : 'Conditions and treatments' + }, + { + 'url' : '#', + 'label' : 'Our people' + }, + { + 'url' : '#', + 'label' : 'Our research' + } + ] + }) +}} +``` + +### Nunjucks arguments + +The header Nunjucks macro takes the following arguments: + +| Name | Type | Required | Description | +| --------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| **showNav** | boolean | Yes | Set to "true" to show the navigation links in the header. | +| **showSearch** | boolean | Yes | Set to "true" to show the site search input form. | +| **homeHref** | string | No | The href of the link for the logo and mobile home link in the navigation links. Defaults to "/". | +| **ariaLabel** | string | No | Aria label for the logo href. Defaults to "NHS homepage". | +| **organisation** | object | No | Settings for header with organisational logo. | +| **organisation.name** | string | No | Organisation name value. | +| **organisation.split** | string | No | Longer organisation names can be split onto multiple lines. | +| **organisation.descriptor** | string | No | Organisation descriptor. | +| **organisation.logoURL** | string | No | Organisation logo if using a static asset, such as PNG, is preferred. | +| **primaryLinks** | array | No | Array of navigation links for use in the header. | +| **primaryLinks[].url** | string | No | The href of a navigation item in the header. | +| **primaryLinks[].label** | string | No | The label of a navigation item in the header. | +| **transactional** | string | No | Set to "true" if this is a transactional header (with smaller logo). | +| **transactionalService** | object | No | Object containing the _name_ and _href_ of the transactional service. | +| **service** | object | No | Object containing the _name_ and optional boolean _longName_ of the service. Set this to "true" if the service name is longer than 22 characters. | +| **classes** | string | No | Optional additional classes to add to the header container. Separate each class with a space. | +| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the header container. | +| **searchAction** | string | No | The search action endpoint. Defaults to "https://www.nhs.uk/search/" | +| **searchInputName** | string | No | The name for the search field. Defaults to "q" | + +If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning). diff --git a/packages/components/header-new/_header-new.scss b/packages/components/header-new/_header-new.scss new file mode 100644 index 000000000..44208245b --- /dev/null +++ b/packages/components/header-new/_header-new.scss @@ -0,0 +1,255 @@ +/* ========================================================================== + COMPONENTS / #HEADER-NEW + ========================================================================== */ + +.beta-header { + @include mq($until: tablet) { + padding-bottom: 0; + } +} + +.beta-nhsuk-navigation-container { + position: relative; +} + +.beta-nhsuk-navigation { + display: flex; + + @include mq($until: tablet) { + position: relative; + z-index: 10; + } + + @include mq($from: tablet) { + border-top: 1px solid rgba(255, 255, 255, 0.2); + } +} + +.beta-nhsuk-header__navigation-list { + list-style: none; + margin: 0; + padding: 0; + width: 100%; + + @include mq($from: desktop) { + display: flex; + justify-content: space-between; + } + + .js-enabled & { + display: flex; + } +} + +.beta-nhsuk-header__navigation-item { + margin-bottom: 0; +} + +.beta-nhsuk-header__navigation-item--home { + @include mq($from: desktop) { + display: none; + } +} + +.beta-nhsuk-header__navigation-item--services-mobile { + @include mq($from: desktop) { + display: none; + } +} + +.beta-nhsuk-header__navigation-item--services { + display: none; + + @include mq($from: desktop) { + display: list-item; + } +} + +// a tag +.beta-nhsuk-header__navigation-link { + color: $color_nhsuk-white; + font-size: $nhsuk-base-font-size; + line-height: 1.5; + padding: 16px 12px; + text-decoration: underline; + white-space: nowrap; + + @include mq($from: tablet) { + padding: 12px 16px; + } + + &:hover { + color: $color_nhsuk-white; + text-decoration: none; + } + + &:visited { + color: $color_nhsuk-white; + } + + .nhsuk-icon__chevron-right { + display: none; + } +} + +.beta-nhsuk-header__drop-down { + @include print-hide(); + background-color: $color_nhsuk-white; + border-bottom: 4px solid $color_nhsuk-grey-5; + clear: both; + left: -16px; + list-style: none; + margin: 0; + overflow: hidden; + padding-left: 0; + position: absolute; + right: -16px; + top: 100%; + + @include mq($from: tablet) { + left: 0; + right: 0; + } + + &.js-hidden { + display: none; + } + + .beta-nhsuk-header__navigation-link { + color: $color_nhsuk-blue; + padding: 12px nhsuk-spacing(3); + } + + .beta-nhsuk-header__navigation-item { + border-top: 1px solid $color_nhsuk-grey-5; + margin-bottom: 0; + + @include mq($from: large-desktop) { + border-top: 0; + margin: 0; + text-align: center; + } + } +} + +.beta-nhsuk-header__menu-toggle { + appearance: none; + background: transparent; + border: 0; + border-bottom: 4px solid transparent; + border-radius: 0; + border-top: 4px solid transparent; + box-sizing: border-box; + cursor: pointer; + font: inherit; + margin: 0; + overflow: visible; + position: relative; + text-align: center; + text-decoration: underline; + vertical-align: top; + visibility: hidden; + width: auto; + z-index: 1; + + &.beta-nhsuk-header__navigation-link { + padding-right: 30px; + } + + @include mq($from: desktop) { + display: none; + } + + &.js-show { + display: block; + visibility: visible; + } + + &:focus { + text-decoration: none; + + .beta-nhsuk-icon__chevron-down { + fill: $color_nhsuk-black; + } + } +} + +.beta-mobile-menu-container { + align-self: center; + display: none; + // margin-left: auto; + + &.js-show { + display: block; + } +} + +.beta-nhsuk-icon__chevron-down { + fill: $color_nhsuk-white; + height: 24px; + position: absolute; + right: 4px; + transform: rotate(90deg); + width: 24px; + + .beta-nhsuk-header__menu-toggle[aria-expanded="true"] & { + transform: rotate(270deg); + } +} + +/** +* Iterative work on the header +* Phase 1 exposing search on mobile +*/ + +@include mq($until: tablet) { + .beta-header__search-form { + background-color: $color_nhsuk-blue; + padding: 0 16px; + position: relative; + + .js-enabled & { + background-color: $color_nhsuk-white; + } + } + + .js-enabled { + .beta-header__search-wrap { + &::after { + background: $color_nhsuk-blue; + content: " "; + height: 52px; + left: -16px; + position: absolute; + width: calc(100% + 32px); + z-index: 0; + } + } + } + + .beta-search__submit { + background-color: $color_nhsuk-grey-5; + border: 0; + height: 52px; + z-index: 1; + + .js-enabled & { + height: 40px; + } + + .beta-icon__search { + fill: $color_nhsuk-blue; + height: 27px; + width: 27px; + } + + &:hover { + background-color: $color_shade_nhsuk-blue-35; + border: 1px solid $color_nhsuk-white; + + .nhsuk-icon { + fill: $color_nhsuk-white; + } + } + } +} diff --git a/packages/components/header-new/header.js b/packages/components/header-new/header.js new file mode 100644 index 000000000..78284b4a0 --- /dev/null +++ b/packages/components/header-new/header.js @@ -0,0 +1,7 @@ +import MenuToggle from './menuToggle' +import SearchToggle from './searchToggle' + +export default () => { + MenuToggle() + SearchToggle() +} diff --git a/packages/components/header-new/header.test.js b/packages/components/header-new/header.test.js new file mode 100644 index 000000000..8d54817a9 --- /dev/null +++ b/packages/components/header-new/header.test.js @@ -0,0 +1,9 @@ +import Header from './header' + +describe('NHS.UK header()', () => { + describe('Does not throw an error', () => { + it('if no document exists', () => { + Header() + }) + }) +}) diff --git a/packages/components/header-new/macro.njk b/packages/components/header-new/macro.njk new file mode 100644 index 000000000..0591c176f --- /dev/null +++ b/packages/components/header-new/macro.njk @@ -0,0 +1,3 @@ +{% macro headerNew(params) %} + {%- include './template.njk' -%} +{% endmacro %} diff --git a/packages/components/header-new/menuToggle.js b/packages/components/header-new/menuToggle.js new file mode 100644 index 000000000..045faa3a9 --- /dev/null +++ b/packages/components/header-new/menuToggle.js @@ -0,0 +1,32 @@ +import { toggleAttribute } from '../../common' + +/** + * Handle menu show and hide for mobile + */ +export default () => { + // HTMLElements + const toggleButton = document.querySelector('#toggle-menu') + const closeButton = document.querySelector('#close-menu') + const nav = document.querySelector('#header-navigation') + + /** + * Toggle classes and attributes + * @param {Object} event click event object + */ + const toggleMenu = (event) => { + event.preventDefault() + // Toggle aria-expanded for accessibility + toggleAttribute(toggleButton, 'aria-expanded') + // Toggle classes to apply CSS + toggleButton.classList.toggle('is-active') + nav.classList.toggle('js-show') + } + + // Check all necessary HTMLElements exist + if (toggleButton && closeButton && nav) { + // Attach toggleMenu as click to any elements which need it + ;[toggleButton, closeButton].forEach((elem) => { + elem.addEventListener('click', toggleMenu) + }) + } +} diff --git a/packages/components/header-new/menuToggle.test.js b/packages/components/header-new/menuToggle.test.js new file mode 100644 index 000000000..d4e35064e --- /dev/null +++ b/packages/components/header-new/menuToggle.test.js @@ -0,0 +1,85 @@ +import MenuToggle from './menuToggle' + +// Mock HTML +const toggleButtonHtml = + '' +const closeButtonHtml = + '' +const navHtml = + '' + +// DOM Elements to be set +let toggleButton +let closeButton +let nav + +// Helper to set DOM Elements +const initTest = (html) => { + document.body.innerHTML = html || toggleButtonHtml + closeButtonHtml + navHtml + toggleButton = document.querySelector('.nhsuk-header__menu-toggle') + closeButton = document.querySelector('.nhsuk-header__navigation-close') + nav = document.querySelector('.nhsuk-header__navigation') + MenuToggle() +} + +describe('NHS.UK menuToggle()', () => { + describe('does not throw an error', () => { + it('if no elements exists', () => { + MenuToggle() + }) + it('if no toggleButton exists', () => { + initTest(closeButtonHtml + navHtml) + expect(toggleButton).toBeNull() + expect(closeButton).toBeDefined() + expect(nav).toBeDefined() + }) + + it('if no closeButton exists', () => { + initTest(toggleButtonHtml + navHtml) + expect(toggleButton).toBeDefined() + expect(closeButton).toBeNull() + expect(nav).toBeDefined() + }) + + it('if no nav exists', () => { + initTest(toggleButtonHtml + closeButtonHtml) + expect(toggleButton).toBeDefined() + expect(closeButton).toBeDefined() + expect(nav).toBeNull() + }) + }) + + describe('Adds correct classes to elements', () => { + it('when toggleButton is clicked for the first time', () => { + initTest() + toggleButton.click() + expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') + expect(toggleButton.classList.contains('is-active')).toEqual(true) + expect(nav.classList.contains('js-show')).toEqual(true) + }) + + it('when toggleButton is clicked twice', () => { + initTest() + toggleButton.click() + expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') + expect(toggleButton.classList.contains('is-active')).toEqual(true) + expect(nav.classList.contains('js-show')).toEqual(true) + toggleButton.click() + expect(toggleButton.getAttribute('aria-expanded')).toEqual('false') + expect(toggleButton.classList.contains('is-active')).toEqual(false) + expect(nav.classList.contains('js-show')).toEqual(false) + }) + + it('when toggleButton is clicked then closeButton is clicked', () => { + initTest() + toggleButton.click() + expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') + expect(toggleButton.classList.contains('is-active')).toEqual(true) + expect(nav.classList.contains('js-show')).toEqual(true) + closeButton.click() + expect(toggleButton.getAttribute('aria-expanded')).toEqual('false') + expect(toggleButton.classList.contains('is-active')).toEqual(false) + expect(nav.classList.contains('js-show')).toEqual(false) + }) + }) +}) diff --git a/packages/components/header-new/searchToggle.js b/packages/components/header-new/searchToggle.js new file mode 100644 index 000000000..10a67ba2d --- /dev/null +++ b/packages/components/header-new/searchToggle.js @@ -0,0 +1,34 @@ +import { toggleAttribute } from '../../common' + +/** + * Handle search show and hide for mobile + */ +export default () => { + // HTMLElements + const toggleButton = document.querySelector('#toggle-search') + const closeButton = document.querySelector('#close-search') + const searchContainer = document.querySelector('#wrap-search') + const menuSearchContainer = document.querySelector('#content-header') + + /** + * Toggle classes and attributes + * @param {Object} event click event object + */ + const toggleSearch = (event) => { + event.preventDefault() + // Toggle aria-expanded for accessibility + toggleAttribute(toggleButton, 'aria-expanded') + // Toggle classes to apply CSS + toggleButton.classList.toggle('is-active') + searchContainer.classList.toggle('js-show') + menuSearchContainer.classList.toggle('js-show') + } + + // Check all necessary HTMLElements exist + if (toggleButton && closeButton) { + // Attach toggleSearch as click to any elements which need it + ;[toggleButton, closeButton].forEach((elem) => { + elem.addEventListener('click', toggleSearch) + }) + } +} diff --git a/packages/components/header-new/template.njk b/packages/components/header-new/template.njk new file mode 100644 index 000000000..1671cf998 --- /dev/null +++ b/packages/components/header-new/template.njk @@ -0,0 +1,154 @@ +{# Define some defaults #} +{% set showNav = params.showNav if params.showNav else "false" %} +{% set showSearch = params.showSearch if params.showSearch else "false" %} + +{% set nhsLogo %} + +{% endset %} + + \ No newline at end of file diff --git a/packages/nhsuk.scss b/packages/nhsuk.scss index 07bdd5016..9027a2a2b 100644 --- a/packages/nhsuk.scss +++ b/packages/nhsuk.scss @@ -15,7 +15,9 @@ @import "components/error-summary/error-summary"; @import "components/fieldset/fieldset"; @import "components/footer/footer"; +@import "components/footer-new/footer-new"; @import "components/header/header"; +@import "components/header-new/header-new"; @import "components/hero/hero"; @import "components/hint/hint"; @import "components/images/images"; From c26ffcd19f0dfdb801e46b96b6b402aaa82dee55 Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Mon, 31 Jul 2023 02:43:49 +0100 Subject: [PATCH 02/43] added new header examples --- .../header-new/header-navigation.njk | 8 +- .../header-new/header-org-white-nav.njk | 2 +- .../header-new/header-org-white.njk | 2 +- app/components/header-new/header-search.njk | 8 +- app/components/header-new/index.njk | 8 +- .../components/header-new/_header-new.scss | 381 +++++++++++++----- packages/components/header-new/header.js | 2 - packages/components/header-new/header.test.js | 4 +- packages/components/header-new/menuToggle.js | 175 ++++++-- .../components/header-new/menuToggle.test.js | 85 ---- .../components/header-new/searchToggle.js | 34 -- packages/components/header-new/template.njk | 127 +++--- packages/components/header/_header.scss | 21 + packages/nhsuk.js | 2 + 14 files changed, 537 insertions(+), 322 deletions(-) delete mode 100644 packages/components/header-new/menuToggle.test.js delete mode 100644 packages/components/header-new/searchToggle.js diff --git a/app/components/header-new/header-navigation.njk b/app/components/header-new/header-navigation.njk index fb6f1abc2..7764c3943 100644 --- a/app/components/header-new/header-navigation.njk +++ b/app/components/header-new/header-navigation.njk @@ -13,6 +13,10 @@ "url" : "https://www.nhs.uk/conditions", "label" : "Health A-Z" }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + }, { 'url' : 'https://www.nhs.uk/live-well/', 'label' : 'Live Well' @@ -28,10 +32,6 @@ { 'url' : 'https://www.nhs.uk/pregnancy/', 'label' : 'Pregnancy' - }, - { - 'url' : 'https://www.nhs.uk/nhs-services/', - 'label' : 'NHS services' } ] }) diff --git a/app/components/header-new/header-org-white-nav.njk b/app/components/header-new/header-org-white-nav.njk index a5c3a01c9..8ab5ede3d 100644 --- a/app/components/header-new/header-org-white-nav.njk +++ b/app/components/header-new/header-org-white-nav.njk @@ -8,7 +8,7 @@ {{ headerNew({ "showNav": "true", "showSearch": "true", - "classes": "nhsuk-header--white nhsuk-header--white-nav", + "classes": "beta-nhsuk-header--white beta-nhsuk-header--white-nav", "organisation": { "name": "Anytown Anyplace", "split": "Anywhere", diff --git a/app/components/header-new/header-org-white.njk b/app/components/header-new/header-org-white.njk index 7f6a16507..e06c71a0b 100644 --- a/app/components/header-new/header-org-white.njk +++ b/app/components/header-new/header-org-white.njk @@ -8,7 +8,7 @@ {{ headerNew({ "showNav": "true", "showSearch": "true", - "classes": "nhsuk-header--white", + "classes": "beta-nhsuk-header--white", "organisation": { "name": "Anytown Anyplace", "split": "Anywhere", diff --git a/app/components/header-new/header-search.njk b/app/components/header-new/header-search.njk index 3d73dcdcf..6699fd3fc 100644 --- a/app/components/header-new/header-search.njk +++ b/app/components/header-new/header-search.njk @@ -13,6 +13,10 @@ "url" : "https://www.nhs.uk/conditions", "label" : "Health A-Z" }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + }, { 'url' : 'https://www.nhs.uk/live-well/', 'label' : 'Live Well' @@ -28,10 +32,6 @@ { 'url' : 'https://www.nhs.uk/pregnancy/', 'label' : 'Pregnancy' - }, - { - 'url' : 'https://www.nhs.uk/nhs-services/', - 'label' : 'NHS services' } ] }) diff --git a/app/components/header-new/index.njk b/app/components/header-new/index.njk index 97d0bb18e..cb9625046 100644 --- a/app/components/header-new/index.njk +++ b/app/components/header-new/index.njk @@ -13,6 +13,10 @@ "url" : "https://www.nhs.uk/conditions", "label" : "Health A-Z" }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + }, { 'url' : 'https://www.nhs.uk/live-well/', 'label' : 'Live Well' @@ -28,10 +32,6 @@ { 'url' : 'https://www.nhs.uk/pregnancy/', 'label' : 'Pregnancy' - }, - { - 'url' : 'https://www.nhs.uk/nhs-services/', - 'label' : 'NHS services' } ] }) diff --git a/packages/components/header-new/_header-new.scss b/packages/components/header-new/_header-new.scss index 44208245b..2cb499503 100644 --- a/packages/components/header-new/_header-new.scss +++ b/packages/components/header-new/_header-new.scss @@ -1,15 +1,152 @@ /* ========================================================================== - COMPONENTS / #HEADER-NEW + COMPONENTS / #HEADER ========================================================================== */ +/* + A combination of the file in the CMS repo, https://dev.azure.com/nhsuk/_git/nhsuk.nhsuk-cms?path=/frontend/css/_beta.scss + and other beta-nhsuk-footer styles. + */ + +@include mq($until: tablet) { + .beta-header__search-form { + background-color: $color_nhsuk-blue; + height: 40px; + padding: 0px 16px; + position: relative; + + // .js-enabled & { + // background-color: $color_nhsuk-white; + // } + } + + .beta-header__search-input { + border: 1px solid $color_nhsuk-white; + border-bottom-right-radius: $nhsuk-border-radius; + border-top-right-radius: $nhsuk-border-radius; + height: 40px; + } + + .js-enabled { + .beta-header__search-wrap { + &::after { + background: $color_nhsuk-blue; + content: " "; + height: 52px; + left: -16px; + position: absolute; + width: calc(100% + 32px); + z-index: 0; + } + margin-bottom: 0; + } + } + + .beta-nhsuk-header--white { + .beta-header__search-wrap { + &::after { + background: $color_nhsuk-white; + } + } + } + + .beta-search__submit { + position: absolute; + right: 16px; + top: 0; + background-color: $color_nhsuk-grey-5; + border: 0; + height: 40px; + z-index: 9; + + .js-enabled & { + height: 40px; + } + + .beta-icon__search { + fill: $color_nhsuk-blue; + height: 27px; + width: 27px; + } + + &:hover { + background-color: $color_shade_nhsuk-blue-35; + border: 1px solid $color_nhsuk-white; + + .nhsuk-icon { + fill: $color_nhsuk-white; + } + } + } +} + .beta-header { @include mq($until: tablet) { padding-bottom: 0; } } -.beta-nhsuk-navigation-container { +.beta-header-no-search { + @include mq($until: tablet) { + padding: 30px 0; + } +} + +// toggle button +// only shows when screen can't fit all nav items +.beta-nhsuk-header__menu-toggle { + appearance: none; + background: transparent; + border: 0; + border-bottom: 4px solid transparent; + border-radius: 0; + border-top: 4px solid transparent; + box-sizing: border-box; + cursor: pointer; + font: inherit; + margin: 0; + overflow: visible; position: relative; + right: 0; + text-align: center; + text-decoration: underline; + vertical-align: top; + visibility: hidden; + width: auto; + z-index: 1; + + &.beta-nhsuk-header__navigation-link { + padding-right: 30px; + } + + @include mq($from: desktop) { + display: none; + } + + &.js-show { + display: block; + visibility: visible; + } + + &:focus { + text-decoration: none; + + .beta-nhsuk-icon__chevron-down { + fill: $color_nhsuk-black; + } + } +} + +.beta-nhsuk-icon__chevron-down { + fill: $color_nhsuk-white; + height: 24px; + position: absolute; + right: 4px; + transform: rotate(90deg); + width: 24px; + + .beta-nhsuk-header__menu-toggle[aria-expanded="true"] & { + transform: rotate(270deg); + } } .beta-nhsuk-navigation { @@ -25,6 +162,7 @@ } } +// ul of visible nav .beta-nhsuk-header__navigation-list { list-style: none; margin: 0; @@ -45,26 +183,6 @@ margin-bottom: 0; } -.beta-nhsuk-header__navigation-item--home { - @include mq($from: desktop) { - display: none; - } -} - -.beta-nhsuk-header__navigation-item--services-mobile { - @include mq($from: desktop) { - display: none; - } -} - -.beta-nhsuk-header__navigation-item--services { - display: none; - - @include mq($from: desktop) { - display: list-item; - } -} - // a tag .beta-nhsuk-header__navigation-link { color: $color_nhsuk-white; @@ -92,6 +210,23 @@ } } +.beta-nhsuk-header__navigation-close { + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg class='nhsuk-icon nhsuk-icon__close' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' focusable='false' height='40' width='40'%3e%3cpath fill='%23005eb8' d='M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z'%3e%3c/path%3e%3c/svg%3e"); + background-repeat: no-repeat; + height: 40px; + width: 40px; + + &:hover, + &:focus { + background-image: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__close' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' focusable='false' height='40' width='40'%3E%3Cpath d='M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z'%3E%3C/path%3E%3C/svg%3E"); + } +} + +.beta-nhsuk-navigation-container { + position: relative; +} + +// ul of hidden nav .beta-nhsuk-header__drop-down { @include print-hide(); background-color: $color_nhsuk-white; @@ -132,124 +267,158 @@ } } -.beta-nhsuk-header__menu-toggle { - appearance: none; - background: transparent; - border: 0; - border-bottom: 4px solid transparent; - border-radius: 0; - border-top: 4px solid transparent; - box-sizing: border-box; - cursor: pointer; - font: inherit; - margin: 0; - overflow: visible; - position: relative; - text-align: center; - text-decoration: underline; - vertical-align: top; - visibility: hidden; - width: auto; - z-index: 1; - - &.beta-nhsuk-header__navigation-link { - padding-right: 30px; - } - - @include mq($from: desktop) { +.beta-menu-item { + @include mq($from: large-desktop) { display: none; } - - &.js-show { - display: block; - visibility: visible; - } - - &:focus { - text-decoration: none; - - .beta-nhsuk-icon__chevron-down { - fill: $color_nhsuk-black; - } - } } .beta-mobile-menu-container { align-self: center; display: none; - // margin-left: auto; &.js-show { display: block; } } -.beta-nhsuk-icon__chevron-down { - fill: $color_nhsuk-white; - height: 24px; - position: absolute; - right: 4px; - transform: rotate(90deg); - width: 24px; +.beta-nhsuk-header__navigation-item--home { + @include mq($from: desktop) { + display: none; + } +} - .beta-nhsuk-header__menu-toggle[aria-expanded="true"] & { - transform: rotate(270deg); +.beta-header__transactional-service-name { + @include mq($until: tablet) { + margin-bottom: 16px; } } -/** -* Iterative work on the header -* Phase 1 exposing search on mobile -*/ +// Header (white) -@include mq($until: tablet) { - .beta-header__search-form { +.beta-nhsuk-header--white { + background-color: $color_nhsuk-white; + + .beta-header__search-wrap { + margin-bottom: 16px; + } + + .beta-nhsuk-navigation-container { background-color: $color_nhsuk-blue; - padding: 0 16px; - position: relative; + } - .js-enabled & { - background-color: $color_nhsuk-white; + .nhsuk-logo { + .nhsuk-logo__background { + fill: $color_nhsuk-blue; + } + + .nhsuk-logo__text { + fill: $color_nhsuk-white; } } - .js-enabled { - .beta-header__search-wrap { - &::after { - background: $color_nhsuk-blue; - content: " "; - height: 52px; - left: -16px; - position: absolute; - width: calc(100% + 32px); - z-index: 0; + .nhsuk-header__link { + &:hover { + color: $nhsuk-text-color; + text-decoration: underline; + + .nhsuk-organisation-descriptor { + color: $nhsuk-text-color; } } } - .beta-search__submit { - background-color: $color_nhsuk-grey-5; - border: 0; - height: 52px; - z-index: 1; + .nhsuk-search__submit { + background-color: $color_nhsuk-blue; - .js-enabled & { - height: 40px; + .nhsuk-icon__search { + fill: $color_nhsuk-white; } - .beta-icon__search { - fill: $color_nhsuk-blue; - height: 27px; - width: 27px; + &:hover { + background-color: $color_shade_nhsuk-blue-20; + border-color: $color_shade_nhsuk-blue-20; } - &:hover { - background-color: $color_shade_nhsuk-blue-35; - border: 1px solid $color_nhsuk-white; + &:focus { + background-color: $nhsuk-focus-color; - .nhsuk-icon { - fill: $color_nhsuk-white; + .nhsuk-icon__search { + fill: $nhsuk-focus-text-color; } } } + + .nhsuk-search__input { + border: 1px solid $color_nhsuk-grey-3; + + &:focus { + border: 2px solid $nhsuk-focus-text-color; + + @include mq($until: tablet) { + border: $nhsuk-focus-width solid $nhsuk-focus-text-color; + } + } + } + + .nhsuk-header__search-form { + @include mq($until: tablet) { + padding-top: 0; + } + } + + .nhsuk-organisation-name { + color: #000; /* [9] */ /* stylelint-disable-line color-no-hex */ + } + + .nhsuk-organisation-descriptor { + color: $color_nhsuk-blue; + } + + .nhsuk-header__transactional-service-name--link { + color: $color_nhsuk-black; + } + + .nhsuk-header__navigation-list { + border-top: 0; + } + + .nhsuk-header__service-name { + color: $nhsuk-text-color; + } +} + +// Navigation (white) + +.beta-nhsuk-header--white-nav { + .beta-nhsuk-navigation-container { + background-color: $color_nhsuk-white; + } + .beta-nhsuk-navigation { + background-color: $color_nhsuk-white; + + .beta-nhsuk-header__navigation-list { + border-top: 1px solid $color_nhsuk-grey-5; + } + + .beta-nhsuk-header__navigation-link { + color: $color_nhsuk-blue; + + &:visited { + color: $color_nhsuk-blue; + } + + &:focus { + color: $nhsuk-focus-text-color; + + &:hover { + background: $nhsuk-focus-color; + } + } + } + + .beta-nhsuk-icon__chevron-down { + fill: $color_nhsuk-blue; + } + } } diff --git a/packages/components/header-new/header.js b/packages/components/header-new/header.js index 78284b4a0..0a55f3462 100644 --- a/packages/components/header-new/header.js +++ b/packages/components/header-new/header.js @@ -1,7 +1,5 @@ import MenuToggle from './menuToggle' -import SearchToggle from './searchToggle' export default () => { MenuToggle() - SearchToggle() } diff --git a/packages/components/header-new/header.test.js b/packages/components/header-new/header.test.js index 8d54817a9..cf6171480 100644 --- a/packages/components/header-new/header.test.js +++ b/packages/components/header-new/header.test.js @@ -1,9 +1,9 @@ -import Header from './header' +import HeaderNew from './header' describe('NHS.UK header()', () => { describe('Does not throw an error', () => { it('if no document exists', () => { - Header() + HeaderNew() }) }) }) diff --git a/packages/components/header-new/menuToggle.js b/packages/components/header-new/menuToggle.js index 045faa3a9..89376d47a 100644 --- a/packages/components/header-new/menuToggle.js +++ b/packages/components/header-new/menuToggle.js @@ -1,32 +1,149 @@ -import { toggleAttribute } from '../../common' - -/** - * Handle menu show and hide for mobile - */ export default () => { - // HTMLElements - const toggleButton = document.querySelector('#toggle-menu') - const closeButton = document.querySelector('#close-menu') - const nav = document.querySelector('#header-navigation') - - /** - * Toggle classes and attributes - * @param {Object} event click event object - */ - const toggleMenu = (event) => { - event.preventDefault() - // Toggle aria-expanded for accessibility - toggleAttribute(toggleButton, 'aria-expanded') - // Toggle classes to apply CSS - toggleButton.classList.toggle('is-active') - nav.classList.toggle('js-show') - } - - // Check all necessary HTMLElements exist - if (toggleButton && closeButton && nav) { - // Attach toggleMenu as click to any elements which need it - ;[toggleButton, closeButton].forEach((elem) => { - elem.addEventListener('click', toggleMenu) - }) + let menuIsOpen = false + const navigation = document.querySelector('.beta-nhsuk-navigation') + const navigationList = document.querySelector('.beta-nhsuk-header__navigation-list') + const mobileMenu = document.createElement('ul') + const mobileMenuToggleButton = document.querySelector('.beta-nhsuk-header__menu-toggle') + const mobileMenuCloseButton = document.createElement('button') + const mobileMenuContainer = document.querySelector('.beta-mobile-menu-container') + const breakpoints = [] + const width = document.body.offsetWidth + + // Throttle the watcher on resize + function debounce(func, timeout = 100) { + let timer + return (...args) => { + clearTimeout(timer) + timer = setTimeout(() => { + func.apply(this, args) + }, timeout) + } } + + // Check break points + function calculateBreakpoints() { + let childrenWidth = 0 + for (let i = 0; i < navigationList.children.length; i++) { + childrenWidth += navigationList.children[i].offsetWidth + breakpoints[i] = childrenWidth + } + } + + // Setup dropdown + function setupMobileMenu() { + // add dropdown + mobileMenuContainer.appendChild(mobileMenu) + mobileMenu.classList.add('beta-nhsuk-header__drop-down', 'js-hidden') + } + + // close menu + function closeMobileMenu() { + menuIsOpen = false + + mobileMenu.classList.add('js-hidden') + + navigation.style.marginBottom = 0 + mobileMenuToggleButton.setAttribute('aria-expanded', 'false') + + mobileMenuToggleButton.focus() + + // remove event listener for close icon + mobileMenuCloseButton.removeEventListener('click', closeMobileMenu) + + // remove event listerer for esc key + // eslint-disable-next-line no-use-before-define + document.removeEventListener('keydown', handleEscapeKey) + } + + // close menu when escape key is pressed + function handleEscapeKey(e) { + if (e.key === 'Escape') { + closeMobileMenu() + } + } + + // open mobile menu + function openMobileMenu() { + menuIsOpen = true + + mobileMenu.classList.remove('js-hidden') + + const marginBody = mobileMenu.offsetHeight + navigation.style.marginBottom = `${marginBody}px` + + mobileMenuToggleButton.setAttribute('aria-expanded', 'true') + + // add event listerer for esc key to close menu + document.addEventListener('keydown', handleEscapeKey) + + // add event listener for close icon to close menu + mobileMenuCloseButton.addEventListener('click', closeMobileMenu) + } + + // toggle menu + function toggleMobileMenu() { + if (menuIsOpen) { + closeMobileMenu() + } else { + openMobileMenu() + } + } + + // Check available screen space + function updateNavigation() { + const availableSpace = navigation.offsetWidth + let itemsVisible = navigationList.children.length + + if (availableSpace < breakpoints[itemsVisible - 1]) { + mobileMenuToggleButton.classList.add('js-show') + mobileMenuContainer.classList.add('js-show') + if (itemsVisible === 2) { + return + } + while (availableSpace < breakpoints[itemsVisible - 1]) { + mobileMenu.insertBefore(navigationList.children[itemsVisible - 2], mobileMenu.firstChild) + itemsVisible -= 1 + } + } else if (availableSpace > breakpoints[itemsVisible]) { + while (availableSpace > breakpoints[itemsVisible]) { + navigationList.insertBefore(mobileMenu.removeChild(mobileMenu.firstChild), mobileMenuContainer) + itemsVisible += 1 + } + } + + if (!mobileMenu.children.length) { + mobileMenuToggleButton.classList.remove('js-show') + mobileMenuContainer.classList.remove('js-show') + } + + if (document.body.offsetWidth !== width && menuIsOpen) { + closeMobileMenu() + } + } + + // Trigger screen orientation events + function doOnOrientationChange() { + switch (window.orientation) { + case 90: + setTimeout(() => { + calculateBreakpoints() + updateNavigation() + }, 200) + break + default: + break + } + } + + // Setup menu, check breakpoints and update the nav + setupMobileMenu() + calculateBreakpoints() + updateNavigation() + doOnOrientationChange() + + // Event listeners + window.addEventListener('resize', debounce(calculateBreakpoints)) + window.addEventListener('resize', debounce(updateNavigation)) + window.addEventListener('orientationchange', doOnOrientationChange) + mobileMenuToggleButton.addEventListener('click', toggleMobileMenu) } diff --git a/packages/components/header-new/menuToggle.test.js b/packages/components/header-new/menuToggle.test.js deleted file mode 100644 index d4e35064e..000000000 --- a/packages/components/header-new/menuToggle.test.js +++ /dev/null @@ -1,85 +0,0 @@ -import MenuToggle from './menuToggle' - -// Mock HTML -const toggleButtonHtml = - '' -const closeButtonHtml = - '' -const navHtml = - '' - -// DOM Elements to be set -let toggleButton -let closeButton -let nav - -// Helper to set DOM Elements -const initTest = (html) => { - document.body.innerHTML = html || toggleButtonHtml + closeButtonHtml + navHtml - toggleButton = document.querySelector('.nhsuk-header__menu-toggle') - closeButton = document.querySelector('.nhsuk-header__navigation-close') - nav = document.querySelector('.nhsuk-header__navigation') - MenuToggle() -} - -describe('NHS.UK menuToggle()', () => { - describe('does not throw an error', () => { - it('if no elements exists', () => { - MenuToggle() - }) - it('if no toggleButton exists', () => { - initTest(closeButtonHtml + navHtml) - expect(toggleButton).toBeNull() - expect(closeButton).toBeDefined() - expect(nav).toBeDefined() - }) - - it('if no closeButton exists', () => { - initTest(toggleButtonHtml + navHtml) - expect(toggleButton).toBeDefined() - expect(closeButton).toBeNull() - expect(nav).toBeDefined() - }) - - it('if no nav exists', () => { - initTest(toggleButtonHtml + closeButtonHtml) - expect(toggleButton).toBeDefined() - expect(closeButton).toBeDefined() - expect(nav).toBeNull() - }) - }) - - describe('Adds correct classes to elements', () => { - it('when toggleButton is clicked for the first time', () => { - initTest() - toggleButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') - expect(toggleButton.classList.contains('is-active')).toEqual(true) - expect(nav.classList.contains('js-show')).toEqual(true) - }) - - it('when toggleButton is clicked twice', () => { - initTest() - toggleButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') - expect(toggleButton.classList.contains('is-active')).toEqual(true) - expect(nav.classList.contains('js-show')).toEqual(true) - toggleButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('false') - expect(toggleButton.classList.contains('is-active')).toEqual(false) - expect(nav.classList.contains('js-show')).toEqual(false) - }) - - it('when toggleButton is clicked then closeButton is clicked', () => { - initTest() - toggleButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') - expect(toggleButton.classList.contains('is-active')).toEqual(true) - expect(nav.classList.contains('js-show')).toEqual(true) - closeButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('false') - expect(toggleButton.classList.contains('is-active')).toEqual(false) - expect(nav.classList.contains('js-show')).toEqual(false) - }) - }) -}) diff --git a/packages/components/header-new/searchToggle.js b/packages/components/header-new/searchToggle.js deleted file mode 100644 index 10a67ba2d..000000000 --- a/packages/components/header-new/searchToggle.js +++ /dev/null @@ -1,34 +0,0 @@ -import { toggleAttribute } from '../../common' - -/** - * Handle search show and hide for mobile - */ -export default () => { - // HTMLElements - const toggleButton = document.querySelector('#toggle-search') - const closeButton = document.querySelector('#close-search') - const searchContainer = document.querySelector('#wrap-search') - const menuSearchContainer = document.querySelector('#content-header') - - /** - * Toggle classes and attributes - * @param {Object} event click event object - */ - const toggleSearch = (event) => { - event.preventDefault() - // Toggle aria-expanded for accessibility - toggleAttribute(toggleButton, 'aria-expanded') - // Toggle classes to apply CSS - toggleButton.classList.toggle('is-active') - searchContainer.classList.toggle('js-show') - menuSearchContainer.classList.toggle('js-show') - } - - // Check all necessary HTMLElements exist - if (toggleButton && closeButton) { - // Attach toggleSearch as click to any elements which need it - ;[toggleButton, closeButton].forEach((elem) => { - elem.addEventListener('click', toggleSearch) - }) - } -} diff --git a/packages/components/header-new/template.njk b/packages/components/header-new/template.njk index 1671cf998..02cf418be 100644 --- a/packages/components/header-new/template.njk +++ b/packages/components/header-new/template.njk @@ -14,8 +14,11 @@ {%- if params.organisation and params.organisation.name %} nhsuk-header--organisation{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" role="banner" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> +
    - +
    {# close nhsuk-header__container beta-header #} - {% if params.primaryLinks %} -
    +
    +
    + + {% endif -%} + + {% if showSearch == "true" and showNav == "false" %} + +
    +
    +
    + + + + + +
    +
    +
    + + {# close nhsuk-header__container beta-header #} + + {% endif -%} + + {% if showNav == "true" and params.primaryLinks and showSearch == "false" %} + + {# close nhsuk-header__container beta-header #} + +
    +
    +
    - {% endif %} + {% endif -%} + \ No newline at end of file diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 130967841..ad1e4096c 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -712,6 +712,27 @@ .nhsuk-header__logo--only { max-width: 100%; + @include mq($until: tablet) { + padding-bottom: 16px; + } + @include mq($from: tablet) { + .nhsuk-header__link--service { + align-items: center; + display: flex; + -ms-flex-align: center; + margin-bottom: 0; + width: auto; + } + + .nhsuk-header__service-name { + padding-left: nhsuk-spacing(3); + } + } +} + +.beta-transactional-nhsuk-header__logo--only { + max-width: 100%; + @include mq($from: tablet) { .nhsuk-header__link--service { align-items: center; diff --git a/packages/nhsuk.js b/packages/nhsuk.js index 6334b30a3..32f5dd4a8 100644 --- a/packages/nhsuk.js +++ b/packages/nhsuk.js @@ -5,6 +5,7 @@ import Checkboxes from './components/checkboxes/checkboxes' import Details from './components/details/details' import ErrorSummary from './components/error-summary/error-summary' import Header from './components/header/header' +import HeaderNew from './components/header-new/header' import Radios from './components/radios/radios' import SkipLink from './components/skip-link/skip-link' import Tabs from './components/tabs/tabs' @@ -19,6 +20,7 @@ document.addEventListener('DOMContentLoaded', () => { Details() ErrorSummary() Header() + HeaderNew() Radios() SkipLink() Tabs() From 4bcfddced118f320b2a48cde20239f779c60e92b Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Mon, 31 Jul 2023 03:24:28 +0100 Subject: [PATCH 03/43] updated readmes --- packages/components/footer-new/README.md | 2 +- packages/components/header-new/README.md | 1141 +++++++++++----------- 2 files changed, 576 insertions(+), 567 deletions(-) diff --git a/packages/components/footer-new/README.md b/packages/components/footer-new/README.md index b3695fe30..23f594a2b 100644 --- a/packages/components/footer-new/README.md +++ b/packages/components/footer-new/README.md @@ -8,7 +8,7 @@ Find out more about the new footer component and when to use it in the [NHS digi ### Footer (new) -[Preview the new footer component](https://nhsuk.github.io/nhsuk-frontend/components/footer-new/index.html) +[Preview the new footer component](https://nhsuk.github.io/nhsuk-frontend/components/footer/index.html) #### HTML markup diff --git a/packages/components/header-new/README.md b/packages/components/header-new/README.md index 36719bc1f..f10b3736d 100644 --- a/packages/components/header-new/README.md +++ b/packages/components/header-new/README.md @@ -19,119 +19,117 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen ```html ``` #### Nunjucks macro ``` -{% from 'components/header/macro.njk' import header %} +{% from 'components/header-new/macro.njk' import headerNew %} -{{ header({ +{{ headerNew({ "showNav": "true", "showSearch": "true", "primaryLinks": [ @@ -139,21 +137,25 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen "url" : "https://www.nhs.uk/conditions", "label" : "Health A-Z" }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + }, { 'url' : 'https://www.nhs.uk/live-well/', 'label' : 'Live Well' }, { - 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', - 'label' : 'Care and support' + 'url' : 'https://www.nhs.uk/mental-health/', + 'label' : 'Mental health' }, { - 'url' : 'https://www.nhs.uk/news/', - 'label' : 'Health news' + 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', + 'label' : 'Care and support' }, { - 'url' : 'https://www.nhs.uk/service-search', - 'label' : 'Services near you' + 'url' : 'https://www.nhs.uk/pregnancy/', + 'label' : 'Pregnancy' } ] }) @@ -168,118 +170,132 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen ```html + + ``` #### Nunjucks macro ``` -{% from 'components/header/macro.njk' import header %} - -{{ header({ - "showNav": "true", - "showSearch": "false", - "primaryLinks": [ - { - "url" : "https://www.nhs.uk/conditions", - "label" : "Health A-Z" - }, - { - 'url' : 'https://www.nhs.uk/live-well/', - 'label' : 'Live Well' - }, - { - 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', - 'label' : 'Care and support' - }, - { - 'url' : 'https://www.nhs.uk/news/', - 'label' : 'Health news' - }, - { - 'url' : 'https://www.nhs.uk/service-search', - 'label' : 'Services near you' - } - ] - }) +{% from 'components/header-new/macro.njk' import headerNew %} + +{{ headerNew({ + "showNav": "true", + "showSearch": "false", + "primaryLinks": [ + { + "url" : "https://www.nhs.uk/conditions", + "label" : "Health A-Z" + }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + }, + { + 'url' : 'https://www.nhs.uk/live-well/', + 'label' : 'Live Well' + }, + { + 'url' : 'https://www.nhs.uk/mental-health/', + 'label' : 'Mental health' + }, + { + 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', + 'label' : 'Care and support' + }, + { + 'url' : 'https://www.nhs.uk/pregnancy/', + 'label' : 'Pregnancy' + } + ] + }) }} ``` @@ -291,55 +307,71 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen ```html + ``` #### Nunjucks macro ``` -{% from 'components/header/macro.njk' import header %} +{% from 'components/header-new/macro.njk' import headerNew %} -{{ header({ +{{ headerNew({ "showNav": "false", - "showSearch": "true" + "showSearch": "true", + "primaryLinks": [ + { + "url" : "https://www.nhs.uk/conditions", + "label" : "Health A-Z" + }, + { + 'url' : 'https://www.nhs.uk/nhs-services/', + 'label' : 'NHS services' + }, + { + 'url' : 'https://www.nhs.uk/live-well/', + 'label' : 'Live Well' + }, + { + 'url' : 'https://www.nhs.uk/mental-health/', + 'label' : 'Mental health' + }, + { + 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', + 'label' : 'Care and support' + }, + { + 'url' : 'https://www.nhs.uk/pregnancy/', + 'label' : 'Pregnancy' + } + ] }) }} ``` @@ -352,13 +384,12 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen ```HTML diff --git a/packages/nhsuk.js b/packages/nhsuk.js index 32f5dd4a8..6334b30a3 100644 --- a/packages/nhsuk.js +++ b/packages/nhsuk.js @@ -5,7 +5,6 @@ import Checkboxes from './components/checkboxes/checkboxes' import Details from './components/details/details' import ErrorSummary from './components/error-summary/error-summary' import Header from './components/header/header' -import HeaderNew from './components/header-new/header' import Radios from './components/radios/radios' import SkipLink from './components/skip-link/skip-link' import Tabs from './components/tabs/tabs' @@ -20,7 +19,6 @@ document.addEventListener('DOMContentLoaded', () => { Details() ErrorSummary() Header() - HeaderNew() Radios() SkipLink() Tabs() diff --git a/packages/nhsuk.scss b/packages/nhsuk.scss index 9027a2a2b..07bdd5016 100644 --- a/packages/nhsuk.scss +++ b/packages/nhsuk.scss @@ -15,9 +15,7 @@ @import "components/error-summary/error-summary"; @import "components/fieldset/fieldset"; @import "components/footer/footer"; -@import "components/footer-new/footer-new"; @import "components/header/header"; -@import "components/header-new/header-new"; @import "components/hero/hero"; @import "components/hint/hint"; @import "components/images/images"; From 3fc8de0ac67ef5fd5bd9b9f72c81dbcda4c4450e Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Tue, 8 Aug 2023 12:33:20 +0100 Subject: [PATCH 09/43] remove old header components --- packages/components/headerOld/README.md | 947 --------------- packages/components/headerOld/_header.scss | 1017 ----------------- packages/components/headerOld/header.js | 7 - packages/components/headerOld/header.test.js | 9 - packages/components/headerOld/macro.njk | 3 - packages/components/headerOld/menuToggle.js | 32 - .../components/headerOld/menuToggle.test.js | 85 -- packages/components/headerOld/searchToggle.js | 34 - packages/components/headerOld/template.njk | 208 ---- 9 files changed, 2342 deletions(-) delete mode 100644 packages/components/headerOld/README.md delete mode 100644 packages/components/headerOld/_header.scss delete mode 100644 packages/components/headerOld/header.js delete mode 100644 packages/components/headerOld/header.test.js delete mode 100644 packages/components/headerOld/macro.njk delete mode 100644 packages/components/headerOld/menuToggle.js delete mode 100644 packages/components/headerOld/menuToggle.test.js delete mode 100644 packages/components/headerOld/searchToggle.js delete mode 100644 packages/components/headerOld/template.njk diff --git a/packages/components/headerOld/README.md b/packages/components/headerOld/README.md deleted file mode 100644 index 36719bc1f..000000000 --- a/packages/components/headerOld/README.md +++ /dev/null @@ -1,947 +0,0 @@ -# Header - -## Guidance - -Find out more about the header component and when to use it in the [NHS digital service manual](https://service-manual.nhs.uk/design-system/components/header). - -## Dependencies - -For this component to work, you need to make sure you include the required JavaScript. You can either include the -compiled JavaScript for all components `nhsuk.min.js` or the individual component JavaScript `header.js`. - -## Quick start examples - -### Header - -[Preview the header component](https://nhsuk.github.io/nhsuk-frontend/components/header/index.html) - -#### HTML markup - -```html - -``` - -#### Nunjucks macro - -``` -{% from 'components/header/macro.njk' import header %} - -{{ header({ - "showNav": "true", - "showSearch": "true", - "primaryLinks": [ - { - "url" : "https://www.nhs.uk/conditions", - "label" : "Health A-Z" - }, - { - 'url' : 'https://www.nhs.uk/live-well/', - 'label' : 'Live Well' - }, - { - 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', - 'label' : 'Care and support' - }, - { - 'url' : 'https://www.nhs.uk/news/', - 'label' : 'Health news' - }, - { - 'url' : 'https://www.nhs.uk/service-search', - 'label' : 'Services near you' - } - ] - }) -}} -``` - -### Header with navigation - -[Preview the header with navigation component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-navigation.html) - -#### HTML markup - -```html - -``` - -#### Nunjucks macro - -``` -{% from 'components/header/macro.njk' import header %} - -{{ header({ - "showNav": "true", - "showSearch": "false", - "primaryLinks": [ - { - "url" : "https://www.nhs.uk/conditions", - "label" : "Health A-Z" - }, - { - 'url' : 'https://www.nhs.uk/live-well/', - 'label' : 'Live Well' - }, - { - 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/', - 'label' : 'Care and support' - }, - { - 'url' : 'https://www.nhs.uk/news/', - 'label' : 'Health news' - }, - { - 'url' : 'https://www.nhs.uk/service-search', - 'label' : 'Services near you' - } - ] - }) -}} -``` - -### Header with search - -[Preview the header with search component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-search.html) - -#### HTML markup - -```html - -``` - -#### Nunjucks macro - -``` -{% from 'components/header/macro.njk' import header %} - -{{ header({ - "showNav": "false", - "showSearch": "true" - }) -}} -``` - -### Header with logo - -[Preview the header with logo component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-logo.html) - -#### HTML markup - -```HTML - -``` - -#### Nunjucks macro - -``` -{% from 'components/header/macro.njk' import header %} - -{{ header({ - "showNav": "false", - "showSearch": "false" - }) -}} -``` - ---- - -### Header transactional - -[Preview the header transactional component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-transactional.html) - -#### HTML markup - -```HTML - -``` - -#### Nunjucks macro - -``` -{% from 'components/header/macro.njk' import header %} - -{{ header({ - "transactional": "true", - "showNav": "false", - "showSearch": "false" - }) -}} -``` - ---- - -### Header transactional with service name - -[Preview the header transactional with service name component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-transactional-service-name.html) - -#### HTML markup - -```HTML - -``` - -#### Nunjucks macro - -``` -{% from 'components/header/macro.njk' import header %} - -{{ header({ - "transactionalService": { - "name": "Register with a GP", - "href": "https://beta.nhs.uk/book-a-gp-appointment/" - }, - "showNav": "false", - "showSearch": "false" - }) -}} -``` - -### Header organisational - -[Preview the header organisational component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-org.html) - -#### HTML markup - -```HTML - -``` - -#### Nunjucks macro - -``` -{{ header({ - "showNav": "true", - "showSearch": "true", - "organisation": { - "name": "Anytown Anyplace", - "split": "Anywhere", - "descriptor": "NHS Foundation Trust" - }, - "primaryLinks": [ - { - "url" : "#", - "label" : "Your hospital visit" - }, - { - 'url' : '#', - 'label' : 'Wards and departments' - }, - { - 'url' : '#', - 'label' : 'Conditions and treatments' - }, - { - 'url' : '#', - 'label' : 'Our people' - }, - { - 'url' : '#', - 'label' : 'Our research' - } - ] - }) -}} -``` - -### Header organisational with white header - -[Preview the header organisational with white header component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-org-white.html) - -#### HTML markup - -```html - -``` - -#### Nunjucks macro - -``` -{{ header({ - "showNav": "true", - "showSearch": "true", - "classes": "nhsuk-header--white", - "organisation": { - "name": "Anytown Anyplace", - "split": "Anywhere", - "descriptor": "NHS Foundation Trust" - }, - "primaryLinks": [ - { - "url" : "#", - "label" : "Your hospital visit" - }, - { - 'url' : '#', - 'label' : 'Wards and departments' - }, - { - 'url' : '#', - 'label' : 'Conditions and treatments' - }, - { - 'url' : '#', - 'label' : 'Our people' - }, - { - 'url' : '#', - 'label' : 'Our research' - } - ] - }) -}} -``` - -### Header organisational with white header and navigation - -[Preview the header organisational with white header and navigation component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-org-white-nav.html) - -#### HTML markup - -```html - -``` - -#### Nunjucks macro - -``` -{{ header({ - "showNav": "true", - "showSearch": "true", - "classes": "nhsuk-header--white nhsuk-header--white-nav", - "organisation": { - "name": "Anytown Anyplace Anywhere", - "descriptor": "NHS Foundation Trust" - }, - "primaryLinks": [ - { - "url" : "#", - "label" : "Your hospital visit" - }, - { - 'url' : '#', - 'label' : 'Wards and departments' - }, - { - 'url' : '#', - 'label' : 'Conditions and treatments' - }, - { - 'url' : '#', - 'label' : 'Our people' - }, - { - 'url' : '#', - 'label' : 'Our research' - } - ] - }) -}} -``` - -### Nunjucks arguments - -The header Nunjucks macro takes the following arguments: - -| Name | Type | Required | Description | -| --------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -| **showNav** | boolean | Yes | Set to "true" to show the navigation links in the header. | -| **showSearch** | boolean | Yes | Set to "true" to show the site search input form. | -| **homeHref** | string | No | The href of the link for the logo and mobile home link in the navigation links. Defaults to "/". | -| **ariaLabel** | string | No | Aria label for the logo href. Defaults to "NHS homepage". | -| **organisation** | object | No | Settings for header with organisational logo. | -| **organisation.name** | string | No | Organisation name value. | -| **organisation.split** | string | No | Longer organisation names can be split onto multiple lines. | -| **organisation.descriptor** | string | No | Organisation descriptor. | -| **organisation.logoURL** | string | No | Organisation logo if using a static asset, such as PNG, is preferred. | -| **primaryLinks** | array | No | Array of navigation links for use in the header. | -| **primaryLinks[].url** | string | No | The href of a navigation item in the header. | -| **primaryLinks[].label** | string | No | The label of a navigation item in the header. | -| **transactional** | string | No | Set to "true" if this is a transactional header (with smaller logo). | -| **transactionalService** | object | No | Object containing the _name_ and _href_ of the transactional service. | -| **service** | object | No | Object containing the _name_ and optional boolean _longName_ of the service. Set this to "true" if the service name is longer than 22 characters. | -| **classes** | string | No | Optional additional classes to add to the header container. Separate each class with a space. | -| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the header container. | -| **searchAction** | string | No | The search action endpoint. Defaults to "https://www.nhs.uk/search/" | -| **searchInputName** | string | No | The name for the search field. Defaults to "q" | - -If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning). diff --git a/packages/components/headerOld/_header.scss b/packages/components/headerOld/_header.scss deleted file mode 100644 index ad1e4096c..000000000 --- a/packages/components/headerOld/_header.scss +++ /dev/null @@ -1,1017 +0,0 @@ -/* ========================================================================== - COMPONENTS / #HEADER - ========================================================================== */ - -/** - * The behaviour with regards to responsiveness is as follow: - * - * - Mobile to tablet view - * Menu toggle button visible and navigation links hidden, search toggle - button visible and search form hidden - * - * - Tablet to desktop view - * Menu toggle button visible and navigation links hidden, search toggle - * button hidden and search form visible - * - * - Desktop+ view - * Menu toggle button hidden and navigation links visible, search toggle - * button hidden and search form visible - * - * 1. Custom height and width of the logo - * 2. Custom height and width of form items - * 3. Custom height and width of svg icons - * 4. Remove inner border on buttons for Firefox, see - * https://github.com/necolas/normalize.css/issues/393 - * 5. Proprietary extension so form field looks the same in Safari - * 6. Custom margin to move menu toggle past the search toggle button - * 7. Custom border value between expanded search and expanded menu if both open at the same time - * 8. Don't display the link address for the logo anchor, see - * core/elements/_links.scss - * 9. Use non variable colour to follow NHS England guidelines on logo colour - * 10. Remove random top margin in Safari - * 11. Align close icon with nav item arrow icons - * 12. Add nhsuk-spacing(9) to align right and left main nav with header - */ - -.nhsuk-header { - @include clearfix(); - background-color: $color_nhsuk-blue; -} - -.nhsuk-header__container { - @include clearfix(); - padding: 20px 0; - - @include mq($until: tablet) { - margin: 0; - padding: nhsuk-spacing(3); - } -} - -.nhsuk-header__logo { - float: left; - - @include mq($until: tablet) { - position: relative; - z-index: 1; - } - - .nhsuk-logo__background { - fill: $color_nhsuk-white; - - @include mq($media-type: print) { - fill: $color_nhsuk-blue; - } - } - - .nhsuk-logo__text { - fill: $color_nhsuk-blue; - - @include mq($media-type: print) { - fill: $color_nhsuk-white; - } - } - - @include mq($from: tablet) { - padding-left: 0; - } - - .nhsuk-logo { - @include nhsuk-logo-size; /* [1] */ - border: 0; - } - - @include mq($until: desktop) { - max-width: 60%; - } - - @media (max-width: 450px) { - max-width: 50%; - } -} - -.nhsuk-header__link { - @include nhsuk-logo-size; /* [1] */ - display: block; - - &:hover { - .nhsuk-logo { - box-shadow: 0 0 0 $nhsuk-focus-width $color_shade_nhsuk-blue-35; - } - } - - &:focus { - box-shadow: none; - - .nhsuk-logo { - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color, - 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color; - } - } - - @include mq($media-type: print) { - &:after { - content: ""; /* [8] */ - } - } - - &:hover, - &:active, - &:focus { - background-color: transparent; - } -} - -.nhsuk-header__content { - @include clearfix(); - @include print-hide(); - - position: relative; - - &.js-show { - border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5; /* [7] */ - } - - @include mq($from: tablet) { - float: right; - - &.js-show { - border-bottom: 0; - } - } -} - -.nhsuk-header__search { - @include clearfix(); - - position: relative; - text-align: right; - - @include mq($from: tablet) { - float: left; - margin-left: nhsuk-spacing(2); - } -} - -.nhsuk-header__search-toggle { - @include toggle-button(); - min-height: nhsuk-spacing(6); /* [2] */ - padding: nhsuk-spacing(1) nhsuk-spacing(2) 0; - position: absolute; - right: 0; - top: 0; - - .nhsuk-icon__search { - fill: $color_nhsuk-white; - height: 21px; /* [3] */ - width: 21px; /* [3] */ - } - - &:focus { - @include nhsuk-focused-button(); - box-shadow: 0 0 0 2px $nhsuk-focus-color, 0 $nhsuk-focus-width 0 2px $nhsuk-focus-text-color; - } - - @include mq($from: tablet) { - display: none; - } -} - -.nhsuk-header__search-form { - height: 100%; - overflow: visible; - - @include mq($until: tablet) { - background-color: $color_nhsuk-white; - display: flex; - padding: nhsuk-spacing(3); - width: 100%; - } -} - -.nhsuk-header__search-wrap { - @include mq($until: tablet) { - display: none; - - &.js-show { - clear: both; - display: flex; - margin-bottom: -20px; - margin-left: -16px; - margin-right: -16px; - padding-top: 16px; - text-align: left; - } - } - - @include mq($from: tablet) { - display: block; - line-height: 0; - } -} - -.nhsuk-search__input { - -webkit-appearance: listbox; /* [5] */ - border-bottom-left-radius: $nhsuk-border-radius; - border-bottom-right-radius: 0; - border-top-left-radius: $nhsuk-border-radius; - border-top-right-radius: 0; - padding: 0 nhsuk-spacing(3); - &:focus { - border: 4px solid $nhsuk-focus-text-color; - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; - outline: $nhsuk-focus-width solid transparent; - outline-offset: $nhsuk-focus-width; - padding: 0 9px; - } - &::placeholder { - color: $color_nhsuk-grey-1; - font-size: $nhsuk-base-font-size; - } - &:-ms-input-placeholder { - color: $color_nhsuk-grey-1; - font-size: $nhsuk-base-font-size; - } - &::-webkit-input-placeholder { - color: $color_nhsuk-grey-1; - font-size: $nhsuk-base-font-size; - } - - @include mq($until: tablet) { - border-bottom: 1px solid $color_nhsuk-grey-3; - border-left: 1px solid $color_nhsuk-grey-3; - border-right: 0; - border-top: 1px solid $color_nhsuk-grey-3; - flex-grow: 2; - -ms-flex-positive: 2; - font-size: inherit; - height: 52px; /* [4] */ - margin: 0; - outline: none; - width: 100%; /* [4] */ - z-index: 1; - } - - @include mq($from: tablet) { - border: 1px solid $color_nhsuk-white; - font-size: $nhsuk-base-font-size; - height: nhsuk-spacing(6); /* [2] */ - width: 200px; /* [2] */ - } - - @include mq($from: desktop) { - width: 235px; - } -} - -.nhsuk-search__submit { - border: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: $nhsuk-border-radius; - border-top-left-radius: 0; - border-top-right-radius: $nhsuk-border-radius; - float: right; - font-size: inherit; - line-height: inherit; - outline: none; - padding: 0; - - &::-moz-focus-inner { - border: 0; /* [4] */ - } - - &:hover { - cursor: pointer; - } - - @include mq($until: tablet) { - background-color: $color_nhsuk-green; - height: 52px; /* [2] */ - margin: 0; - padding: nhsuk-spacing(2) nhsuk-spacing(2) 0; - - .nhsuk-icon__search { - fill: $color_nhsuk-white; - height: 38px; /* [3] */ - width: 38px; /* [3] */ - } - - &:hover { - background-color: $nhsuk-button-hover-color; - } - - &:focus { - background-color: $nhsuk-focus-color; - box-shadow: 0 -4px $nhsuk-focus-color, 0 $nhsuk-focus-width $nhsuk-focus-text-color; - outline: $nhsuk-focus-width solid transparent; - outline-offset: $nhsuk-focus-width; - - &:hover { - background-color: $nhsuk-focus-color; - - .nhsuk-icon { - fill: $nhsuk-focus-text-color; - } - } - - .nhsuk-icon { - fill: $nhsuk-focus-text-color; - } - } - } - - @include mq($from: tablet) { - background-color: $color_nhsuk-grey-5; - display: block; - height: nhsuk-spacing(6); /* [2] */ - width: 44px; /* [2] */ - - .nhsuk-icon__search { - height: 27px; /* [3] */ - width: 27px; /* [3] */ - } - - &:hover { - background-color: $color_shade_nhsuk-blue-35; - border: 1px solid $color_nhsuk-white; - - .nhsuk-icon__search { - fill: $color_nhsuk-white; - } - } - - &:focus { - @include nhsuk-focused-button(); - box-shadow: 0 -2px $nhsuk-focus-color, 0 $nhsuk-focus-width $nhsuk-focus-text-color; - } - - &:active { - background-color: $color_shade_nhsuk-blue-50; - border: 0; - - .nhsuk-icon__search { - fill: $color_nhsuk-white; - } - } - } -} - -.nhsuk-search__close { - @include mq($until: tablet) { - @include close-button(); - - margin-left: nhsuk-spacing(2); - margin-right: -(nhsuk-spacing(2)); /* [11] */ - margin-top: nhsuk-spacing(2); - - &:focus { - .nhsuk-icon__close { - fill: $nhsuk-focus-text-color; - } - } - } - - @include mq($from: tablet) { - display: none; - } -} - -.nhsuk-search__input--withdropdown { - border-bottom-left-radius: 0; -} - -.nhsuk-search__submit--withdropdown { - border-bottom-right-radius: 0; -} - -/* Main navigation - * - * Appears below the header strip - ====================================================================== */ - -.nhsuk-header__menu { - float: right; - - @include mq($from: tablet) { - float: left; - } -} - -.nhsuk-header__menu-toggle { - @include toggle-button(); - - display: block; - font-size: 16px; - font-weight: 400; - line-height: $nhsuk-base-line-height; - margin-right: 0; /* [6] */ - padding: 7px nhsuk-spacing(3); - position: relative; - text-decoration: none; - z-index: 1; - - @include mq($until: tablet) { - right: 48px; - } - - @include mq($from: tablet, $until: large-desktop) { - margin-top: 0; /* [10] */ - } - - @include mq($from: large-desktop) { - display: none; - } - - &:focus { - @include nhsuk-focused-button; - - box-shadow: 0 0 0 2px $nhsuk-focus-color, 0 $nhsuk-focus-width 0 2px $nhsuk-focus-text-color; - } -} - -/* 'only' modifier for when there is only the menu in the header, no search - ====================================================================== */ - -.nhsuk-header__menu--only { - .nhsuk-header__menu-toggle { - @include mq($until: tablet) { - position: relative; - right: auto; - top: auto; - } - } -} - -.nhsuk-header__navigation { - @include print-hide(); - background-color: $color_nhsuk-white; - clear: both; - display: none; - overflow: hidden; - - &.js-show { - display: block; - - @include mq($until: large-desktop) { - border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5; /* [7] */ - border-top: nhsuk-spacing(1) solid $color_nhsuk-grey-5; /* [7] */ - - .nhsuk-width-container { - margin: 0 nhsuk-spacing(3); - } - } - - @include mq($until: desktop) { - .nhsuk-width-container { - margin: 0; - } - } - } - - @include mq($from: large-desktop) { - background-color: $color_nhsuk-blue; - display: block; - margin: 0 auto; - max-width: $nhsuk-page-width + nhsuk-spacing(9); /* [12] */ - } -} - -.nhsuk-header__navigation-title { - font-weight: $nhsuk-font-bold; - margin-bottom: 0; - padding: nhsuk-spacing(3); - position: relative; - - @include mq($from: large-desktop) { - display: none; - } -} - -.nhsuk-header__navigation-close { - @include close-button(); - overflow: hidden; - position: absolute; - right: nhsuk-spacing(2); - top: nhsuk-spacing(2); - white-space: nowrap; - - &:focus { - .nhsuk-icon__close { - fill: $nhsuk-focus-text-color; - } - } -} - -.nhsuk-header__navigation-list { - list-style: none; - margin: 0; - padding-left: 0; - - @include mq($from: large-desktop) { - border-top: 1px solid $nhsuk-secondary-border-color; - display: flex; - justify-content: space-between; - padding: 0; - width: 100%; - } -} - -.nhsuk-header__navigation-item { - border-top: 1px solid $color_nhsuk-grey-5; - margin-bottom: 0; - position: relative; - - @include mq($from: large-desktop) { - border-top: 0; - margin: 0; - text-align: center; - - .nhsuk-icon__chevron-right { - display: none; - } - } -} - -.nhsuk-header__navigation-link { - @include nhsuk-font(16); - border-bottom: nhsuk-spacing(1) solid transparent; - border-top: nhsuk-spacing(1) solid transparent; - color: $color_nhsuk-blue; - display: block; - padding: 12px nhsuk-spacing(3); - text-decoration: none; - - @include mq($from: large-desktop) { - color: $color_nhsuk-white; - line-height: normal; - } - - .nhsuk-icon__chevron-right { - fill: $color_nhsuk-grey-3; - position: absolute; - right: nhsuk-spacing(1); - top: 11px; - } - - &:visited { - color: $color_nhsuk-blue; - - @include mq($from: large-desktop) { - color: $color_nhsuk-white; - } - } - - &:hover { - box-shadow: none; - color: $color_nhsuk-blue; - text-decoration: underline; - - @include mq($from: large-desktop) { - color: $color_nhsuk-white; - } - - .nhsuk-icon__chevron-right { - fill: $color_nhsuk-blue; - } - } - - &:active, - &:focus { - background-color: $nhsuk-focus-color; - border-bottom: $nhsuk-focus-width solid $nhsuk-focus-text-color; - box-shadow: none; - color: $nhsuk-focus-text-color; - outline: $nhsuk-focus-width solid transparent; - outline-offset: $nhsuk-focus-width; - text-decoration: none; - - &:hover { - background-color: $nhsuk-focus-color; - color: $nhsuk-focus-text-color; - - .nhsuk-icon__chevron-right { - fill: $nhsuk-focus-text-color; - } - } - - &:visited { - background-color: $nhsuk-focus-color; - color: $nhsuk-focus-text-color; - } - } -} - -.nhsuk-header__navigation-item--for-mobile { - @include mq($from: large-desktop) { - display: none; - } -} - -.nhsuk-header__navigation-list--small { - @include mq($from: large-desktop) { - justify-content: flex-start; - } -} - -/** - * Transactional Header with service name -**/ - -.nhsuk-header__transactional-service-name { - float: left; - padding-left: nhsuk-spacing(3); - padding-top: 3px; - - @include mq($until: large-desktop) { - padding-left: 0; - padding-top: nhsuk-spacing(2); - width: 100%; - } -} - -.nhsuk-header__transactional-service-name--link { - @include nhsuk-link-style-white; - @include nhsuk-font(19); - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -.nhsuk-header--transactional { - .nhsuk-header__link { - @include nhsuk-logo-size-small; - display: block; - } - - .nhsuk-logo { - @include nhsuk-logo-size-small; - } - - .nhsuk-header__transactional-service-name { - float: left; - } -} - -.nhsuk-header__link--service { - height: auto; - margin-bottom: -(nhsuk-spacing(1)); - text-decoration: none; - width: auto; - - @include mq($from: large-desktop) { - align-items: center; - display: flex; - -ms-flex-align: center; - margin-bottom: 0; - width: auto; - } - - &:hover { - background: none; - - .nhsuk-header__service-name { - text-decoration: underline; - } - } - - &:focus { - background: $nhsuk-focus-color; - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color, - 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color; - - .nhsuk-header__service-name { - color: $nhsuk-focus-text-color; - text-decoration: none; - } - - .nhsuk-logo { - box-shadow: none; - } - } -} - -.nhsuk-header__service-name { - @include nhsuk-font(19); - - color: $color_nhsuk-white; - display: block; - padding-left: 0; - padding-right: 0; - - @include mq($from: large-desktop) { - padding-left: nhsuk-spacing(3); - } - - @include mq($until: large-desktop) { - max-width: 220px; - } -} - -.nhsuk-header__logo--only { - max-width: 100%; - - @include mq($until: tablet) { - padding-bottom: 16px; - } - @include mq($from: tablet) { - .nhsuk-header__link--service { - align-items: center; - display: flex; - -ms-flex-align: center; - margin-bottom: 0; - width: auto; - } - - .nhsuk-header__service-name { - padding-left: nhsuk-spacing(3); - } - } -} - -.beta-transactional-nhsuk-header__logo--only { - max-width: 100%; - - @include mq($from: tablet) { - .nhsuk-header__link--service { - align-items: center; - display: flex; - -ms-flex-align: center; - margin-bottom: 0; - width: auto; - } - - .nhsuk-header__service-name { - padding-left: nhsuk-spacing(3); - } - } -} - -/** - * Organisational header -**/ - -.nhsuk-header--organisation { - .nhsuk-header__link { - height: auto; - text-decoration: none; - width: auto; - - &:hover { - color: $color_nhsuk-white; - text-decoration: underline; - - .nhsuk-logo { - box-shadow: none; - } - } - - &:focus { - background: $nhsuk-focus-color; - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color, - 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color; - - .nhsuk-organisation-name, - .nhsuk-organisation-descriptor { - color: $nhsuk-focus-text-color; - } - - .nhsuk-logo { - box-shadow: none; - } - - &:hover { - text-decoration: none; - } - } - } - - .nhsuk-header__logo .nhsuk-logo { - height: 32px; - width: 80px; - - @media (max-width: 450px) { - height: 24px; - width: 60px; - } - - @media (max-width: 375px) { - height: 20px; - width: 50px; - } - } - - .nhsuk-header__navigation { - max-width: 100%; - } -} - -.nhsuk-organisation-name { - color: $color_nhsuk-white; - display: block; - font-size: 22px; - font-weight: bold; - letter-spacing: 0.2px; - line-height: 23px; - margin-top: -2px; - - @include mq($media-type: print) { - color: $nhsuk-print-text-color; - } - - @media (max-width: 450px) { - font-size: 17px; - letter-spacing: 0.1px; - line-height: 17px; - } - - @media (max-width: 375px) { - font-size: 13px; - line-height: 13px; - } - - .nhsuk-organisation-name-split { - display: block; - } -} - -.nhsuk-organisation-descriptor { - color: $color_nhsuk-white; - display: block; - font-size: 15px; - font-weight: bold; - line-height: 21px; - - @include mq($media-type: print) { - color: $color_nhsuk-blue; - } - - @media (max-width: 450px) { - font-size: 12px; - line-height: 18px; - } - - @media (max-width: 375px) { - font-size: 10px; - line-height: 13px; - } -} - -.nhsuk-org-logo { - border: 0; - max-height: 100px; - max-width: 280px; - - @media (max-width: 450px) { - max-width: 150px; - } -} - -.nhsuk-org-logo[src$=".svg"] { - height: auto; - max-width: 220px; - width: 100%; -} - -// Header (white) - -.nhsuk-header--white { - background-color: $color_nhsuk-white; - - .nhsuk-logo { - .nhsuk-logo__background { - fill: $color_nhsuk-blue; - } - - .nhsuk-logo__text { - fill: $color_nhsuk-white; - } - } - - .nhsuk-header__link { - &:hover { - color: $nhsuk-text-color; - text-decoration: underline; - - .nhsuk-organisation-descriptor { - color: $nhsuk-text-color; - } - } - } - - .nhsuk-search__submit { - background-color: $color_nhsuk-blue; - - .nhsuk-icon__search { - fill: $color_nhsuk-white; - } - - &:hover { - background-color: $color_shade_nhsuk-blue-20; - border-color: $color_shade_nhsuk-blue-20; - } - - &:focus { - background-color: $nhsuk-focus-color; - - .nhsuk-icon__search { - fill: $nhsuk-focus-text-color; - } - } - } - - .nhsuk-search__input { - border: 1px solid $color_nhsuk-grey-3; - - &:focus { - border: 2px solid $nhsuk-focus-text-color; - - @include mq($until: tablet) { - border: $nhsuk-focus-width solid $nhsuk-focus-text-color; - } - } - } - - .nhsuk-header__search-toggle, - .nhsuk-header__menu-toggle { - border-color: $color_nhsuk-blue; - color: $color_nhsuk-blue; - - .nhsuk-icon { - fill: $color_nhsuk-blue; - } - - &.is-active, - &:hover { - border-color: $color_shade_nhsuk-blue-20; - color: $color_nhsuk-white; - - .nhsuk-icon { - fill: $color_nhsuk-white; - } - } - - &:focus { - color: $nhsuk-focus-text-color; - - .nhsuk-icon { - fill: $nhsuk-focus-text-color; - } - } - } - - .nhsuk-header__search-form { - @include mq($until: tablet) { - padding-top: 0; - } - } - - .nhsuk-organisation-name { - color: #000; /* [9] */ /* stylelint-disable-line color-no-hex */ - } - - .nhsuk-organisation-descriptor { - color: $color_nhsuk-blue; - } - - .nhsuk-header__transactional-service-name--link { - color: $color_nhsuk-black; - } - - .nhsuk-header__navigation-list { - border-top: 0; - } - - .nhsuk-header__service-name { - color: $nhsuk-text-color; - } -} - -// Navigation (white) - -.nhsuk-header--white-nav { - .nhsuk-header__navigation { - background-color: $color_nhsuk-white; - - .nhsuk-header__navigation-list { - border-top: 1px solid $color_nhsuk-grey-5; - } - - .nhsuk-header__navigation-link { - color: $color_nhsuk-blue; - - &:visited { - color: $color_nhsuk-blue; - } - - &:focus { - color: $nhsuk-focus-text-color; - - &:hover { - background: $nhsuk-focus-color; - } - } - } - } -} diff --git a/packages/components/headerOld/header.js b/packages/components/headerOld/header.js deleted file mode 100644 index 78284b4a0..000000000 --- a/packages/components/headerOld/header.js +++ /dev/null @@ -1,7 +0,0 @@ -import MenuToggle from './menuToggle' -import SearchToggle from './searchToggle' - -export default () => { - MenuToggle() - SearchToggle() -} diff --git a/packages/components/headerOld/header.test.js b/packages/components/headerOld/header.test.js deleted file mode 100644 index 8d54817a9..000000000 --- a/packages/components/headerOld/header.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import Header from './header' - -describe('NHS.UK header()', () => { - describe('Does not throw an error', () => { - it('if no document exists', () => { - Header() - }) - }) -}) diff --git a/packages/components/headerOld/macro.njk b/packages/components/headerOld/macro.njk deleted file mode 100644 index 97902317d..000000000 --- a/packages/components/headerOld/macro.njk +++ /dev/null @@ -1,3 +0,0 @@ -{% macro header(params) %} - {%- include './template.njk' -%} -{% endmacro %} diff --git a/packages/components/headerOld/menuToggle.js b/packages/components/headerOld/menuToggle.js deleted file mode 100644 index 045faa3a9..000000000 --- a/packages/components/headerOld/menuToggle.js +++ /dev/null @@ -1,32 +0,0 @@ -import { toggleAttribute } from '../../common' - -/** - * Handle menu show and hide for mobile - */ -export default () => { - // HTMLElements - const toggleButton = document.querySelector('#toggle-menu') - const closeButton = document.querySelector('#close-menu') - const nav = document.querySelector('#header-navigation') - - /** - * Toggle classes and attributes - * @param {Object} event click event object - */ - const toggleMenu = (event) => { - event.preventDefault() - // Toggle aria-expanded for accessibility - toggleAttribute(toggleButton, 'aria-expanded') - // Toggle classes to apply CSS - toggleButton.classList.toggle('is-active') - nav.classList.toggle('js-show') - } - - // Check all necessary HTMLElements exist - if (toggleButton && closeButton && nav) { - // Attach toggleMenu as click to any elements which need it - ;[toggleButton, closeButton].forEach((elem) => { - elem.addEventListener('click', toggleMenu) - }) - } -} diff --git a/packages/components/headerOld/menuToggle.test.js b/packages/components/headerOld/menuToggle.test.js deleted file mode 100644 index d4e35064e..000000000 --- a/packages/components/headerOld/menuToggle.test.js +++ /dev/null @@ -1,85 +0,0 @@ -import MenuToggle from './menuToggle' - -// Mock HTML -const toggleButtonHtml = - '' -const closeButtonHtml = - '' -const navHtml = - '' - -// DOM Elements to be set -let toggleButton -let closeButton -let nav - -// Helper to set DOM Elements -const initTest = (html) => { - document.body.innerHTML = html || toggleButtonHtml + closeButtonHtml + navHtml - toggleButton = document.querySelector('.nhsuk-header__menu-toggle') - closeButton = document.querySelector('.nhsuk-header__navigation-close') - nav = document.querySelector('.nhsuk-header__navigation') - MenuToggle() -} - -describe('NHS.UK menuToggle()', () => { - describe('does not throw an error', () => { - it('if no elements exists', () => { - MenuToggle() - }) - it('if no toggleButton exists', () => { - initTest(closeButtonHtml + navHtml) - expect(toggleButton).toBeNull() - expect(closeButton).toBeDefined() - expect(nav).toBeDefined() - }) - - it('if no closeButton exists', () => { - initTest(toggleButtonHtml + navHtml) - expect(toggleButton).toBeDefined() - expect(closeButton).toBeNull() - expect(nav).toBeDefined() - }) - - it('if no nav exists', () => { - initTest(toggleButtonHtml + closeButtonHtml) - expect(toggleButton).toBeDefined() - expect(closeButton).toBeDefined() - expect(nav).toBeNull() - }) - }) - - describe('Adds correct classes to elements', () => { - it('when toggleButton is clicked for the first time', () => { - initTest() - toggleButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') - expect(toggleButton.classList.contains('is-active')).toEqual(true) - expect(nav.classList.contains('js-show')).toEqual(true) - }) - - it('when toggleButton is clicked twice', () => { - initTest() - toggleButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') - expect(toggleButton.classList.contains('is-active')).toEqual(true) - expect(nav.classList.contains('js-show')).toEqual(true) - toggleButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('false') - expect(toggleButton.classList.contains('is-active')).toEqual(false) - expect(nav.classList.contains('js-show')).toEqual(false) - }) - - it('when toggleButton is clicked then closeButton is clicked', () => { - initTest() - toggleButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('true') - expect(toggleButton.classList.contains('is-active')).toEqual(true) - expect(nav.classList.contains('js-show')).toEqual(true) - closeButton.click() - expect(toggleButton.getAttribute('aria-expanded')).toEqual('false') - expect(toggleButton.classList.contains('is-active')).toEqual(false) - expect(nav.classList.contains('js-show')).toEqual(false) - }) - }) -}) diff --git a/packages/components/headerOld/searchToggle.js b/packages/components/headerOld/searchToggle.js deleted file mode 100644 index 10a67ba2d..000000000 --- a/packages/components/headerOld/searchToggle.js +++ /dev/null @@ -1,34 +0,0 @@ -import { toggleAttribute } from '../../common' - -/** - * Handle search show and hide for mobile - */ -export default () => { - // HTMLElements - const toggleButton = document.querySelector('#toggle-search') - const closeButton = document.querySelector('#close-search') - const searchContainer = document.querySelector('#wrap-search') - const menuSearchContainer = document.querySelector('#content-header') - - /** - * Toggle classes and attributes - * @param {Object} event click event object - */ - const toggleSearch = (event) => { - event.preventDefault() - // Toggle aria-expanded for accessibility - toggleAttribute(toggleButton, 'aria-expanded') - // Toggle classes to apply CSS - toggleButton.classList.toggle('is-active') - searchContainer.classList.toggle('js-show') - menuSearchContainer.classList.toggle('js-show') - } - - // Check all necessary HTMLElements exist - if (toggleButton && closeButton) { - // Attach toggleSearch as click to any elements which need it - ;[toggleButton, closeButton].forEach((elem) => { - elem.addEventListener('click', toggleSearch) - }) - } -} diff --git a/packages/components/headerOld/template.njk b/packages/components/headerOld/template.njk deleted file mode 100644 index a8aefc21d..000000000 --- a/packages/components/headerOld/template.njk +++ /dev/null @@ -1,208 +0,0 @@ -{# Define some defaults #} -{% set showNav = params.showNav if params.showNav else "false" %} -{% set showSearch = params.showSearch if params.showSearch else "false" %} - -{% set nhsLogo %} - -{% endset %} - - From dc99ccea64bbef13a8d08f876196f92d6b18323f Mon Sep 17 00:00:00 2001 From: roshaanbajwa Date: Tue, 8 Aug 2023 12:38:12 +0100 Subject: [PATCH 10/43] resolve linting errors --- packages/components/footer/README.md | 22 +++++++++++----------- packages/components/footer/_footer.scss | 9 ++++----- packages/components/header/README.md | 6 +++--- packages/components/header/_header.scss | 3 +-- 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/components/footer/README.md b/packages/components/footer/README.md index 01df3355b..ccda926ab 100644 --- a/packages/components/footer/README.md +++ b/packages/components/footer/README.md @@ -262,16 +262,16 @@ Find out more about the footer component and when to use it in the [NHS digital The footer Nunjucks macro takes the following arguments: -| Name | Type | Required | Description | -| ------------------ | ------ | -------- | --------------------------------------------------------------------------------------------- | -| **links** | array | No | Array of primary navigation items for use in the footer. | -| **links.[].url** | string | No | The href of a primary navigation item in the footer. | -| **links.[].label** | string | No | The label of a primary navigation item in the footer. | -| **classes** | string | No | Optional additional classes to add to the footer container. Separate each class with a space. | -| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the footer container. | -| **copyright** | string | No | The label for the copyright notice in the footer. | -| **policyLinks** | array | No | Array of policy navigation items for use in the footer. | -| **policyLinks.[].url** | string | No | The href of a policy navigation item in the footer. | -| **policyLinks.[].label** | string | No | The label of a policy navigation item in the +| Name | Type | Required | Description | +| ------------------------ | ------ | -------- | --------------------------------------------------------------------------------------------- | +| **links** | array | No | Array of primary navigation items for use in the footer. | +| **links.[].url** | string | No | The href of a primary navigation item in the footer. | +| **links.[].label** | string | No | The label of a primary navigation item in the footer. | +| **classes** | string | No | Optional additional classes to add to the footer container. Separate each class with a space. | +| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the footer container. | +| **copyright** | string | No | The label for the copyright notice in the footer. | +| **policyLinks** | array | No | Array of policy navigation items for use in the footer. | +| **policyLinks.[].url** | string | No | The href of a policy navigation item in the footer. | +| **policyLinks.[].label** | string | No | The label of a policy navigation item in the | If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning). diff --git a/packages/components/footer/_footer.scss b/packages/components/footer/_footer.scss index ac44fae99..62e8dfff0 100644 --- a/packages/components/footer/_footer.scss +++ b/packages/components/footer/_footer.scss @@ -62,7 +62,6 @@ } .beta-nhsuk-footer { - background-color: $color_nhsuk-grey-4; // border-top: nhsuk-spacing(1) solid $color_nhsuk-blue; margin-bottom: 15px; @@ -90,9 +89,9 @@ .beta-nhsuk-footer__list-policies { @include mq($until: desktop) { - border-top:1px solid #f0f4f5; - padding-top: 35px - } + border-top: 1px solid #f0f4f5; + padding-top: 35px; + } } .beta-nhsuk-footer__list-item { @@ -118,4 +117,4 @@ $beta-copyright-aaa: rgb(35, 31, 32); @include nhsuk-font(16); color: $beta-copyright-aaa; margin-bottom: 0; -} \ No newline at end of file +} diff --git a/packages/components/header/README.md b/packages/components/header/README.md index 17a4c0c8c..8149a9454 100644 --- a/packages/components/header/README.md +++ b/packages/components/header/README.md @@ -21,7 +21,7 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen