-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Quieten sass * Componentise the search UI To separate these components from external CSS and decouple it from the rest of the app, I've - moved the styles to a separate components directory - prefixed classes with `fmj-` - removed hardcoded colours and URLs - adopted the Block-Element-Modifier naming convention for consistency with GOV.UK and MOJ design systems I'm hoping that by introducing this structure, we can make it easier to either a) swap out the component if one is added to one of the design systems, or b) contribute back to the MOJ design system later if it meets the contribution criteria Originally I was planning to also extract javascript enhancements we've made to search, but I ended up leaving these as they are, because they are unrelated to the search bar component itself, and neither of them are needed on more than one page. * Add landmark and usage instructions to search
- Loading branch information
Showing
10 changed files
with
174 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,50 @@ | ||
| $govuk-assets-path: '/static/assets/'; | ||
| $moj-assets-path: '/static/assets/'; | ||
| $govuk-assets-path: "/static/assets/"; | ||
| $moj-assets-path: "/static/assets/"; | ||
| $fmj-images-path: "/static/assets/images"; | ||
|
|
||
| // Removes need to put classes on all elements | ||
| $govuk-global-styles: true; | ||
|
|
||
| @import "node_modules/govuk-frontend/dist/govuk/all"; | ||
| @import "node_modules/@ministryofjustice/frontend/moj/all"; | ||
| @import "./components/search"; | ||
| @import "./glossary"; | ||
| @import "./details"; | ||
|
|
||
| .js-required { | ||
| display: none; | ||
| display: none; | ||
| } | ||
|
|
||
| mark { | ||
| background-color: inherit; | ||
| color: inherit; | ||
| @include govuk-typography-weight-bold($important: false); | ||
| background-color: inherit; | ||
| color: inherit; | ||
| @include govuk-typography-weight-bold($important: false); | ||
| } | ||
|
|
||
| .extra-skip-link:active, .extra-skip-link:focus { | ||
| margin-bottom: govuk-spacing(3) !important; | ||
| .extra-skip-link:active, | ||
| .extra-skip-link:focus { | ||
| margin-bottom: govuk-spacing(3) !important; | ||
| } | ||
|
|
||
| .column-description { | ||
| @include govuk-media-query($from: desktop) { | ||
| max-width: calc($govuk-page-width / 2); | ||
| overflow-wrap: break-word; | ||
| } | ||
| @include govuk-media-query($from: desktop) { | ||
| max-width: calc($govuk-page-width / 2); | ||
| overflow-wrap: break-word; | ||
| } | ||
| } | ||
|
|
||
| .wide-table { | ||
| table-layout: fixed; | ||
| width: 100%; | ||
| overflow-wrap: break-word; | ||
| table-layout: fixed; | ||
| width: 100%; | ||
| overflow-wrap: break-word; | ||
| } | ||
|
|
||
| code { | ||
| font-family: monaco, Consolas, "Lucida Console", monospace; | ||
| @include govuk-font-size($size: 16); /* Slightly smaller font size */ | ||
| background-color: govuk-colour("light-grey"); | ||
| border: 1px solid #ddd; | ||
| border-radius: 2px; /* Rounded corners */ | ||
| padding: 1px 3px; /* Padding around the text */ | ||
| color: govuk-colour("black"); | ||
| font-family: monaco, Consolas, "Lucida Console", monospace; | ||
| @include govuk-font-size($size: 16); /* Slightly smaller font size */ | ||
| background-color: govuk-colour("light-grey"); | ||
| border: 1px solid #ddd; | ||
| border-radius: 2px; /* Rounded corners */ | ||
| padding: 1px 3px; /* Padding around the text */ | ||
| color: govuk-colour("black"); | ||
| } | ||
|
|
||
| @import './glossary'; | ||
| @import './details'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| # Search component | ||
|
|
||
| This enhances a [GOV.UK text input](https://design-system.service.gov.uk/components/text-input/) to act as a search input. | ||
|
|
||
| It's intended for use as a service-wide search or as a way of filtering long manuals or lists. | ||
|
|
||
| ## Similar components elsewhere | ||
|
|
||
| - [GOV.UK publishing components search](https://components.publishing.service.gov.uk/component-guide/search) | ||
| - [Explore education statistics search](https://github.com/dfe-analytical-services/explore-education-statistics/blob/8a9aa729636eade2808895ad71a56bcb984d3c53/src/explore-education-statistics-common/src/components/form/FormSearchBar.module.scss) | ||
| - [MOJ search](https://design-patterns.service.justice.gov.uk/components/search/) and [icon](https://github.com/dfe-analytical-services/explore-education-statistics/blob/8a9aa729636eade2808895ad71a56bcb984d3c53/src/explore-education-statistics-common/src/components/SearchIcon.tsx#L4) | ||
| - [MOJ filter](https://design-patterns.service.justice.gov.uk/components/filter/) | ||
|
|
||
| ## Expected behaviours | ||
|
|
||
| - Clearable via the "X" button or pressing escape | ||
| - Focusable, with a focus outline | ||
|
|
||
| ## Usage | ||
|
|
||
| The search box should: | ||
|
|
||
| - be used inside a form or other element with `role="search"`, to indicate it as a [search landmark](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/). | ||
| - have a visually hidden label to identify the search functionality | ||
|
|
||
| ### With no search icon | ||
|
|
||
| This variant should be used only for search-as-you-type behaviour that does not require submitting a form. | ||
|
|
||
| See `enhanced-glossary.js`. | ||
|
|
||
| ```html | ||
| <div class="fmj-search govuk-form-group"> | ||
| <label for="filter-input" class="govuk-label">Filter this page</label> | ||
| <input class="govuk-input" type="search" placeholder="Filter this page" /> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### With an integrated search button | ||
|
|
||
| This variant submits the form when the button is pressed or the user presses enter. | ||
|
|
||
| ```html | ||
| <form action="" method="get" role="search" class="govuk-!-margin-bottom-4"> | ||
| <div class="fmj-search fmj-search--compact govuk-form-group"> | ||
| <label | ||
| for="search-input" | ||
| class="govuk-label govuk-visually-hidden-focusable" | ||
| >Search query</label | ||
| > | ||
| <input class="search-input govuk-input" type="search" /> | ||
| <button type="submit"> | ||
| <svg | ||
| aria-hidden="true" | ||
| focusable="false" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 36 36" | ||
| width="40" | ||
| height="40" | ||
| > | ||
| <path | ||
| d="M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z" | ||
| fill="currentColor" | ||
| ></path> | ||
| </svg> | ||
| <label | ||
| for="search-button" | ||
| class="govuk-label govuk-visually-hidden-focusable" | ||
| >Search</label | ||
| > | ||
| </button> | ||
| </div> | ||
| </form> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| // Base enhancements to search fields | ||
| .fmj-search { | ||
| .govuk-input[type="search"] { | ||
| &:focus { | ||
| z-index: 1; | ||
| } | ||
|
|
||
| // Enhance the close button. | ||
| // Note: this is a non-standard CSS feature and will not do anything in Firefox. | ||
| // https://caniuse.com/mdn-css_selectors_-webkit-search-cancel-button | ||
| &::-webkit-search-cancel-button { | ||
| -webkit-appearance: none; | ||
| background-image: url(#{$fmj-images-path}/icon-close-cross-black.svg); | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| cursor: pointer; | ||
| height: 15px; | ||
| margin-left: 0; | ||
| margin-right: 2px; | ||
| width: 15px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Variant with search button adjacent to the input | ||
| .fmj-search--compact { | ||
| display: flex; | ||
|
|
||
| .govuk-input[type="search"] { | ||
| border-right-width: 0; | ||
|
|
||
| &:focus { | ||
| border-right-width: 2px; | ||
| z-index: 1; | ||
| } | ||
| } | ||
|
|
||
| svg { | ||
| height: 100%; | ||
| } | ||
|
|
||
| button { | ||
| background-color: govuk-colour("blue"); | ||
| border: 0; | ||
| color: govuk-colour("white"); | ||
| cursor: pointer; | ||
| height: 40px; | ||
| margin-bottom: 0; | ||
| padding: 0; | ||
| width: 40px; | ||
| } | ||
|
|
||
| button:focus { | ||
| box-shadow: inset 0 0 0 4px govuk-colour("black"); | ||
| outline: 3px solid govuk-colour("yellow"); | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters