Merge branch 'main' into support-classes-and-attributes-in-header-pri…

…mary-links
nhsuk · Jul 17, 2024 · 3baa7e7 · 3baa7e7
2 parents 39c1126 + 65cacf0
commit 3baa7e7
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 0 deletions.
diff --git 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))
 - Add support for custom classes and attributes in Header primary links ([PR 978](https://github.com/nhsuk/nhsuk-frontend/pull/978))
 
 ## 8.2.0 - 12 June 2024

diff --git a/app/components/button/warning.njk 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 %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Yes, delete this vaccine",
+            "classes": "nhsuk-button--warning"
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -34,6 +34,7 @@
     <li><a href="../components/button/disabled.html">Button disabled</a></li>
     <li><a href="../components/button/secondary.html">Button secondary</a></li>
     <li><a href="../components/button/reverse.html">Button reverse</a></li>
+    <li><a href="../components/button/warning.html">Button warning</a></li>
     <li><a href="../components/card/basic-card.html">Card - Basic card</a></li>
     <li><a href="../components/card/card-with-image.html">Card - Card with an image</a></li>
     <li><a href="../components/card/card-group.html">Card - Card group</a></li>

diff --git 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
+<button class="nhsuk-button nhsuk-button--warning" type="submit" data-module="nhsuk-button">
+  Delete account
+</button>
+```
+
+#### 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
@@ -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
@@ -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;