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

Add search button to header #3483

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+412 −27
Open

Add search button to header #3483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b021a18
add initial changes
precious-onyenaucheya-ons Jan 29, 2025
7bf2beb
update styling and approve visual test
precious-onyenaucheya-ons Jan 30, 2025
4d81fc4
limit popular searches
precious-onyenaucheya-ons Jan 30, 2025
b0eb10b
rename class
precious-onyenaucheya-ons Jan 30, 2025
586e897
remove redundant styling
precious-onyenaucheya-ons Jan 30, 2025
672fa08
Merge branch 'main' into feature/162-header-search-button
precious-onyenaucheya-ons Feb 6, 2025
6b43a75
update styling
precious-onyenaucheya-ons Feb 6, 2025
b375a29
update onslogo size
precious-onyenaucheya-ons Feb 7, 2025
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
15 changes: 15 additions & 0 deletions __snapshots__/layout/_template.spec.js.snap
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion ...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.
2 changes: 1 addition & 1 deletion ...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.
2 changes: 1 addition & 1 deletion ...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 ...t__components_header_example-header-with-search-button_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 ...st__components_header_example-header-with-search-button_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 ...st__components_header_example-header-with-search-button_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.
102 changes: 102 additions & 0 deletions src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,32 @@ $button-shadow-size: 3px;
}
}

&--header-search &,
&--header-search:active &,
&--header-search.active &,
&--header-search:active:focus &,
&--header-search.active:focus & {
&__inner {
padding: 0.875rem !important;
border: 0;
border-radius: 0;
box-shadow: none !important;
background: var(--ons-color-ocean-blue) !important;
.ons-icon {
fill: var(--ons-color-text-inverse) !important;
height: 28px;
width: 28px;
}
}
}

&--header-search:focus & {
&__inner {
z-index: 4;
outline: 4px solid var(--ons-color-focus);
}
}

&__inner {
background: var(--ons-color-button);
border-radius: $input-radius;
Expand Down Expand Up @@ -551,6 +577,82 @@ $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%);
box-shadow: none;
padding: 0;
.ons-icon {
@extend .ons-u-mr-no;

fill: var(--ons-color-text-link);
height: 1.5rem;
margin-top: 0;
width: 1.5rem;
}
}
}

&--search-icon:focus {
border-color: var(--ons-color-black);
}

&--search-icon:hover {
border-bottom: 4px solid rgb(0 0 0 / 0%);
border-color: var(--ons-color-text-link-hover);
}

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

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

&--search-icon:focus &,
&--search-icon:hover &,
&--search-icon:active &,
&--search-icon.active & {
&__inner {
background: none;
box-shadow: 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
22 changes: 22 additions & 0 deletions src/components/header/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,28 @@
}
}

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

&-nav-search {
background-color: var(--ons-color-branded-tint);
margin-bottom: 1rem;
@extend .ons-u-pt-2xl;
@extend .ons-u-pb-2xl;

width: 100%;
&__input {
border-bottom: 1px solid var(--ons-color-ocean-blue);
@extend .ons-u-mb-2xl;
@extend .ons-u-pb-2xl;

row-gap: 1rem;
}
}

.ons-btn {
top: 0 !important;
}
Expand Down
54 changes: 36 additions & 18 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,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
Loading