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

app/templates/components/components/hint/README.md

@@ -0,0 +1,15 @@
+# Hint
+
+## 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
+
+The label component is used in other input components, to see an example of it in use see the [text input component](https://design-system.service.gov.uk/components/text-input/#using-hint-text).
+
+## 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/file-upload/#options-example-default--hint) for details.

app/templates/components/components/hint/_hint.scss

@@ -0,0 +1,50 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/hint") {
+  .govuk-hint {
+    @include govuk-font($size: 19);
+
+    display: block;
+
+    margin-bottom: govuk-spacing(3);
+
+    color: $govuk-secondary-text-colour;
+  }
+
+  // Reduces margin-bottom of hint when used after the default label (no class)
+  // or govuk-label--s for better vertical alignment.
+
+  // This adjustment will not work when the label is inside the <h1>, however it
+  // is unlikely that the default or govuk-label--s class would be used in this
+  // case.
+
+  // This adjustment will not work in browsers that do not support :not(). 
+  // Users with these browsers will see the default size margin (5px larger).
+
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  // Reduces margin-bottom of hint when used after the default legend (no class)
+  // or govuk-fieldset__legend--s for better vertical alignment.
+
+  // This adjustment will not work when the legend is outside the <h1>, however
+  // it is unlikely that the default or govuk-fieldset__legend--s class would be
+  // used in this case.
+
+  // This adjustment will not work in browsers that do not support :not(). 
+  // Users with these browsers will see the default size margin (5px larger).
+
+  .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  // Reduces visual spacing of legend when there is a hint
+
+  .govuk-fieldset__legend + .govuk-hint,
+  .govuk-fieldset__legend + .govuk-hint {
+    margin-top: -(govuk-spacing(1));
+  }
+}

app/templates/components/components/hint/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 hint. 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 hint. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "id",
+        "type": "string",
+        "required": true,
+        "description": "Optional id attribute to add to the hint span tag."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the hint span tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the hint span tag."
+    }
+]

app/templates/components/components/hint/macro.njk

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

app/templates/components/components/hint/template.njk

@@ -0,0 +1,4 @@
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {{ params.html | safe if params.html else params.text }}
+</div>