Merge pull request #1110 from nationalarchives/feature/danger-button

Add a new 'danger button'

ds_caselaw_editor_ui/sass/includes/_buttons.scss

@@ -46,3 +46,38 @@
     }
   }
 }
+
+.button-danger {
+  @include call-to-action-button;
+  background-color: $color__white;
+  border: 2px solid $color__red;
+  color: $color__red;
+
+  &:visited {
+    color: $color__cta-background;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: $color__red;
+    color: $color__white;
+    outline-color: $color__red;
+    border-color: $color__red;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    $color__desaturated-red: desaturate($color__red, 60%);
+    color: $color__desaturated-red;
+    background-color: $color__white;
+    border-color: lighten($color__desaturated-red, 30%);
+    &:focus,
+    &:hover {
+      outline: none;
+      background-color: $color__white;
+      color: $color__desaturated-red;
+      text-decoration: none;
+      cursor: not-allowed;
+    }
+  }
+}

ds_caselaw_editor_ui/templates/includes/style_guide/buttons.html

@@ -10,7 +10,8 @@ <h4>Call to action button</h4>
 <p>
   Use with <code>class="button-cta"</code>:
 </p>
-<button class="button-cta">This is a call to action</button>
+<button class="button-cta">Call to action</button>
+<button class="button-cta" disabled>Call to action (disabled)</button>
 <h4>Secondary button</h4>
 <details>
   <summary>Usage details</summary>
@@ -22,4 +23,18 @@ <h4>Secondary button</h4>
 <p>
   Use with <code>class="button-secondary"</code>:
 </p>
-<button class="button-secondary">This is a secondary button</button>
+<button class="button-secondary">Secondary button</button>
+<button class="button-secondary" disabled>Secondary button (disabled)</button>
+<h4>Danger button</h4>
+<details>
+  <summary>Usage details</summary>
+  <p>
+    This button indicates that the action which will be taken is potentially destructive, and should be used with
+    caution.
+  </p>
+</details>
+<p>
+  Use with <code>class="button-danger"</code>:
+</p>
+<button class="button-danger">Danger button</button>
+<button class="button-danger" disabled>Danger button (disabled)</button>