From 65cacf0fd2c0b86321ddb9b3e7f75db18a0d9014 Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Tue, 16 Jul 2024 16:10:24 +0100 Subject: [PATCH] Warning button variant (#976) On our staff facing service, we use interruption screens that warn a user before they proceed to undertake an action that is destructive and/or cannot be undone. On these pages, we use also a red warning button to further indicate that a destructive action will take place: Screenshot of a screen asking if a user wants to delete a vaccine. This follows [a similar pattern from the GOV.UK Design System](https://design-system.service.gov.uk/components/button/#warning-buttons): > ### Warning buttons > > Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one. This PR adds an equivalent `--warning` variant to `nhsuk-button`. In the corresponding Service Manual guidance for this component, we can start by using the same guidance as that used in the GOV.UK Design System. --- CHANGELOG.md | 1 + app/components/button/warning.njk | 22 ++++++++++++++++++++ app/pages/examples.njk | 1 + packages/components/button/README.md | 25 +++++++++++++++++++++++ packages/components/button/_button.scss | 27 +++++++++++++++++++++++++ packages/core/settings/_colours.scss | 5 +++++ 6 files changed, 81 insertions(+) create mode 100644 app/components/button/warning.njk diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a863c1b5..83b933715 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - Make nhsuk-page-width a default so that services can override it ([PR 971](https://github.com/nhsuk/nhsuk-frontend/pull/971)) - Make footer copyright statement configurable via Nunjucks parameters ([PR 975](https://github.com/nhsuk/nhsuk-frontend/pull/975)) - Remove unused nhsuk-u-top-and-bottom utility class ([PR 979](https://github.com/nhsuk/nhsuk-frontend/pull/979)) +- Add warning button ([PR 976](https://github.com/nhsuk/nhsuk-frontend/pull/976)) ## 8.2.0 - 12 June 2024 diff --git a/app/components/button/warning.njk b/app/components/button/warning.njk new file mode 100644 index 000000000..dd9b190a6 --- /dev/null +++ b/app/components/button/warning.njk @@ -0,0 +1,22 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Button warning' %} +{% from 'components/button/macro.njk' import button %} +{% extends 'layout.njk' %} + +{% block body %} + +
+
+ +
+
+ {{ button({ + "text": "Yes, delete this vaccine", + "classes": "nhsuk-button--warning" + }) }} +
+
+
+
+ +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 107616557..d384727bd 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -34,6 +34,7 @@
  • Button disabled
  • Button secondary
  • Button reverse
    • +
  • Button warning
  • Card - Basic card
  • Card - Card with an image
  • Card - Card group
    • diff --git a/packages/components/button/README.md b/packages/components/button/README.md index 0a4897d7b..13d0af4db 100644 --- a/packages/components/button/README.md +++ b/packages/components/button/README.md @@ -130,6 +130,31 @@ Find out more about the button component and when to use it in the [NHS digital --- +### Button warning + +[Preview the button warning component](https://nhsuk.github.io/nhsuk-frontend/components/button/warning.html) + +#### HTML markup + +```html + +``` + +#### Nunjucks macro + +``` +{% from 'components/button/macro.njk' import button %} + +{{ button({ + "text": "Yes, delete this vaccine", + "classes": "nhsuk-button--warning" +}) }} +``` + +--- + ### Button with double click prevention #### HTML markup diff --git a/packages/components/button/_button.scss b/packages/components/button/_button.scss index be8945b03..9d74c55f1 100644 --- a/packages/components/button/_button.scss +++ b/packages/components/button/_button.scss @@ -180,6 +180,33 @@ $button-shadow-size: 4px; } } +.nhsuk-button--warning { + background-color: $nhsuk-warning-button-color; + box-shadow: 0 $button-shadow-size 0 $nhsuk-warning-button-shadow-color; + + &:hover { + background-color: darken($nhsuk-warning-button-color, 10%); + } + + &:focus { + background: $nhsuk-focus-color; + box-shadow: 0 $button-shadow-size 0 $nhsuk-focus-text-color; + color: $nhsuk-focus-text-color; + outline: $nhsuk-focus-width solid transparent; + } + + &:active { + background: $nhsuk-warning-button-active-color; + box-shadow: none; + color: $nhsuk-button-text-color; + top: $button-shadow-size; + } + + &.nhsuk-button--disabled { + background-color: $nhsuk-warning-button-color; + } +} + /** * Button disabled states */ diff --git a/packages/core/settings/_colours.scss b/packages/core/settings/_colours.scss index 1c5b9c320..ab7a70892 100644 --- a/packages/core/settings/_colours.scss +++ b/packages/core/settings/_colours.scss @@ -151,5 +151,10 @@ $nhsuk-reverse-button-hover-color: shade($nhsuk-reverse-button-color, 20%); $nhsuk-reverse-button-active-color: $color-nhsuk-black; $nhsuk-reverse-button-shadow-color: $color-nhsuk-black; +$nhsuk-warning-button-color: $color_nhsuk-red; +$nhsuk-warning-button-hover-color: shade($nhsuk-warning-button-color, 20%); +$nhsuk-warning-button-active-color: shade($nhsuk-warning-button-color, 50%); +$nhsuk-warning-button-shadow-color: shade($nhsuk-warning-button-color, 50%); + $nhsuk-button-text-color: $color_nhsuk-white; $nhsuk-reverse-button-text-color: $color_nhsuk-black;