Merge pull request #1207 from alphagov/secondary-action-buttons

Add 'secondary' and 'warning' action buttons
alphagov · Apr 24, 2019 · 799299f · 799299f
2 parents db967c8 + afb9b18
commit 799299f
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 5 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -3,12 +3,24 @@
 @import "../../helpers/all";
 
 @include govuk-exports("govuk/component/button") {
-
-  $govuk-button-colour: #00823b;
-  $govuk-button-hover-colour: darken($govuk-button-colour, 5%);
-  $govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
+  // Primary button variables
+  $govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
+  $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
+  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
   $govuk-button-text-colour: govuk-colour("white");
 
+  // Secondary button variables
+  $govuk-secondary-button-colour: govuk-colour("grey-3");
+  $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
+  $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
+  $govuk-secondary-button-text-colour: govuk-colour("black");
+
+  // Warning button variables
+  $govuk-warning-button-colour: govuk-colour("red");
+  $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
+  $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
+  $govuk-warning-button-text-colour: govuk-colour("white");
+
   // Because the shadow (s0) is visually 'part of' the button, we need to reduce
   // the height of the button to compensate by adjusting its padding (s1) and
   // increase the bottom margin to include it (s2).
@@ -141,6 +153,64 @@
     }
   }
 
+  .govuk-button--secondary {
+    background-color: $govuk-secondary-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-secondary-button-text-colour;
+    }
+
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors so
+    // so that unvisited links styled as buttons do not end up with dark blue
+    // text when focussed.
+    @include govuk-compatibility(govuk_template) {
+      &:link:focus {
+        color: $govuk-secondary-button-text-colour;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $govuk-secondary-button-hover-colour;
+    }
+  }
+
+  .govuk-button--warning {
+    background-color: $govuk-warning-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-warning-button-text-colour;
+    }
+
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors so
+    // so that unvisited links styled as buttons do not end up with dark blue
+    // text when focussed.
+    @include govuk-compatibility(govuk_template) {
+      &:link:focus {
+        color: $govuk-warning-button-text-colour;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $govuk-warning-button-hover-colour;
+    }
+  }
+
   .govuk-button--start {
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);
@@ -176,5 +246,4 @@
     padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
     padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
   }
-
 }
diff --git a/src/components/button/button.yaml b/src/components/button/button.yaml
@@ -98,3 +98,29 @@ examples:
     name: focus
     text: Focussed
     classes: :focus
+- name: Secondary
+  description: A button for secondary actions
+  data:
+    name: secondary
+    text: Secondary button
+    classes: govuk-button--secondary
+- name: Secondary link
+  description: A link button for secondary actions
+  data:
+    name: secondary
+    text: Secondary button
+    href: '/'
+    classes: govuk-button--secondary
+- name: Warning
+  description: A button for actions that need a warning
+  data:
+    name: Warning
+    text: Warning button
+    classes: govuk-button--warning
+- name: Warning link
+  description: A link button for actions that need a warning
+  data:
+    name: Warning
+    text: Warning button
+    href: '/'
+    classes: govuk-button--warning
diff --git a/src/helpers/_colour.scss b/src/helpers/_colour.scss
@@ -49,3 +49,25 @@
     @return map-get($org-colour, colour);
   }
 }
+
+/// Make a colour darker by mixing it with black
+///
+/// @param {Colour} $colour - colour to shade
+/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @return {Colour}
+/// @access public
+
+@function govuk-shade($colour, $percentage) {
+  @return mix(#000000, $colour, $percentage);
+}
+
+/// Make a colour lighter by mixing it with white
+///
+/// @param {Colour} $colour - colour to tint
+/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @return {Colour}
+/// @access public
+
+@function govuk-tint($colour, $percentage) {
+  @return mix(govuk-colour("white"), $colour, $percentage);
+}