Add a legal text component

Display the ! character inside a circle, rather than using an image for
the circle and ! icon.

Add aria-hidden to the ! character to ensure it isn't read by AT.

src/components/legal-text/README.md

@@ -0,0 +1,28 @@
+# Legal text
+
+Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence.
+
+## Guidance
+
+Guidance and documentation can be found on [GOV.UK Design System](linkgoeshere).
+
+## Demo
+
+Legal text [demo](legal-text.html).
+
+## Usage
+
+Code example(s)
+
+```
+@@include('legal-text.html')
+```
+
+
+<!--
+## Installation
+
+```
+npm install --save @govuk-frontend/component-name
+```
+-->

src/components/legal-text/_legal-text.scss

@@ -0,0 +1,46 @@
+@import "../../globals/scss/colours";
+@import "../../globals/scss/font-face";
+@import "../../globals/scss/media-queries";
+@import "../../globals/scss/typography";
+@import "../../globals/scss/utilities/visually-hidden";
+@import "../../globals/scss/utilities/shapes";
+@import "../../globals/scss/import-once";
+
+@include exports("legal-text") {
+
+  .govuk-c-legal-text {
+    position: relative;
+    padding: 5px 0;
+
+    font-family: $govuk-font-stack;
+    @include font-smoothing;
+    @include govuk-core-19;
+  }
+
+  .govuk-c-legal-text__assistive {
+    @include govuk-u-visually-hidden;
+  }
+
+  .govuk-c-legal-text__icon {
+    display: inline-block;
+
+    position: absolute;
+    top: 50%;
+    left: 0;
+
+    min-width: 38px;
+    min-height: 35px;
+    margin-top: -19px; // Half the height of the 38px circle
+    padding-top: 3px;
+
+    font-size: 1.6em;
+    @include govuk-bold;
+    line-height: 35px;
+  }
+
+  .govuk-c-legal-text__text {
+    display: block;
+    margin-left: -$govuk-gutter-half;
+    padding-left: 65px;
+  }
+}

src/components/legal-text/legal-text.html

@@ -0,0 +1,7 @@
+<div class="govuk-c-legal-text">
+  <span class="govuk-c-legal-text__icon govuk-u-circle" aria-hidden="true">!</span>
+  <strong class="govuk-c-legal-text__text">
+    <span class="govuk-c-legal-text__assistive">Warning</span>
+    You can be fined up to £5,000 if you don’t register.
+  </strong>
+</div>

src/globals/scss/govuk-frontend.scss

@@ -21,3 +21,4 @@
 @import "../../components/inset-text/inset-text";
 @import "../../components/site-width-container/site-width-container";
 @import "../../components/grid/grid";
+@import "../../components/legal-text/legal-text";