Add back link component

app/assets/stylesheets/components/_back-link.scss

@@ -0,0 +1,33 @@
+@import "helpers/variables";
+
+.app-c-back-link {
+  position: relative;
+  display: inline-block;
+  margin-top: $app-spacing-scale-3;
+  margin-bottom: $app-spacing-scale-3;
+  font-size: 16px;
+  line-height: 1.25;
+
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+
+  &:link,
+  &:link:focus,
+  &:visited,
+  &:active {
+    color: currentColor;
+  }
+
+  &:hover {
+    color: $link-colour;
+  }
+
+  &::before {
+    content: "";
+    display: inline-block;
+    margin-right: .3em;
+    border-top: 0.3125em solid transparent;
+    border-right: 0.375em solid currentColor;
+    border-bottom: 0.3125em solid transparent;
+  }
+}

app/assets/stylesheets/components/_error-message.scss

@@ -1,4 +1,4 @@
-$govuk-error-colour: $red;
+@import "helpers/variables";
 
 .app-c-error-message {
   display: block;
@@ -9,7 +9,7 @@ $govuk-error-colour: $red;
 
   clear: both;
 
-  color: $govuk-error-colour;
+  color: $app-error-colour;
 
   @include bold-19;
 }

app/assets/stylesheets/components/_fieldset.scss

@@ -1,23 +1,11 @@
+@import "helpers/variables";
 @import "helpers/clearfix";
 
-$govuk-spacing-scale-0: 0;
-$govuk-spacing-scale-1: 5px;
-$govuk-spacing-scale-2: 10px;
-$govuk-spacing-scale-3: 15px;
-$govuk-spacing-scale-4: 20px;
-$govuk-spacing-scale-5: 30px;
-$govuk-spacing-scale-6: 40px;
-$govuk-spacing-scale-7: 50px;
-$govuk-spacing-scale-8: 60px;
-
-$govuk-text-colour: $text-colour;
-$govuk-secondary-text-colour: $grey-1;
-
 .app-c-fieldset {
-  margin: 0 0 $govuk-spacing-scale-4;
+  margin: 0 0 $app-spacing-scale-4;
 
   @include media(tablet) {
-    margin-bottom: $govuk-spacing-scale-5;
+    margin-bottom: $app-spacing-scale-5;
   }
 
   padding: 0;
@@ -36,7 +24,7 @@ $govuk-secondary-text-colour: $grey-1;
   // Hack to let legends or elements within legends have margins in webkit browsers
   overflow: hidden;
 
-  color: $govuk-text-colour;
+  color: $app-text-colour;
   white-space: normal;    // 1
   @include core-19;
 }

app/assets/stylesheets/components/_label.scss

@@ -1,9 +1,8 @@
-$govuk-text-colour: $text-colour;
-$govuk-secondary-text-colour: $grey-1;
+@import "helpers/variables";
 
 .app-c-label {
   display: block;
-  color: $govuk-text-colour;
+  color: $app-text-colour;
   @include core-19;
 }
 
@@ -14,6 +13,6 @@ $govuk-secondary-text-colour: $grey-1;
 // Hint text sits inside a label, to be read by AT
 .app-c-label__hint {
   display: block;
-  color: $govuk-secondary-text-colour;
+  color: $app-secondary-text-colour;
   font-weight: 400;
 }

app/assets/stylesheets/components/_radio.scss

@@ -1,24 +1,12 @@
-$govuk-spacing-scale-0: 0;
-$govuk-spacing-scale-1: 5px;
-$govuk-spacing-scale-2: 10px;
-$govuk-spacing-scale-3: 15px;
-$govuk-spacing-scale-4: 20px;
-$govuk-spacing-scale-5: 30px;
-$govuk-spacing-scale-6: 40px;
-$govuk-spacing-scale-7: 50px;
-$govuk-spacing-scale-8: 60px;
-
-$govuk-border-width-form-element: 2px;
-$govuk-focus-colour: $focus-colour;
-
+@import "helpers/variables";
 @import "helpers/px-to-em";
 
 .app-c-radio {
   display: block;
 
   position: relative;
 
-  margin-bottom: $govuk-spacing-scale-2;
+  margin-bottom: $app-spacing-scale-2;
   padding: 0 0 0 em(40px, 19px);
 
   clear: left;
@@ -32,7 +20,7 @@ $govuk-focus-colour: $focus-colour;
 }
 
 .app-c-radio--inline {
-  margin-right: $govuk-spacing-scale-4;
+  margin-right: $app-spacing-scale-4;
   float: left;
   clear: none;
 }
@@ -69,13 +57,13 @@ $govuk-focus-colour: $focus-colour;
 
   display: block;
   padding-top: em(8px, 19px);
-  padding-bottom: em($govuk-spacing-scale-1, 19px);
+  padding-bottom: em($app-spacing-scale-1, 19px);
 }
 
 .app-c-radio__label__text,
 .app-c-radio__label__hint {
-  padding-left: em($govuk-spacing-scale-3, 19px);
-  padding-right: em($govuk-spacing-scale-3, 19px);
+  padding-left: em($app-spacing-scale-3, 19px);
+  padding-right: em($app-spacing-scale-3, 19px);
 }
 
 .app-c-radio__input + .app-c-radio__label::before {
@@ -88,7 +76,7 @@ $govuk-focus-colour: $focus-colour;
   width: em(40px, 19px);
   height: em(40px, 19px);
 
-  border: $govuk-border-width-form-element solid;
+  border: $app-border-width-form-element solid;
   border-radius: 50%;
   background: transparent;
 }
@@ -97,21 +85,21 @@ $govuk-focus-colour: $focus-colour;
   content: "";
 
   position: absolute;
-  top: em($govuk-spacing-scale-2, 19px);
-  left: em($govuk-spacing-scale-2, 19px);
+  top: em($app-spacing-scale-2, 19px);
+  left: em($app-spacing-scale-2, 19px);
 
   width: 0;
   height: 0;
 
-  border: em($govuk-spacing-scale-2, 19px) solid;
+  border: em($app-spacing-scale-2, 19px) solid;
   border-radius: 50%;
   background: currentColor;
   opacity: 0;
 }
 
 // Focused state
 .app-c-radio__input:focus + .app-c-radio__label::before {
-  box-shadow: 0 0 0 4px $govuk-focus-colour;
+  box-shadow: 0 0 0 4px $app-focus-colour;
 }
 
 // Selected state
@@ -131,12 +119,12 @@ $govuk-focus-colour: $focus-colour;
 
 // TODO: Can be replaced by spacing + typography helpers from GOV.UK Frontend
 .app-c-radio--margin-bottom-0 {
-  margin-bottom: $govuk-spacing-scale-0 !important;
+  margin-bottom: $app-spacing-scale-0 !important;
 }
 
 // TODO: Can be replaced by spacing + typography helpers from GOV.UK Frontend
 .app-c-radio__block-text {
   display: block;
   @include core-19;
-  margin-bottom: $govuk-spacing-scale-3;
+  margin-bottom: $app-spacing-scale-3;
 }

app/assets/stylesheets/components/helpers/_px-to-em.scss

@@ -1,10 +1,10 @@
 // Convert pixels to em
-@function em($value, $govuk-context-font-size) {
+@function em($value, $app-context-font-size) {
   @if (unitless($value)) {
     $value: $value * 1px;
   }
-  @if (unitless($govuk-context-font-size)) {
-    $govuk-context-font-size: $govuk-context-font-size * 1px;
+  @if (unitless($app-context-font-size)) {
+    $app-context-font-size: $app-context-font-size * 1px;
   }
-  @return $value / $govuk-context-font-size * 1em;
+  @return $value / $app-context-font-size * 1em;
 }

app/assets/stylesheets/components/helpers/_variables.scss

@@ -0,0 +1,19 @@
+// Forked from GOV.UK Frontend, namespace changed to ensure no conflicts.
+
+$app-spacing-scale-0: 0;
+$app-spacing-scale-1: 5px;
+$app-spacing-scale-2: 10px;
+$app-spacing-scale-3: 15px;
+$app-spacing-scale-4: 20px;
+$app-spacing-scale-5: 30px;
+$app-spacing-scale-6: 40px;
+$app-spacing-scale-7: 50px;
+$app-spacing-scale-8: 60px;
+
+$app-text-colour: $text-colour;
+$app-secondary-text-colour: $grey-1;
+
+$app-border-width-form-element: 2px;
+$app-focus-colour: $focus-colour;
+
+$app-error-colour: $red;

app/views/components/_back-link.html.erb

@@ -0,0 +1,6 @@
+<a
+  class="app-c-back-link"
+  href="<%= href %>"
+>
+  <%= t('components.back_link.back') %>
+</a>

app/views/components/docs/back-link.yml

@@ -0,0 +1,10 @@
+name: Back link
+description: A link used to help users get back, useful when not using other navigation such as breadcrumbs
+accessibility_criteria: |
+  - has a touch area easy for users to touch
+shared_accessibility_criteria:
+- link
+examples:
+  default:
+    data:
+      href: '#'

config/locales/en.yml

@@ -42,6 +42,8 @@ en:
       see_all_updates: "see all updates"
     radio:
       or: 'or'
+    back_link:
+      back: 'Back'
   language_names:
     ar: Arabic
     de: German

test/components/back_link_test.rb

@@ -0,0 +1,18 @@
+require 'component_test_helper'
+
+class BackLinkTest < ComponentTestCase
+  def component_name
+    "back-link"
+  end
+
+  test "fails to render a back link when no href is given" do
+    assert_raise do
+      render_component({})
+    end
+  end
+
+  test "renders a back link correctly" do
+    render_component(href: '/back-me')
+    assert_select ".app-c-back-link[href=\"/back-me\"]", text: "Back"
+  end
+end