- Changing things back to govukFieldset

- Added the usaAlert component
- Edited styles because stripping out UK styles broke the highlighting section

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -58,14 +58,6 @@ p,
    box-shadow: none !important;
 }
 
-.govuk-checkboxes__label::after {
-   top: 13px;
-   left: 9px;
-   width: 22px;
-   height: 11px;
-}
-
-.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before,
 .multiple-choice [type="radio"]:focus + label::before {
    box-shadow: 0 0 0 3px color("blue-40v");
 }
@@ -97,10 +89,6 @@ td.table-empty-message {
    font-family: family("sans");
 }
 
-.govuk-inset-text {
-   border-color: color("blue-40v");
-}
-
 .usa-dark-background .pill-item__label {
    color: white;
    text-decoration: none !important;
@@ -374,3 +362,97 @@ td.table-empty-message {
 details form {
    box-sizing:border-box;
 }
+
+// Textbox highlight 
+
+.textbox-highlight {
+
+  &-wrapper {
+      position: relative;
+  }
+
+  &-textbox {
+      resize: none;
+      z-index: 20;
+      background: none;
+  }
+
+  &-textbox,
+  &-background,
+  &-foreground,
+  &-mask {
+      font-size: units(2);
+      display: block;
+      box-sizing: border-box;
+      position: relative;
+      margin: 0;
+      padding: 4px;
+      overflow: hidden;
+      line-height: 1.6;
+  }
+
+   &-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      color: transparent;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      border: 2px solid transparent;
+      padding-bottom: units(3);
+      z-index: 10;
+
+    // transparent borders become visible in high contrast modes so set to match background
+    @media (-ms-high-contrast: active), (forced-colors: active) {
+      border-color: Canvas;
+    }
+
+    .placeholder,
+    .placeholder-conditional {
+         background-color: #fff;
+         position: relative; 
+         &:after {
+            content: "";
+            background-color: color("yellow-20v");
+            border: 1px solid color("yellow-20v");
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 5px;
+            right: 6px; 
+            height: 100%;
+            border-radius: 7px; 
+         }
+    }
+
+  }
+}
+
+.textbox-help-link {
+  margin: 10px 0 0 0;
+}
+
+.textbox-right-aligned {
+  text-align: right;
+}
+
+.extra-tracking .usa-input {
+  font-size: units(2);
+  padding-left: 5px;
+  letter-spacing: 0.04em;
+}
+
+// .textbox-colour-preview {
+//   @include govuk-media-query($from: desktop) {
+//     width: 38px;
+//     height: 38px;
+//     margin-left: 5px;
+//     border-radius: 50%;
+//     box-shadow: inset 0 0 0 1px rgba(govuk-colour("black"), 0.2);
+//     display: inline-block;
+//     vertical-align: top;
+//     transition: background 0.3s ease-out;
+//   }
+// }

app/templates/components/components/alert/template.njk

@@ -1,17 +1,18 @@
-{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
+{%- if params.slim %}
-
+<div class="usa-alert usa-alert--slim usa-alert--{{params.type}} {%- if params.classes %} {{ params.classes }}{% endif %}" {%- if params.id %} id="{{ params.id }}"{% endif %}>
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-  {% if visuallyHiddenText %}<span class="usa-sr-only">{{ visuallyHiddenText }}:</span> {% endif -%}
-  {{ params.html | safe if params.html else params.text }}
-</span>
-
-<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-alert {%- if params.classes %} {{ params.classes }}{% endif %}">
   <div class="usa-alert__body">
-    <h4 class="usa-alert__heading">Informative status</h4>
     <p class="usa-alert__text">
-      Lorem ipsum dolor sit amet,
+      {{params.text}}
-      <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a>
-      elit, sed do eiusmod.
     </p>
   </div>
 </div>
+{% else %}
+<div class="usa-alert usa-alert--{{params.type}} {%- if params.classes %} {{ params.classes }}{% endif %}" {%- if params.id %} id="{{ params.id }}"{% endif %}>
+  <div class="usa-alert__body">
+    <h{{params.header_level}} class="usa-alert__heading">{{params.heading}}</h{{params.header_level}}>
+    <p class="usa-alert__text">
+      {{params.text}}
+    </p>
+  </div>
+</div>
+{% endif %} 

app/templates/components/components/button/template.njk

@@ -12,7 +12,7 @@
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+{%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} usa-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 
@@ -26,7 +26,7 @@
 </a>
 
 {%- elseif element == 'button' %}
-<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} {% if params.disabled %}disabled{% endif %}>
   {{ params.html | safe if params.html else params.text }}
 </button>
 

app/templates/components/components/checkboxes/template.njk

@@ -1,5 +1,5 @@
 {% from "../error-message/macro.njk" import usaErrorMessage -%}
-{% from "../fieldset/macro.njk" import usaFieldset %}
+{% from "../fieldset/macro.njk" import govukFieldset %}
 {% from "../hint/macro.njk" import usaHint %}
 {% from "../label/macro.njk" import usaLabel %}
 
@@ -95,7 +95,7 @@
 
 <div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
-  {% call usaFieldset({
+  {% call govukFieldset({
     describedBy: describedBy,
     classes: params.fieldset.classes,
     attributes: params.fieldset.attributes,

app/templates/components/components/fieldset/macro.njk

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

app/templates/components/components/radios/template.njk

@@ -1,5 +1,5 @@
 {% from "../error-message/macro.njk" import usaErrorMessage -%}
-{% from "../fieldset/macro.njk" import usaFieldset %}
+{% from "../fieldset/macro.njk" import govukFieldset %}
 {% from "../hint/macro.njk" import usaHint %}
 {% from "../label/macro.njk" import usaLabel %}
 
@@ -90,7 +90,7 @@
 
 <div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
-  {% call usaFieldset({
+  {% call govukFieldset({
     describedBy: describedBy,
     classes: params.fieldset.classes,
     attributes: params.fieldset.attributes,

app/templates/components/components/textarea/macro.njk

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

app/templates/components/list-entry.html

@@ -1,4 +1,4 @@
-{% from "components/components/fieldset/macro.njk" import usaFieldset %}
+{% from "components/components/fieldset/macro.njk" import govukFieldset %}
 {% from "components/components/error-message/macro.njk" import usaErrorMessage %}
 
 {% macro list_entry(
@@ -14,7 +14,7 @@
     {% else %}
       {% set attributes = {} %}
     {% endif %}
-    {% call usaFieldset({
+    {% call govukFieldset({
         "legend": {
           "text": field.label.text,
           "isPageHeading": False

app/templates/forms/fields/checkboxes/template.njk

@@ -1,5 +1,5 @@
 {% from "components/components/error-message/macro.njk" import usaErrorMessage -%}
-{% from "components/components/fieldset/macro.njk" import usaFieldset %}
+{% from "components/components/fieldset/macro.njk" import govukFieldset %}
 {% from "components/components/hint/macro.njk" import usaHint %}
 {% from "components/components/radio-label/macro.njk" import usaRadioLabel %}
 
@@ -129,7 +129,7 @@
 
 <div class="{% if formGroup %}usa-form-group{% endif %} {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
-  {% call usaFieldset({
+  {% call govukFieldset({
     describedBy: describedBy,
     classes: params.fieldset.classes,
     attributes: params.fieldset.attributes,

app/templates/views/edit-sms-template.html

@@ -4,6 +4,7 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
+{% from "components/components/alert/macro.njk" import usaAlert %}
 
 {% block service_page_title %}
   {{ heading_action }} text message template
@@ -19,13 +20,11 @@
 
     {{ page_header('{} text message template'.format(heading_action)) }}
 
-    <div class="usa-alert usa-alert--info usa-alert--slim">
+    {{ usaAlert({
-      <div class="usa-alert__body">
+      "type": "info",
-        <p class="usa-alert__text">
+      "text": "Don't worry, saving the template will not send",
-          Don't worry, saving the template will not send        
+      "classes": "margin-top-2 usa-button--secondary"
-        </p>
+    }) }}
-      </div>
-    </div>
 
     {% if current_service.prefix_sms %}
       {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
@@ -35,7 +34,7 @@
       <div class="grid-row">
         <div class="grid-col-8">
           {{ form.name(param_extensions={
-            "classes": "",
+            "extra_form_group_classes": "margin-bottom-2",
             "hint": {"text": "Your recipients will not see this"}
           }) }}
           {{ textbox(
@@ -44,6 +43,7 @@
             width='1-1',
             hint=content_hint,
             rows=5,
+            extra_form_group_classes='margin-bottom-1',
             placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!'
           ) }}
           {% if current_user.platform_admin %}

app/templates/views/templates/choose.html

@@ -4,6 +4,8 @@
 {% from "components/form.html" import form_wrapper %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/components/alert/macro.njk" import usaAlert %}
+
 
 {% extends "withnav_template.html" %}
 
@@ -34,13 +36,11 @@
 
     <div class="grid-row">
       <div class="{% if current_user.has_permissions('manage_templates') %} grid-col-10 {% else %} grid-col-12 {% endif %}">
-        <div class="usa-alert usa-alert--info usa-alert--slim">
+        {{ usaAlert({
-          <div class="usa-alert__body">
+          "text": "Every message starts with a template. To send, choose or create a template.",
-            <p class="usa-alert__text">
+          "slim": true,
-              Every message starts with a template. To send, choose or create a template.
+          "type": "info",
-            </p>
+        }) }}
-          </div>
-        </div>
         {{ folder_path(
           folders=template_folder_path,
           service_id=current_service.id,