darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 15:57:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Naming convention changes, adding an alert component (still WIP)

Browse Source
This commit is contained in:
Jonathan Bobel
2023-08-31 10:36:29 -04:00
parent b1c6a768ec
commit 1881cd7c89
19 changed files with 124 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/templates/components/components/alert/README.md Normal file
View File

@@ -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.

37
app/templates/components/components/alert/macro-options.json Normal file
View File

@@ -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\"."
}
]

3
app/templates/components/components/alert/macro.njk Normal file
View File

@@ -0,0 +1,3 @@
{% macro usaAlert(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

17
app/templates/components/components/alert/template.njk Normal file
View File

@@ -0,0 +1,17 @@
{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{% if visuallyHiddenText %}<span class="usa-sr-only">{{ visuallyHiddenText }}:</span> {% endif -%}
{{ params.html | safe if params.html else params.text }}
</span>
<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-alert {%- if params.classes %} {{ params.classes }}{% endif %}">
<div class="usa-alert__body">
<h4 class="usa-alert__heading">Informative status</h4>
<p class="usa-alert__text">
Lorem ipsum dolor sit amet,
<a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a>
elit, sed do eiusmod.
</p>
</div>
</div>

18
app/templates/components/components/checkboxes/template.njk
View File

@@ -1,7 +1,7 @@
{% from "../error-message/macro.njk" import govukErrorMessage -%}
{% from "../fieldset/macro.njk" import govukFieldset %}
{% from "../hint/macro.njk" import govukHint %}
{% from "../label/macro.njk" import govukLabel %}
{% from "../error-message/macro.njk" import usaErrorMessage -%}
{% from "../fieldset/macro.njk" import usaFieldset %}
{% 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,
@@ -95,7 +95,7 @@
<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
{% if params.fieldset %}
{% call govukFieldset({
{% call usaFieldset({
describedBy: describedBy,
classes: params.fieldset.classes,
attributes: params.fieldset.attributes,

2
app/templates/components/components/details/template.njk
View File

@@ -1,4 +1,4 @@
<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details margin-bottom-1 {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
<details {%- if params.id %} id="{{params.id}}"{% endif %} class="usa-details margin-bottom-1 {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
<summary class="usa-details__summary">
<span class="usa-details__summary-text">
{{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}

2
app/templates/components/components/hint/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukHint(params) %}
{% macro usaHint(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

12
app/templates/components/components/input/template.njk
View File

@@ -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 "" %}
<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
{{ 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,

2
app/templates/components/components/label/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukLabel(params) %}
{% macro usaLabel(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

14
app/templates/components/components/radios/template.njk
View File

@@ -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: 'govuk-radios__label' + (' ' + item.label.classes if item.label.classes),
@@ -69,7 +69,7 @@
for: id
}) | indent(6) | trim }}
{%- if hasHint %}
{{ govukHint({
{{ usaHint({
id: itemHintId,
classes: 'govuk-radios__hint',
attributes: item.hint.attributes,

2
app/templates/components/components/skip-link/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukSkipLink(params) %}
{% macro usaSkipLink(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

2
app/templates/components/components/textarea/macro.njk
View File

@@ -1,3 +1,3 @@
{% macro govukTextarea(params) %}
{% macro usaTextarea(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

14
app/templates/components/components/textarea/template.njk
View File

@@ -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 "" %}
<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
{{ 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 %}
<textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
<textarea class="usa-textarea {{- ' usa-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
{%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
{%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>

2
app/templates/components/list-entry.html
View File

@@ -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,

10
app/templates/forms/fields/checkboxes/template.njk
View File

@@ -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,

4
app/templates/main_template.html
View File

@@ -1,4 +1,4 @@
{% from "./components/components/skip-link/macro.njk" import govukSkipLink -%}
{% 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 -%}
{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
@@ -36,7 +36,7 @@
{% block bodyStart %}{% endblock %}
{% block skipLink %}
{{ govukSkipLink({
{{ usaSkipLink({
"href": '#main-content',
"text": 'Skip to main content'
}) }}

4
app/templates/views/check/ok.html
View File

@@ -3,7 +3,7 @@
{% 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 usaButton %}
{% from "components/components/skip-link/macro.njk" import govukSkipLink %}
{% 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' %}
@@ -21,7 +21,7 @@
{{ page_header('Preview of {}'.format(template.name)) }}
{{ govukSkipLink({
{{ usaSkipLink({
"text": "Skip to file contents",
"href": "#" + file_contents_header_id
}) }}

8
app/templates/views/two-factor-webauthn.html
View File

@@ -3,7 +3,7 @@
{% 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' %}
@@ -21,7 +21,7 @@
{% block maincolumn_content %}
{{ govukErrorMessage({
{{ usaErrorMessage({
"classes": "banner-dangerous govuk-!-display-none",
"html": (
'There’s a problem with your security key' +
@@ -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."
}) }}

8
app/templates/views/user-profile/security-keys.html
View File

@@ -4,7 +4,7 @@
{% 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 %}
@@ -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 @@
<div class="govuk-grid-row">
{{ govukErrorMessage({
{{ usaErrorMessage({
"classes": "banner-dangerous govuk-!-display-none",
"html": (
'There’s a problem with your security key' +