- Changing things back to govukFieldset

- Added the usaAlert component - Edited styles because stripping out UK styles broke the highlighting section
2026-04-22 10:11:04 -04:00 · 2023-09-01 16:34:54 -04:00
parent 5e783318b8
commit d8a6004926
11 changed files with 135 additions and 52 deletions
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/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;
+//   }
+// }
--- a/app/templates/components/components/alert/template.njk
+++ b/app/templates/components/components/alert/template.njk
@@ -1,17 +1,18 @@
-{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
-
-<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 %}">
+{%- 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 %}>
  <div class="usa-alert__body">
-    <h4 class="usa-alert__heading">Informative status</h4>
    <p class="usa-alert__text">
-      Lorem ipsum dolor sit amet,
-      <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a>
-      elit, sed do eiusmod.
+      {{params.text}}
    </p>
  </div>
-</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 %} 
--- a/app/templates/components/components/button/template.njk
+++ b/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>

--- a/app/templates/components/components/checkboxes/template.njk
+++ b/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,
--- a/app/templates/components/components/fieldset/macro.njk
+++ b/app/templates/components/components/fieldset/macro.njk
@@ -1,3 +1,3 @@
-{% macro usaFieldset(params) %}
+{% macro govukFieldset(params) %}
  {%- include "./template.njk" -%}
 {% endmacro %}
--- a/app/templates/components/components/radios/template.njk
+++ b/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,
--- a/app/templates/components/components/textarea/macro.njk
+++ b/app/templates/components/components/textarea/macro.njk
@@ -1,3 +1,3 @@
-{% macro usaTextarea(params) %}
+{% macro govukTextarea(params) %}
  {%- include "./template.njk" -%}
 {% endmacro %}
--- a/app/templates/components/list-entry.html
+++ b/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
--- a/app/templates/forms/fields/checkboxes/template.njk
+++ b/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,
--- a/app/templates/views/edit-sms-template.html
+++ b/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">
-      <div class="usa-alert__body">
-        <p class="usa-alert__text">
-          Don't worry, saving the template will not send        
-        </p>
-      </div>
-    </div>
+    {{ usaAlert({
+      "type": "info",
+      "text": "Don't worry, saving the template will not send",
+      "classes": "margin-top-2 usa-button--secondary"
+    }) }}

    {% 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 %}
--- a/app/templates/views/templates/choose.html
+++ b/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">
-          <div class="usa-alert__body">
-            <p class="usa-alert__text">
-              Every message starts with a template. To send, choose or create a template.
-            </p>
-          </div>
-        </div>
+        {{ usaAlert({
+          "text": "Every message starts with a template. To send, choose or create a template.",
+          "slim": true,
+          "type": "info",
+        }) }}
        {{ folder_path(
          folders=template_folder_path,
          service_id=current_service.id,