mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-23 20:01:01 -05:00
Merge pull request #3812 from alphagov/new-inset-text-macro
Use the GOVUK Frontend inset text component instead of <aside>
This commit is contained in:
Katie Smith
@@ -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";
|
||||
|
||||
@@ -1,31 +1,30 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">Formatting</h2>
|
||||
<p class="govuk-body">
|
||||
To put a heading in your template, use a hash:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
# This is a heading
|
||||
</p>
|
||||
</div>
|
||||
{{ govukInsetText({
|
||||
"text": "# This is a heading",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
<p class="govuk-body">
|
||||
To make bullet points, use asterisks:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>
|
||||
</p>
|
||||
</div>
|
||||
{{ govukInsetText({
|
||||
"html": "* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
<p class="govuk-body">
|
||||
To insert a page break, use three asterisks:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
Content on page 1<br/>
|
||||
<br/>
|
||||
***<br/>
|
||||
<br/>
|
||||
Content on page 2<br/>
|
||||
</p>
|
||||
</div>
|
||||
{{ govukInsetText({
|
||||
"html": "Content on page 1<br/>
|
||||
<br/>
|
||||
***<br/>
|
||||
<br/>
|
||||
Content on page 2<br/>",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
|
||||
@@ -1,41 +1,35 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">Formatting</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To put a title in your template, use a hash:
|
||||
</p>
|
||||
<div class="panel panel-border-wide bottom-gutter">
|
||||
<p class="govuk-body">
|
||||
# This is a title
|
||||
</p>
|
||||
<div class="govuk-!-margin-bottom-6">
|
||||
{{ govukInsetText({"text": "# This is a title", "classes": "govuk-!-margin-top-0"})}}
|
||||
</div>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To make bullet points, use asterisks:
|
||||
</p>
|
||||
<div class="panel panel-border-wide bottom-gutter">
|
||||
<p class="govuk-body">
|
||||
* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>
|
||||
</p>
|
||||
<div class="govuk-!-margin-bottom-6">
|
||||
{{ govukInsetText({
|
||||
"html": "* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>",
|
||||
"classes": "govuk-!-margin-top-0"})
|
||||
}}
|
||||
</div>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To add inset text, use a caret:
|
||||
</p>
|
||||
<div class="panel panel-border-wide bottom-gutter">
|
||||
<p class="govuk-body">
|
||||
^ You must tell us if your circumstances change
|
||||
</p>
|
||||
<div class="govuk-!-margin-bottom-6">
|
||||
{{ govukInsetText({"text": "^ You must tell us if your circumstances change", "classes": "govuk-!-margin-top-0"})}}
|
||||
</div>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To add a horizontal line, use three dashes:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
First paragraph
|
||||
</p>
|
||||
<p style="letter-spacing: 1px;">
|
||||
---
|
||||
</p>
|
||||
<p class="govuk-body">
|
||||
Second paragraph
|
||||
</p>
|
||||
</div>
|
||||
{{ govukInsetText({
|
||||
"html": '<p class="govuk-body">First paragraph</p>
|
||||
<p class="govuk-body" style="letter-spacing: 1px;">---</p>
|
||||
<p class="govuk-body">Second paragraph</p>',
|
||||
"classes": "govuk-!-margin-top-0"})
|
||||
}}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">Links and URLs</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
Always use full URLs, starting with https://
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
Apply now at https://www.gov.uk/example
|
||||
</p>
|
||||
</div>
|
||||
{{ govukInsetText({
|
||||
"text": "Apply now at https://www.gov.uk/example",
|
||||
"classes": "govuk-!-margin-top-0"})
|
||||
}}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">
|
||||
Optional content
|
||||
</h2>
|
||||
@@ -8,12 +10,11 @@
|
||||
For example if you only want to show something to people who are under
|
||||
18:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
((under18??Please get your application signed by a parent or
|
||||
guardian.))
|
||||
</p>
|
||||
</div>
|
||||
{{ govukInsetText({
|
||||
"text": "((under18??Please get your application signed by a parent or
|
||||
guardian.))",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
<p class="govuk-body">
|
||||
For each person you send this message to, specify ‘yes’ or ‘no’ to
|
||||
show or hide this content.
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">
|
||||
Personalisation
|
||||
</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
Use double brackets to personalise your message:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
Hello ((first name)), your reference is ((ref number))
|
||||
</p>
|
||||
</div>
|
||||
{{ govukInsetText({
|
||||
"text": "Hello ((first name)), your reference is ((ref number))",
|
||||
"classes": "govuk-!-margin-top-0"})
|
||||
}}
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">
|
||||
Send a document by email
|
||||
</h2>
|
||||
<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.
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
Download your document at: ((link_to_file))
|
||||
</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>.
|
||||
{{ 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 <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.documentation') }}">API documentation</a>.
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
'Save'
|
||||
) }}
|
||||
</div>
|
||||
<aside class="govuk-grid-column-full">
|
||||
<div class="govuk-grid-column-full">
|
||||
{% include "partials/templates/guidance-formatting.html" %}
|
||||
{% include "partials/templates/guidance-personalisation.html" %}
|
||||
{% include "partials/templates/guidance-optional-content.html" %}
|
||||
@@ -39,7 +39,7 @@
|
||||
{% if current_service.has_permission('upload_document') %}
|
||||
{% include "partials/templates/guidance-send-a-document.html" %}
|
||||
{% endif %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
@@ -28,11 +28,11 @@
|
||||
'Save'
|
||||
) }}
|
||||
</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-personalisation.html" %}
|
||||
{% include "partials/templates/guidance-optional-content.html" %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
@@ -41,12 +41,12 @@
|
||||
</div>
|
||||
{{ page_footer('Save') }}
|
||||
</div>
|
||||
<aside class="govuk-grid-column-full">
|
||||
<div class="govuk-grid-column-full">
|
||||
{% include "partials/templates/guidance-personalisation.html" %}
|
||||
{% include "partials/templates/guidance-optional-content.html" %}
|
||||
{% include "partials/templates/guidance-links.html" %}
|
||||
{% include "partials/templates/guidance-character-count.html" %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
@@ -19,9 +19,9 @@
|
||||
{{ form.postage }}
|
||||
{{ page_footer('Save') }}
|
||||
</div>
|
||||
<aside class="govuk-grid-column-three-quarters">
|
||||
<div class="govuk-grid-column-three-quarters">
|
||||
{% include "partials/templates/guidance-postage.html" %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
@@ -71,7 +71,8 @@ const copy = {
|
||||
'label',
|
||||
'checkboxes',
|
||||
'radios',
|
||||
'input'
|
||||
'input',
|
||||
'inset-text'
|
||||
];
|
||||
let done = 0;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user