diff --git a/src/all/_all.scss b/src/all/_all.scss index b5313b4701..bc3eb172be 100644 --- a/src/all/_all.scss +++ b/src/all/_all.scss @@ -12,6 +12,7 @@ @import "../error-summary/error-summary"; @import "../fieldset/fieldset"; @import "../file-upload/file-upload"; +@import "../footer/footer"; @import "../input/input"; @import "../label/label"; @import "../panel/panel"; diff --git a/src/footer/README.md b/src/footer/README.md new file mode 100644 index 0000000000..3081c26861 --- /dev/null +++ b/src/footer/README.md @@ -0,0 +1,247 @@ +# Footer + +## Introduction + +The footer component is used at the bottom of every GOV.UK page, to help users navigate. + +## Guidance + +Find out when to use the Footer component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/footer). + +## Quick start examples + +### Component default + +[Preview the footer component](http://govuk-frontend-review.herokuapp.com/components/footer/preview) + +#### Markup + + + +#### Macro + + {{ govukFooter({}) }} + +## Dependencies + +To consume the footer component you must be running npm version 5 or above. + +## Installation + + npm install --save @govuk-frontend/footer + +## Requirements + +### Build tool configuration + +When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp + + .pipe(sass({ + includePaths: 'node_modules/' + })) + +### Static asset path configuration + +To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js: + + app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons'))) + +## Component arguments + +If you are using Nunjucks,then macros take the following arguments + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
metaobjectNoObject containing parameters for the meta navigation
meta.items[]arrayNoArray of items for use in the meta section of the footer
navigationarrayNoArray of items for use in the navigation section of the footer
navigation[].titlestringNoTitle for a section
navigation[].columnsintegerNoAmount of columns to display items in
navigation[].itemsarrayNoArray of items to display in the list
attributesobjectNoWill add attributes to the footer component root
classesstringNoWill add classes to the footer component root
containerClassesstringNoClasses that can be added to the container, useful if you want to make the footer full width.
+ +### Setting up Nunjucks views and paths + +Below is an example setup using express configure views: + + nunjucks.configure('node_modules/@govuk-frontend', { + autoescape: true, + cache: false, + express: app + }) + +## Getting updates + +To check whether you have the latest version of the button run: + + npm outdated @govuk-frontend/footer + +To update the latest version run: + + npm update @govuk-frontend/footer + +## Contribution + +Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository") + +## License + +MIT \ No newline at end of file diff --git a/src/footer/_footer.scss b/src/footer/_footer.scss new file mode 100644 index 0000000000..7163aafeb3 --- /dev/null +++ b/src/footer/_footer.scss @@ -0,0 +1,175 @@ +@include govuk-exports("footer") { + + $govuk-footer-background: $govuk-grey-3; + $govuk-footer-border-top: #a1acb2; + $govuk-footer-border: $govuk-grey-2; + $govuk-footer-text: #454a4c; + $govuk-footer-link: $govuk-footer-text; + $govuk-footer-link-hover: #171819; + + // Based on the `govuk-file-url("govuk-crest-2x.png");` image dimensions. + $govuk-footer-crest-image-width-2x: 250px; + $govuk-footer-crest-image-height-2x: 204px; + // Half the 2x image so that it fits the regular 1x size. + $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2); + $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2); + + .govuk-c-footer { + @include govuk-font-regular; + @include govuk-typography-responsive($govuk-font-16); + @include govuk-responsive-padding($govuk-spacing-responsive-7, "top"); + @include govuk-responsive-padding($govuk-spacing-responsive-5, "bottom"); + + border-top: 1px solid $govuk-footer-border-top; + color: $govuk-footer-text; + background: $govuk-footer-background; + } + + .govuk-c-footer__link { + @include govuk-focusable-fill; + + &:link, + &:visited { + color: $govuk-footer-link; + } + + &:hover, + &:active { + color: $govuk-footer-link-hover; + } + } + + .govuk-c-footer__section-break { + margin: 0; // Reset `
` default margins + @include govuk-responsive-margin($govuk-spacing-responsive-8, "bottom"); + border: 0; // Reset `
` default borders + border-bottom: 1px solid $govuk-footer-border; + } + + .govuk-c-footer__meta { + display: flex; // Support: Flexbox + margin-right: -$govuk-gutter-half; + margin-left: -$govuk-gutter-half; + flex-wrap: wrap; // Support: Flexbox + align-items: flex-end; // Support: Flexbox + justify-content: center; // Support: Flexbox + } + + .govuk-c-footer__meta-item { + margin-right: $govuk-gutter-half; + margin-bottom: $govuk-spacing-scale-5; + margin-left: $govuk-gutter-half; + } + + .govuk-c-footer__meta-item--grow { + flex: 1; // Support: Flexbox + @include mq ($until: tablet) { + flex-basis: 320px; // Support: Flexbox + } + } + + .govuk-c-footer__licence-logo { + display: inline-block; + margin-right: $govuk-spacing-scale-2; + @include mq ($until: desktop) { + margin-bottom: $govuk-spacing-scale-3; + } + vertical-align: top; + } + + .govuk-c-footer__licence-description { + display: inline-block; + } + + .govuk-c-footer__copyright-logo { + display: inline-block; + min-width: $govuk-footer-crest-image-width; + padding-top: ($govuk-footer-crest-image-height + $govuk-spacing-scale-2); + background-image: govuk-file-url("govuk-crest.png"); + @include govuk-h-device-pixel-ratio { + background-image: govuk-file-url("govuk-crest-2x.png"); + } + background-repeat: no-repeat; + background-position: 50% 0%; + background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height; + text-align: center; + text-decoration: none; + white-space: nowrap; + } + + .govuk-c-footer__inline-list { + margin-top: 0; + margin-bottom: $govuk-spacing-scale-3; + padding: 0; + } + + .govuk-c-footer__inline-list-item { + display: inline-block; + margin-right: $govuk-spacing-scale-3; + margin-bottom: $govuk-spacing-scale-1; + } + + .govuk-c-footer__heading { + @include govuk-responsive-margin($govuk-spacing-responsive-7, "bottom"); + padding-bottom: $govuk-spacing-scale-4; + @include mq ($until: tablet) { + padding-bottom: $govuk-spacing-scale-2; + } + border-bottom: 1px solid $govuk-footer-border; + } + + .govuk-c-footer__navigation { + display: flex; // Support: Flexbox + margin-right: -$govuk-gutter-half; + margin-left: -$govuk-gutter-half; + flex-wrap: wrap; // Support: Flexbox + } + + .govuk-c-footer__section { + display: inline-block; + margin-right: $govuk-gutter-half; + margin-bottom: $govuk-gutter; + margin-left: $govuk-gutter-half; + vertical-align: top; + // Ensure columns take up equal width (typically one-half:one-half) + flex-grow: 1; // Support: Flexbox + flex-shrink: 1; // Support: Flexbox + @include mq ($until: desktop) { + // Make sure columns do not drop below 200px in width + // Will typically result in wrapping, and end up in a single column on smaller screens. + flex-basis: 200px; // Support: Flexbox + } + } + + // Sections two-third:one-third on desktop + @include mq ($from: desktop) { + .govuk-c-footer__section:first-child { + flex-grow: 2; // Support: Flexbox + } + } + + .govuk-c-footer__list { + margin: 0; + padding: 0; + list-style: none; + column-gap: $govuk-gutter; // Support: Columns + } + + @include mq ($from: desktop) { + .govuk-c-footer__list--columns-2 { + column-count: 2; // Support: Columns + } + + .govuk-c-footer__list--columns-3 { + column-count: 3; // Support: Columns + } + } + + .govuk-c-footer__list-item { + @include govuk-responsive-margin($govuk-spacing-responsive-4, "bottom"); + } + + .govuk-c-footer__list-item:last-child { + margin-bottom: 0; + } +} diff --git a/src/footer/footer.njk b/src/footer/footer.njk new file mode 100644 index 0000000000..4cfcceefb5 --- /dev/null +++ b/src/footer/footer.njk @@ -0,0 +1,3 @@ +{% from "footer/macro.njk" import govukFooter %} + +{{ govukFooter() }} diff --git a/src/footer/footer.yaml b/src/footer/footer.yaml new file mode 100644 index 0000000000..1ad308c50d --- /dev/null +++ b/src/footer/footer.yaml @@ -0,0 +1,145 @@ +accessibilityCriteria: | + Text and links in the Footer must: + - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast) + + Links in the Footer must: + - accept focus + - be focusable with a keyboard + - be usable with a keyboard + - indicate when they have focus + - change in appearance when touched (in the touch-down state) + - change in appearance when hovered + - have visible text + + Images in the Footer must: + - be presentational when linked to from accompanying text (Open Government Licence (OGL) icon). + - have a meaningful accessible name if also a linked element (crest icon). + + Landmarks and Roles in the Footer should: + - avoid navigation landmarks or roles + "The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary." - (https://www.w3.org/TR/html52/sections.html#the-nav-element) + Note: This decision has been made based on prior experience seeing removal of overuse of `