App button styles (#117)

Add buttons with guidance and examples

---------

Co-authored-by: EdwardScull <edsc1@hscic.gov.uk>
Co-authored-by: Dave Hunter <thebeakking@gmail.com>

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";
 

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

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 %}
+
+<div class="nhsapp-button-group">
+
+  {{ button({
+    text: "Continue",
+    classes: "nhsapp-button"
+  }) }}
+
+  <a href="#" class="nhsuk-link">Cancel</a>
+
+</div>

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 %}
+
+<div class="nhsapp-button-group">
+
+{{ button({
+  text: "Save and continue",
+  classes: "nhsapp-button"
+}) }}
+
+{{ button({
+  text: "Save as draft",
+  classes: "nhsuk-button--secondary nhsapp-button"
+}) }}
+
+</div>

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"
+}) }}

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"
+}) }}

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"
+}) }}

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";

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;
+    }
+  }
+}

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));