From f32bd96c8dad5c01d1f000d71555c2bd37ede107 Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Tue, 17 Dec 2024 17:44:07 +0000 Subject: [PATCH] Added a new Variant in Header Component (#3459) Co-authored-by: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- __snapshots__/layout/_template.spec.js.snap | 156 ++++++++------- ...mple-header-basic_0_document_0_desktop.png | 3 + ...ample-header-basic_0_document_1_tablet.png | 3 + ...ample-header-basic_0_document_2_mobile.png | 3 + src/components/header/_macro-options.md | 38 ++-- src/components/header/_macro.njk | 182 +++++++++--------- src/components/header/_macro.spec.js | 10 + .../header/example-header-basic.njk | 11 ++ 8 files changed, 224 insertions(+), 182 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png create mode 100644 src/components/header/example-header-basic.njk diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index 62e0c6dbc0..29380095bf 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -234,28 +234,30 @@ exports[`base page template matches the favicons block override snapshot 1`] = ` -
-
-
-
- - + +
+
+
+
- -
Social survey
+ + + +
Social survey
+ + +
+
- - -
-
+ @@ -473,28 +475,30 @@ exports[`base page template matches the footer block override snapshot 1`] = `
-
-
-
-
- - + +
+
+
+
- -
Social survey
+ + + +
Social survey
+ + +
+
- - -
-
+ @@ -882,29 +886,30 @@ exports[`base page template matches the full configuration snapshot 1`] = `
-
-
-
-
- - + +
+
+
+
+ + + + +
ONS Service
+ + - -
ONS Service
- - - -
+
- - -
+ +
+ @@ -936,14 +941,14 @@ exports[`base page template matches the full configuration snapshot 1`] = ` -
- - -
- - +
+ + +
+ + @@ -975,12 +980,13 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - -
- + +
+ +
-
+ @@ -1961,28 +1967,30 @@ exports[`base page template matches the meta block override snapshot 1`] = `
-
-
-
-
- - + +
+
+
+
- -
Social survey
+ + + +
Social survey
+ + +
+
- - -
-
+ @@ -2184,28 +2192,30 @@ exports[`base page template matches the social block override snapshot 1`] = `
-
-
-
-
- - + +
+
+
+
- -
Social survey
+ + + +
Social survey
+ + +
+
- - -
-
+ diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png new file mode 100644 index 0000000000..84b7f01461 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:03c53a0bcd6fe29cd4c9fe59227cc4f2612f00f0a08eb0c2a53d7334c241fcd6 +size 14266 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png new file mode 100644 index 0000000000..f34345bbff --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:65f329afc04fde5ff5f541b2712b183accab1446bd76d6944042949de4413fab +size 9069 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png new file mode 100644 index 0000000000..75468ba73d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fb39535ce7f5f1affd77107ef3155d32b4197e7b0805065b221d379d05f9e88f +size 5422 diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md index 76837cfafd..b1cf9c4c18 100644 --- a/src/components/header/_macro-options.md +++ b/src/components/header/_macro-options.md @@ -1,22 +1,22 @@ -| Name | Type | Required | Description | -| --------------------- | ------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -| phase | `PhaseBanner` [_(ref)_](/components/phase-banner) | false | Settings to set the Phase banner component within the HTML `
` element | -| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px | -| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport | -| classes | string | false | Classes to add to the wrapping `header` | -| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral" and “description” | -| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML `href` attribute for the link. | -| mastheadLogo | object`` | false | Settings for a [custom organisation logo](#mastheadlogo) in the masthead. Defaults to the ONS logo. | -| language | object`` | false | Settings for the [language selector](#language) | -| serviceLinks | object`` | false | Settings for the [service links](#servicelinks) in the masthead | -| title | string | true (unless `titleLogo` is set) | The title for the service | -| description | string | false | Tagline or description for the service | -| titleAsH1 | boolean | false | Override to wrap the header `title` in an `

` heading | -| titleLogo | object`` | false | Settings for a [custom title logo](#titlelogo) in the header. | -| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML `href` attribute for the link. | -| button | object`` | false | Settings for the [sign out button](#signoutbutton) in the header used to exit a transactional service | -| navigation | array`` | false | Settings for the [main menu links](#navigation) | -| siteSearchAutosuggest | `Autosuggest` [_(ref)_](/components/autosuggest) | false | Sets the autosuggest functionality in the header | +| Name | Type | Required | Description | +| --------------------- | ------------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| phase | `PhaseBanner` [_(ref)_](/components/phase-banner) | false | Settings to set the Phase banner component within the HTML `
` element | +| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px | +| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport | +| classes | string | false | Classes to add to the wrapping `header` | +| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" | +| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML `href` attribute for the link. | +| mastheadLogo | object`` | false | Settings for a [custom organisation logo](#mastheadlogo) in the masthead. Defaults to the ONS logo. | +| language | object`` | false | Settings for the [language selector](#language) | +| serviceLinks | object`` | false | Settings for the [service links](#servicelinks) in the masthead | +| title | string | true (unless `titleLogo` is set or variant is set to basic) | The title for the service | +| description | string | false | Tagline or description for the service | +| titleAsH1 | boolean | false | Override to wrap the header `title` in an `

` heading | +| titleLogo | object`` | false | Settings for a [custom title logo](#titlelogo) in the header. | +| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML `href` attribute for the link. | +| button | object`` | false | Settings for the [sign out button](#signoutbutton) in the header used to exit a transactional service | +| navigation | array`` | false | Settings for the [main menu links](#navigation) | +| siteSearchAutosuggest | `Autosuggest` [_(ref)_](/components/autosuggest) | false | Sets the autosuggest functionality in the header | ## MastheadLogo diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk index 317e314464..d75d0981b4 100644 --- a/src/components/header/_macro.njk +++ b/src/components/header/_macro.njk @@ -218,118 +218,120 @@ {% endif %}

-
-
-
-
- {% if params.titleLogo.large %} + {% if params.variants != "basic" %} +
+
+
+
+ {% if params.titleLogo.large %} - {% set title %} - - {% if params.titleLogo.small %} + {% set title %} - {% endif %} - {% endset %} + {% if params.titleLogo.small %} + + {% endif %} + {% endset %} - {% if params.titleUrl %} - {{ title | safe }} + {% if params.titleUrl %} + {{ title | safe }} + {% else %} + {{ title | safe }} + {% endif %} {% else %} - {{ title | safe }} - {% endif %} - {% else %} - {% set title %} - {{ openingTag | safe }} - class="ons-header__title">{{ params.title }}{{ closingTag | safe }} - {% endset %} + {% set title %} + {{ openingTag | safe }} + class="ons-header__title">{{ params.title }}{{ closingTag | safe }} + {% endset %} - {% if params.titleUrl %} - {{ title | safe }} - {% else %} - {{ title | safe }} + {% if params.titleUrl %} + {{ title | safe }} + {% else %} + {{ title | safe }} + {% endif %} {% endif %} - {% endif %} - {% if params.description %} -

{{ params.description }}

- {% endif %} -
+ {% if params.description %} +

{{ params.description }}

+ {% endif %} +
- {% if params.button %} - {% if params.variants == 'neutral' %} - {% set buttonVariant = "ghost-dark" %} - {% else %} - {% set buttonVariant = "ghost" %} + {% if params.button %} + {% if params.variants == 'neutral' %} + {% set buttonVariant = "ghost-dark" %} + {% else %} + {% set buttonVariant = "ghost" %} + {% endif %} +
+ {{ + onsButton({ + "text": params.button.text, + "classes": "ons-u-d-no@2xs@l" if params.navigation else "ons-u-d-no@2xs@m", + "variants": buttonVariant, + "name": params.button.name, + "attributes": params.button.attributes, + "url": params.button.url, + "iconType": "exit", + "iconPosition": "after" + }) + }} +
{% endif %} -
- {{ - onsButton({ - "text": params.button.text, - "classes": "ons-u-d-no@2xs@l" if params.navigation else "ons-u-d-no@2xs@m", - "variants": buttonVariant, - "name": params.button.name, - "attributes": params.button.attributes, - "url": params.button.url, - "iconType": "exit", - "iconPosition": "after" - }) - }} -
- {% endif %} - {% if params.navigation or params.siteSearchAutosuggest %} -
- {% if params.siteSearchAutosuggest %} - {% if params.variants == 'neutral' %} - {% set buttonVariant = ["small", "ghost-dark"] %} - {% else %} - {% set buttonVariant = ["small", "ghost"] %} + {% if params.navigation or params.siteSearchAutosuggest %} +
+ {% if params.siteSearchAutosuggest %} + {% if params.variants == 'neutral' %} + {% set buttonVariant = ["small", "ghost-dark"] %} + {% else %} + {% set buttonVariant = ["small", "ghost"] %} + {% endif %} + + {{ + onsButton({ + "text": "Search", + "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search", + "variants": buttonVariant, + "iconType": "search", + "iconPosition": "only", + "attributes": { + "aria-label": "Toggle search" , + "aria-controls": "ons-site-search", + "aria-expanded": "false" + } + }) + }} + {% endif %} - + {% if params.navigation.toggleNavigationButton %} + {% set buttonVariant = ["mobile", "ghost"] %} {{ onsButton({ - "text": "Search", - "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search", + "text": params.navigation.toggleNavigationButton.text, + "classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l", "variants": buttonVariant, - "iconType": "search", - "iconPosition": "only", "attributes": { - "aria-label": "Toggle search" , - "aria-controls": "ons-site-search", + "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") , + "aria-controls": params.navigation.id, "aria-expanded": "false" } }) }} - - {% endif %} - {% if params.navigation.toggleNavigationButton %} - {% set buttonVariant = ["mobile", "ghost"] %} - {{ - onsButton({ - "text": params.navigation.toggleNavigationButton.text, - "classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l", - "variants": buttonVariant, - "attributes": { - "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") , - "aria-controls": params.navigation.id, - "aria-expanded": "false" - } - }) - }} - {% endif %} -
- {% endif %} + {% endif %} +
+ {% endif %} +
-
+ {% endif %} {% if params.navigation %} {{ onsNavigation(params) }} {% endif %} diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js index 1505ab3112..81085ea9cc 100644 --- a/src/components/header/_macro.spec.js +++ b/src/components/header/_macro.spec.js @@ -43,6 +43,16 @@ describe('FOR: Macro: Header', () => { expect($('.ons-header--variant-b').length).toBe(1); }); }); + describe('WHEN: variants is set to basic', () => { + test('THEN: does not render the main part of the header', () => { + const $ = cheerio.load( + renderComponent('header', { + variants: 'basic', + }), + ); + expect($('.ons-header > .ons-header__main').length).toBe(0); + }); + }); }); describe('GIVEN: Params: classes', () => { describe('WHEN: classes are provided', () => { diff --git a/src/components/header/example-header-basic.njk b/src/components/header/example-header-basic.njk new file mode 100644 index 0000000000..1204ca4c6a --- /dev/null +++ b/src/components/header/example-header-basic.njk @@ -0,0 +1,11 @@ +--- +'fullWidth': true +--- + +{% from "components/header/_macro.njk" import onsHeader %} + +{{ + onsHeader({ + "variants": 'basic' + }) +}}