From a1e7be061e131aaf3e44e6165d9cc1b15aa73184 Mon Sep 17 00:00:00 2001 From: EdwardScull Date: Tue, 23 Jul 2024 13:03:48 +0100 Subject: [PATCH 1/4] app button styling --- docs/components/button.md | 8 ++ src/all.scss | 1 + src/components/button/_index.scss | 142 +++++++++++++++++++++++++ src/components/timeline/_timeline.scss | 2 - 4 files changed, 151 insertions(+), 2 deletions(-) create mode 100644 docs/components/button.md create mode 100644 src/components/button/_index.scss diff --git a/docs/components/button.md b/docs/components/button.md new file mode 100644 index 0000000..934b5b0 --- /dev/null +++ b/docs/components/button.md @@ -0,0 +1,8 @@ +--- +layout: layouts/component.njk +title: Button +description: Use buttons to help users to carry out an action. +backlogID: 0 +tags: + - component +--- 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..a35570c --- /dev/null +++ b/src/components/button/_index.scss @@ -0,0 +1,142 @@ +.nhsapp-button { + padding: 12px nhsuk-spacing(5); + + @include mq($until: tablet) { + width: 100%; + } + + // Button styled as a link + &--link { + @include nhsuk-link-style-default; + @include nhsuk-typography-responsive(19); + + background-color: transparent; + border: 0; + border-radius: 0; + box-shadow: none; + cursor: pointer; + font-weight: normal; + padding: 0; + text-decoration: underline; + + &:hover, + &:active { + background-color: transparent; + top: 0; + } + + &:focus { + background-color: #ffeb3b; + } + } + + &--tertiary { + background-color: transparent; + border: 2px solid $nhsuk-link-color; + box-shadow: none; + color: $nhsuk-link-color; + + &:link, + &:visited { + color: $nhsuk-link-color; + } + + &:hover { + background-color: $nhsuk-link-color; + color: $color_nhsuk-white; + } + + &:active { + background-color: $nhsuk-link-color; + box-shadow: none; + top: 0; + } + + &:focus { + box-shadow: none; + } + } + + &--loader { + align-items: center; + display: flex; + gap: 8px; + justify-content: center; + } + + // NHS UK overrides + &--reverse { + .nhsuk-button { + &:visited, + &:active, + &:hover { + color: $nhsuk-focus-text-color; + } + } + } +} + +// 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)); From 5e51097e410ea9b721bdb1655748ca0750ed3163 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Tue, 23 Jul 2024 14:07:26 +0100 Subject: [PATCH 2/4] update button guidance and remove tertiary button css --- docs/assets/css/app.scss | 1 + docs/components/button.md | 8 ---- docs/components/buttons.md | 41 +++++++++++++++++++++ docs/examples/buttons/button-group-link.njk | 19 ++++++++++ docs/examples/buttons/button-group.njk | 22 +++++++++++ docs/examples/buttons/button-primary.njk | 13 +++++++ docs/examples/buttons/button-reverse.njk | 13 +++++++ docs/examples/buttons/button-secondary.njk | 13 +++++++ src/components/button/_index.scss | 36 +----------------- 9 files changed, 123 insertions(+), 43 deletions(-) delete mode 100644 docs/components/button.md create mode 100644 docs/components/buttons.md create mode 100644 docs/examples/buttons/button-group-link.njk create mode 100644 docs/examples/buttons/button-group.njk create mode 100644 docs/examples/buttons/button-primary.njk create mode 100644 docs/examples/buttons/button-reverse.njk create mode 100644 docs/examples/buttons/button-secondary.njk 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/button.md b/docs/components/button.md deleted file mode 100644 index 934b5b0..0000000 --- a/docs/components/button.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -layout: layouts/component.njk -title: Button -description: Use buttons to help users to carry out an action. -backlogID: 0 -tags: - - component ---- 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..aab6c94 --- /dev/null +++ b/docs/examples/buttons/button-group-link.njk @@ -0,0 +1,19 @@ +--- +layout: layouts/example.njk +title: Button group with link +figmaLink: +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..1c214c9 --- /dev/null +++ b/docs/examples/buttons/button-group.njk @@ -0,0 +1,22 @@ +--- +layout: layouts/example.njk +title: Button group +figmaLink: +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..e9f8c0a --- /dev/null +++ b/docs/examples/buttons/button-primary.njk @@ -0,0 +1,13 @@ +--- +layout: layouts/example.njk +title: Button primary +figmaLink: +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..fad0d3e --- /dev/null +++ b/docs/examples/buttons/button-reverse.njk @@ -0,0 +1,13 @@ +--- +layout: layouts/example.njk +title: Button reverse +figmaLink: +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..08dc925 --- /dev/null +++ b/docs/examples/buttons/button-secondary.njk @@ -0,0 +1,13 @@ +--- +layout: layouts/example.njk +title: Button secondary +figmaLink: +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/components/button/_index.scss b/src/components/button/_index.scss index a35570c..28498a5 100644 --- a/src/components/button/_index.scss +++ b/src/components/button/_index.scss @@ -26,44 +26,10 @@ } &:focus { - background-color: #ffeb3b; + background-color: $nhsuk-focus-color; } } - &--tertiary { - background-color: transparent; - border: 2px solid $nhsuk-link-color; - box-shadow: none; - color: $nhsuk-link-color; - - &:link, - &:visited { - color: $nhsuk-link-color; - } - - &:hover { - background-color: $nhsuk-link-color; - color: $color_nhsuk-white; - } - - &:active { - background-color: $nhsuk-link-color; - box-shadow: none; - top: 0; - } - - &:focus { - box-shadow: none; - } - } - - &--loader { - align-items: center; - display: flex; - gap: 8px; - justify-content: center; - } - // NHS UK overrides &--reverse { .nhsuk-button { From af395b4e6d1334a21045cfcc68b09348c20f6803 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Tue, 23 Jul 2024 14:39:06 +0100 Subject: [PATCH 3/4] remove button link style --- src/components/button/_index.scss | 36 ------------------------------- 1 file changed, 36 deletions(-) diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss index 28498a5..5640eda 100644 --- a/src/components/button/_index.scss +++ b/src/components/button/_index.scss @@ -4,42 +4,6 @@ @include mq($until: tablet) { width: 100%; } - - // Button styled as a link - &--link { - @include nhsuk-link-style-default; - @include nhsuk-typography-responsive(19); - - background-color: transparent; - border: 0; - border-radius: 0; - box-shadow: none; - cursor: pointer; - font-weight: normal; - padding: 0; - text-decoration: underline; - - &:hover, - &:active { - background-color: transparent; - top: 0; - } - - &:focus { - background-color: $nhsuk-focus-color; - } - } - - // NHS UK overrides - &--reverse { - .nhsuk-button { - &:visited, - &:active, - &:hover { - color: $nhsuk-focus-text-color; - } - } - } } // Button group From 83a06ea60194d75833b5cf83494d10888ad1e4a4 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Tue, 23 Jul 2024 15:44:43 +0100 Subject: [PATCH 4/4] add button figma link --- docs/examples/buttons/button-group-link.njk | 2 +- docs/examples/buttons/button-group.njk | 2 +- docs/examples/buttons/button-primary.njk | 2 +- docs/examples/buttons/button-reverse.njk | 2 +- docs/examples/buttons/button-secondary.njk | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/examples/buttons/button-group-link.njk b/docs/examples/buttons/button-group-link.njk index aab6c94..bfc6958 100644 --- a/docs/examples/buttons/button-group-link.njk +++ b/docs/examples/buttons/button-group-link.njk @@ -1,7 +1,7 @@ --- layout: layouts/example.njk title: Button group with link -figmaLink: +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" vueLink: --- diff --git a/docs/examples/buttons/button-group.njk b/docs/examples/buttons/button-group.njk index 1c214c9..d20dbda 100644 --- a/docs/examples/buttons/button-group.njk +++ b/docs/examples/buttons/button-group.njk @@ -1,7 +1,7 @@ --- layout: layouts/example.njk title: Button group -figmaLink: +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" vueLink: --- diff --git a/docs/examples/buttons/button-primary.njk b/docs/examples/buttons/button-primary.njk index e9f8c0a..e62d039 100644 --- a/docs/examples/buttons/button-primary.njk +++ b/docs/examples/buttons/button-primary.njk @@ -1,7 +1,7 @@ --- layout: layouts/example.njk title: Button primary -figmaLink: +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" vueLink: --- diff --git a/docs/examples/buttons/button-reverse.njk b/docs/examples/buttons/button-reverse.njk index fad0d3e..6f31fef 100644 --- a/docs/examples/buttons/button-reverse.njk +++ b/docs/examples/buttons/button-reverse.njk @@ -1,7 +1,7 @@ --- layout: layouts/example.njk title: Button reverse -figmaLink: +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" vueLink: --- diff --git a/docs/examples/buttons/button-secondary.njk b/docs/examples/buttons/button-secondary.njk index 08dc925..b5e5025 100644 --- a/docs/examples/buttons/button-secondary.njk +++ b/docs/examples/buttons/button-secondary.njk @@ -1,7 +1,7 @@ --- layout: layouts/example.njk title: Button secondary -figmaLink: +figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-4944&t=nezigF25kUAyUU2s-1" vueLink: ---