Skip to content

Commit

Permalink
Added a new Variant in Header Component (#3459)
Browse files Browse the repository at this point in the history 
Co-authored-by: Precious Onyenaucheya <[email protected]>
Co-authored-by: rmccar <[email protected]>
  • Loading branch information
@SriHV @precious-onyenaucheya-ons @rmccar
3 people authored Dec 17, 2024
1 parent e5973e6 commit f32bd96
Show file tree
Hide file tree
Showing 8 changed files with 224 additions and 182 deletions.
156 changes: 83 additions & 73 deletions __snapshots__/layout/_template.spec.js.snap
View file
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
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
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
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
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 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 `<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

0 comments on commit f32bd96

Please sign in to comment.