diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss index 8249d38f3..6cf2aff39 100644 --- a/app/assets/stylesheets/govuk-frontend/_all.scss +++ b/app/assets/stylesheets/govuk-frontend/_all.scss @@ -34,6 +34,7 @@ $govuk-assets-path: "/static/"; @import "components/radios/_radios"; @import "components/checkboxes/_checkboxes"; @import "components/input/_input"; +@import "components/inset-text/_inset-text"; // update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x @import "./focus/components"; diff --git a/app/templates/partials/templates/guidance-formatting-letters.html b/app/templates/partials/templates/guidance-formatting-letters.html index 6e02550f5..dec743519 100644 --- a/app/templates/partials/templates/guidance-formatting-letters.html +++ b/app/templates/partials/templates/guidance-formatting-letters.html @@ -1,31 +1,30 @@ +{% from "components/inset-text/macro.njk" import govukInsetText %} +

Formatting

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

-
-

- # This is a heading -

-
+{{ govukInsetText({ + "text": "# This is a heading", + "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"}) +}}

To make bullet points, use asterisks:

-
-

- * point 1
- * point 2
- * point 3
-

-
+{{ govukInsetText({ + "html": "* point 1
+ * point 2
+ * point 3
", + "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"}) +}}

To insert a page break, use three asterisks:

-
-

- Content on page 1
-
- ***
-
- Content on page 2
-

-
+{{ govukInsetText({ + "html": "Content on page 1
+
+ ***
+
+ Content on page 2
", + "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"}) +}} diff --git a/app/templates/partials/templates/guidance-formatting.html b/app/templates/partials/templates/guidance-formatting.html index 6c405f598..da4a6b8bd 100644 --- a/app/templates/partials/templates/guidance-formatting.html +++ b/app/templates/partials/templates/guidance-formatting.html @@ -1,41 +1,35 @@ +{% from "components/inset-text/macro.njk" import govukInsetText %} +

Formatting

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

-
-

- # This is a title -

+
+ {{ govukInsetText({"text": "# This is a title", "classes": "govuk-!-margin-top-0"})}}

To make bullet points, use asterisks:

-
-

- * point 1
- * point 2
- * point 3
-

+
+ {{ govukInsetText({ + "html": "* point 1
+ * point 2
+ * point 3
", + "classes": "govuk-!-margin-top-0"}) + }}

To add inset text, use a caret:

-
-

- ^ You must tell us if your circumstances change -

+
+ {{ govukInsetText({"text": "^ You must tell us if your circumstances change", "classes": "govuk-!-margin-top-0"})}}

To add a horizontal line, use three dashes:

-
-

- First paragraph -

-

- --- -

-

- Second paragraph -

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

First paragraph

+

---

+

Second paragraph

', + "classes": "govuk-!-margin-top-0"}) +}} diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html index 13233badc..937a60470 100644 --- a/app/templates/partials/templates/guidance-links.html +++ b/app/templates/partials/templates/guidance-links.html @@ -1,9 +1,10 @@ +{% from "components/inset-text/macro.njk" import govukInsetText %} +

Links and URLs

Always use full URLs, starting with https://

-
-

- Apply now at https://www.gov.uk/example -

-
+{{ govukInsetText({ + "text": "Apply now at https://www.gov.uk/example", + "classes": "govuk-!-margin-top-0"}) +}} diff --git a/app/templates/partials/templates/guidance-optional-content.html b/app/templates/partials/templates/guidance-optional-content.html index 31e2469d3..2baed07db 100644 --- a/app/templates/partials/templates/guidance-optional-content.html +++ b/app/templates/partials/templates/guidance-optional-content.html @@ -1,3 +1,5 @@ +{% from "components/inset-text/macro.njk" import govukInsetText %} +

Optional content

@@ -8,12 +10,11 @@ For example if you only want to show something to people who are under 18:

-
-

- ((under18??Please get your application signed by a parent or - guardian.)) -

-
+{{ govukInsetText({ + "text": "((under18??Please get your application signed by a parent or + guardian.))", + "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"}) +}}

For each person you send this message to, specify ‘yes’ or ‘no’ to show or hide this content. diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html index 8730dacc2..5ca896a41 100644 --- a/app/templates/partials/templates/guidance-personalisation.html +++ b/app/templates/partials/templates/guidance-personalisation.html @@ -1,11 +1,12 @@ +{% from "components/inset-text/macro.njk" import govukInsetText %} +

Personalisation

Use double brackets to personalise your message:

-
-

- Hello ((first name)), your reference is ((ref number)) -

-
+{{ govukInsetText({ + "text": "Hello ((first name)), your reference is ((ref number))", + "classes": "govuk-!-margin-top-0"}) +}} diff --git a/app/templates/partials/templates/guidance-send-a-document.html b/app/templates/partials/templates/guidance-send-a-document.html index e78cbc9ce..a5c138fc9 100644 --- a/app/templates/partials/templates/guidance-send-a-document.html +++ b/app/templates/partials/templates/guidance-send-a-document.html @@ -1,12 +1,14 @@ +{% from "components/inset-text/macro.njk" import govukInsetText %} +

Send a document by email

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

-
-

- Download your document at: ((link_to_file)) -

-
- Next, use the API to upload your document. Follow the instructions to send a document by email in the API documentation. +{{ govukInsetText({ + "text": "Download your document at: ((link_to_file))", + "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"}) +}} + +Next, use the API to upload your document. Follow the instructions to send a document by email in the API documentation. diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index 8e87c32d3..8a4b25844 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -31,7 +31,7 @@ 'Save' ) }}
- +
{% endcall %} diff --git a/app/templates/views/edit-letter-template.html b/app/templates/views/edit-letter-template.html index 89369d39b..203c9cf0b 100644 --- a/app/templates/views/edit-letter-template.html +++ b/app/templates/views/edit-letter-template.html @@ -28,11 +28,11 @@ 'Save' ) }} - + {% endcall %} diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html index 749927c08..8522e4e38 100644 --- a/app/templates/views/edit-sms-template.html +++ b/app/templates/views/edit-sms-template.html @@ -41,12 +41,12 @@ {{ page_footer('Save') }} - + {% endcall %} diff --git a/app/templates/views/templates/edit-template-postage.html b/app/templates/views/templates/edit-template-postage.html index b7bffeb8a..04d01a6d5 100644 --- a/app/templates/views/templates/edit-template-postage.html +++ b/app/templates/views/templates/edit-template-postage.html @@ -19,9 +19,9 @@ {{ form.postage }} {{ page_footer('Save') }} - + {% endcall %} diff --git a/gulpfile.js b/gulpfile.js index 200988779..b803c83f1 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -71,7 +71,8 @@ const copy = { 'label', 'checkboxes', 'radios', - 'input' + 'input', + 'inset-text' ]; let done = 0;