Skip to content

Commit

Permalink
add initial changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@precious-onyenaucheya-ons
precious-onyenaucheya-ons committed Jan 29, 2025
1 parent d3d5733 commit fc52f54
Show file tree
Hide file tree
Showing 10 changed files with 381 additions and 22 deletions.
15 changes: 15 additions & 0 deletions __snapshots__/layout/_template.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,12 @@ exports[`base page template matches the favicons block override snapshot 1`] = `

</div>


</div>
</div>



</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -471,9 +474,12 @@ exports[`base page template matches the footer block override snapshot 1`] = `

</div>


</div>
</div>



</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -844,6 +850,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `

</div>


</div>
</div>

Expand Down Expand Up @@ -885,6 +892,8 @@ exports[`base page template matches the full configuration snapshot 1`] = `

</nav>



</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -1999,9 +2008,12 @@ exports[`base page template matches the meta block override snapshot 1`] = `

</div>


</div>
</div>



</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -2224,9 +2236,12 @@ exports[`base page template matches the social block override snapshot 1`] = `

</div>


</div>
</div>



</div>

<div class="ons-header__main">
Expand Down
95 changes: 95 additions & 0 deletions src/components/button/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,24 @@ $button-shadow-size: 3px;
}
}

&--header-search &,
&--header-search:active &,
&--header-search.active &,
&--header-search:active:focus &,
&--header-search.active:focus & {
&__inner {
border-radius: 0;
background: var(--ons-color-ocean-blue) !important;
box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow) !important;
}
}

&--header-search:focus & {
&__inner {
background: var(--ons-color-focus) !important;
}
}

&__inner {
background: var(--ons-color-button);
border-radius: $input-radius;
Expand Down Expand Up @@ -153,6 +171,12 @@ $button-shadow-size: 3px;
}
}

&--header-search:hover & {
&__inner {
background: var(--ons-color-ocean-blue);
}
}

&--secondary:hover:not(&--disabled) & {
&__inner {
background: var(--ons-color-button-secondary-hover);
Expand Down Expand Up @@ -550,6 +574,77 @@ $button-shadow-size: 3px;
}
}
}

&--search-icon {
align-items: center;
display: flex;
height: 67px;
padding: 0 1.5rem;
@include mq(l) {
height: 72px;
}
}

&--search-icon & {
&__inner {
background: rgb(0 0 0 / 0%);
border: 0;
border-radius: 0;
box-shadow: none;
color: var(--ons-color-text-link);
font-weight: 700;
padding: 0;
.ons-icon {
fill: var(--ons-color-text-link);
height: 1rem;
margin-top: 0;
width: 1rem;
}
}
}

&--search-icon:focus & {
&__inner {
background: none;
box-shadow: none;
}
}

&--search-icon:focus:hover:not(:active, .active) {
.ons-btn__inner {
background: none;
}
}

&--search-icon:active,
&--search-icon[aria-expanded='true'] {
background-color: var(--ons-color-branded-tint);
}

&--search-icon:hover &,
&--search-icon:active &,
&--search-icon.active & {
&__inner {
background: none;
color: var(--ons-color-text-link-hover);
.ons-icon {
fill: var(--ons-color-text-link-hover);
}
}
}

&--search-icon:active &,
&--search-icon:active:focus &,
&--search-icon.active &,
&--search-icon.active:focus & {
&__inner {
background: none;
color: var(--ons-color-text-link-hover);
.ons-icon {
fill: var(--ons-color-text-link-hover);
}
}
}
}

.ons-search__btn {
Expand Down
21 changes: 21 additions & 0 deletions src/components/header/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,27 @@
}
}

&--basic & {
&__grid-top {
padding: 0;
}
}

&-nav-search {
background-color: var(--ons-color-branded-tint);
margin-bottom: 1rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
width: 100%;
&__key-list {
border-bottom: 1px solid var(--ons-color-ocean-blue);
margin-bottom: 2.5rem;
padding-bottom: 2.5rem;
padding-left: 0;
row-gap: 1rem;
}
}

.ons-btn {
top: 0 !important;
}
Expand Down
54 changes: 36 additions & 18 deletions src/components/header/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
| 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 |
| 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 |
| 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 |
| searchLinks | object`<SearchLinks>` | false | Settings for the [search button navigation](#searchLinks) in the masthead |

## MastheadLogo

Expand Down Expand Up @@ -61,6 +62,23 @@
| itemsList | array`<Item>` | true | Settings for an array of [list items](#item) for each navigation link |
| toggleServicesButton | object`<ToggleButton>` | true | Settings for the [mobile service links toggle button](#togglebutton) |

## SearchLinks

| Name | Type | Required | Description |
| ------------------ | ---------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| id | string | true | The HTML `id` of the `search button` element. Used for the `aria-controls` attribute for the search toggle button displayed on small viewports. |
| classes | string | false | Classes to add to the `search button` element |
| ariaLabel | string | false | The `aria-label` attribute added to the `search button` element. Defaults to Search navigation”. |
| popularSearches | array`<SearchItem>` | true | Settings for an array of [popular searches](#searchitem) for each search link |
| toggleSearchButton | object`<ToggleButton>` | true | Settings for the [search toggle button](#toggleButton) |

## SearchItem

| Name | Type | Required | Description |
| ---- | ------ | -------- | ------------------------------------- |
| text | string | false | The text for the popular search item. |
| url | string | true | The URL for the popular search item |

## Language

| Name | Type | Required | Description |
Expand Down
Loading

0 comments on commit fc52f54

Please sign in to comment.