Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a new Variant in Header Component #3459

Merged
merged 10 commits into from
Dec 17, 2024
+224 −182
Merged

Added a new Variant in Header Component #3459

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
03204a1
changes as per ticket
SriHV Dec 15, 2024
bb46697
visual tests
SriHV Dec 15, 2024
fb80135
changes as per comments
SriHV Dec 16, 2024
76a118a
Deleting visual tests
SriHV Dec 16, 2024
aecf08e
changes in tests
SriHV Dec 17, 2024
7116a80
Update src/components/header/_macro-options.md
SriHV Dec 17, 2024
68953c7
fixing typo
SriHV Dec 17, 2024
7ef2510
Merge branch 'enhancement/208/new-header-variant' of https://github.c…
SriHV Dec 17, 2024
849762d
Update src/components/header/_macro.spec.js
SriHV Dec 17, 2024
6155e1e
Merge branch 'main' into enhancement/208/new-header-variant
SriHV Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 83 additions & 73 deletions __snapshots__/layout/_template.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,28 +234,30 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
</div>

</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">



<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">




<div class="ons-header__title">Social survey</div>



<div class="ons-header__title">Social survey</div>




</div>



</div>



</div>
</div>
</div>


</header>

Expand Down Expand Up @@ -473,28 +475,30 @@ exports[`base page template matches the footer block override snapshot 1`] = `
</div>

</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">



<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">




<div class="ons-header__title">Social survey</div>



<div class="ons-header__title">Social survey</div>




</div>



</div>



</div>
</div>
</div>


</header>

Expand Down Expand Up @@ -882,29 +886,30 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</nav>

</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">



<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">





<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">ONS Service</div>
</a>


<a class="ons-header__title-link" href="#0">
<div class="ons-header__title">ONS Service</div>
</a>



</div>
</div>





<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">


<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">




Expand Down Expand Up @@ -936,14 +941,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `

</button>

</div>


<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">


</div>


<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">







Expand Down Expand Up @@ -975,12 +980,13 @@ exports[`base page template matches the full configuration snapshot 1`] = `

</button>


</div>


</div>

</div>
</div>
</div>
</div>




Expand Down Expand Up @@ -1961,28 +1967,30 @@ exports[`base page template matches the meta block override snapshot 1`] = `
</div>

</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">



<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">




<div class="ons-header__title">Social survey</div>



<div class="ons-header__title">Social survey</div>




</div>



</div>



</div>
</div>
</div>


</header>

Expand Down Expand Up @@ -2184,28 +2192,30 @@ exports[`base page template matches the social block override snapshot 1`] = `
</div>

</div>
<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">



<div class="ons-header__main">
<div class="ons-container">
<div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">




<div class="ons-header__title">Social survey</div>



<div class="ons-header__title">Social survey</div>




</div>



</div>



</div>
</div>
</div>


</header>

Expand Down
3 changes: 3 additions & 0 deletions ...nce/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...ence/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...ence/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ..._components_header_example-header-with-navigation-only_0_document_0_desktop.png
View file
Open in desktop
rmccar marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...__components_header_example-header-with-navigation-only_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...__components_header_example-header-with-navigation-only_0_document_2_mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 19 additions & 19 deletions src/components/header/_macro-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<header>` 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`<MastheadLogo>` | false | Settings for a [custom organisation logo](#mastheadlogo) in the masthead. Defaults to the ONS logo. |
| language | object`<Language>` | false | Settings for the [language selector](#language) |
| serviceLinks | object`<ServiceLinks>` | 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 `<h1>` heading |
| titleLogo | object`<TitleLogo>` | 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`<SignOutButton>` | false | Settings for the [sign out button](#signoutbutton) in the header used to exit a transactional service |
| navigation | array`<Navigation>` | 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 `<header>` 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`<MastheadLogo>` | false | Settings for a [custom organisation logo](#mastheadlogo) in the masthead. Defaults to the ONS logo. |
| language | object`<Language>` | false | Settings for the [language selector](#language) |
| serviceLinks | object`<ServiceLinks>` | false | Settings for the [service links](#servicelinks) in the masthead |
| title | string | true (unless `titleLogo` is set or variant is set to nav-only) | The title for the service |
| description | string | false | Tagline or description for the service |
rmccar marked this conversation as resolved.
Show resolved Hide resolved
SriHV marked this conversation as resolved.
Show resolved Hide resolved
| titleAsH1 | boolean | false | Override to wrap the header `title` in an `<h1>` heading |
| titleLogo | object`<TitleLogo>` | 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`<SignOutButton>` | false | Settings for the [sign out button](#signoutbutton) in the header used to exit a transactional service |
| navigation | array`<Navigation>` | false | Settings for the [main menu links](#navigation) |
| siteSearchAutosuggest | `Autosuggest` [_(ref)_](/components/autosuggest) | false | Sets the autosuggest functionality in the header |

## MastheadLogo

Expand Down
Loading
Loading