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/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/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/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/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/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/main_template.html b/app/templates/main_template.html index dba731ae1..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 usaSkipLink -%} -{% from "./components/components/header/macro.njk" import govukHeader -%} -{% from "./components/components/footer/macro.njk" import govukFooter -%} +{% 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) -%} @@ -44,7 +44,7 @@ {% 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": ""}) }}