Renamed components folder, put failing tests back in to get some assistance with those

app/templates/components/components/back-link/README.md

@@ -0,0 +1,15 @@
+# Back link
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the back link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/back-link).
+
+## Component options
+
+Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/back-link/#options-example-default) for details.

app/templates/components/components/back-link/_back-link.scss

@@ -0,0 +1,54 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/back-link") {
+
+  .govuk-back-link {
+    @include govuk-typography-responsive($size: 16);
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+
+    display: inline-block;
+    position: relative;
+
+    margin-top: govuk-spacing(3);
+    margin-bottom: govuk-spacing(3);
+
+    // Allow space for the arrow
+    padding-left: 14px;
+
+    // Use border-bottom rather than text-decoration so that the arrow is
+    // underlined as well.
+    border-bottom: 1px solid govuk-colour("black");
+
+    // Underline is provided by a bottom border
+    text-decoration: none;
+
+    // Prepend left pointing arrow
+    &:before {
+      @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
+
+      content: "";
+
+      // Vertically align with the parent element
+      position: absolute;
+
+      top: -1px;
+      bottom: 1px;
+      left: 0;
+
+      margin: auto;
+    }
+  }
+
+  // Begin adjustments for font baseline offset
+  // These should be removed when the font is updated with the correct baseline
+
+  .govuk-back-link:before {
+    $offset: 1px;
+
+    top: $offset * -1;
+    bottom: $offset;
+  }
+}

app/templates/components/components/back-link/macro-options.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": "The value of the link href attribute."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the anchor tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the anchor tag."
+    }
+]

app/templates/components/components/back-link/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukBackLink(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/templates/components/components/back-link/template.njk

@@ -0,0 +1,2 @@
+<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-inline-flex margin-bottom-3 {%- if params.classes %} {{ params.classes }}{% endif -%}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>