Merge pull request #432 from alphagov/update-legal-text-to-warning-text

Rename "legal text" to "warning text"

CHANGELOG.md

@@ -12,6 +12,8 @@ Breaking changes:
 - The link component has been removed from Frontend as the link styles have
   been moved to the core
   (PR [#431](https://github.com/alphagov/govuk-frontend/pull/431))
+- Rename `legal-text` argument accepted by `legal-text` component to `text` (PR [#431](https://github.com/alphagov/govuk-frontend/pull/432))
+- Rename `legal-text` component to `warning-text` (PR [#431](https://github.com/alphagov/govuk-frontend/pull/432))
 
 New features:
 
@@ -35,6 +37,7 @@ Fixes:
   components have been updated to include explicit link styling, as they
   previously relied on the global link styles.
   (PR [#427](https://github.com/alphagov/govuk-frontend/pull/427))
+- Adjust `warning-text` icon by 1px for New Transport
 - Links within the review app and the examples have been updated to use the
   `govuk-link` class.
   (PR [#427](https://github.com/alphagov/govuk-frontend/pull/427))

src/components/legal-text/README.md → src/components/warning-text/README.md

@@ -1,44 +1,44 @@
-# Legal text
+#  Warning text
 
 ## Introduction
 
-Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence.
+Use bold text with an exclamation icon if there are  consequences - for example, a fine or prison sentence.
 
 ## Guidance
 
-More information about when to use legal-text can be found on [GOV.UK Design System](http://www.linktodesignsystem.com/legal-text "Link to read guidance on the use of legal-text on Gov.uk Design system website")
+More information about when to use warning-text can be found on [GOV.UK Design System](http://www.linktodesignsystem.com/warning-text "Link to read guidance on the use of warning-text on Gov.uk Design system website")
 
 ## Quick start examples
 
 ### Component default
 
-[Preview the legal-text component](http://govuk-frontend-review.herokuapp.com/components/legal-text/preview)
+[Preview the warning-text component](http://govuk-frontend-review.herokuapp.com/components/warning-text/preview)
 
 #### Markup
 
-    <div class="govuk-c-legal-text">
-      <span class="govuk-c-legal-text__icon govuk-o-circle" aria-hidden="true">!</span>
-      <strong class="govuk-c-legal-text__text">
-        <span class="govuk-c-legal-text__assistive">Warning</span>
+    <div class="govuk-c-warning-text">
+      <span class="govuk-c-warning-text__icon govuk-o-circle" aria-hidden="true">!</span>
+      <strong class="govuk-c-warning-text__text">
+        <span class="govuk-c-warning-text__assistive">Warning</span>
         You can be fined up to £5,000 if you don’t register.
       </strong>
     </div>
 
 #### Macro
 
-    {{ govukLegalText({
+    {{ govukwarningText({
       "classes": null,
-      "legalText": "You can be fined up to £5,000 if you don’t register.",
+      "warningText": "You can be fined up to £5,000 if you don’t register.",
       "iconFallbackText": "Warning"
     }) }}
 
 ## Dependencies
 
-To consume the legal-text component you must be running npm version 5 or above.
+To consume the warning-text component you must be running npm version 5 or above.
 
 ## Installation
 
-      npm install --save @govuk-frontend/legal-text
+      npm install --save @govuk-frontend/warning-text
 
 ## Requirements
 
@@ -106,7 +106,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-c-table__row">
 
-<th class="govuk-c-table__header" scope="row">legalText</th>
+<th class="govuk-c-table__header" scope="row">warningText</th>
 
 <td class="govuk-c-table__cell ">string</td>
 
@@ -134,16 +134,16 @@ Below is an example setup using express configure views:
 
 To check whether you have the latest version of the button run:
 
-      npm outdated @govuk-frontend/legal-text
+      npm outdated @govuk-frontend/warning-text
 
 To update the latest version run:
 
-      npm update @govuk-frontend/legal-text
+      npm update @govuk-frontend/warning-text
 
 ## Contribution
 
 Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
 
 ## License
 
-MIT
+MIT

src/components/legal-text/_legal-text.scss → src/components/warning-text/_warning-text.scss

@@ -1,8 +1,8 @@
 @import "../../globals/scss/common";
 
-@include exports("legal-text") {
+@include exports("warning-text") {
 
-  .govuk-c-legal-text {
+  .govuk-c-warning-text {
     @include govuk-font-regular-19;
     @include govuk-text-colour;
 
@@ -11,11 +11,11 @@
     padding: $govuk-spacing-scale-2 0;
   }
 
-  .govuk-c-legal-text__assistive {
+  .govuk-c-warning-text__assistive {
     @include govuk-h-visually-hidden;
   }
 
-  .govuk-c-legal-text__icon {
+  .govuk-c-warning-text__icon {
     @include govuk-font-bold;
 
     display: inline-block;
@@ -26,14 +26,14 @@
 
     min-width: 38px;
     min-height: 35px;
-    margin-top: -19px; // Half the height of the 38px circle
+    margin-top: -20px; // Half the height of the 38px circle (adjusted for NTA)
     padding-top: 3px;
 
     font-size: 1.6em;
     line-height: 35px;
   }
 
-  .govuk-c-legal-text__text {
+  .govuk-c-warning-text__text {
     display: block;
     margin-left: -$govuk-gutter-half;
     padding-left: 65px;

src/components/legal-text/index.njk → src/components/warning-text/index.njk

@@ -59,7 +59,21 @@
     ],
     [
       {
-        text: 'legalText'
+        text: 'text'
+      },
+      {
+        text: 'string'
+      },
+      {
+        text: 'Yes'
+      },
+      {
+        text: 'The text next to the icon'
+      }
+    ],
+    [
+      {
+        text: 'html'
       },
       {
         text: 'string'

src/components/legal-text/macro.njk → src/components/warning-text/macro.njk

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

src/components/warning-text/template.njk

@@ -0,0 +1,10 @@
+{% from "warning-text/macro.njk" import govukWarningText -%}
+
+<div class="govuk-c-warning-text
+  {%- if params.classes %} {{ params.classes }}{% endif %}">
+  <span class="govuk-c-warning-text__icon govuk-o-circle" aria-hidden="true">!</span>
+  <strong class="govuk-c-warning-text__text">
+    <span class="govuk-c-warning-text__assistive">{{ params.iconFallbackText }}</span>
+    {{ params.html | safe if params.html else params.text }}
+  </strong>
+</div>

src/components/warning-text/warning-text.njk

@@ -0,0 +1,9 @@
+{% from "warning-text/macro.njk" import govukWarningText %}
+
+{{- govukWarningText(
+  {
+    "classes": "",
+    "text": "You can be fined up to £5,000 if you don’t register.",
+    "iconFallbackText": "Warning"
+  })
+-}}

src/components/legal-text/legal-text.yaml → src/components/warning-text/warning-text.yaml

@@ -2,5 +2,5 @@ variants:
   - name: default
     data:
       classes:
-      legalText: You can be fined up to £5,000 if you don’t register.
+      text: You can be fined up to £5,000 if you don’t register.
       iconFallbackText: Warning

src/globals/scss/govuk-frontend.scss

@@ -15,7 +15,6 @@
 @import "../../components/file-upload/file-upload";
 @import "../../components/input/input";
 @import "../../components/label/label";
-@import "../../components/legal-text/legal-text";
 @import "../../components/panel/panel";
 @import "../../components/phase-banner/phase-banner";
 @import "../../components/tag/tag";
@@ -25,3 +24,4 @@
 @import "../../components/table/table";
 @import "../../components/textarea/textarea";
 @import "../../components/previous-next/previous-next";
+@import "../../components/warning-text/warning-text";