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/admin_template.html b/app/templates/admin_template.html index 1ef49ca34..d57161e06 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -133,7 +133,7 @@ ] %} #} {% endif %} - {{ govukHeader({ + {{ usaHeader({ "homepageUrl": url_for('main.show_accounts_or_dashboard'), "productName": "Notify", "navigation": navigation, @@ -151,7 +151,7 @@ {% set meta_suffix = 'Built by the Technology Transformation Services' %} {% endif %} - {{ govukFooter({ + {{ usaFooter({ "classes": "js-footer", "navigation": [ { diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html index e63e507b4..5ea9383d9 100644 --- a/app/templates/components/banner.html +++ b/app/templates/components/banner.html @@ -1,5 +1,5 @@ {% from "components/form.html" import form_wrapper %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
- {{ govukButton({ + {{ usaButton({ "text": "" if thing else delete_button, "html": delete_button + " β€˜" + thing + "’" if thing else "", "name": "delete", diff --git a/app/templates/components/components/alert/README.md b/app/templates/components/components/alert/README.md new file mode 100644 index 000000000..8e601db74 --- /dev/null +++ b/app/templates/components/components/alert/README.md @@ -0,0 +1,15 @@ +# Error message + +## Installation + +See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. + +## Guidance and Examples + +Find out when to use the error message component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-message). + +## Component options + +Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text. + +See [options table](https://design-system.service.gov.uk/components/error-message/#options-example-default) for details. \ No newline at end of file diff --git a/app/templates/components/components/alert/macro-options.json b/app/templates/components/components/alert/macro-options.json new file mode 100644 index 000000000..eddcab0d2 --- /dev/null +++ b/app/templates/components/components/alert/macro-options.json @@ -0,0 +1,37 @@ +[ + { + "name": "text", + "type": "string", + "required": true, + "description": "If `html` is set, this is not required. Text to use within the error message. If `html` is provided, the `text` argument will be ignored." + }, + { + "name": "html", + "type": "string", + "required": true, + "description": "If `text` is set, this is not required. HTML to use within the error message. If `html` is provided, the `text` argument will be ignored." + }, + { + "name": "id", + "type": "string", + "required": false, + "description": "Id attribute to add to the error message span tag." + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the error message span tag." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the error message span tag" + }, + { + "name": "visuallyHiddenText", + "type": "string", + "description": "A visually hidden prefix used before the error message. Defaults to \"Error\"." + } +] \ No newline at end of file diff --git a/app/templates/components/components/alert/macro.njk b/app/templates/components/components/alert/macro.njk new file mode 100644 index 000000000..65a977566 --- /dev/null +++ b/app/templates/components/components/alert/macro.njk @@ -0,0 +1,3 @@ +{% macro usaAlert(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/app/templates/components/components/alert/template.njk b/app/templates/components/components/alert/template.njk new file mode 100644 index 000000000..85d40a785 --- /dev/null +++ b/app/templates/components/components/alert/template.njk @@ -0,0 +1,18 @@ +{%- if params.slim %} +
+
+

+ {{params.text}} +

+
+
+{% else %} +
+
+ {{params.heading}} +

+ {{params.text}} +

+
+
+{% endif %} diff --git a/app/templates/components/components/back-link/_back-link.scss b/app/templates/components/components/back-link/_back-link.scss deleted file mode 100644 index 5cfe3a068..000000000 --- a/app/templates/components/components/back-link/_back-link.scss +++ /dev/null @@ -1,54 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/back-link") { - - .govuk-back-link { - @include govuk-typography-responsive($size: 16); - @include govuk-link-common; - @include govuk-link-style-text; - - display: inline-block; - position: relative; - - margin-top: govuk-spacing(3); - margin-bottom: govuk-spacing(3); - - // Allow space for the arrow - padding-left: 14px; - - // Use border-bottom rather than text-decoration so that the arrow is - // underlined as well. - border-bottom: 1px solid govuk-colour("black"); - - // Underline is provided by a bottom border - text-decoration: none; - - // Prepend left pointing arrow - &:before { - @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px); - - content: ""; - - // Vertically align with the parent element - position: absolute; - - top: -1px; - bottom: 1px; - left: 0; - - margin: auto; - } - } - - // Begin adjustments for font baseline offset - // These should be removed when the font is updated with the correct baseline - - .govuk-back-link:before { - $offset: 1px; - - top: $offset * -1; - bottom: $offset; - } -} diff --git a/app/templates/components/components/back-link/macro.njk b/app/templates/components/components/back-link/macro.njk index efcdad27e..d232c1b2b 100644 --- a/app/templates/components/components/back-link/macro.njk +++ b/app/templates/components/components/back-link/macro.njk @@ -1,3 +1,3 @@ -{% macro govukBackLink(params) %} +{% macro usaBackLink(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/button/_button.scss b/app/templates/components/components/button/_button.scss deleted file mode 100644 index a39a62e29..000000000 --- a/app/templates/components/components/button/_button.scss +++ /dev/null @@ -1,256 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/button") { - // Primary button variables - $govuk-button-colour: #00823b; // sass-lint:disable no-color-literals - $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%); - $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%); - $govuk-button-text-colour: govuk-colour("white"); - - // Secondary button variables - $govuk-secondary-button-colour: govuk-colour("grey-3"); - $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%); - $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%); - $govuk-secondary-button-text-colour: govuk-colour("black"); - - // Warning button variables - $govuk-warning-button-colour: govuk-colour("red"); - $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%); - $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%); - $govuk-warning-button-text-colour: govuk-colour("white"); - - // Because the shadow (s0) is visually 'part of' the button, we need to reduce - // the height of the button to compensate by adjusting its padding (s1) and - // increase the bottom margin to include it (s2). - $button-shadow-size: $govuk-border-width-form-element; - - .govuk-button { - @include govuk-font($size: 19, $line-height: 19px); - @include govuk-focusable; - - box-sizing: border-box; - display: inline-block; - position: relative; - width: 100%; - margin-top: 0; - @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2 - padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1 - border: $govuk-border-width-form-element solid transparent; - border-radius: 0; - color: $govuk-button-text-colour; - background-color: $govuk-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 - text-align: center; - vertical-align: top; - cursor: pointer; - -webkit-appearance: none; - - @include govuk-if-ie8 { - border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; - } - - @include govuk-media-query($from: tablet) { - width: auto; - } - - // Ensure that any global link styles are overridden - &:link, - &:visited, - &:active, - &:hover { - color: $govuk-button-text-colour; - text-decoration: none; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors so - // so that unvisited links styled as buttons do not end up with dark blue - // text when focussed. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-button-text-colour; - } - } - - // Fix unwanted button padding in Firefox - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - &:hover, - &:focus { - background-color: $govuk-button-hover-colour; - } - - &:active { - top: $button-shadow-size; - box-shadow: none; - - @include govuk-if-ie8 { - border-bottom-width: 0; - } - } - - // The following adjustments do not work for as - // non-container elements cannot include pseudo elements (i.e. ::before). - - // Use a pseudo element to expand the click target area to include the - // button's shadow as well, in case users try to click it. - &::before { - content: ""; - display: block; - - position: absolute; - - top: -$govuk-border-width-form-element; - right: -$govuk-border-width-form-element; - bottom: -($govuk-border-width-form-element + $button-shadow-size); - left: -$govuk-border-width-form-element; - - background: transparent; - } - - // When the button is active it is shifted down by $button-shadow-size to - // denote a 'pressed' state. If the user happened to click at the very top - // of the button, their mouse is no longer over the button (because it has - // 'moved beneath them') and so the click event is not fired. - // - // This corrects that by shifting the top of the pseudo element so that it - // continues to cover the area that the user originally clicked, which means - // the click event is still fired. - // - // πŸŽ‰ - &:active::before { - top: -($govuk-border-width-form-element + $button-shadow-size); - } - } - - .govuk-button--disabled, - .govuk-button[disabled="disabled"], - .govuk-button[disabled] { - opacity: (.5); - - &:hover { - background-color: $govuk-button-colour; - cursor: default; - } - - &:focus { - outline: none; - } - - &:active { - top: 0; - box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 - @include govuk-if-ie8 { - border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0 - } - } - } - - .govuk-button--secondary { - background-color: $govuk-secondary-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour; - - &, - &:link, - &:visited, - &:active, - &:hover { - color: $govuk-secondary-button-text-colour; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors so - // so that unvisited links styled as buttons do not end up with dark blue - // text when focussed. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-secondary-button-text-colour; - } - } - - &:hover, - &:focus { - background-color: $govuk-secondary-button-hover-colour; - - &[disabled] { - background-color: $govuk-secondary-button-colour; - } - } - } - - .govuk-button--warning { - background-color: $govuk-warning-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour; - - &, - &:link, - &:visited, - &:active, - &:hover { - color: $govuk-warning-button-text-colour; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors so - // so that unvisited links styled as buttons do not end up with dark blue - // text when focussed. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-warning-button-text-colour; - } - } - - &:hover, - &:focus { - background-color: $govuk-warning-button-hover-colour; - - &[disabled] { - background-color: $govuk-warning-button-colour; - } - } - } - - .govuk-button--start { - @include govuk-typography-weight-bold; - @include govuk-typography-responsive($size: 24, $override-line-height: 1); - - min-height: auto; - padding-top: govuk-spacing(2) - $govuk-border-width-form-element; - padding-right: govuk-spacing(7); - padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element; - padding-left: govuk-spacing(3); - - background-image: govuk-image-url("icon-pointer.png"); - background-repeat: no-repeat; - background-position: 100% 50%; - - @include govuk-device-pixel-ratio { - background-image: govuk-image-url("icon-pointer-2x.png"); - background-size: 30px 19px; - } - } - - // Begin adjustments for font baseline offset - // These should be removed when the font is updated with the correct baseline - // For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428 - - $offset: 2; - - .govuk-button { - padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1 - padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1 - } - - .govuk-button--start { - padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1 - padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1 - } -} diff --git a/app/templates/components/components/button/macro.njk b/app/templates/components/components/button/macro.njk index 352d538c5..ed3102473 100644 --- a/app/templates/components/components/button/macro.njk +++ b/app/templates/components/components/button/macro.njk @@ -1,3 +1,3 @@ -{% macro govukButton(params) %} +{% macro usaButton(params) %} {%- include "./template.njk" -%} {% endmacro %} 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/_checkboxes.scss b/app/templates/components/components/checkboxes/_checkboxes.scss deleted file mode 100644 index 86309549f..000000000 --- a/app/templates/components/components/checkboxes/_checkboxes.scss +++ /dev/null @@ -1,310 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@import "../error-message/error-message"; -@import "../fieldset/fieldset"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/checkboxes") { - - $govuk-touch-target-size: 44px; - $govuk-checkboxes-size: 40px; - $govuk-small-checkboxes-size: 24px; - $govuk-checkboxes-label-padding-left-right: govuk-spacing(3); - - .govuk-checkboxes__item { - @include govuk-font($size: 19); - - display: block; - position: relative; - - min-height: $govuk-checkboxes-size; - - margin-bottom: govuk-spacing(2); - padding-left: $govuk-checkboxes-size; - - clear: left; - } - - .govuk-checkboxes__item:last-child, - .govuk-checkboxes__item:last-of-type { - margin-bottom: 0; - } - - .govuk-checkboxes__input { - $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2; - - cursor: pointer; - - // IE8 doesn’t support pseudo-elements, so we don’t want to hide native - // elements there. - @include govuk-not-ie8 { - position: absolute; - - z-index: 1; - top: $input-offset * -1; - left: $input-offset * -1; - - width: $govuk-touch-target-size; - height: $govuk-touch-target-size; - margin: 0; - - opacity: 0; - } - - @include govuk-if-ie8 { - margin-top: 10px; - margin-right: $govuk-checkboxes-size / -2; - margin-left: $govuk-checkboxes-size / -2; - float: left; - - // add focus outline to input - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - } - } - } - - .govuk-checkboxes__label { - display: inline-block; - margin-bottom: 0; - padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1); - cursor: pointer; - // remove 300ms pause on mobile - -ms-touch-action: manipulation; - touch-action: manipulation; - } - - // [ ] Check box - .govuk-checkboxes__label::before { - content: ""; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - width: $govuk-checkboxes-size; - height: $govuk-checkboxes-size; - border: $govuk-border-width-form-element solid currentColor; - background: transparent; - } - - // βœ” Check mark - // - // The check mark is a box with a border on the left and bottom side (└──), - // rotated 45 degrees - .govuk-checkboxes__label::after { - content: ""; - - position: absolute; - top: 11px; - left: 9px; - width: 18px; - height: 7px; - - -webkit-transform: rotate(-45deg); - - -ms-transform: rotate(-45deg); - - transform: rotate(-45deg); - border: solid; - border-width: 0 0 $govuk-border-width $govuk-border-width; - // Fix bug in IE11 caused by transform rotate (-45deg). - // See: alphagov/govuk_elements/issues/518 - border-top-color: transparent; - - opacity: 0; - - background: transparent; - } - - .govuk-checkboxes__hint { - display: block; - padding-right: $govuk-checkboxes-label-padding-left-right; - padding-left: $govuk-checkboxes-label-padding-left-right; - } - - // Focused state - .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - // Since box-shadows are removed when users customise their colours, we set - // a transparent outline that is shown instead. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ - outline: $govuk-focus-width solid transparent; - outline-offset: $govuk-focus-width; - box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; - } - - // Selected state - .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after { - opacity: 1; - } - - // Disabled state - .govuk-checkboxes__input:disabled, - .govuk-checkboxes__input:disabled + .govuk-checkboxes__label { - cursor: default; - } - - .govuk-checkboxes__input:disabled + .govuk-checkboxes__label { - opacity: .5; - } - - // ========================================================= - // Conditional reveals - // ========================================================= - - $conditional-border-width: $govuk-border-width-mobile; - // Calculate the amount of padding needed to keep the border centered against the checkbox. - $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2); - // Move the border centered with the checkbox - $conditional-margin-left: $conditional-border-padding; - // Move the contents of the conditional inline with the label - $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right; - - .govuk-checkboxes__conditional { - @include govuk-responsive-margin(4, "bottom"); - margin-left: $conditional-margin-left; - padding-left: $conditional-padding-left; - border-left: $conditional-border-width solid $govuk-border-colour; - - .js-enabled &--hidden { - display: none; - } - - & > :last-child { - margin-bottom: 0; - } - } - - // ========================================================= - // Small checkboxes - // ========================================================= - - .govuk-checkboxes--small { - - $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2; - $label-offset: $govuk-touch-target-size - $input-offset; - - .govuk-checkboxes__item { - @include govuk-clearfix; - min-height: 0; - margin-bottom: 0; - padding-left: $label-offset; - float: left; - } - - // Shift the touch target into the left margin so that the visible edge of - // the control is aligned - // - // ┆What colours do you like? - // β”Œβ”†β”€β”€β”€β” - // │┆[] β”‚ Purple - // β””β”†β–²β”€β”€β”˜ - // ▲┆└─ Check box pseudo element, aligned with margin - // └─── Touch target (invisible input), shifted into the margin - .govuk-checkboxes__input { - @include govuk-not-ie8 { - left: $input-offset * -1; - } - - @include govuk-if-ie8 { - margin-left: $govuk-small-checkboxes-size * -1; - } - } - - // Adjust the size and position of the label. - // - // Unlike larger checkboxes, we also have to float the label in order to - // 'shrink' it, preventing the hover state from kicking in across the full - // width of the parent element. - .govuk-checkboxes__label { - margin-top: -2px; - padding: 13px govuk-spacing(3) 13px 1px; - float: left; - - @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 10px 1px; - } - } - - // [ ] Check box - // - // Reduce the size of the check box [1], vertically center it within the - // touch target [2] - .govuk-checkboxes__label::before { - top: $input-offset - $govuk-border-width-form-element; // 2 - width: $govuk-small-checkboxes-size; // 1 - height: $govuk-small-checkboxes-size; // 1 - } - - // βœ” Check mark - // - // Reduce the size of the check mark and re-align within the checkbox - .govuk-checkboxes__label::after { - top: 15px; - left: 6px; - width: 9px; - height: 3.5px; - border-width: 0 0 3px 3px; - } - - // Fix position of hint with small checkboxes - // - // Do not use hints with small checkboxes – because they're within the input - // wrapper they trigger the hover state, but clicking them doesn't actually - // activate the control. - // - // (If you do use them, they won't look completely broken... but seriously, - // don't use them) - .govuk-checkboxes__hint { - padding: 0; - clear: both; - } - - // Align conditional reveals with small checkboxes - .govuk-checkboxes__conditional { - $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2); - margin-left: $margin-left; - padding-left: $label-offset - ($margin-left + $conditional-border-width); - clear: both; - } - - // Hover state for small checkboxes. - // - // We use a hover state for small checkboxes because the touch target size - // is so much larger than their visible size, and so we need to provide - // feedback to the user as to which checkbox they will select when their - // cursor is outside of the visible area. - .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; - } - - // Because we've overridden the border-shadow provided by the focus state, - // we need to redefine that too. - // - // We use two box shadows, one that restores the original focus state [1] - // and another that then applies the hover state [2]. - .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - // sass-lint:disable indentation - box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1 - 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2 - } - - // For devices that explicitly don't support hover, don't provide a hover - // state (e.g. on touch devices like iOS). - // - // We can't use `@media (hover: hover)` because we wouldn't get the hover - // state in browsers that don't support `@media (hover)` (like Internet - // Explorer) – so we have to 'undo' the hover state instead. - @media (hover: none), (pointer: coarse) { - .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } - - .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; - } - } - } -} diff --git a/app/templates/components/components/checkboxes/macro.njk b/app/templates/components/components/checkboxes/macro.njk index e023534a4..7de23185e 100644 --- a/app/templates/components/components/checkboxes/macro.njk +++ b/app/templates/components/components/checkboxes/macro.njk @@ -1,3 +1,3 @@ -{% macro govukCheckboxes(params) %} +{% macro usaCheckboxes(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/checkboxes/template.njk b/app/templates/components/components/checkboxes/template.njk index eedf372e1..48a6b0b86 100644 --- a/app/templates/components/components/checkboxes/template.njk +++ b/app/templates/components/components/checkboxes/template.njk @@ -1,7 +1,7 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} +{% from "../error-message/macro.njk" import usaErrorMessage -%} {% from "../fieldset/macro.njk" import govukFieldset %} -{% from "../hint/macro.njk" import govukHint %} -{% from "../label/macro.njk" import govukLabel %} +{% from "../hint/macro.njk" import usaHint %} +{% from "../label/macro.njk" import usaLabel %} {#- If an id 'prefix' is not passed, fall back to using the name attribute instead. We need this for error messages and hints as well -#} @@ -29,7 +29,7 @@ {% if params.hint %} {% set hintId = idPrefix + '-hint' %} {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ + {{ usaHint({ id: hintId, classes: params.hint.classes, attributes: params.hint.attributes, @@ -40,7 +40,7 @@ {% if params.errorMessage %} {% set errorId = idPrefix + '-error' %} {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ + {{ usaErrorMessage({ id: errorId, classes: params.errorMessage.classes, attributes: params.errorMessage.attributes, @@ -67,7 +67,7 @@ {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%} {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}> - {{ govukLabel({ + {{ usaLabel({ html: item.html, text: item.text, classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes), @@ -75,7 +75,7 @@ for: id }) | indent(6) | trim }} {%- if hasHint %} - {{ govukHint({ + {{ usaHint({ id: itemHintId, classes: 'govuk-checkboxes__hint', attributes: item.hint.attributes, diff --git a/app/templates/components/components/details/_details.scss b/app/templates/components/components/details/_details.scss deleted file mode 100644 index 44c80ad58..000000000 --- a/app/templates/components/components/details/_details.scss +++ /dev/null @@ -1,89 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/details") { - - .govuk-details { - @include govuk-font($size: 19); - @include govuk-text-colour; - @include govuk-responsive-margin(6, "bottom"); - - display: block; - } - - .govuk-details__summary { - // Make the focus outline shrink-wrap the text content of the summary - display: inline-block; - - // Absolutely position the marker against this element - position: relative; - - margin-bottom: govuk-spacing(1); - - // Allow for absolutely positioned marker and align with disclosed text - padding-left: govuk-spacing(4) + $govuk-border-width; - - // Style the summary to look like a link... - color: $govuk-link-colour; - cursor: pointer; - } - - // ...but only underline the text, not the arrow - .govuk-details__summary-text { - text-decoration: underline; - } - - .govuk-details__summary:hover { - color: $govuk-link-hover-colour; - } - - .govuk-details__summary:focus { - // -1px offset fixes gap between background and outline in Firefox - outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour; - outline-offset: -1px; - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - color: $govuk-focus-text-colour; - background: $govuk-focus-colour; - } - - // Remove the default details marker so we can style our own consistently and - // ensure it displays in Firefox (see implementation.md for details) - .govuk-details__summary::-webkit-details-marker { - display: none; - } - - // Append our own open / closed marker using a pseudo-element - .govuk-details__summary:before { - content: ""; - position: absolute; - - top: 0; - bottom: 0; - left: 0; - - margin: auto; - - @include govuk-shape-arrow($direction: right, $base: 14px); - - .govuk-details[open] > & { - @include govuk-shape-arrow($direction: down, $base: 14px); - } - } - - .govuk-details__text { - padding: govuk-spacing(3); - padding-left: govuk-spacing(4); - border-left: $govuk-border-width solid $govuk-border-colour; - } - - .govuk-details__text p { - margin-top: 0; - margin-bottom: govuk-spacing(4); - } - - .govuk-details__text > :last-child { - margin-bottom: 0; - } -} diff --git a/app/templates/components/components/details/macro.njk b/app/templates/components/components/details/macro.njk index e53969983..0575dbc81 100644 --- a/app/templates/components/components/details/macro.njk +++ b/app/templates/components/components/details/macro.njk @@ -1,3 +1,3 @@ -{% macro govukDetails(params) %} +{% macro usaDetails(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/details/template.njk b/app/templates/components/components/details/template.njk index 76b380594..2ec92f9be 100644 --- a/app/templates/components/components/details/template.njk +++ b/app/templates/components/components/details/template.njk @@ -1,10 +1,10 @@ -
- - +
+ + {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }} -
+
{{ params.html | safe if params.html else params.text }}
diff --git a/app/templates/components/components/error-message/_error-message.scss b/app/templates/components/components/error-message/_error-message.scss deleted file mode 100644 index b97298c3a..000000000 --- a/app/templates/components/components/error-message/_error-message.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/error-message") { - .govuk-error-message { - @include govuk-font($size: 19, $weight: bold); - - display: block; - margin-bottom: govuk-spacing(3); - clear: both; - - color: $govuk-error-colour; - } -} diff --git a/app/templates/components/components/error-message/macro.njk b/app/templates/components/components/error-message/macro.njk index 053b23bdc..47c4ce2a5 100644 --- a/app/templates/components/components/error-message/macro.njk +++ b/app/templates/components/components/error-message/macro.njk @@ -1,3 +1,3 @@ -{% macro govukErrorMessage(params) %} +{% macro usaErrorMessage(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/fieldset/_fieldset.scss b/app/templates/components/components/fieldset/_fieldset.scss deleted file mode 100644 index fa7728e0f..000000000 --- a/app/templates/components/components/fieldset/_fieldset.scss +++ /dev/null @@ -1,70 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/fieldset") { - .govuk-fieldset { - min-width: 0; - margin: 0; - padding: 0; - border: 0; - @include govuk-clearfix; - } - - // Fix for Firefox < 53 - // https://bugzilla.mozilla.org/show_bug.cgi?id=504622 - @supports not (caret-color: auto) { - .govuk-fieldset, - x:-moz-any-link { - display: table-cell; - } - } - - .govuk-fieldset__legend { - @include govuk-font($size: 19); - @include govuk-text-colour; - - // Fix legend text wrapping in Edge and IE - // 1. IE9-11 & Edge 12-13 - // 2. IE8-11 - box-sizing: border-box; // 1 - display: table; // 2 - max-width: 100%; // 1 - margin-bottom: govuk-spacing(2); - padding: 0; - // Hack to let legends or elements within legends have margins in webkit browsers - overflow: hidden; - - white-space: normal; // 1 - } - - // Modifiers that make legends look more like their equivalent headings - - .govuk-fieldset__legend--xl { - @include govuk-font($size: 48, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-fieldset__legend--l { - @include govuk-font($size: 36, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-fieldset__legend--m { - @include govuk-font($size: 24, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-fieldset__legend--s { - @include govuk-font($size: 19, $weight: bold); - } - - // When the legend contains an H1, we want the H1 to inherit all styles from - // the legend. Effectively we want to be able to treat the heading as if it is - // not there. - .govuk-fieldset__heading { - margin: 0; - font-size: inherit; - font-weight: inherit; - } -} diff --git a/app/templates/components/components/footer/_footer.scss b/app/templates/components/components/footer/_footer.scss deleted file mode 100644 index 8c964ff3e..000000000 --- a/app/templates/components/components/footer/_footer.scss +++ /dev/null @@ -1,236 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@import "../../helpers/typography"; - -@include govuk-exports("govuk/component/footer") { - - $usa-footer-background: $govuk-canvas-background-colour; - $usa-footer-border-top: #a1acb2; - $usa-footer-border: govuk-colour("grey-2"); - $usa-footer-text: #454a4c; - $usa-footer-link: $usa-footer-text; - $usa-footer-link-hover: #171819; - - // Based on the govuk-crest-2x.png image dimensions. - $usa-footer-crest-image-width-2x: 250px; - $usa-footer-crest-image-height-2x: 204px; - // Half the 2x image so that it fits the regular 1x size. - $usa-footer-crest-image-width: ($usa-footer-crest-image-width-2x / 2); - $usa-footer-crest-image-height: ($usa-footer-crest-image-height-2x / 2); - - .usa-footer { - @include govuk-font($size: 16); - @include govuk-responsive-padding(7, "top"); - @include govuk-responsive-padding(5, "bottom"); - - border-top: 1px solid $usa-footer-border-top; - color: $usa-footer-text; - background: $usa-footer-background; - } - - .usa-footer__link { - @include govuk-focusable-fill; - - &:link, - &:visited { - color: $usa-footer-link; - } - - &:hover, - &:active { - color: $usa-footer-link-hover; - } - - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - &:focus { - color: $govuk-focus-text-colour; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors. - @include govuk-compatibility(govuk_template) { - &:link:focus { - @include govuk-text-colour; - } - } - } - - .usa-footer__section-break { - margin: 0; // Reset `
` default margins - @include govuk-responsive-margin(8, "bottom"); - border: 0; // Reset `
` default borders - border-bottom: 1px solid $usa-footer-border; - } - - .usa-footer__meta { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; // Support: Flexbox - margin-right: -$govuk-gutter-half; - margin-left: -$govuk-gutter-half; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; // Support: Flexbox - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; // Support: Flexbox - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; // Support: Flexbox - } - - .usa-footer__meta-item { - margin-right: $govuk-gutter-half; - margin-bottom: govuk-spacing(5); - margin-left: $govuk-gutter-half; - } - - .usa-footer__meta-item--grow { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; // Support: Flexbox - @include mq ($until: tablet) { - -webkit-flex-basis: 320px; - -ms-flex-preferred-size: 320px; - flex-basis: 320px; // Support: Flexbox - } - } - - .usa-footer__licence-logo { - display: inline-block; - margin-right: govuk-spacing(2); - @include mq ($until: desktop) { - margin-bottom: govuk-spacing(3); - } - vertical-align: top; - } - - .usa-footer__licence-description { - display: inline-block; - } - - .usa-footer__copyright-logo { - display: inline-block; - min-width: $usa-footer-crest-image-width; - padding-top: ($usa-footer-crest-image-height + govuk-spacing(2)); - background-image: govuk-image-url("govuk-crest.png"); - @include govuk-device-pixel-ratio { - background-image: govuk-image-url("govuk-crest-2x.png"); - } - background-repeat: no-repeat; - background-position: 50% 0%; - background-size: $usa-footer-crest-image-width $usa-footer-crest-image-height; - text-align: center; - text-decoration: none; - white-space: nowrap; - } - - .usa-footer__inline-list { - margin-top: 0; - margin-bottom: govuk-spacing(3); - padding: 0; - } - - .usa-footer__meta-custom { - margin-bottom: govuk-spacing(4); - } - - .usa-footer__inline-list-item { - display: inline-block; - margin-right: govuk-spacing(3); - margin-bottom: govuk-spacing(1); - } - - .usa-footer__heading { - @include govuk-responsive-margin(7, "bottom"); - padding-bottom: govuk-spacing(4); - @include mq ($until: tablet) { - padding-bottom: govuk-spacing(2); - } - border-bottom: 1px solid $usa-footer-border; - } - - .usa-footer__navigation { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; // Support: Flexbox - margin-right: -$govuk-gutter-half; - margin-left: -$govuk-gutter-half; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; // Support: Flexbox - } - - .usa-footer__section { - display: inline-block; - margin-right: $govuk-gutter-half; - margin-bottom: $govuk-gutter; - margin-left: $govuk-gutter-half; - vertical-align: top; - // Ensure columns take up equal width (typically one-half:one-half) - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; // Support: Flexbox - -webkit-flex-shrink: 1; - -ms-flex-negative: 1; - flex-shrink: 1; // Support: Flexbox - @include mq ($until: desktop) { - // Make sure columns do not drop below 200px in width - // Will typically result in wrapping, and end up in a single column on smaller screens. - -webkit-flex-basis: 200px; - -ms-flex-preferred-size: 200px; - flex-basis: 200px; // Support: Flexbox - } - } - - // Sections two-third:one-third on desktop - @include mq ($from: desktop) { - .usa-footer__section:first-child { - -webkit-box-flex: 2; - -webkit-flex-grow: 2; - -ms-flex-positive: 2; - flex-grow: 2; // Support: Flexbox - } - } - - .usa-footer__list { - margin: 0; - padding: 0; - list-style: none; - -webkit-column-gap: $govuk-gutter; - -moz-column-gap: $govuk-gutter; - column-gap: $govuk-gutter; // Support: Columns - } - - @include mq ($from: desktop) { - .usa-footer__list--columns-2 { - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; // Support: Columns - } - - .usa-footer__list--columns-3 { - -webkit-column-count: 3; - -moz-column-count: 3; - column-count: 3; // Support: Columns - } - } - - .usa-footer__list-item { - @include govuk-responsive-margin(4, "bottom"); - } - - .usa-footer__list-item:last-child { - margin-bottom: 0; - } -} diff --git a/app/templates/components/components/footer/macro.njk b/app/templates/components/components/footer/macro.njk index 22e58680c..d0f92f065 100644 --- a/app/templates/components/components/footer/macro.njk +++ b/app/templates/components/components/footer/macro.njk @@ -1,3 +1,3 @@ -{% macro govukFooter(params) %} +{% macro usaFooter(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/header/_header.scss b/app/templates/components/components/header/_header.scss deleted file mode 100644 index 20ffec2a5..000000000 --- a/app/templates/components/components/header/_header.scss +++ /dev/null @@ -1,297 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@import "../../helpers/typography"; - -@include govuk-exports("govuk/component/header") { - - $govuk-header-background: govuk-colour("black"); - $govuk-header-border-color: $govuk-brand-colour; - $govuk-header-border-width: govuk-spacing(2); - $govuk-header-text: govuk-colour("white"); - $govuk-header-link: govuk-colour("white"); - $govuk-header-link-hover: govuk-colour("white"); - $govuk-header-link-active: #1d8feb; - $govuk-header-nav-item-border-color: #2e3133; - - .govuk-header { - @include govuk-font($size: 16); - - border-bottom: govuk-spacing(2) solid govuk-colour("white"); - color: $govuk-header-text; - background: $govuk-header-background; - - } - - .govuk-header__container--full-width { - padding: 0 govuk-spacing(3); - border-color: $govuk-header-border-color; - - .govuk-header__menu-button { - right: govuk-spacing(3); - } - } - - .govuk-header__container { - @include govuk-clearfix; - position: relative; - margin-bottom: -$govuk-header-border-width; - padding-top: govuk-spacing(2); - border-bottom: $govuk-header-border-width solid $govuk-header-border-color; - } - - .govuk-header__logotype { - margin-right: govuk-spacing(1); - } - - .govuk-header__logotype-fallback-image { - width: 36px; - height: 32px; - border: 0; - vertical-align: middle; - } - - .govuk-header__product-name { - @include govuk-font($size: 24); - display: inline-table; - padding-right: govuk-spacing(2); - } - - .govuk-header__link { - @include govuk-focusable-fill; - - text-decoration: none; - - &:link, - &:visited { - color: $govuk-header-link; - } - - &:hover { - text-decoration: underline; - } - - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - &:focus { - color: $govuk-focus-text-colour; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors. - @include govuk-compatibility(govuk_template) { - &:link:focus { - @include govuk-text-colour; - } - } - } - - .govuk-header__link--homepage { - // Font size needs to be set on the link so that the box sizing is correct - // in Firefox - @include govuk-font($size: false, $weight: bold); - - display: inline-block; - font-size: 30px; // We don't have a mixin that produces 30px font size - line-height: 30px; - - &:link, - &:visited { - text-decoration: none; - } - - &:hover, - &:active { - // Negate the added border - margin-bottom: -1px; - // Omitting colour will use default value of currentColor – if we - // specified currentColor explicitly IE8 would ignore this rule. - border-bottom: 1px solid; - } - } - - .govuk-header__link--service-name { - display: inline-block; - margin-bottom: govuk-spacing(2); - @include govuk-font($size: 24, $weight: bold); - } - - .govuk-header__logo, - .govuk-header__content { - box-sizing: border-box; - } - - .govuk-header__logo { - @include govuk-responsive-margin(2, "bottom"); - padding-right: govuk-spacing(8); - - @include mq ($from: desktop) { - width: 33.33%; - padding-right: $govuk-gutter-half; - float: left; - vertical-align: top; - } - } - - .govuk-header__content { - @include mq ($from: desktop) { - width: 66.66%; - padding-left: $govuk-gutter-half; - float: left; - } - } - - .govuk-header__menu-button { - @include govuk-font($size: 16); - display: none; - position: absolute; - top: govuk-spacing(4); - right: 0; - margin: 0; - padding: 0; - border: 0; - color: $govuk-header-link; - background: none; - - &:hover { - text-decoration: underline; - } - - &::after { - @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block); - content: ""; - margin-left: govuk-spacing(1); - } - - @include govuk-focusable; - - @include mq ($from: tablet) { - top: govuk-spacing(3); - } - } - - .govuk-header__menu-button--open { - &::after { - @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block); - } - } - - .govuk-header__navigation { - @include govuk-responsive-margin(2, "bottom"); - display: block; - margin: 0; - padding: 0; - list-style: none; - } - - .js-enabled { - .govuk-header__menu-button { - display: block; - @include mq ($from: desktop) { - display: none; - } - } - - .govuk-header__navigation { - display: none; - @include mq ($from: desktop) { - display: block; - } - } - - .govuk-header__navigation--open { - display: block; - } - } - - - .govuk-header__navigation--end { - @include mq ($from: desktop) { - margin: 0; - padding: govuk-spacing(1) 0; - text-align: right; - } - } - - .govuk-header__navigation--no-service-name { - padding-top: govuk-spacing(7); - } - - .govuk-header__navigation-item { - padding: govuk-spacing(2) 0; - border-bottom: 1px solid $govuk-header-nav-item-border-color; - - @include mq ($from: desktop) { - display: inline-block; - margin-right: govuk-spacing(3); - padding: govuk-spacing(1) 0; - border: 0; - } - - a { - @include govuk-font($size: 16, $weight: bold); - white-space: nowrap; - } - } - - .govuk-header__navigation-item--active { - a { - &:link, - &:hover, - &:visited { - color: $govuk-header-link-active; - } - - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - &:focus { - color: $govuk-focus-text-colour; - } - } - } - - .govuk-header__navigation-item:last-child { - margin-right: 0; - } - - @include govuk-media-query($media-type: print) { - .govuk-header { - border-bottom-width: 0; - color: govuk-colour("black"); - background: transparent; - } - - // Hide the inverted logo when printing in browsers that don't support SVG. - .govuk-header__logotype-fallback-image { - display: none; - } - - .govuk-header__link { - &:link, - &:visited { - color: govuk-colour("black"); - } - - // Do not append link href to GOV.UK link when printing (e.g. '(/)') - &:after { - display: none; - } - } - } - - // Begin adjustments for font baseline offset - // These should be removed when the font is updated with the correct baseline - .govuk-header__logotype { - position: relative; - top: -4px; - } - - .govuk-header { - $offset: 3px; - padding-top: $offset; - } - // End adjustments - -} diff --git a/app/templates/components/components/header/macro.njk b/app/templates/components/components/header/macro.njk index d863b7831..3f0101fc2 100644 --- a/app/templates/components/components/header/macro.njk +++ b/app/templates/components/components/header/macro.njk @@ -1,3 +1,3 @@ -{% macro govukHeader(params) %} +{% macro usaHeader(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/hint/_hint.scss b/app/templates/components/components/hint/_hint.scss deleted file mode 100644 index a9370334a..000000000 --- a/app/templates/components/components/hint/_hint.scss +++ /dev/null @@ -1,50 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/hint") { - .usa-hint { - @include govuk-font($size: 19); - - display: block; - - margin-bottom: govuk-spacing(3); - - color: $govuk-secondary-text-colour; - } - - // Reduces margin-bottom of hint when used after the default label (no class) - // or govuk-label--s for better vertical alignment. - - // This adjustment will not work when the label is inside the

, however it - // is unlikely that the default or govuk-label--s class would be used in this - // case. - - // This adjustment will not work in browsers that do not support :not(). - // Users with these browsers will see the default size margin (5px larger). - - .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .usa-hint { - margin-bottom: govuk-spacing(2); - } - - // Reduces margin-bottom of hint when used after the default legend (no class) - // or govuk-fieldset__legend--s for better vertical alignment. - - // This adjustment will not work when the legend is outside the

, however - // it is unlikely that the default or govuk-fieldset__legend--s class would be - // used in this case. - - // This adjustment will not work in browsers that do not support :not(). - // Users with these browsers will see the default size margin (5px larger). - - .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .usa-hint { - margin-bottom: govuk-spacing(2); - } - - // Reduces visual spacing of legend when there is a hint - - .govuk-fieldset__legend + .usa-hint, - .govuk-fieldset__legend + .usa-hint { - margin-top: -(govuk-spacing(1)); - } -} diff --git a/app/templates/components/components/hint/macro.njk b/app/templates/components/components/hint/macro.njk index e0a639d75..176814888 100644 --- a/app/templates/components/components/hint/macro.njk +++ b/app/templates/components/components/hint/macro.njk @@ -1,3 +1,3 @@ -{% macro govukHint(params) %} +{% macro usaHint(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/input/_input.scss b/app/templates/components/components/input/_input.scss deleted file mode 100644 index 1dc1f06d3..000000000 --- a/app/templates/components/components/input/_input.scss +++ /dev/null @@ -1,77 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/input") { - .govuk-input { - @include govuk-font($size: 19); - @include govuk-focusable; - - box-sizing: border-box; - width: 100%; - height: 40px; - margin-top: 0; - - padding: govuk-spacing(1); - // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476) - // as background-color and color need to always be set together, color should not be set either - border: $govuk-border-width-form-element solid $govuk-input-border-colour; - border-radius: 0; - - // Disable inner shadow and remove rounded corners - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - - .govuk-input::-webkit-outer-spin-button, - .govuk-input::-webkit-inner-spin-button { - margin: 0; - -webkit-appearance: none; - } - - .govuk-input[type="number"] { - -moz-appearance: textfield; - } - - .govuk-input--error { - border: $govuk-border-width-form-element-error solid $govuk-error-colour; - } - - // The ex measurements are based on the number of W's that can fit inside the input - // Extra space is left on the right hand side to allow for the Safari prefill icon - // Linear regression estimation based on visual tests: y = 1.76 + 1.81x - - .govuk-input--width-30 { - max-width: 56ex + 3ex; - } - - .govuk-input--width-20 { - max-width: 38ex + 3ex; - } - - .govuk-input--width-10 { - max-width: 20ex + 3ex; - } - - .govuk-input--width-5 { - max-width: 10.8ex; - } - - .govuk-input--width-4 { - max-width: 9ex; - } - - .govuk-input--width-3 { - max-width: 7.2ex; - } - - .govuk-input--width-2 { - max-width: 5.4ex; - } - -} diff --git a/app/templates/components/components/input/macro.njk b/app/templates/components/components/input/macro.njk index e512c1864..5cdd050a8 100644 --- a/app/templates/components/components/input/macro.njk +++ b/app/templates/components/components/input/macro.njk @@ -1,3 +1,3 @@ -{% macro govukInput(params) %} +{% macro usaInput(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/input/template.njk b/app/templates/components/components/input/template.njk index b4d8ce555..7f5634651 100644 --- a/app/templates/components/components/input/template.njk +++ b/app/templates/components/components/input/template.njk @@ -1,12 +1,12 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../hint/macro.njk" import govukHint %} -{% from "../label/macro.njk" import govukLabel %} +{% from "../error-message/macro.njk" import usaErrorMessage -%} +{% from "../hint/macro.njk" import usaHint %} +{% from "../label/macro.njk" import usaLabel %} {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %}
- {{ govukLabel({ + {{ usaLabel({ html: params.label.html, text: params.label.text, classes: params.label.classes, @@ -17,7 +17,7 @@ {% if params.hint %} {% set hintId = params.id + '-hint' %} {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ + {{ usaHint({ id: hintId, classes: params.hint.classes, attributes: params.hint.attributes, @@ -28,7 +28,7 @@ {% if params.errorMessage %} {% set errorId = params.id + '-error' %} {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ + {{ usaErrorMessage({ id: errorId, classes: params.errorMessage.classes, attributes: params.errorMessage.attributes, diff --git a/app/templates/components/components/inset-text/_inset-text.scss b/app/templates/components/components/inset-text/_inset-text.scss deleted file mode 100644 index 524dc50c8..000000000 --- a/app/templates/components/components/inset-text/_inset-text.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/inset-text") { - .govuk-inset-text { - @include govuk-font($size: 19); - @include govuk-text-colour; - padding: govuk-spacing(3); - // Margin top intended to collapse - // This adds an additional 10px to the paragraph above - @include govuk-responsive-margin(6, "top"); - @include govuk-responsive-margin(6, "bottom"); - - clear: both; - - border-left: $govuk-border-width-wide solid $govuk-border-colour; - - > :first-child { - margin-top: 0; - } - - > :only-child, - > :last-child { - margin-bottom: 0; - } - } -} diff --git a/app/templates/components/components/inset-text/macro.njk b/app/templates/components/components/inset-text/macro.njk index 935c8a69c..db21f5a6f 100644 --- a/app/templates/components/components/inset-text/macro.njk +++ b/app/templates/components/components/inset-text/macro.njk @@ -1,3 +1,3 @@ -{% macro govukInsetText(params) %} +{% macro usaInsetText(params) %} {%- include './template.njk' -%} {% endmacro %} diff --git a/app/templates/components/components/label/_label.scss b/app/templates/components/components/label/_label.scss deleted file mode 100644 index bfe400e57..000000000 --- a/app/templates/components/components/label/_label.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/label") { - .govuk-label { - @include govuk-font($size: 19); - @include govuk-text-colour; - - display: block; - - margin-bottom: govuk-spacing(1); - } - - // Modifiers that make labels look more like their equivalent headings - - .govuk-label--xl { - @include govuk-font($size: 48, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-label--l { - @include govuk-font($size: 36, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-label--m { - @include govuk-font($size: 24, $weight: bold); - margin-bottom: govuk-spacing(2); - } - - .govuk-label--s { - @include govuk-font($size: 19, $weight: bold); - } - - // When the label is nested inside a heading, override the heading so that it - // does not have a margin. Effectively we want to be able to treat the heading - // as if it is not there. - // - // This breaks BEM conventions because it exists as a parent of the 'block', - // so we can't really consider an element. - .govuk-label-wrapper { - margin: 0; - } -} diff --git a/app/templates/components/components/label/macro.njk b/app/templates/components/components/label/macro.njk index 91f2ed71a..9bac46d8d 100644 --- a/app/templates/components/components/label/macro.njk +++ b/app/templates/components/components/label/macro.njk @@ -1,3 +1,3 @@ -{% macro govukLabel(params) %} +{% macro usaLabel(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/radio-label/_label.scss b/app/templates/components/components/radio-label/_label.scss deleted file mode 100644 index bfe400e57..000000000 --- a/app/templates/components/components/radio-label/_label.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/label") { - .govuk-label { - @include govuk-font($size: 19); - @include govuk-text-colour; - - display: block; - - margin-bottom: govuk-spacing(1); - } - - // Modifiers that make labels look more like their equivalent headings - - .govuk-label--xl { - @include govuk-font($size: 48, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-label--l { - @include govuk-font($size: 36, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-label--m { - @include govuk-font($size: 24, $weight: bold); - margin-bottom: govuk-spacing(2); - } - - .govuk-label--s { - @include govuk-font($size: 19, $weight: bold); - } - - // When the label is nested inside a heading, override the heading so that it - // does not have a margin. Effectively we want to be able to treat the heading - // as if it is not there. - // - // This breaks BEM conventions because it exists as a parent of the 'block', - // so we can't really consider an element. - .govuk-label-wrapper { - margin: 0; - } -} diff --git a/app/templates/components/components/radios/_radios.scss b/app/templates/components/components/radios/_radios.scss deleted file mode 100644 index 074bb53cc..000000000 --- a/app/templates/components/components/radios/_radios.scss +++ /dev/null @@ -1,348 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@import "../error-message/error-message"; -@import "../fieldset/fieldset"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/radios") { - - $govuk-touch-target-size: 44px; - $govuk-radios-size: 40px; - $govuk-small-radios-size: 24px; - $govuk-radios-label-padding-left-right: govuk-spacing(3); - // When the default focus width is used on a curved edge it looks visually smaller. - // So for the circular radios we bump the default to make it look visually consistent. - $govuk-radios-focus-width: $govuk-focus-width + 1px; - - .govuk-radios__item { - @include govuk-font($size: 19); - - display: block; - position: relative; - - min-height: $govuk-radios-size; - - margin-bottom: govuk-spacing(2); - padding-left: $govuk-radios-size; - - clear: left; - } - - .govuk-radios__item:last-child, - .govuk-radios__item:last-of-type { - margin-bottom: 0; - } - - .govuk-radios__input { - $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2; - - cursor: pointer; - - // IE8 doesn’t support pseudo-elements, so we don’t want to hide native - // elements there. - @include govuk-not-ie8 { - position: absolute; - - z-index: 1; - top: $input-offset * -1; - left: $input-offset * -1; - - width: $govuk-touch-target-size; - height: $govuk-touch-target-size; - margin: 0; - - opacity: 0; - } - - @include govuk-if-ie8 { - margin-top: 10px; - margin-right: $govuk-radios-size / -2; - margin-left: $govuk-radios-size / -2; - float: left; - - // add focus outline to input - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - } - } - } - - .govuk-radios__label { - display: inline-block; - margin-bottom: 0; - padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1); - cursor: pointer; - // remove 300ms pause on mobile - -ms-touch-action: manipulation; - touch-action: manipulation; - } - - // ( ) Radio ring - .govuk-radios__label::before { - content: ""; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - - width: $govuk-radios-size; - height: $govuk-radios-size; - - border: $govuk-border-width-form-element solid currentColor; - border-radius: 50%; - background: transparent; - } - - // β€’ Radio button - // - // We create the 'button' entirely out of 'border' so that they remain - // 'filled' even when colours are overridden in the browser. - .govuk-radios__label::after { - content: ""; - - position: absolute; - top: govuk-spacing(2); - left: govuk-spacing(2); - - width: 0; - height: 0; - - border: govuk-spacing(2) solid currentColor; - border-radius: 50%; - opacity: 0; - background: currentColor; - } - - .govuk-radios__hint { - display: block; - padding-right: $govuk-radios-label-padding-left-right; - padding-left: $govuk-radios-label-padding-left-right; - } - - // Focused state - .govuk-radios__input:focus + .govuk-radios__label::before { - // Since box-shadows are removed when users customise their colours we set a - // transparent outline that is shown instead. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ - outline: $govuk-focus-width solid transparent; - outline-offset: $govuk-focus-width; - box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; - } - - // Selected state - .govuk-radios__input:checked + .govuk-radios__label::after { - opacity: 1; - } - - // Disabled state - .govuk-radios__input:disabled, - .govuk-radios__input:disabled + .govuk-radios__label { - cursor: default; - } - - .govuk-radios__input:disabled + .govuk-radios__label { - opacity: .5; - } - - // ========================================================= - // Inline radios - // ========================================================= - - .govuk-radios--inline { - @include mq ($from: tablet) { - @include govuk-clearfix; - - .govuk-radios__item { - margin-right: govuk-spacing(4); - float: left; - clear: none; - } - } - - // Prevent inline modifier being used with conditional reveals - &.govuk-radios--conditional { - .govuk-radios__item { - margin-right: 0; - float: none; - } - } - } - - // ========================================================= - // Dividers ('or') - // ========================================================= - - .govuk-radios__divider { - $govuk-divider-size: $govuk-radios-size !default; - @include govuk-font($size: 19); - @include govuk-text-colour; - width: $govuk-divider-size; - margin-bottom: govuk-spacing(2); - text-align: center; - } - - // ========================================================= - // Conditional reveals - // ========================================================= - - $conditional-border-width: $govuk-border-width-mobile; - // Calculate the amount of padding needed to keep the border centered against the radios. - $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2); - // Move the border centered with the radios - $conditional-margin-left: $conditional-border-padding; - // Move the contents of the conditional inline with the label - $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right; - - .govuk-radios__conditional { - @include govuk-responsive-margin(4, "bottom"); - margin-left: $conditional-margin-left; - padding-left: $conditional-padding-left; - border-left: $conditional-border-width solid $govuk-border-colour; - - .js-enabled &--hidden { - display: none; - } - - & > :last-child { - margin-bottom: 0; - } - } - - // ========================================================= - // Small checkboxes - // ========================================================= - - .govuk-radios--small { - - $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2; - $label-offset: $govuk-touch-target-size - $input-offset; - - .govuk-radios__item { - @include govuk-clearfix; - min-height: 0; - margin-bottom: 0; - padding-left: $label-offset; - float: left; - } - - // Shift the touch target into the left margin so that the visible edge of - // the control is aligned - // - // ┆Which colour is your favourite? - // β”Œβ”†β”€β”€β”€β” - // │┆() β”‚ Purple - // β””β”†β–²β”€β”€β”˜ - // ▲┆└─ Radio pseudo element, aligned with margin - // └─── Touch target (invisible input), shifted into the margin - .govuk-radios__input { - @include govuk-not-ie8 { - left: $input-offset * -1; - } - - @include govuk-if-ie8 { - margin-left: $govuk-small-radios-size * -1; - } - } - - // Adjust the size and position of the label. - // - // Unlike larger radios, we also have to float the label in order to - // 'shrink' it, preventing the hover state from kicking in across the full - // width of the parent element. - .govuk-radios__label { - margin-top: -2px; - padding: 13px govuk-spacing(3) 13px 1px; - float: left; - - @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 10px 1px; - } - } - - // ( ) Radio ring - // - // Reduce the size of the control [1], vertically centering it within the - // touch target [2] - .govuk-radios__label::before { - top: $input-offset - $govuk-border-width-form-element; // 2 - width: $govuk-small-radios-size; // 1 - height: $govuk-small-radios-size; // 1 - } - - // β€’ Radio button - // - // Reduce the size of the 'button' and center it within the ring - .govuk-radios__label::after { - top: 14px; - left: 6px; - border-width: 6px; - } - - // Fix position of hint with small radios - // - // Do not use hints with small radios – because they're within the input - // wrapper they trigger the hover state, but clicking them doesn't actually - // activate the control. - // - // (If you do use them, they won't look completely broken... but seriously, - // don't use them) - .govuk-radios__hint { - padding: 0; - clear: both; - pointer-events: none; - } - - // Align conditional reveals with small radios - .govuk-radios__conditional { - $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2); - margin-left: $margin-left; - padding-left: $label-offset - ($margin-left + $conditional-border-width); - clear: both; - } - - .govuk-radios__divider { - width: $govuk-small-radios-size; - margin-bottom: govuk-spacing(1); - } - - // Hover state for small radios. - // - // We use a hover state for small radios because the touch target size - // is so much larger than their visible size, and so we need to provide - // feedback to the user as to which radio they will select when their - // cursor is outside of the visible area. - .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; - } - - // Because we've overridden the border-shadow provided by the focus state, - // we need to redefine that too. - // - // We use two box shadows, one that restores the original focus state [1] - // and another that then applies the hover state [2]. - .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - // sass-lint:disable indentation - box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1 - 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2 - } - - // For devices that explicitly don't support hover, don't provide a hover - // state (e.g. on touch devices like iOS). - // - // We can't use `@media (hover: hover)` because we wouldn't get the hover - // state in browsers that don't support `@media (hover)` (like Internet - // Explorer) – so we have to 'undo' the hover state instead. - @media (hover: none), (pointer: coarse) { - .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } - - .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; - } - } - } -} diff --git a/app/templates/components/components/radios/macro.njk b/app/templates/components/components/radios/macro.njk index 67b4d8b89..78d18f563 100644 --- a/app/templates/components/components/radios/macro.njk +++ b/app/templates/components/components/radios/macro.njk @@ -1,3 +1,3 @@ -{% macro govukRadios(params) %} +{% macro usaRadios(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/radios/template.njk b/app/templates/components/components/radios/template.njk index bab8ab7dc..ef1054c5f 100644 --- a/app/templates/components/components/radios/template.njk +++ b/app/templates/components/components/radios/template.njk @@ -1,7 +1,7 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} +{% from "../error-message/macro.njk" import usaErrorMessage -%} {% from "../fieldset/macro.njk" import govukFieldset %} -{% from "../hint/macro.njk" import govukHint %} -{% from "../label/macro.njk" import govukLabel %} +{% from "../hint/macro.njk" import usaHint %} +{% from "../label/macro.njk" import usaLabel %} {#- If an id 'prefix' is not passed, fall back to using the name attribute instead. We need this for error messages and hints as well -#} @@ -23,7 +23,7 @@ {% if params.hint %} {% set hintId = idPrefix + '-hint' %} {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ + {{ usaHint({ id: hintId, classes: params.hint.classes, attributes: params.hint.attributes, @@ -34,7 +34,7 @@ {% if params.errorMessage %} {% set errorId = idPrefix + '-error' %} {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ + {{ usaErrorMessage({ id: errorId, classes: params.errorMessage.classes, attributes: params.errorMessage.attributes, @@ -61,7 +61,7 @@ {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%} {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}> - {{ govukLabel({ + {{ usaLabel({ html: item.html, text: item.text, classes: 'usa-radio__label' + (' ' + item.label.classes if item.label.classes), @@ -69,7 +69,7 @@ for: id }) | indent(6) | trim }} {%- if hasHint %} - {{ govukHint({ + {{ usaHint({ id: itemHintId, classes: 'usa-checkbox__label-description', attributes: item.hint.attributes, diff --git a/app/templates/components/components/skip-link/_skip-link.scss b/app/templates/components/components/skip-link/_skip-link.scss deleted file mode 100644 index ddccb1d2e..000000000 --- a/app/templates/components/components/skip-link/_skip-link.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/skip-link") { - .govuk-skip-link { - @include govuk-visually-hidden-focusable; - @include govuk-link-common; - @include govuk-link-style-text; - @include govuk-typography-responsive($size: 16); - - display: block; - padding: govuk-spacing(2) govuk-spacing(3); - - // Respect 'display cutout' safe area (avoids notches and rounded corners) - @supports (padding: unquote("max(calc(0px))")) { - $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right)); - $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left)); - - // Use max() to pick largest padding, default or with safe area - // Escaped due to Sass max() vs. CSS native max() - padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})"); - padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})"); - } - } -} diff --git a/app/templates/components/components/skip-link/macro.njk b/app/templates/components/components/skip-link/macro.njk index b5afb0c4e..4b1d7ff9a 100644 --- a/app/templates/components/components/skip-link/macro.njk +++ b/app/templates/components/components/skip-link/macro.njk @@ -1,3 +1,3 @@ -{% macro govukSkipLink(params) %} +{% macro usaSkipLink(params) %} {%- include "./template.njk" -%} {% endmacro %} diff --git a/app/templates/components/components/textarea/_textarea.scss b/app/templates/components/components/textarea/_textarea.scss deleted file mode 100644 index d37145cc5..000000000 --- a/app/templates/components/components/textarea/_textarea.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/textarea") { - .govuk-textarea { - @include govuk-font($size: 19, $line-height: 1.25); - @include govuk-focusable; - - box-sizing: border-box; // should this be global? - display: block; - width: 100%; - min-height: 40px; - @include govuk-responsive-margin(6, "bottom"); - padding: govuk-spacing(1); - - resize: vertical; - - border: $govuk-border-width-form-element solid $govuk-input-border-colour; - border-radius: 0; - - -webkit-appearance: none; - } - - .govuk-textarea--error { - border: $govuk-border-width-form-element-error solid $govuk-error-colour; - } -} diff --git a/app/templates/components/components/textarea/template.njk b/app/templates/components/components/textarea/template.njk index 49c5642ba..82c3ac751 100644 --- a/app/templates/components/components/textarea/template.njk +++ b/app/templates/components/components/textarea/template.njk @@ -1,12 +1,12 @@ -{% from "../error-message/macro.njk" import govukErrorMessage -%} -{% from "../hint/macro.njk" import govukHint %} -{% from "../label/macro.njk" import govukLabel %} +{% from "../error-message/macro.njk" import usaErrorMessage -%} +{% from "../hint/macro.njk" import usaHint %} +{% from "../label/macro.njk" import usaLabel %} {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %}
- {{ govukLabel({ + {{ usaLabel({ html: params.label.html, text: params.label.text, classes: params.label.classes, @@ -17,7 +17,7 @@ {% if params.hint %} {% set hintId = params.id + '-hint' %} {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ + {{ usaHint({ id: hintId, classes: params.hint.classes, attributes: params.hint.attributes, @@ -28,7 +28,7 @@ {% if params.errorMessage %} {% set errorId = params.id + '-error' %} {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ + {{ usaErrorMessage({ id: errorId, classes: params.errorMessage.classes, attributes: params.errorMessage.attributes, @@ -37,7 +37,7 @@ visuallyHiddenText: params.errorMessage.visuallyHiddenText }) | indent(2) | trim }} {% endif %} - diff --git a/app/templates/components/file-upload.html b/app/templates/components/file-upload.html index 6fdc70f04..3c613a2c3 100644 --- a/app/templates/components/file-upload.html +++ b/app/templates/components/file-upload.html @@ -1,4 +1,4 @@ -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% macro file_upload( field, @@ -39,6 +39,6 @@ {% endif %} - {{ govukButton({ "text": "Submit", "classes": "file-upload-submit" }) }} + {{ usaButton({ "text": "Submit", "classes": "file-upload-submit" }) }} {% endmacro %} diff --git a/app/templates/components/list-entry.html b/app/templates/components/list-entry.html index a17930379..1788c5210 100644 --- a/app/templates/components/list-entry.html +++ b/app/templates/components/list-entry.html @@ -1,5 +1,5 @@ {% from "components/components/fieldset/macro.njk" import govukFieldset %} -{% from "components/components/error-message/macro.njk" import govukErrorMessage %} +{% from "components/components/error-message/macro.njk" import usaErrorMessage %} {% macro list_entry( field, diff --git a/app/templates/components/page-footer.html b/app/templates/components/page-footer.html index cb3c85eec..9399f313e 100644 --- a/app/templates/components/page-footer.html +++ b/app/templates/components/page-footer.html @@ -1,4 +1,4 @@ -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% macro page_footer( button_text=None, @@ -27,7 +27,7 @@ }) %} {% endif %} - {{ govukButton(button_data) }} + {{ usaButton(button_data) }} {% endif %} {% if delete_link %} diff --git a/app/templates/forms/fields/checkboxes/template.njk b/app/templates/forms/fields/checkboxes/template.njk index ae7c2aa62..c1d006310 100644 --- a/app/templates/forms/fields/checkboxes/template.njk +++ b/app/templates/forms/fields/checkboxes/template.njk @@ -1,6 +1,6 @@ -{% from "components/components/error-message/macro.njk" import govukErrorMessage -%} +{% from "components/components/error-message/macro.njk" import usaErrorMessage -%} {% from "components/components/fieldset/macro.njk" import govukFieldset %} -{% from "components/components/hint/macro.njk" import govukHint %} +{% from "components/components/hint/macro.njk" import usaHint %} {% from "components/components/radio-label/macro.njk" import usaRadioLabel %} @@ -53,7 +53,7 @@ {% if params.hint %} {% set hintId = idPrefix + '-hint' %} {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} - {{ govukHint({ + {{ usaHint({ id: hintId, classes: params.hint.classes, attributes: params.hint.attributes, @@ -64,7 +64,7 @@ {% if params.errorMessage %} {% set errorId = idPrefix + '-error' %} {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} - {{ govukErrorMessage({ + {{ usaErrorMessage({ id: errorId, classes: params.errorMessage.classes, attributes: params.errorMessage.attributes, @@ -100,7 +100,7 @@ for: id }) | indent(6) | trim }} {%- if hasHint %} - {{ govukHint({ + {{ usaHint({ id: itemHintId, classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes), attributes: item.hint.attributes, diff --git a/app/templates/main_template.html b/app/templates/main_template.html index b6072b74c..f3cb395cd 100644 --- a/app/templates/main_template.html +++ b/app/templates/main_template.html @@ -1,6 +1,6 @@ -{% from "./components/components/skip-link/macro.njk" import govukSkipLink -%} -{% from "./components/components/header/macro.njk" import govukHeader -%} -{% from "./components/components/footer/macro.njk" import govukFooter -%} +{% from "./components/components/skip-link/macro.njk" import usaSkipLink -%} +{% from "./components/components/header/macro.njk" import usaHeader -%} +{% from "./components/components/footer/macro.njk" import usaFooter -%} {# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #} {%- set assetUrl = assetUrl | default(assetPath) -%} @@ -37,14 +37,14 @@ {% block bodyStart %}{% endblock %} {% block skipLink %} - {{ govukSkipLink({ + {{ usaSkipLink({ "href": '#main-content', "text": 'Skip to main content' }) }} {% endblock %} {% block header %} - {{ govukHeader({}) }} + {{ usaHeader({}) }} {% endblock %} {% block main %} @@ -57,7 +57,7 @@ {% endblock %} {% block footer %} - {{ govukFooter({}) }} + {{ usaFooter({}) }} {% endblock %} {% block bodyEnd %}{% endblock %} diff --git a/app/templates/partials/templates/guidance-formatting-letters.html b/app/templates/partials/templates/guidance-formatting-letters.html index 2c948395a..183de080c 100644 --- a/app/templates/partials/templates/guidance-formatting-letters.html +++ b/app/templates/partials/templates/guidance-formatting-letters.html @@ -1,17 +1,17 @@ -{% from "components/components/inset-text/macro.njk" import govukInsetText %} +{% from "components/components/inset-text/macro.njk" import usaInsetText %}

Formatting

To put a heading in your template, use a hash:

-{{ govukInsetText({ +{{ usaInsetText({ "text": "# This is a heading", "classes": ""}) }}

To make bullet points, use asterisks:

-{{ govukInsetText({ +{{ usaInsetText({ "html": "* point 1
* point 2
* point 3
", @@ -20,7 +20,7 @@

To insert a page break, use three asterisks:

-{{ govukInsetText({ +{{ usaInsetText({ "html": "Content on page 1

***
diff --git a/app/templates/partials/templates/guidance-formatting.html b/app/templates/partials/templates/guidance-formatting.html index afaa38a88..6589701cf 100644 --- a/app/templates/partials/templates/guidance-formatting.html +++ b/app/templates/partials/templates/guidance-formatting.html @@ -1,17 +1,17 @@ -{% from "components/components/inset-text/macro.njk" import govukInsetText %} +{% from "components/components/inset-text/macro.njk" import usaInsetText %}

Formatting

To put a title in your template, use a hash:

- {{ govukInsetText({"text": "# This is a title", "classes": ""})}} + {{ usaInsetText({"text": "# This is a title", "classes": ""})}}

To make bullet points, use asterisks:

- {{ govukInsetText({ + {{ usaInsetText({ "html": "* point 1
* point 2
* point 3
", @@ -22,12 +22,12 @@ To add inset text, use a caret:

- {{ govukInsetText({"text": "^ You must tell us if your circumstances change", "classes": ""})}} + {{ usaInsetText({"text": "^ You must tell us if your circumstances change", "classes": ""})}}

To add a horizontal line, use three dashes:

-{{ govukInsetText({ +{{ usaInsetText({ "html": '

First paragraph

---

Second paragraph

', diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html index ceb241c94..6ed7a2d68 100644 --- a/app/templates/partials/templates/guidance-links.html +++ b/app/templates/partials/templates/guidance-links.html @@ -1,9 +1,9 @@ -{% from "components/components/inset-text/macro.njk" import govukInsetText %} +{% from "components/components/inset-text/macro.njk" import usaInsetText %}

Links and URLs

Always use full URLs, starting with https://. For example: -{{ govukInsetText({ +{{ usaInsetText({ "text": "Apply now at https://www.usa.gov/example", "classes": "usa-body"}) }} diff --git a/app/templates/partials/templates/guidance-optional-content.html b/app/templates/partials/templates/guidance-optional-content.html index 4748c4136..8c97be5b3 100644 --- a/app/templates/partials/templates/guidance-optional-content.html +++ b/app/templates/partials/templates/guidance-optional-content.html @@ -1,4 +1,4 @@ -{% from "components/components/inset-text/macro.njk" import govukInsetText %} +{% from "components/components/inset-text/macro.njk" import usaInsetText %}

Optional content @@ -10,7 +10,7 @@ For example if you only want to show something to people who are under 18:

-{{ govukInsetText({ +{{ usaInsetText({ "text": "((under18??Please get your application signed by a parent or guardian.))", "classes": "usa-body"}) diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html index 024825088..c995e5e5e 100644 --- a/app/templates/partials/templates/guidance-personalisation.html +++ b/app/templates/partials/templates/guidance-personalisation.html @@ -1,4 +1,4 @@ -{% from "components/components/inset-text/macro.njk" import govukInsetText %} +{% from "components/components/inset-text/macro.njk" import usaInsetText %}

Personalization @@ -6,7 +6,7 @@

Use double brackets to personalize your message:

-{{ govukInsetText({ +{{ usaInsetText({ "text": "Hello ((first name)), your reference is ((ref number))", "classes": ""}) }} diff --git a/app/templates/partials/templates/guidance-send-a-document.html b/app/templates/partials/templates/guidance-send-a-document.html index 12d9eae65..3f839e378 100644 --- a/app/templates/partials/templates/guidance-send-a-document.html +++ b/app/templates/partials/templates/guidance-send-a-document.html @@ -1,4 +1,4 @@ -{% from "components/components/inset-text/macro.njk" import govukInsetText %} +{% from "components/components/inset-text/macro.njk" import usaInsetText %}

Send a document by email @@ -6,7 +6,7 @@

Use double brackets to add a placeholder field to your template. This will contain a secure link to download the document.

-{{ govukInsetText({ +{{ usaInsetText({ "text": "Download your document at: ((link_to_file))", "classes": ""}) }} diff --git a/app/templates/views/api/callbacks.html b/app/templates/views/api/callbacks.html index f1f2a0ff8..a34b9256a 100644 --- a/app/templates/views/api/callbacks.html +++ b/app/templates/views/api/callbacks.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/table.html" import mapping_table, row, text_field, edit_field, optional_text_field with context %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Callbacks {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/api/callbacks/delivery-status-callback.html b/app/templates/views/api/callbacks/delivery-status-callback.html index a3e1ad99a..b206f70fe 100644 --- a/app/templates/views/api/callbacks/delivery-status-callback.html +++ b/app/templates/views/api/callbacks/delivery-status-callback.html @@ -2,7 +2,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Callbacks for delivery receipts @@ -10,7 +10,7 @@ {% block backLink %} - {{ govukBackLink({ "href": url_for(back_link, service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for(back_link, service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/api/callbacks/received-text-messages-callback.html b/app/templates/views/api/callbacks/received-text-messages-callback.html index ab189428a..3ebea4703 100644 --- a/app/templates/views/api/callbacks/received-text-messages-callback.html +++ b/app/templates/views/api/callbacks/received-text-messages-callback.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Callbacks for received text messages {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.api_callbacks', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.api_callbacks', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/api/guest-list.html b/app/templates/views/api/guest-list.html index 83785d54b..5e405dd48 100644 --- a/app/templates/views/api/guest-list.html +++ b/app/templates/views/api/guest-list.html @@ -5,14 +5,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/list-entry.html" import list_entry %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Guest list {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/api/keys.html b/app/templates/views/api/keys.html index 1e0c2edf7..4a9bf95e5 100644 --- a/app/templates/views/api/keys.html +++ b/app/templates/views/api/keys.html @@ -1,15 +1,15 @@ {% extends "withnav_template.html" %} {% from "components/table.html" import list_table, field, hidden_field_heading %} {% from "components/page-header.html" import page_header %} -{% from "components/components/button/macro.njk" import govukButton %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/button/macro.njk" import usaButton %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} API keys {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.api_integration', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} @@ -57,7 +57,7 @@

- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Create an API key", "href": url_for('.create_api_key', service_id=current_service.id), diff --git a/app/templates/views/api/keys/create.html b/app/templates/views/api/keys/create.html index 137f44a69..0827a85e7 100644 --- a/app/templates/views/api/keys/create.html +++ b/app/templates/views/api/keys/create.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/banner.html" import banner_wrapper %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Create an API key {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.api_keys', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.api_keys', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/check/column-errors.html b/app/templates/views/check/column-errors.html index 444ffaa25..c58d27758 100644 --- a/app/templates/views/check/column-errors.html +++ b/app/templates/views/check/column-errors.html @@ -3,14 +3,14 @@ {% from "components/radios.html" import radio_select %} {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %} {% from "components/file-upload.html" import file_upload %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Error {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/check/ok.html b/app/templates/views/check/ok.html index 87000e831..e5c5a1f38 100644 --- a/app/templates/views/check/ok.html +++ b/app/templates/views/check/ok.html @@ -2,9 +2,9 @@ {% from "components/banner.html" import banner_wrapper %} {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %} {% from "components/page-header.html" import page_header %} -{% from "components/components/button/macro.njk" import govukButton %} -{% from "components/components/skip-link/macro.njk" import govukSkipLink %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/button/macro.njk" import usaButton %} +{% from "components/components/skip-link/macro.njk" import usaSkipLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% set file_contents_header_id = 'file-preview' %} @@ -14,14 +14,14 @@ {% block backLink %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} {{ page_header('Preview of {}'.format(template.name)) }} - {{ govukSkipLink({ + {{ usaSkipLink({ "text": "Skip to file contents", "href": "#" + file_contents_header_id }) }} @@ -44,7 +44,7 @@ {% set button_text %} Send {{ count_of_recipients|message_count(template.template_type) }} {% endset %} - {{ govukButton({ "text": button_text }) }} + {{ usaButton({ "text": button_text }) }}
diff --git a/app/templates/views/check/row-errors.html b/app/templates/views/check/row-errors.html index 1fe130bb7..e419589f6 100644 --- a/app/templates/views/check/row-errors.html +++ b/app/templates/views/check/row-errors.html @@ -3,14 +3,14 @@ {% from "components/radios.html" import radio_select %} {% from "components/table.html" import mapping_table, row, field, text_field, index_field, hidden_field_heading %} {% from "components/file-upload.html" import file_upload %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Error {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/choose-account.html b/app/templates/views/choose-account.html index a514b062e..335188053 100644 --- a/app/templates/views/choose-account.html +++ b/app/templates/views/choose-account.html @@ -1,5 +1,5 @@ {% extends "withoutnav_template.html" %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% macro service_list( heading, @@ -108,7 +108,7 @@
{% endif %} - {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Add a new service", "href": url_for('.add_service'), diff --git a/app/templates/views/conversations/conversation.html b/app/templates/views/conversations/conversation.html index b5cc82ede..d0e78f5cb 100644 --- a/app/templates/views/conversations/conversation.html +++ b/app/templates/views/conversations/conversation.html @@ -1,5 +1,5 @@ {% from "components/ajax-block.html" import ajax_block %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% extends "withnav_template.html" %} @@ -8,7 +8,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for("main.inbox", service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for("main.inbox", service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/cookies.html b/app/templates/views/cookies.html index ffa032e38..1af35b4ec 100644 --- a/app/templates/views/cookies.html +++ b/app/templates/views/cookies.html @@ -122,8 +122,8 @@
-
- +
+ Do you want to accept analytics cookies?
diff --git a/app/templates/views/dashboard/inbox.html b/app/templates/views/dashboard/inbox.html index 101372b45..a8c05f186 100644 --- a/app/templates/views/dashboard/inbox.html +++ b/app/templates/views/dashboard/inbox.html @@ -1,7 +1,7 @@ {% extends "withnav_template.html" %} {% from "components/ajax-block.html" import ajax_block %} {% from "components/page-header.html" import page_header %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Received text messages @@ -9,7 +9,7 @@ {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_dashboard', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_dashboard', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index 8201dc2e3..b61c9098c 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -3,14 +3,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import sticky_page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ heading_action }} email template {% endblock %} {% block backLink %} - {{ govukBackLink({ + {{ usaBackLink({ "href": url_for('main.view_template', service_id=current_service.id, template_id=template.id) if template else url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id) }) }} {% endblock %} diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html index 352d4a20d..0c22a8bc5 100644 --- a/app/templates/views/edit-sms-template.html +++ b/app/templates/views/edit-sms-template.html @@ -3,14 +3,15 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% 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 {% endblock %} {% block backLink %} - {{ govukBackLink({ + {{ usaBackLink({ "href": url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id) if template_folder_id else url_for('main.choose_template', service_id=current_service.id) }) }} {% endblock %} @@ -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/edit-user-permissions.html b/app/templates/views/edit-user-permissions.html index f3cb74829..a775c9cb8 100644 --- a/app/templates/views/edit-user-permissions.html +++ b/app/templates/views/edit-user-permissions.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} {% from "components/banner.html" import banner %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ user.name or user.email_localpart }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/email-branding/manage-branding.html b/app/templates/views/email-branding/manage-branding.html index 51dd41b26..5cb7da9c5 100644 --- a/app/templates/views/email-branding/manage-branding.html +++ b/app/templates/views/email-branding/manage-branding.html @@ -3,7 +3,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ '{} email branding'.format('Update' if email_branding else 'Create')}} @@ -11,7 +11,7 @@ {% block backLink %} - {{ govukBackLink({ "href": url_for('.email_branding') }) }} + {{ usaBackLink({ "href": url_for('.email_branding') }) }} {% endblock %} {% block platform_admin_content %} diff --git a/app/templates/views/email-branding/select-branding.html b/app/templates/views/email-branding/select-branding.html index 37a31bf84..5d0503f10 100644 --- a/app/templates/views/email-branding/select-branding.html +++ b/app/templates/views/email-branding/select-branding.html @@ -1,7 +1,7 @@ {% extends "views/platform-admin/_base_template.html" %} {% from "components/page-header.html" import page_header %} {% from "components/live-search.html" import live_search %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% set page_title = "Email branding" %} @@ -25,7 +25,7 @@
- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "New brand", "href": url_for('.create_email_branding'), diff --git a/app/templates/views/email-not-received.html b/app/templates/views/email-not-received.html index 3ecd99dfe..998393de3 100644 --- a/app/templates/views/email-not-received.html +++ b/app/templates/views/email-not-received.html @@ -1,5 +1,5 @@ {% extends "withoutnav_template.html" %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block per_page_title %} Resend email link @@ -13,7 +13,7 @@

Emails sometimes take a few minutes to arrive. If you do not receive an email link, Notify can send you a new one.

- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Resend email link", "href": url_for('main.resend_email_link', next=redirect_url) diff --git a/app/templates/views/find-services/find-services-by-name.html b/app/templates/views/find-services/find-services-by-name.html index 0bfd7f3b5..24970749f 100644 --- a/app/templates/views/find-services/find-services-by-name.html +++ b/app/templates/views/find-services/find-services-by-name.html @@ -1,7 +1,7 @@ {% extends "views/platform-admin/_base_template.html" %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block per_page_title %} Find services by name @@ -22,7 +22,7 @@ "label": {"text": "Find services by name, partial name, or service ID"} }) }} - {{ govukButton({ + {{ usaButton({ "text": "Search", "classes": "usa-button search-form__button" }) }} diff --git a/app/templates/views/find-users/auth_type.html b/app/templates/views/find-users/auth_type.html index 0269dc733..c68fa0782 100644 --- a/app/templates/views/find-users/auth_type.html +++ b/app/templates/views/find-users/auth_type.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Set auth type for {{ user.name }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.user_information', user_id=user.id) }) }} + {{ usaBackLink({ "href": url_for('main.user_information', user_id=user.id) }) }} {% endblock %} {% block platform_admin_content %} diff --git a/app/templates/views/find-users/find-users-by-email.html b/app/templates/views/find-users/find-users-by-email.html index 2eb1bdbc4..e4815b35d 100644 --- a/app/templates/views/find-users/find-users-by-email.html +++ b/app/templates/views/find-users/find-users-by-email.html @@ -1,7 +1,7 @@ {% extends "views/platform-admin/_base_template.html" %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block per_page_title %} Find users by email @@ -22,7 +22,7 @@ "label": {"text": "Find users by email, or by partial email"} }) }} - {{ govukButton({ + {{ usaButton({ "text": "Search", "classes": "search-form__button" }) }} diff --git a/app/templates/views/get-started.html b/app/templates/views/get-started.html index 417be7bd1..7b6ad500c 100644 --- a/app/templates/views/get-started.html +++ b/app/templates/views/get-started.html @@ -1,7 +1,7 @@ {% extends "content_template.html" %} {% from "components/table.html" import mapping_table, row, text_field, edit_field, field with context %} {% from "components/sub-navigation.html" import sub_navigation %} -{% from "components/components/details/macro.njk" import govukDetails %} +{% from "components/components/details/macro.njk" import usaDetails %} {% block per_page_title %} Get started diff --git a/app/templates/views/invite-user.html b/app/templates/views/invite-user.html index 7cc77011e..90ff36aa2 100644 --- a/app/templates/views/invite-user.html +++ b/app/templates/views/invite-user.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Invite a team member {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/jobs/job.html b/app/templates/views/jobs/job.html index 75e636683..331f693f6 100644 --- a/app/templates/views/jobs/job.html +++ b/app/templates/views/jobs/job.html @@ -3,7 +3,7 @@ {% from "components/ajax-block.html" import ajax_block %} {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ job.original_file_name }} diff --git a/app/templates/views/jobs/jobs.html b/app/templates/views/jobs/jobs.html index 881a58a9b..0dd40637d 100644 --- a/app/templates/views/jobs/jobs.html +++ b/app/templates/views/jobs/jobs.html @@ -1,6 +1,6 @@ {% from "components/previous-next-navigation.html" import previous_next_navigation %} {% extends "withnav_template.html" %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block service_page_title %} Uploads diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html index 54ba8bbe1..bd91a2f04 100644 --- a/app/templates/views/manage-users.html +++ b/app/templates/views/manage-users.html @@ -1,7 +1,7 @@ {% extends "withnav_template.html" %} {% from "components/tick-cross.html" import tick_cross %} {% from "components/live-search.html" import live_search %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block service_page_title %} Team members @@ -86,7 +86,7 @@ {% if current_user.has_permissions('manage_service') %}

- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Invite a team member", "href": url_for('.invite_user', service_id=current_service.id), diff --git a/app/templates/views/manage-users/confirm-edit-user-email.html b/app/templates/views/manage-users/confirm-edit-user-email.html index 3df33f69f..6cd5446ca 100644 --- a/app/templates/views/manage-users/confirm-edit-user-email.html +++ b/app/templates/views/manage-users/confirm-edit-user-email.html @@ -2,7 +2,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Confirm change of email address @@ -10,7 +10,7 @@ {% block backLink %} - {{ govukBackLink({ "href": url_for('.edit_user_email', service_id=service_id, user_id=user.id) }) }} + {{ usaBackLink({ "href": url_for('.edit_user_email', service_id=service_id, user_id=user.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/manage-users/confirm-edit-user-mobile-number.html b/app/templates/views/manage-users/confirm-edit-user-mobile-number.html index 44eed66d6..1bc2158ad 100644 --- a/app/templates/views/manage-users/confirm-edit-user-mobile-number.html +++ b/app/templates/views/manage-users/confirm-edit-user-mobile-number.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Confirm change of mobile number {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.edit_user_mobile_number', service_id=service_id, user_id=user.id) }) }} + {{ usaBackLink({ "href": url_for('.edit_user_mobile_number', service_id=service_id, user_id=user.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/manage-users/edit-user-email.html b/app/templates/views/manage-users/edit-user-email.html index eea343657..35de72362 100644 --- a/app/templates/views/manage-users/edit-user-email.html +++ b/app/templates/views/manage-users/edit-user-email.html @@ -2,7 +2,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Change team member’s email address @@ -10,7 +10,7 @@ {% block backLink %} - {{ govukBackLink({ "href": url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id) }) }} + {{ usaBackLink({ "href": url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/manage-users/edit-user-mobile.html b/app/templates/views/manage-users/edit-user-mobile.html index c0ee647d2..3f3781398 100644 --- a/app/templates/views/manage-users/edit-user-mobile.html +++ b/app/templates/views/manage-users/edit-user-mobile.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Change team member’s mobile number {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id) }) }} + {{ usaBackLink({ "href": url_for('main.edit_user_permissions', service_id=current_service.id, user_id=user.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/notifications.html b/app/templates/views/notifications.html index 90c330dfe..853bcf762 100644 --- a/app/templates/views/notifications.html +++ b/app/templates/views/notifications.html @@ -3,7 +3,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% set page_title = ( (99|message_count_label(message_type, suffix='')) | capitalize diff --git a/app/templates/views/notifications/check.html b/app/templates/views/notifications/check.html index 57fcaa862..0b60063d3 100644 --- a/app/templates/views/notifications/check.html +++ b/app/templates/views/notifications/check.html @@ -1,15 +1,15 @@ {% extends "withnav_template.html" %} {% from "components/banner.html" import banner_wrapper %} {% from "components/page-header.html" import page_header %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} +{% from "components/components/button/macro.njk" import usaButton %} {% block service_page_title %} {{ "Error" if error else "Preview of β€˜{}’".format(template.name) }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} @@ -55,7 +55,7 @@ {% if not error %} {% set button_text %}Send 1 {{ 1|message_count_label(template.template_type, suffix='') }}{% endset %} - {{ govukButton({ "text": button_text }) }} + {{ usaButton({ "text": button_text }) }} {% endif %}
diff --git a/app/templates/views/notifications/notification.html b/app/templates/views/notifications/notification.html index 81e501df8..cf61250ed 100644 --- a/app/templates/views/notifications/notification.html +++ b/app/templates/views/notifications/notification.html @@ -3,7 +3,7 @@ {% from "components/ajax-block.html" import ajax_block %} {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ 1|message_count_label(template.template_type, suffix='') | capitalize }} @@ -11,7 +11,7 @@ {% block backLink %} {% if back_link %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endif %} {% endblock %} diff --git a/app/templates/views/organizations/add-gp-organization.html b/app/templates/views/organizations/add-gp-organization.html index 6a1400e4d..f6854ecde 100644 --- a/app/templates/views/organizations/add-gp-organization.html +++ b/app/templates/views/organizations/add-gp-organization.html @@ -4,11 +4,11 @@ {% from "components/radios.html" import radio, conditional_radio_panel %} {% from "components/select-input.html" import select_wrapper %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/add-nhs-local-organization.html b/app/templates/views/organizations/add-nhs-local-organization.html index 1992074e9..5006407bc 100644 --- a/app/templates/views/organizations/add-nhs-local-organization.html +++ b/app/templates/views/organizations/add-nhs-local-organization.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import sticky_page_footer %} {% from "components/live-search.html" import live_search %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} {{ page_title }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/index.html b/app/templates/views/organizations/index.html index 3126717b7..d837e4b24 100644 --- a/app/templates/views/organizations/index.html +++ b/app/templates/views/organizations/index.html @@ -1,6 +1,6 @@ {% extends "views/platform-admin/_base_template.html" %} {% from "components/live-search.html" import live_search %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block per_page_title %} Organizations @@ -30,7 +30,7 @@
- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "New organization", "href": url_for('main.add_organization'), diff --git a/app/templates/views/organizations/organization/settings/edit-domains.html b/app/templates/views/organizations/organization/settings/edit-domains.html index 2c8234a03..5428ed186 100644 --- a/app/templates/views/organizations/organization/settings/edit-domains.html +++ b/app/templates/views/organizations/organization/settings/edit-domains.html @@ -3,14 +3,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/list-entry.html" import list_entry %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block org_page_title %} Known email domains {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} + {{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/organization/settings/edit-go-live-notes.html b/app/templates/views/organizations/organization/settings/edit-go-live-notes.html index 522abc19d..c7955f616 100644 --- a/app/templates/views/organizations/organization/settings/edit-go-live-notes.html +++ b/app/templates/views/organizations/organization/settings/edit-go-live-notes.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} {% from "components/textbox.html" import textbox %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block org_page_title %} Edit request to go live notes {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} + {{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/organization/settings/edit-name.html b/app/templates/views/organizations/organization/settings/edit-name.html index 290f4dad3..b1e5caef9 100644 --- a/app/templates/views/organizations/organization/settings/edit-name.html +++ b/app/templates/views/organizations/organization/settings/edit-name.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block org_page_title %} Change organization name {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} + {{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/organization/settings/edit-organization-billing-details.html b/app/templates/views/organizations/organization/settings/edit-organization-billing-details.html index 80c57ae9f..96da00edd 100644 --- a/app/templates/views/organizations/organization/settings/edit-organization-billing-details.html +++ b/app/templates/views/organizations/organization/settings/edit-organization-billing-details.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} {% from "components/textbox.html" import textbox %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block org_page_title %} Edit organization billing details {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} + {{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/organization/settings/edit-organization-notes.html b/app/templates/views/organizations/organization/settings/edit-organization-notes.html index 58fc9d848..c703f6f1c 100644 --- a/app/templates/views/organizations/organization/settings/edit-organization-notes.html +++ b/app/templates/views/organizations/organization/settings/edit-organization-notes.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} {% from "components/textbox.html" import textbox %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block org_page_title %} Edit organization notes {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} + {{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/organization/settings/edit-type.html b/app/templates/views/organizations/organization/settings/edit-type.html index 4f9ccb755..7c0028355 100644 --- a/app/templates/views/organizations/organization/settings/edit-type.html +++ b/app/templates/views/organizations/organization/settings/edit-type.html @@ -2,14 +2,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block org_page_title %} Organization sector {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} + {{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/organization/settings/preview-email-branding.html b/app/templates/views/organizations/organization/settings/preview-email-branding.html index 0760fcce5..45feae8c5 100644 --- a/app/templates/views/organizations/organization/settings/preview-email-branding.html +++ b/app/templates/views/organizations/organization/settings/preview-email-branding.html @@ -1,6 +1,6 @@ {% extends "org_template.html" %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% from "components/branding-preview.html" import email_branding_preview %} {% block org_page_title %} @@ -17,7 +17,7 @@
{{ form.hidden_tag() }}
- {{ govukButton({ "text": "Save" }) }} + {{ usaButton({ "text": "Save" }) }}
{% endcall %} diff --git a/app/templates/views/organizations/organization/settings/set-email-branding.html b/app/templates/views/organizations/organization/settings/set-email-branding.html index 35655788e..30df51d10 100644 --- a/app/templates/views/organizations/organization/settings/set-email-branding.html +++ b/app/templates/views/organizations/organization/settings/set-email-branding.html @@ -3,7 +3,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/live-search.html" import live_search %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% set page_title = "Default email branding" %} @@ -12,7 +12,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} + {{ usaBackLink({ "href": url_for('.organization_settings', org_id=current_org.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/organizations/organization/users/index.html b/app/templates/views/organizations/organization/users/index.html index 75490ddef..a27d22c69 100644 --- a/app/templates/views/organizations/organization/users/index.html +++ b/app/templates/views/organizations/organization/users/index.html @@ -2,7 +2,7 @@ {% from "components/table.html" import list_table, row, field, hidden_field_heading %} {% from "components/page-footer.html" import page_footer %} {% from "components/live-search.html" import live_search %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block org_page_title %} Team members @@ -64,7 +64,7 @@
- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Invite team member", "href": url_for('.invite_org_user', org_id=current_org.id), diff --git a/app/templates/views/organizations/organization/users/invite-org-user.html b/app/templates/views/organizations/organization/users/invite-org-user.html index 93244e2ee..e5b740e07 100644 --- a/app/templates/views/organizations/organization/users/invite-org-user.html +++ b/app/templates/views/organizations/organization/users/invite-org-user.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Invite a team member {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.manage_org_users', org_id=current_org.id) }) }} + {{ usaBackLink({ "href": url_for('.manage_org_users', org_id=current_org.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/platform-admin/index.html b/app/templates/views/platform-admin/index.html index bf808ecea..7d12873fa 100644 --- a/app/templates/views/platform-admin/index.html +++ b/app/templates/views/platform-admin/index.html @@ -2,8 +2,8 @@ {% from "components/big-number.html" import big_number_simple %} {% from "components/status-box.html" import status_box %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/details/macro.njk" import govukDetails %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/details/macro.njk" import usaDetails %} +{% from "components/components/button/macro.njk" import usaButton %} {% block per_page_title %} Summary @@ -20,11 +20,11 @@ {{ form.start_date(param_extensions={"hint": {"text":"Enter start date in format YYYY-MM-DD"}}) }} {{ form.end_date(param_extensions={"hint": {"text":"Enter end date in format YYYY-MM-DD"}}) }}
- {{ govukButton({ "text": "Filter", "classes": "margin-y-2" }) }} + {{ usaButton({ "text": "Filter", "classes": "margin-y-2" }) }} {% endcall %} {% endset %} - {{ govukDetails({ + {{ usaDetails({ "summaryText": "Apply filters", "html": details_content, "open": form.errors | convert_to_boolean diff --git a/app/templates/views/platform-admin/services.html b/app/templates/views/platform-admin/services.html index 0f3cf60d8..02507d02e 100644 --- a/app/templates/views/platform-admin/services.html +++ b/app/templates/views/platform-admin/services.html @@ -3,8 +3,8 @@ {% from "components/big-number.html" import big_number, big_number_with_status %} {% from "components/table.html" import mapping_table, field, stats_fields, row_group, row, right_aligned_field_heading, hidden_field_heading, text_field %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/button/macro.njk" import govukButton %} -{% from "components/components/details/macro.njk" import govukDetails %} +{% from "components/components/button/macro.njk" import usaButton %} +{% from "components/components/details/macro.njk" import usaDetails %} {% macro services_table(services, caption) %} {% call(item, row_number) mapping_table( @@ -67,11 +67,11 @@ {{ form.start_date(param_extensions={"hint": {"text": "Enter start date in format YYYY-MM-DD"}}) }} {{ form.end_date(param_extensions={"hint": {"text": "Enter end date in format YYYY-MM-DD"}}) }} {{ form.include_from_test_key }} - {{ govukButton({ "text": "Filter", "classes": "margin-y-2" }) }} + {{ usaButton({ "text": "Filter", "classes": "margin-y-2" }) }} {% endcall %} {% endset %} - {{ govukDetails({ + {{ usaDetails({ "summaryText": "Apply filters", "html": details_content }) }} diff --git a/app/templates/views/pricing/index.html b/app/templates/views/pricing/index.html index a41551abc..e612e1187 100644 --- a/app/templates/views/pricing/index.html +++ b/app/templates/views/pricing/index.html @@ -1,7 +1,7 @@ {% from "components/content-metadata.html" import content_metadata %} {% from "components/table.html" import mapping_table, row, text_field, field, row_heading %} {% from "components/live-search.html" import live_search %} -{% from "components/components/details/macro.njk" import govukDetails %} +{% from "components/components/details/macro.njk" import usaDetails %} {% extends "content_template.html" %} @@ -169,7 +169,7 @@ Notify.gov team. {% endcall %}
{% endset %} -{{ govukDetails({ +{{ usaDetails({ "summaryText": "Accented characters that affect text message charges", "html": accentedChars }) }} @@ -229,7 +229,7 @@ Notify.gov team.
{% endset %} - {{ govukDetails({ + {{ usaDetails({ "summaryText": "International text message rates", "id": "sms-pricing-details", "html": smsIntRates diff --git a/app/templates/views/providers/provider.html b/app/templates/views/providers/provider.html index d2010f840..46aabb451 100644 --- a/app/templates/views/providers/provider.html +++ b/app/templates/views/providers/provider.html @@ -2,14 +2,14 @@ {% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading %} {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} {{ provider_versions[0].display_name }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.view_providers') }) }} + {{ usaBackLink({ "href": url_for('main.view_providers') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html index 928a23320..c804612c5 100644 --- a/app/templates/views/send-test.html +++ b/app/templates/views/send-test.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ page_title }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/send.html b/app/templates/views/send.html index ed833b617..8feeadd5d 100644 --- a/app/templates/views/send.html +++ b/app/templates/views/send.html @@ -3,7 +3,7 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/file-upload.html" import file_upload %} {% from "components/table.html" import list_table, text_field, index_field, index_field_heading %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Upload a list of {{ 999|recipient_count_label(template.template_type) }} @@ -11,7 +11,7 @@ {% block backLink %} - {{ govukBackLink({ "href": url_for('main.send_one_off', service_id=current_service.id, template_id=template.id) }) }} + {{ usaBackLink({ "href": url_for('main.send_one_off', service_id=current_service.id, template_id=template.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/branding/email-branding-govuk-org.html b/app/templates/views/service-settings/branding/email-branding-govuk-org.html index e4a2552e5..ba3043073 100644 --- a/app/templates/views/service-settings/branding/email-branding-govuk-org.html +++ b/app/templates/views/service-settings/branding/email-branding-govuk-org.html @@ -1,6 +1,6 @@ {% extends "withnav_template.html" %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} @@ -9,7 +9,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ + {{ usaBackLink({ "href": url_for('.email_branding_request', service_id=current_service.id) }) }} {% endblock %} diff --git a/app/templates/views/service-settings/branding/email-branding-govuk.html b/app/templates/views/service-settings/branding/email-branding-govuk.html index 669b0f453..e58231326 100644 --- a/app/templates/views/service-settings/branding/email-branding-govuk.html +++ b/app/templates/views/service-settings/branding/email-branding-govuk.html @@ -1,6 +1,6 @@ {% extends "withnav_template.html" %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} {% from "components/branding-preview.html" import email_branding_preview %} @@ -10,7 +10,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ + {{ usaBackLink({ "href": url_for('.email_branding_request', service_id=current_service.id) }) }} {% endblock %} diff --git a/app/templates/views/service-settings/branding/email-branding-options.html b/app/templates/views/service-settings/branding/email-branding-options.html index 329a15aae..acaf348b0 100644 --- a/app/templates/views/service-settings/branding/email-branding-options.html +++ b/app/templates/views/service-settings/branding/email-branding-options.html @@ -5,7 +5,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% from "components/branding-preview.html" import email_branding_preview %} {% block service_page_title %} @@ -13,7 +13,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} diff --git a/app/templates/views/service-settings/branding/email-branding-organization.html b/app/templates/views/service-settings/branding/email-branding-organization.html index a1647aee8..83b6eb8c2 100644 --- a/app/templates/views/service-settings/branding/email-branding-organization.html +++ b/app/templates/views/service-settings/branding/email-branding-organization.html @@ -1,6 +1,6 @@ {% extends "withnav_template.html" %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} @@ -9,7 +9,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ + {{ usaBackLink({ "href": url_for('.email_branding_request', service_id=current_service.id) }) }} {% endblock %} diff --git a/app/templates/views/service-settings/branding/email-branding-something-else.html b/app/templates/views/service-settings/branding/email-branding-something-else.html index aedfaf207..bd61df811 100644 --- a/app/templates/views/service-settings/branding/email-branding-something-else.html +++ b/app/templates/views/service-settings/branding/email-branding-something-else.html @@ -1,6 +1,6 @@ {% extends "withnav_template.html" %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% from "components/page-footer.html" import page_footer %} {% from "components/textbox.html" import textbox %} {% from "components/components/textarea/macro.njk" import govukTextarea %} @@ -16,7 +16,7 @@ {% endif %} {% block backLink %} - {{ govukBackLink({"href": back_url}) }} + {{ usaBackLink({"href": back_url}) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/confirm.html b/app/templates/views/service-settings/confirm.html index d6ecd5147..0afcc8085 100644 --- a/app/templates/views/service-settings/confirm.html +++ b/app/templates/views/service-settings/confirm.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ heading }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/data-retention.html b/app/templates/views/service-settings/data-retention.html index 5b1177167..361ff9ba3 100644 --- a/app/templates/views/service-settings/data-retention.html +++ b/app/templates/views/service-settings/data-retention.html @@ -1,6 +1,6 @@ {% extends "withnav_template.html" %} {% from "components/table.html" import mapping_table, row_group, row, text_field, edit_field, field, boolean_field, list_table with context %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block service_page_title %} Data retention @@ -15,7 +15,7 @@

- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Add data retention", "href": url_for('.add_data_retention', service_id=current_service.id), diff --git a/app/templates/views/service-settings/data-retention/add.html b/app/templates/views/service-settings/data-retention/add.html index 7dfa5e2b2..bd20e5f7e 100644 --- a/app/templates/views/service-settings/data-retention/add.html +++ b/app/templates/views/service-settings/data-retention/add.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Set data retention {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.add_data_retention', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.add_data_retention', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/data-retention/edit.html b/app/templates/views/service-settings/data-retention/edit.html index 754006c1b..648942dce 100644 --- a/app/templates/views/service-settings/data-retention/edit.html +++ b/app/templates/views/service-settings/data-retention/edit.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Set data retention {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=data_retention_id) }) }} + {{ usaBackLink({ "href": url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=data_retention_id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/edit-service-billing-details.html b/app/templates/views/service-settings/edit-service-billing-details.html index 3f3934702..2de29e0b5 100644 --- a/app/templates/views/service-settings/edit-service-billing-details.html +++ b/app/templates/views/service-settings/edit-service-billing-details.html @@ -3,7 +3,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% from "components/textbox.html" import textbox %} {% block service_page_title %} @@ -12,7 +12,7 @@ {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/edit-service-notes.html b/app/templates/views/service-settings/edit-service-notes.html index c1346cba5..1b711dec3 100644 --- a/app/templates/views/service-settings/edit-service-notes.html +++ b/app/templates/views/service-settings/edit-service-notes.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} {% from "components/textbox.html" import textbox %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Edit service notes {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/email-reply-to/_verify-updates.html b/app/templates/views/service-settings/email-reply-to/_verify-updates.html index 235df08c6..1b1a7e49d 100644 --- a/app/templates/views/service-settings/email-reply-to/_verify-updates.html +++ b/app/templates/views/service-settings/email-reply-to/_verify-updates.html @@ -1,7 +1,7 @@ {% from "components/banner.html" import banner, banner_wrapper %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %}
{% if verification_status == "pending" %} @@ -18,7 +18,7 @@ {% elif verification_status == "success" %} {{ banner("β€˜{}’ is ready to use".format(reply_to_email_address), type='default', with_tick=True) }}
- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Continue", "href": url_for('.service_email_reply_to', service_id=service_id) diff --git a/app/templates/views/service-settings/email-reply-to/add.html b/app/templates/views/service-settings/email-reply-to/add.html index be3fde5ab..63f2fa673 100644 --- a/app/templates/views/service-settings/email-reply-to/add.html +++ b/app/templates/views/service-settings/email-reply-to/add.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Add reply-to email address {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_email_reply_to', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_email_reply_to', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/email-reply-to/edit.html b/app/templates/views/service-settings/email-reply-to/edit.html index b813a0177..ee37b8830 100644 --- a/app/templates/views/service-settings/email-reply-to/edit.html +++ b/app/templates/views/service-settings/email-reply-to/edit.html @@ -3,14 +3,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Change reply-to email address {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_email_reply_to', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_email_reply_to', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/email-reply-to/verify.html b/app/templates/views/service-settings/email-reply-to/verify.html index 92ad83194..5566eec9e 100644 --- a/app/templates/views/service-settings/email-reply-to/verify.html +++ b/app/templates/views/service-settings/email-reply-to/verify.html @@ -3,7 +3,7 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} {% from "components/ajax-block.html" import ajax_block %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ verb }} email reply-to address @@ -16,7 +16,7 @@ {% set back_link_href = url_for('.service_add_email_reply_to', service_id=service_id) %} {% endif %} - {{ govukBackLink({ "href": back_link_href }) }} + {{ usaBackLink({ "href": back_link_href }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/email_reply_to.html b/app/templates/views/service-settings/email_reply_to.html index b6fb5d312..3e4a1450d 100644 --- a/app/templates/views/service-settings/email_reply_to.html +++ b/app/templates/views/service-settings/email_reply_to.html @@ -2,15 +2,15 @@ {% from "components/copy-to-clipboard.html" import copy_to_clipboard %} {% from "components/page-header.html" import page_header %} {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %} -{% from "components/components/button/macro.njk" import govukButton %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/button/macro.njk" import usaButton %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Reply-to email addresses {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} @@ -57,7 +57,7 @@
{% if current_user.has_permissions('manage_service') %}
- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Add reply-to email address", "href": url_for('.service_add_email_reply_to', service_id=current_service.id), diff --git a/app/templates/views/service-settings/estimate-usage.html b/app/templates/views/service-settings/estimate-usage.html index 03301edd2..2b0643cfe 100644 --- a/app/templates/views/service-settings/estimate-usage.html +++ b/app/templates/views/service-settings/estimate-usage.html @@ -3,14 +3,14 @@ {% 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/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Tell us how many messages you expect to send {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.request_to_go_live', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/link-service-to-organization.html b/app/templates/views/service-settings/link-service-to-organization.html index e93ba1d1b..89ff79f5a 100644 --- a/app/templates/views/service-settings/link-service-to-organization.html +++ b/app/templates/views/service-settings/link-service-to-organization.html @@ -3,7 +3,7 @@ {% from "components/page-footer.html" import sticky_page_footer %} {% from "components/live-search.html" import live_search %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% set page_title = "Link service to organization" %} @@ -12,7 +12,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/name-local.html b/app/templates/views/service-settings/name-local.html index 725252edb..120e2eca5 100644 --- a/app/templates/views/service-settings/name-local.html +++ b/app/templates/views/service-settings/name-local.html @@ -3,14 +3,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Change your service name {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/name.html b/app/templates/views/service-settings/name.html index 2180ca016..76564e2a5 100644 --- a/app/templates/views/service-settings/name.html +++ b/app/templates/views/service-settings/name.html @@ -3,7 +3,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Change your service name @@ -11,7 +11,7 @@ {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/preview-email-branding.html b/app/templates/views/service-settings/preview-email-branding.html index aa693b062..c575f4acc 100644 --- a/app/templates/views/service-settings/preview-email-branding.html +++ b/app/templates/views/service-settings/preview-email-branding.html @@ -1,6 +1,6 @@ {% extends "withnav_template.html" %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% from "components/branding-preview.html" import email_branding_preview %} {% block service_page_title %} @@ -17,7 +17,7 @@
{{ form.hidden_tag() }}
- {{ govukButton({ "text": "Save" }) }} + {{ usaButton({ "text": "Save" }) }}
{% endcall %} diff --git a/app/templates/views/service-settings/request-to-go-live.html b/app/templates/views/service-settings/request-to-go-live.html index e11fd0ce1..5a5d89cdc 100644 --- a/app/templates/views/service-settings/request-to-go-live.html +++ b/app/templates/views/service-settings/request-to-go-live.html @@ -3,14 +3,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/task-list.html" import task_list_wrapper, task_list_item %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Before you request to go live {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/send-files-by-email.html b/app/templates/views/service-settings/send-files-by-email.html index 39d5b5684..013d61f76 100644 --- a/app/templates/views/service-settings/send-files-by-email.html +++ b/app/templates/views/service-settings/send-files-by-email.html @@ -4,14 +4,14 @@ {% from "components/radios.html" import radio %} {% from "components/select-input.html" import select_wrapper %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Send files by email {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/set-auth-type.html b/app/templates/views/service-settings/set-auth-type.html index 461a2c7ca..263740222 100644 --- a/app/templates/views/service-settings/set-auth-type.html +++ b/app/templates/views/service-settings/set-auth-type.html @@ -1,14 +1,14 @@ {% extends "withnav_template.html" %} {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Sign-in method {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/set-email-branding.html b/app/templates/views/service-settings/set-email-branding.html index 047d86daa..131e8d73a 100644 --- a/app/templates/views/service-settings/set-email-branding.html +++ b/app/templates/views/service-settings/set-email-branding.html @@ -3,12 +3,12 @@ {% from "components/page-footer.html" import page_footer, sticky_page_footer %} {% from "components/live-search.html" import live_search %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% set page_title = "Set email branding" %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block service_page_title %} diff --git a/app/templates/views/service-settings/set-email.html b/app/templates/views/service-settings/set-email.html index 50cd52eb5..f0053d4c6 100644 --- a/app/templates/views/service-settings/set-email.html +++ b/app/templates/views/service-settings/set-email.html @@ -2,14 +2,14 @@ {% 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/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Send emails {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/set-free-sms-allowance.html b/app/templates/views/service-settings/set-free-sms-allowance.html index 51df92886..7dab5ee1d 100644 --- a/app/templates/views/service-settings/set-free-sms-allowance.html +++ b/app/templates/views/service-settings/set-free-sms-allowance.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Free text message allowance {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/set-inbound-number.html b/app/templates/views/service-settings/set-inbound-number.html index 4cc70b598..2aa30ba75 100644 --- a/app/templates/views/service-settings/set-inbound-number.html +++ b/app/templates/views/service-settings/set-inbound-number.html @@ -2,7 +2,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import sticky_page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% set page_title = 'Set inbound number' %} @@ -11,7 +11,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} @@ -28,7 +28,7 @@ 'fieldset': { 'legend': { 'isPageHeading': True, - 'classes': 'govuk-fieldset__legend--l' + 'classes': 'usa-legend usa-legend--large' } } }) }} diff --git a/app/templates/views/service-settings/set-inbound-sms.html b/app/templates/views/service-settings/set-inbound-sms.html index 953e108bd..ded1ae394 100644 --- a/app/templates/views/service-settings/set-inbound-sms.html +++ b/app/templates/views/service-settings/set-inbound-sms.html @@ -1,14 +1,14 @@ {% extends "withnav_template.html" %} {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Receive text messages {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/set-international-sms.html b/app/templates/views/service-settings/set-international-sms.html index c595f0a68..7475315ef 100644 --- a/app/templates/views/service-settings/set-international-sms.html +++ b/app/templates/views/service-settings/set-international-sms.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Send international text messages {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/set-message-limit.html b/app/templates/views/service-settings/set-message-limit.html index b5e101e47..74feb1053 100644 --- a/app/templates/views/service-settings/set-message-limit.html +++ b/app/templates/views/service-settings/set-message-limit.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Daily message limit {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/set-rate-limit.html b/app/templates/views/service-settings/set-rate-limit.html index e9fa1debf..fa23f4bce 100644 --- a/app/templates/views/service-settings/set-rate-limit.html +++ b/app/templates/views/service-settings/set-rate-limit.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Rate limit {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/set-service-setting.html b/app/templates/views/service-settings/set-service-setting.html index fcbc0fc07..c78ab0c4f 100644 --- a/app/templates/views/service-settings/set-service-setting.html +++ b/app/templates/views/service-settings/set-service-setting.html @@ -1,14 +1,14 @@ {% extends "withnav_template.html" %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ title }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} @@ -20,7 +20,7 @@ "fieldset": { "legend": { "isPageHeading": True, - "classes": "govuk-fieldset__legend--l" + "classes": "usa-legend usa-legend--large" } } }) }} diff --git a/app/templates/views/service-settings/set-sms.html b/app/templates/views/service-settings/set-sms.html index 0d638abfd..a48fb68b6 100644 --- a/app/templates/views/service-settings/set-sms.html +++ b/app/templates/views/service-settings/set-sms.html @@ -2,14 +2,14 @@ {% 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/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Send text messages {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/sms-prefix.html b/app/templates/views/service-settings/sms-prefix.html index 9e96aa3fd..266278d2d 100644 --- a/app/templates/views/service-settings/sms-prefix.html +++ b/app/templates/views/service-settings/sms-prefix.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Start text messages with service name {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/sms-sender/add.html b/app/templates/views/service-settings/sms-sender/add.html index 6345a4428..c310ee9cf 100644 --- a/app/templates/views/service-settings/sms-sender/add.html +++ b/app/templates/views/service-settings/sms-sender/add.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Add text message sender {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_sms_senders', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_sms_senders', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/service-settings/sms-sender/edit.html b/app/templates/views/service-settings/sms-sender/edit.html index e6df8d12d..85bc352c9 100644 --- a/app/templates/views/service-settings/sms-sender/edit.html +++ b/app/templates/views/service-settings/sms-sender/edit.html @@ -3,7 +3,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Change text message sender @@ -11,7 +11,7 @@ {% block backLink %} {% if not request.args.get('from_template') %} - {{ govukBackLink({ "href": url_for('.service_sms_senders', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('.service_sms_senders', service_id=current_service.id) }) }} {% endif %} {% endblock %} diff --git a/app/templates/views/service-settings/sms-senders.html b/app/templates/views/service-settings/sms-senders.html index 31bd1fc99..98d00b2e9 100644 --- a/app/templates/views/service-settings/sms-senders.html +++ b/app/templates/views/service-settings/sms-senders.html @@ -2,15 +2,15 @@ {% from "components/copy-to-clipboard.html" import copy_to_clipboard %} {% from "components/page-header.html" import page_header %} {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context%} -{% from "components/components/button/macro.njk" import govukButton %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/button/macro.njk" import usaButton %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Text message senders {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} @@ -55,7 +55,7 @@ {% if current_user.has_permissions('manage_service') %}
- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Add text message sender", "href": url_for('.service_add_sms_sender', service_id=current_service.id) diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html index 5bde08e09..3ef370486 100644 --- a/app/templates/views/signedout.html +++ b/app/templates/views/signedout.html @@ -1,5 +1,5 @@ {% extends "fullwidth_template.html" %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block meta %}
- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Create an account", "classes": "product-page-button button-container__button", diff --git a/app/templates/views/support/bat-phone.html b/app/templates/views/support/bat-phone.html index 716a0c184..46e947f44 100644 --- a/app/templates/views/support/bat-phone.html +++ b/app/templates/views/support/bat-phone.html @@ -1,14 +1,14 @@ {% extends "withoutnav_template.html" %} {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Out of hours emergencies {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.support') }) }} + {{ usaBackLink({ "href": url_for('.support') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/support/form.html b/app/templates/views/support/form.html index 48f7732c2..904bc9485 100644 --- a/app/templates/views/support/form.html +++ b/app/templates/views/support/form.html @@ -3,14 +3,14 @@ {% from "components/page-footer.html" import sticky_page_footer %} {% from "components/page-header.html" import page_header %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} {{ page_title }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/support/public.html b/app/templates/views/support/public.html index cbf212fc9..344d0961a 100644 --- a/app/templates/views/support/public.html +++ b/app/templates/views/support/public.html @@ -1,14 +1,14 @@ {% extends "withoutnav_template.html" %} {% from "components/page-header.html" import page_header %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} The Notify.gov service is for people who work in the government {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.support') }) }} + {{ usaBackLink({ "href": url_for('.support') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/support/thanks.html b/app/templates/views/support/thanks.html index 52a6b5648..f695b2d3b 100644 --- a/app/templates/views/support/thanks.html +++ b/app/templates/views/support/thanks.html @@ -1,14 +1,14 @@ {% extends "withoutnav_template.html" %} {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Thanks for contacting us {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.support') }) }} + {{ usaBackLink({ "href": url_for('.support') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/support/triage.html b/app/templates/views/support/triage.html index e7cdc42b8..447e1a8e0 100644 --- a/app/templates/views/support/triage.html +++ b/app/templates/views/support/triage.html @@ -2,14 +2,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/page-header.html" import page_header %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} {{ page_title }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.support') }) }} + {{ usaBackLink({ "href": url_for('.support') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/templates/action_blocked.html b/app/templates/views/templates/action_blocked.html index 80593c6a3..12d941225 100644 --- a/app/templates/views/templates/action_blocked.html +++ b/app/templates/views/templates/action_blocked.html @@ -1,14 +1,14 @@ {% extends "withnav_template.html" %} {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ notification_type.capitalize() }} are disabled {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/templates/breaking-change.html b/app/templates/views/templates/breaking-change.html index ed9c7c4c3..224fc61fb 100644 --- a/app/templates/views/templates/breaking-change.html +++ b/app/templates/views/templates/breaking-change.html @@ -4,14 +4,14 @@ {% from "components/page-footer.html" import page_footer %} {% from "components/list.html" import list_of_placeholders, list_of_code_snippets %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} Confirm changes {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for(".edit_service_template", service_id=current_service.id, template_id=new_template.id) }) }} + {{ usaBackLink({ "href": url_for(".edit_service_template", service_id=current_service.id, template_id=new_template.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/templates/choose-reply.html b/app/templates/views/templates/choose-reply.html index 691db0133..26e0680c2 100644 --- a/app/templates/views/templates/choose-reply.html +++ b/app/templates/views/templates/choose-reply.html @@ -1,6 +1,6 @@ {% from "components/live-search.html" import live_search %} {% from "components/folder-path.html" import folder_path %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% extends "withnav_template.html" %} @@ -21,7 +21,7 @@

You need a template before you can send text messages.

- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Add a new template", "href": url_for('.choose_template', service_id=current_service.id, initial_state='add-new-template') 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, diff --git a/app/templates/views/templates/set-sender.html b/app/templates/views/templates/set-sender.html index dcb5569b9..2bb9a4162 100644 --- a/app/templates/views/templates/set-sender.html +++ b/app/templates/views/templates/set-sender.html @@ -1,14 +1,14 @@ {% extends "withnav_template.html" %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} {{ sender_context.title }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.view_template', service_id=current_service.id, template_id=template_id) }) }} + {{ usaBackLink({ "href": url_for('.view_template', service_id=current_service.id, template_id=template_id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/templates/set-template-sender.html b/app/templates/views/templates/set-template-sender.html index e61582b91..289ff222f 100644 --- a/app/templates/views/templates/set-template-sender.html +++ b/app/templates/views/templates/set-template-sender.html @@ -1,7 +1,7 @@ {% extends "withnav_template.html" %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% set page_title = 'Set letter contact block' %} @@ -10,7 +10,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.view_template', service_id=current_service.id, template_id=template_id) }) }} + {{ usaBackLink({ "href": url_for('.view_template', service_id=current_service.id, template_id=template_id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/templates/start-tour.html b/app/templates/views/templates/start-tour.html index 87b3cd591..97b3d472a 100644 --- a/app/templates/views/templates/start-tour.html +++ b/app/templates/views/templates/start-tour.html @@ -1,5 +1,5 @@ {% extends "withnav_template.html" %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block service_page_title %} {{ template.name }} @@ -13,7 +13,7 @@ {{ template|string }}
- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Continue", "href": continue_link, diff --git a/app/templates/views/templates/template.html b/app/templates/views/templates/template.html index 8dcaea899..ad6766905 100644 --- a/app/templates/views/templates/template.html +++ b/app/templates/views/templates/template.html @@ -3,7 +3,7 @@ {% from "components/folder-path.html" import folder_path, page_title_folder_path %} {% from "components/page-footer.html" import page_footer %} {% from "components/copy-to-clipboard.html" import copy_to_clipboard %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block service_page_title %} {{ page_title_folder_path(current_service.get_template_path(template._template)) }} @@ -25,7 +25,7 @@
- {{ govukButton({ "text": "Confirm", "classes": "usa-button--secondary margin-top-2" }) }} + {{ usaButton({ "text": "Confirm", "classes": "usa-button--secondary margin-top-2" }) }}
{% endcall %}
diff --git a/app/templates/views/two-factor-webauthn.html b/app/templates/views/two-factor-webauthn.html index eafa09706..541b6ccee 100644 --- a/app/templates/views/two-factor-webauthn.html +++ b/app/templates/views/two-factor-webauthn.html @@ -1,9 +1,9 @@ {% extends "withoutnav_template.html" %} {% from "components/page-header.html" import page_header %} -{% from "components/components/button/macro.njk" import govukButton %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/button/macro.njk" import usaButton %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% from "components/webauthn-api-check.html" import webauthn_api_check %} -{% from "components/components/error-message/macro.njk" import govukErrorMessage %} +{% from "components/components/error-message/macro.njk" import usaErrorMessage %} {% set page_title = 'Get your security key' %} @@ -16,12 +16,12 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.user_profile') }) }} + {{ usaBackLink({ "href": url_for('.user_profile') }) }} {% endblock %} {% block maincolumn_content %} - {{ govukErrorMessage({ + {{ usaErrorMessage({ "classes": "banner-dangerous display-none", "html": ( 'There’s a problem with your security key' + @@ -44,7 +44,7 @@ You need to have your security key to sign in.

- {{ govukButton({ + {{ usaButton({ "element": "button", "text": "Check security key", "classes": "govuk-button--secondary webauthn__api-required", @@ -54,12 +54,12 @@ } }) }} - {{ govukErrorMessage({ + {{ usaErrorMessage({ "classes": "webauthn__api-missing", "text": "Your browser does not support security keys. Try signing in to Notify using a different browser." }) }} - {{ govukErrorMessage({ + {{ usaErrorMessage({ "classes": "webauthn__no-js", "text": "JavaScript is not available for this page. Security keys need JavaScript to work." }) }} diff --git a/app/templates/views/user-already-invited.html b/app/templates/views/user-already-invited.html index 7471fad63..d9048b046 100644 --- a/app/templates/views/user-already-invited.html +++ b/app/templates/views/user-already-invited.html @@ -1,13 +1,13 @@ {% extends "withnav_template.html" %} {% from "components/page-header.html" import page_header %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} This person has already received an invite {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/user-already-team-member.html b/app/templates/views/user-already-team-member.html index ebecae65e..cc2d2ccde 100644 --- a/app/templates/views/user-already-team-member.html +++ b/app/templates/views/user-already-team-member.html @@ -1,13 +1,13 @@ {% extends "withnav_template.html" %} {% from "components/page-header.html" import page_header %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block service_page_title %} This person is already a team member {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }} + {{ usaBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/user-profile/authenticate.html b/app/templates/views/user-profile/authenticate.html index b5ccc83f7..b8dbbce0f 100644 --- a/app/templates/views/user-profile/authenticate.html +++ b/app/templates/views/user-profile/authenticate.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Change your {{ thing }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": back_link }) }} + {{ usaBackLink({ "href": back_link }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/user-profile/change-password.html b/app/templates/views/user-profile/change-password.html index 2fae66776..2efb70f73 100644 --- a/app/templates/views/user-profile/change-password.html +++ b/app/templates/views/user-profile/change-password.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Change your password {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.user_profile') }) }} + {{ usaBackLink({ "href": url_for('.user_profile') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/user-profile/change.html b/app/templates/views/user-profile/change.html index df37ff212..d9dce7cbc 100644 --- a/app/templates/views/user-profile/change.html +++ b/app/templates/views/user-profile/change.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Change your {{ thing }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.user_profile') }) }} + {{ usaBackLink({ "href": url_for('.user_profile') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/user-profile/confirm.html b/app/templates/views/user-profile/confirm.html index 207a27cb5..16fbfbd38 100644 --- a/app/templates/views/user-profile/confirm.html +++ b/app/templates/views/user-profile/confirm.html @@ -2,14 +2,14 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% block per_page_title %} Change your {{ thing }} {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.user_profile') }) }} + {{ usaBackLink({ "href": url_for('.user_profile') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/user-profile/disable-platform-admin-view.html b/app/templates/views/user-profile/disable-platform-admin-view.html index 954f9da51..ff66589ea 100644 --- a/app/templates/views/user-profile/disable-platform-admin-view.html +++ b/app/templates/views/user-profile/disable-platform-admin-view.html @@ -1,7 +1,7 @@ {% extends "withoutnav_template.html" %} {% from "components/form.html" import form_wrapper %} {% from "components/page-footer.html" import page_footer %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% set page_title = 'Use platform admin view' %} @@ -10,7 +10,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.user_profile') }) }} + {{ usaBackLink({ "href": url_for('.user_profile') }) }} {% endblock %} {% block maincolumn_content %} @@ -23,7 +23,7 @@ 'fieldset': { 'legend': { 'isPageHeading': True, - 'classes': 'govuk-fieldset__legend--l' + 'classes': 'usa-legend usa-legend--large' } }, 'hint': { diff --git a/app/templates/views/user-profile/manage-security-key.html b/app/templates/views/user-profile/manage-security-key.html index 24b70164b..41e3ba8d5 100644 --- a/app/templates/views/user-profile/manage-security-key.html +++ b/app/templates/views/user-profile/manage-security-key.html @@ -2,7 +2,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} {% from "components/form.html" import form_wrapper %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% set page_title = 'Manage ' + 'β€˜' + security_key.name + '’' %} @@ -11,7 +11,7 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.user_profile_security_keys') }) }} + {{ usaBackLink({ "href": url_for('.user_profile_security_keys') }) }} {% endblock %} {% block maincolumn_content %} diff --git a/app/templates/views/user-profile/security-keys.html b/app/templates/views/user-profile/security-keys.html index 31882323b..a2afd135a 100644 --- a/app/templates/views/user-profile/security-keys.html +++ b/app/templates/views/user-profile/security-keys.html @@ -1,10 +1,10 @@ {% extends "withoutnav_template.html" %} {% from "components/page-header.html" import page_header %} -{% from "components/components/button/macro.njk" import govukButton %} -{% from "components/components/back-link/macro.njk" import govukBackLink %} +{% from "components/components/button/macro.njk" import usaButton %} +{% from "components/components/back-link/macro.njk" import usaBackLink %} {% from "components/table.html" import edit_field, mapping_table, row, field, row_heading %} {% from "components/webauthn-api-check.html" import webauthn_api_check %} -{% from "components/components/error-message/macro.njk" import govukErrorMessage %} +{% from "components/components/error-message/macro.njk" import usaErrorMessage %} {% set page_title = 'Security keys' %} {% set credentials = current_user.webauthn_credentials %} @@ -18,13 +18,13 @@ {% endblock %} {% block backLink %} - {{ govukBackLink({ "href": url_for('.user_profile') }) }} + {{ usaBackLink({ "href": url_for('.user_profile') }) }} {% endblock %} {% block maincolumn_content %} {% set webauthn_button %} - {{ govukButton({ + {{ usaButton({ "element": "button", "text": "Register a key", "classes": "govuk-button--secondary webauthn__api-required", @@ -34,12 +34,12 @@ } }) }} - {{ govukErrorMessage({ + {{ usaErrorMessage({ "classes": "webauthn__api-missing", "text": "Your browser does not support security keys. Try signing in to Notify using a different browser." }) }} - {{ govukErrorMessage({ + {{ usaErrorMessage({ "classes": "webauthn__no-js", "text": "JavaScript is not available for this page. Security keys need JavaScript to work." }) }} @@ -47,7 +47,7 @@
- {{ govukErrorMessage({ + {{ usaErrorMessage({ "classes": "banner-dangerous display-none", "html": ( 'There’s a problem with your security key' + diff --git a/app/templates/views/verification-not-received.html b/app/templates/views/verification-not-received.html index 4234a90e1..906ee4dab 100644 --- a/app/templates/views/verification-not-received.html +++ b/app/templates/views/verification-not-received.html @@ -1,5 +1,5 @@ {% extends "withoutnav_template.html" %} -{% from "components/components/button/macro.njk" import govukButton %} +{% from "components/components/button/macro.njk" import usaButton %} {% block per_page_title %} Resend security code @@ -13,7 +13,7 @@

Text messages sometimes take a few minutes to arrive. If you do not receive a security code, Notify can send you a new one.

- {{ govukButton({ + {{ usaButton({ "element": "a", "text": "Resend security code", "href": url_for('main.check_and_resend_verification_code', next=redirect_url) diff --git a/tests/javascripts/collapsibleCheckboxes.test.js b/tests/javascripts/collapsibleCheckboxes.test.js index 18c3ca953..9038ff37b 100644 --- a/tests/javascripts/collapsibleCheckboxes.test.js +++ b/tests/javascripts/collapsibleCheckboxes.test.js @@ -42,8 +42,8 @@ describe('Collapsible fieldset', () => { document.body.innerHTML = `

-
- +
+ Folders this team member can see
diff --git a/tests/javascripts/listEntry.test.js b/tests/javascripts/listEntry.test.js index b63be2d71..99357a65c 100644 --- a/tests/javascripts/listEntry.test.js +++ b/tests/javascripts/listEntry.test.js @@ -63,7 +63,7 @@ describe("List entry", () => { document.body.innerHTML = `
- + Domain names diff --git a/tests/javascripts/support/helpers/html.js b/tests/javascripts/support/helpers/html.js index d557caba8..ddf0381eb 100644 --- a/tests/javascripts/support/helpers/html.js +++ b/tests/javascripts/support/helpers/html.js @@ -25,11 +25,11 @@ function getRadioGroup (data) { data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass)); } radioGroup.innerHTML = ` -
- +
+ ${data.label} -
+
${getRadios(data.fields, data.name)}
`;