diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss index 59f1e73..aa53794 100644 --- a/docs/assets/css/app.scss +++ b/docs/assets/css/app.scss @@ -8,6 +8,7 @@ @import "node_modules/nhsuk-frontend/packages/components/hero/hero"; @import "node_modules/nhsuk-frontend/packages/components/tabs/tabs"; @import "node_modules/nhsuk-frontend/packages/components/summary-list/summary-list"; +@import "node_modules/nhsuk-frontend/packages/components/button/button"; @import "node_modules/prismjs/themes/prism"; diff --git a/docs/components/buttons.md b/docs/components/buttons.md new file mode 100644 index 0000000..3c4d328 --- /dev/null +++ b/docs/components/buttons.md @@ -0,0 +1,41 @@ +--- +layout: layouts/component.njk +title: Buttons +description: Use buttons to help users to carry out an action. +backlogID: 12 +tags: + - component +--- + +## How to use + +We use the [NHS design system button](https://service-manual.nhs.uk/design-system/components/buttons) with the modifier class `nhsapp-button` to make buttons full width on smaller screens. + +### Primary button + +{% example "buttons/button-primary.njk" %} + +### Secondary button + +{% example "buttons/button-secondary.njk" %} + +### Buttons on dark backgrounds (reverse button) + +{% example "buttons/button-reverse.njk" %} + +### Grouping buttons + +Use a button group when two or more buttons are placed together. + +{% example "buttons/button-group.njk" %} + +Any links within a button group will automatically align with the buttons. + +{% example "buttons/button-group-link.njk" %} + +## Research + +Testing on the NHS App has shown that having buttons full width on smaller screens isn't a problem for users but we will continue to test if: + +- full width buttons are problematic for users with low digital skills +- users don’t actually see them as actionable things to click diff --git a/docs/examples/buttons/button-group-link.njk b/docs/examples/buttons/button-group-link.njk new file mode 100644 index 0000000..bfc6958 --- /dev/null +++ b/docs/examples/buttons/button-group-link.njk @@ -0,0 +1,19 @@ +--- +layout: layouts/example.njk +title: Button group with link +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" +vueLink: +--- + +{% from 'button/macro.njk' import button %} + +
+ + {{ button({ + text: "Continue", + classes: "nhsapp-button" + }) }} + + Cancel + +
\ No newline at end of file diff --git a/docs/examples/buttons/button-group.njk b/docs/examples/buttons/button-group.njk new file mode 100644 index 0000000..d20dbda --- /dev/null +++ b/docs/examples/buttons/button-group.njk @@ -0,0 +1,22 @@ +--- +layout: layouts/example.njk +title: Button group +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" +vueLink: +--- + +{% from 'button/macro.njk' import button %} + +
+ +{{ button({ + text: "Save and continue", + classes: "nhsapp-button" +}) }} + +{{ button({ + text: "Save as draft", + classes: "nhsuk-button--secondary nhsapp-button" +}) }} + +
\ No newline at end of file diff --git a/docs/examples/buttons/button-primary.njk b/docs/examples/buttons/button-primary.njk new file mode 100644 index 0000000..e62d039 --- /dev/null +++ b/docs/examples/buttons/button-primary.njk @@ -0,0 +1,13 @@ +--- +layout: layouts/example.njk +title: Button primary +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" +vueLink: +--- + +{% from 'button/macro.njk' import button %} + +{{ button({ + text: "Continue", + classes: "nhsapp-button" +}) }} \ No newline at end of file diff --git a/docs/examples/buttons/button-reverse.njk b/docs/examples/buttons/button-reverse.njk new file mode 100644 index 0000000..6f31fef --- /dev/null +++ b/docs/examples/buttons/button-reverse.njk @@ -0,0 +1,13 @@ +--- +layout: layouts/example.njk +title: Button reverse +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" +vueLink: +--- + +{% from 'button/macro.njk' import button %} + +{{ button({ + text: "Continue", + classes: "nhsuk-button--reverse nhsapp-button" +}) }} \ No newline at end of file diff --git a/docs/examples/buttons/button-secondary.njk b/docs/examples/buttons/button-secondary.njk new file mode 100644 index 0000000..b5e5025 --- /dev/null +++ b/docs/examples/buttons/button-secondary.njk @@ -0,0 +1,13 @@ +--- +layout: layouts/example.njk +title: Button secondary +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" +vueLink: +--- + +{% from 'button/macro.njk' import button %} + +{{ button({ + text: "Try again", + classes: "nhsuk-button--secondary nhsapp-button" +}) }} \ No newline at end of file diff --git a/src/all.scss b/src/all.scss index f4020ff..c0cb3a2 100644 --- a/src/all.scss +++ b/src/all.scss @@ -7,6 +7,7 @@ // components @import "components/badge/badge"; +@import "components/button"; @import "components/card/card"; @import "components/tag/tag"; @import "components/timeline/timeline"; diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss new file mode 100644 index 0000000..5640eda --- /dev/null +++ b/src/components/button/_index.scss @@ -0,0 +1,72 @@ +.nhsapp-button { + padding: 12px nhsuk-spacing(5); + + @include mq($until: tablet) { + width: 100%; + } +} + +// Button group +// Code from GOV.UK Frontend +.nhsapp-button-group { + $horizontal-gap: nhsuk-spacing(4); + $vertical-gap: nhsuk-spacing(3); + + $link-spacing: nhsuk-spacing(2); + + @include nhsuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1); + + // Flexbox is used to center-align links on mobile, align everything along + // the baseline on tablet and above, and to removes extra whitespace that + // we'd get between the buttons and links because they're inline-blocks. + // + // Ideally we'd use `gap` with flexbox rather than having to do it all with + // margins, but unfortunately the support isn't there (yet) and @supports + // doesn't play nicely with it + // (https://github.com/w3c/csswg-drafts/issues/3559) + display: flex; + flex-direction: column; + align-items: center; + + // Give links within the button group the same font-size and line-height + // as buttons. + // + // Because we want the focus state to be tight around the link text, we use + // margins where the buttons would use padding. + .nhsuk-link { + @include nhsuk-font($size: 19, $line-height: 19px); + display: inline-block; + // Prevent links overflowing their container in IE10/11 because of bug + // with align-items: center + max-width: 100%; + margin-top: $link-spacing; + margin-bottom: $link-spacing + $vertical-gap; + text-align: center; + } + + // Reduce the bottom margin to the size of the vertical gap (accommodating + // the button shadow) – the 'lost' margin is moved to the button-group. + .nhsuk-button { + margin-bottom: $vertical-gap + 4px; + } + + // On tablet and above, we also introduce a 'column gap' between the + // buttons and links in each row and left align links + @include mq($from: tablet) { + // Cancel out the column gap for the last item in each row + margin-right: ($horizontal-gap * -1); + + flex-direction: row; + flex-wrap: wrap; + align-items: baseline; + + .nhsuk-button, + .nhsuk-link { + margin-right: $horizontal-gap; + } + + .nhsuk-link { + text-align: left; + } + } +} diff --git a/src/components/timeline/_timeline.scss b/src/components/timeline/_timeline.scss index 095af2d..226c981 100644 --- a/src/components/timeline/_timeline.scss +++ b/src/components/timeline/_timeline.scss @@ -32,8 +32,6 @@ $timeline-border-width: 2px; @include mq($from: tablet) { $tablet: dot-size($size) + 4px; - @debug $tablet; - height: $tablet; margin-left: dot-ml($tablet); margin-top: if($size == "default", dot-mt-tablet($mt), dot-mt-tablet($mt-small));