New start button icon

CHANGELOG.md

@@ -16,6 +16,12 @@
 
   ([PR #1309](https://github.com/alphagov/govuk-frontend/pull/1309))
 
+- Update buttons to use new focus style
+
+  To migrate: [TODO add migration instructions before we ship v3.0.0]
+
+  ([PR #1315](https://github.com/alphagov/govuk-frontend/pull/1315))
+
 - Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow`
 
   To migrate: If you are using `$govuk-border-width-mobile` in your own custom code, you need to rename any instances to `$govuk-border-width-narrow`.

src/components/button/_button.scss

@@ -70,6 +70,7 @@
     // text when focussed.
     @include govuk-compatibility(govuk_template) {
       &:link:focus {
+        outline-color: transparent;
         color: $govuk-button-text-colour;
       }
     }
@@ -80,14 +81,30 @@
       border: 0;
     }
 
-    &:hover,
-    &:focus {
+    // Ordering of this pseudo selector is important to ensure
+    // It replaces hover state when element is focussed and mouse is hovering
+    &:hover {
       background-color: $govuk-button-hover-colour;
     }
 
+    // Ordering of this pseudo selector is important to ensure
+    // It replaces hover state when element is focussed and mouse is hovering
+    &:focus {
+      outline-color: transparent;
+      color: $govuk-focus-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 2px 0 $govuk-focus-text-colour;
+    }
+
     &:active {
-      top: $button-shadow-size;
-      box-shadow: none;
+      // Bump the button down by 2px so it looks like its being pressed in
+      position: relative;
+      top: 2px;
+
+      border: $govuk-border-width-form-element solid $govuk-focus-colour;
+      color: $govuk-button-text-colour;
+      background-color: $govuk-button-hover-colour;
+      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
 
       @include govuk-if-ie8 {
         border-bottom-width: 0;
@@ -175,10 +192,17 @@
       }
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-secondary-button-hover-colour;
     }
+
+    // Ordering of this pseudo selector is important to ensure
+    // It replaces hover state when element is focussed and mouse is hovering
+    &:focus {
+      color: $govuk-focus-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 2px 0 $govuk-focus-text-colour;
+    }
   }
 
   .govuk-button--warning {
@@ -204,29 +228,41 @@
       }
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-warning-button-hover-colour;
     }
+
+    // Ordering of this pseudo selector is important to ensure
+    // It replaces hover state when element is focussed and mouse is hovering
+    &:focus {
+      color: $govuk-focus-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 2px 0 $govuk-focus-text-colour;
+    }
   }
 
   .govuk-button--start {
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);
 
+    display: inline-flex;
     min-height: auto;
+
     padding-top: govuk-spacing(2) - $govuk-border-width-form-element;
-    padding-right: govuk-spacing(7);
     padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element;
     padding-left: govuk-spacing(3);
 
-    background-image: govuk-image-url("icon-pointer.png");
-    background-repeat: no-repeat;
-    background-position: 100% 50%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .govuk-button__start-icon {
+    margin-top: -2px;
+    vertical-align: middle;
 
-    @include govuk-device-pixel-ratio {
-      background-image: govuk-image-url("icon-pointer-2x.png");
-      background-size: 30px 19px;
+    @include govuk-media-query($until: tablet) {
+      height: 16px;
+      margin-left: .1em;
     }
   }
 

src/components/button/button.yaml

@@ -65,7 +65,7 @@ examples:
   data:
     text: Start now link button
     href: '/'
-    classes: 'govuk-button--start'
+    isStartButton: true
 - name: input
   data:
     element: input

src/components/button/template.njk

@@ -1,5 +1,16 @@
-{# Determine type of element to use, if not explicitly set -#}
+{# Set classes for this component #}
+{% set classNames = "govuk-button" %}
+
+
+{% if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+{% if params.disabled %}
+  {% set classNames = classNames + " govuk-button--disabled" %}
+{% endif %}
 
+
+{# Determine type of element to use, if not explicitly set -#}
 {% if params.element %}
   {% set element = params.element | lower %}
 {% else %}
@@ -10,9 +21,14 @@
   {% endif %}
 {% endif %}
 
+{% if params.isStartButton %}
+  {% set iconMarkUp = '<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="19px" width="30px"><path fill="currentColor" d="M7.5 0H0l10 10L0 20h7.5l10-10-10-10z"/></svg>' %}
+  {% set classNames = classNames + " govuk-button--start" %}
+{% endif %}
+
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="govuk-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+{%- set commonAttributes %} class="{{ classNames }}" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 
@@ -23,11 +39,13 @@
 {%- if element == 'a' %}
 <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
   {{ params.html | safe if params.html else params.text }}
+  {{ iconMarkUp  | safe }}
 </a>
 
 {%- elseif element == 'button' %}
 <button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
   {{ params.html | safe if params.html else params.text }}
+  {{ iconMarkUp | safe }}
 </button>
 
 {%- elseif element == 'input' %}

src/components/button/template.test.js

@@ -259,4 +259,16 @@ describe('Button', () => {
       expect($component.attr('type')).toEqual('submit')
     })
   })
+
+  describe('Start button', () => {
+    it('renders a svg', () => {
+      const $ = render('button', {
+        href: '/',
+        isStartButton: true
+      })
+
+      const $component = $('.govuk-button .govuk-button__start-icon')
+      expect($component.get(0).tagName).toEqual('svg')
+    })
+  })
 })