diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index 21501452a..a2f148fc3 100644 --- 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; +// } +// } \ No newline at end of file diff --git a/app/templates/components/components/alert/template.njk b/app/templates/components/components/alert/template.njk index ba9d9b415..85d40a785 100644 --- 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") -%} - - - {% if visuallyHiddenText %}{{ visuallyHiddenText }}: {% endif -%} - {{ params.html | safe if params.html else params.text }} - - -
+{%- if params.slim %} +
-

Informative status

- Lorem ipsum dolor sit amet, - consectetur adipiscing - elit, sed do eiusmod. + {{params.text}}

-
\ No newline at end of file +
+{% else %} +
+
+ {{params.heading}} +

+ {{params.text}} +

+
+
+{% endif %} diff --git a/app/templates/components/components/button/template.njk b/app/templates/components/components/button/template.njk index c7bf273d1..dc81ebf11 100644 --- 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 @@ {%- elseif element == 'button' %} - diff --git a/app/templates/components/components/checkboxes/template.njk b/app/templates/components/components/checkboxes/template.njk index 967e7e57e..48a6b0b86 100644 --- 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 @@
{% if params.fieldset %} - {% call usaFieldset({ + {% call govukFieldset({ describedBy: describedBy, classes: params.fieldset.classes, attributes: params.fieldset.attributes, diff --git a/app/templates/components/components/fieldset/macro.njk b/app/templates/components/components/fieldset/macro.njk index a67b413fe..688442182 100644 --- 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 %} diff --git a/app/templates/components/components/radios/template.njk b/app/templates/components/components/radios/template.njk index 30fa8d8b3..ef1054c5f 100644 --- 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 @@
{% if params.fieldset %} - {% call usaFieldset({ + {% call govukFieldset({ describedBy: describedBy, classes: params.fieldset.classes, attributes: params.fieldset.attributes, diff --git a/app/templates/components/components/textarea/macro.njk b/app/templates/components/components/textarea/macro.njk index 03e30d11c..36a1c4ee7 100644 --- 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 %} diff --git a/app/templates/components/list-entry.html b/app/templates/components/list-entry.html index 87f77d2f0..1788c5210 100644 --- 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 diff --git a/app/templates/forms/fields/checkboxes/template.njk b/app/templates/forms/fields/checkboxes/template.njk index 03b2f584b..c1d006310 100644 --- 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 @@
{% if params.fieldset %} - {% call usaFieldset({ + {% call govukFieldset({ describedBy: describedBy, classes: params.fieldset.classes, attributes: params.fieldset.attributes, diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html index 6c534deac..0c22a8bc5 100644 --- 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)) }} -
-
-

- Don't worry, saving the template will not send -

-
-
+ {{ 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 @@
{{ 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 %} diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html index 677898b3d..70d7cbca1 100644 --- 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 @@
-
-
-

- Every message starts with a template. To send, choose or create a template. -

-
-
+ {{ 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,