darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-06 00:48:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3812 from alphagov/new-inset-text-macro

Browse Source 
Use the GOVUK Frontend inset text component instead of <aside>
This commit is contained in:
Katie Smith
2021-02-24 10:51:35 +00:00
committed by GitHub
parent a85e20ed3e 792860085e
commit cc06d3bbd8
12 changed files with 77 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/govuk-frontend/_all.scss
View File

@@ -34,6 +34,7 @@ $govuk-assets-path: "/static/";
@import "components/radios/_radios"; @import "components/radios/_radios";
@import "components/checkboxes/_checkboxes"; @import "components/checkboxes/_checkboxes";
@import "components/input/_input"; @import "components/input/_input";
@import "components/inset-text/_inset-text";
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x // update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
@import "./focus/components"; @import "./focus/components";

41
app/templates/partials/templates/guidance-formatting-letters.html
View File

@@ -1,31 +1,30 @@
{% from "components/inset-text/macro.njk" import govukInsetText %}
<h2 class="heading-medium">Formatting</h2> <h2 class="heading-medium">Formatting</h2>
<p class="govuk-body"> <p class="govuk-body">
To put a heading in your template, use a hash: To put a heading in your template, use a hash:
</p> </p>
<div class="panel panel-border-wide"> {{ govukInsetText({
<p class="govuk-body"> "text": "# This is a heading",
# This is a heading "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
</p> }}
</div>
<p class="govuk-body"> <p class="govuk-body">
To make bullet points, use asterisks: To make bullet points, use asterisks:
</p> </p>
<div class="panel panel-border-wide"> {{ govukInsetText({
<p class="govuk-body"> "html": "* point 1<br/>
* point 1<br/> * point 2<br/>
* point 2<br/> * point 3<br/>",
* point 3<br/> "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
</p> }}
</div>
<p class="govuk-body"> <p class="govuk-body">
To insert a page break, use three asterisks: To insert a page break, use three asterisks:
</p> </p>
<div class="panel panel-border-wide"> {{ govukInsetText({
<p class="govuk-body"> "html": "Content on page 1<br/>
Content on page 1<br/> <br/>
<br/> ***<br/>
***<br/> <br/>
<br/> Content on page 2<br/>",
Content on page 2<br/> "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
</p> }}
</div>

44
app/templates/partials/templates/guidance-formatting.html
View File

@@ -1,41 +1,35 @@
{% from "components/inset-text/macro.njk" import govukInsetText %}
<h2 class="heading-medium">Formatting</h2> <h2 class="heading-medium">Formatting</h2>
<p class="bottom-gutter-1-3"> <p class="bottom-gutter-1-3">
To put a title in your template, use a hash: To put a title in your template, use a hash:
</p> </p>
<div class="panel panel-border-wide bottom-gutter"> <div class="govuk-!-margin-bottom-6">
<p class="govuk-body"> {{ govukInsetText({"text": "# This is a title", "classes": "govuk-!-margin-top-0"})}}
# This is a title
</p>
</div> </div>
<p class="bottom-gutter-1-3"> <p class="bottom-gutter-1-3">
To make bullet points, use asterisks: To make bullet points, use asterisks:
</p> </p>
<div class="panel panel-border-wide bottom-gutter"> <div class="govuk-!-margin-bottom-6">
<p class="govuk-body"> {{ govukInsetText({
* point 1<br/> "html": "* point 1<br/>
* point 2<br/> * point 2<br/>
* point 3<br/> * point 3<br/>",
</p> "classes": "govuk-!-margin-top-0"})
}}
</div> </div>
<p class="bottom-gutter-1-3"> <p class="bottom-gutter-1-3">
To add inset text, use a caret: To add inset text, use a caret:
</p> </p>
<div class="panel panel-border-wide bottom-gutter"> <div class="govuk-!-margin-bottom-6">
<p class="govuk-body"> {{ govukInsetText({"text": "^ You must tell us if your circumstances change", "classes": "govuk-!-margin-top-0"})}}
^ You must tell us if your circumstances change
</p>
</div> </div>
<p class="bottom-gutter-1-3"> <p class="bottom-gutter-1-3">
To add a horizontal line, use three dashes: To add a horizontal line, use three dashes:
</p> </p>
<div class="panel panel-border-wide"> {{ govukInsetText({
<p class="govuk-body"> "html": '<p class="govuk-body">First paragraph</p>
First paragraph <p class="govuk-body" style="letter-spacing: 1px;">---</p>
</p> <p class="govuk-body">Second paragraph</p>',
<p style="letter-spacing: 1px;"> "classes": "govuk-!-margin-top-0"})
--- }}
</p>
<p class="govuk-body">
Second paragraph
</p>
</div>

11
app/templates/partials/templates/guidance-links.html
View File

@@ -1,9 +1,10 @@
{% from "components/inset-text/macro.njk" import govukInsetText %}
<h2 class="heading-medium">Links and URLs</h2> <h2 class="heading-medium">Links and URLs</h2>
<p class="bottom-gutter-1-3"> <p class="bottom-gutter-1-3">
Always use full URLs, starting with https:// Always use full URLs, starting with https://
</p> </p>
<div class="panel panel-border-wide"> {{ govukInsetText({
<p class="govuk-body"> "text": "Apply now at https://www.gov.uk/example",
Apply now at https://www.gov.uk/example "classes": "govuk-!-margin-top-0"})
</p> }}
</div>

13
app/templates/partials/templates/guidance-optional-content.html
View File

@@ -1,3 +1,5 @@
{% from "components/inset-text/macro.njk" import govukInsetText %}
<h2 class="heading-medium"> <h2 class="heading-medium">
Optional content Optional content
</h2> </h2>
@@ -8,12 +10,11 @@
For example if you only want to show something to people who are under For example if you only want to show something to people who are under
18: 18:
</p> </p>
<div class="panel panel-border-wide"> {{ govukInsetText({
<p class="govuk-body"> "text": "((under18??Please get your application signed by a parent or
((under18??Please get your application signed by a parent or guardian.))",
guardian.)) "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
</p> }}
</div>
<p class="govuk-body"> <p class="govuk-body">
For each person you send this message to, specify ‘yes’ or ‘no’ to For each person you send this message to, specify ‘yes’ or ‘no’ to
show or hide this content. show or hide this content.

11
app/templates/partials/templates/guidance-personalisation.html
View File

@@ -1,11 +1,12 @@
{% from "components/inset-text/macro.njk" import govukInsetText %}
<h2 class="heading-medium"> <h2 class="heading-medium">
Personalisation Personalisation
</h2> </h2>
<p class="bottom-gutter-1-3"> <p class="bottom-gutter-1-3">
Use double brackets to personalise your message: Use double brackets to personalise your message:
</p> </p>
<div class="panel panel-border-wide"> {{ govukInsetText({
<p class="govuk-body"> "text": "Hello ((first name)), your reference is ((ref number))",
Hello ((first name)), your reference is ((ref number)) "classes": "govuk-!-margin-top-0"})
</p> }}
</div>

14
app/templates/partials/templates/guidance-send-a-document.html
View File

@@ -1,12 +1,14 @@
{% from "components/inset-text/macro.njk" import govukInsetText %}
<h2 class="heading-medium"> <h2 class="heading-medium">
Send a document by email Send a document by email
</h2> </h2>
<p class="govuk-body"> <p class="govuk-body">
Use double brackets to add a placeholder field to your template. This will contain a secure link to download the document. Use double brackets to add a placeholder field to your template. This will contain a secure link to download the document.
</p> </p>
<div class="panel panel-border-wide"> {{ govukInsetText({
<p class="govuk-body"> "text": "Download your document at: ((link_to_file))",
Download your document at: ((link_to_file)) "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
</p> }}
</div>
Next, use the API to upload your document. Follow the instructions to send a document by email in the <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.documentation') }}">API documentation</a>. Next, use the API to upload your document. Follow the instructions to send a document by email in the <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.documentation') }}">API documentation</a>.

4
app/templates/views/edit-email-template.html
View File

@@ -31,7 +31,7 @@
'Save' 'Save'
) }} ) }}
</div> </div>
<aside class="govuk-grid-column-full"> <div class="govuk-grid-column-full">
{% include "partials/templates/guidance-formatting.html" %} {% include "partials/templates/guidance-formatting.html" %}
{% include "partials/templates/guidance-personalisation.html" %} {% include "partials/templates/guidance-personalisation.html" %}
{% include "partials/templates/guidance-optional-content.html" %} {% include "partials/templates/guidance-optional-content.html" %}
@@ -39,7 +39,7 @@
{% if current_service.has_permission('upload_document') %} {% if current_service.has_permission('upload_document') %}
{% include "partials/templates/guidance-send-a-document.html" %} {% include "partials/templates/guidance-send-a-document.html" %}
{% endif %} {% endif %}
</aside> </div>
</div> </div>
{% endcall %} {% endcall %}

4
app/templates/views/edit-letter-template.html
View File

@@ -28,11 +28,11 @@
'Save' 'Save'
) }} ) }}
</div> </div>
<aside class="govuk-grid-column-three-quarters"> <div class="govuk-grid-column-three-quarters">
{% include "partials/templates/guidance-formatting-letters.html" %} {% include "partials/templates/guidance-formatting-letters.html" %}
{% include "partials/templates/guidance-personalisation.html" %} {% include "partials/templates/guidance-personalisation.html" %}
{% include "partials/templates/guidance-optional-content.html" %} {% include "partials/templates/guidance-optional-content.html" %}
</aside> </div>
</div> </div>
{% endcall %} {% endcall %}

4
app/templates/views/edit-sms-template.html
View File

@@ -41,12 +41,12 @@
</div> </div>
{{ page_footer('Save') }} {{ page_footer('Save') }}
</div> </div>
<aside class="govuk-grid-column-full"> <div class="govuk-grid-column-full">
{% include "partials/templates/guidance-personalisation.html" %} {% include "partials/templates/guidance-personalisation.html" %}
{% include "partials/templates/guidance-optional-content.html" %} {% include "partials/templates/guidance-optional-content.html" %}
{% include "partials/templates/guidance-links.html" %} {% include "partials/templates/guidance-links.html" %}
{% include "partials/templates/guidance-character-count.html" %} {% include "partials/templates/guidance-character-count.html" %}
</aside> </div>
</div> </div>
{% endcall %} {% endcall %}

4
app/templates/views/templates/edit-template-postage.html
View File

@@ -19,9 +19,9 @@
{{ form.postage }} {{ form.postage }}
{{ page_footer('Save') }} {{ page_footer('Save') }}
</div> </div>
<aside class="govuk-grid-column-three-quarters"> <div class="govuk-grid-column-three-quarters">
{% include "partials/templates/guidance-postage.html" %} {% include "partials/templates/guidance-postage.html" %}
</aside> </div>
</div> </div>
{% endcall %} {% endcall %}

3
gulpfile.js
View File

@@ -71,7 +71,8 @@ const copy = {
'label', 'label',
'checkboxes', 'checkboxes',
'radios', 'radios',
'input' 'input',
'inset-text'
]; ];
let done = 0; let done = 0;