Skip to content

Commit

Permalink
Error summary component (#92)
Browse files Browse the repository at this point in the history 
* First draft of error summary component

* Remove console.log

* Fix fixture

* Add JS class to package tests

* Add ErrorSummary to export of all.mjs
  • Loading branch information
@ahosgood
ahosgood authored Feb 29, 2024
1 parent 43f2841 commit ca57b90
Show file tree
Hide file tree
Showing 38 changed files with 412 additions and 109 deletions.
2 changes: 2 additions & 0 deletions .github/actions/prototype-kit-test/action.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ runs:
echo -e "{% from \"nationalarchives/components/cookie-banner/macro.njk\" import tnaCookieBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/date-input/macro.njk\" import tnaDateInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/date-search/macro.njk\" import tnaDateSearch %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/error-summary/macro.njk\" import tnaErrorSummary %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
Expand Down Expand Up @@ -76,6 +77,7 @@ runs:
echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaDateInput({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaErrorSummary({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
Expand Down
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.41...HEAD)

### Added

- Error summary component

### Changed
### Deprecated
### Removed

- Removed the `tna-form__` prefix from form field IDs

### Fixed
### Security

Expand Down
9 changes: 9 additions & 0 deletions src/nationalarchives/all.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Breadcrumbs } from "./components/breadcrumbs/breadcrumbs.mjs";
import { CookieBanner } from "./components/cookie-banner/cookie-banner.mjs";
import { ErrorSummary } from "./components/error-summary/error-summary.mjs";
import { Gallery } from "./components/gallery/gallery.mjs";
import { GlobalHeader } from "./components/global-header/global-header.mjs";
import { Header } from "./components/header/header.mjs";
Expand Down Expand Up @@ -50,6 +51,13 @@ const initAll = (options) => {
new CookieBanner($cookieBanner);
}

const $errorSummary = $scope.querySelector(
'[data-module="tna-error-summary"]',
);
if ($errorSummary) {
new ErrorSummary($errorSummary).init();
}

const $galleries = $scope.querySelectorAll('[data-module="tna-gallery"]');
$galleries.forEach(($gallery) => {
new Gallery($gallery);
Expand Down Expand Up @@ -95,6 +103,7 @@ export {
Cookies,
Breadcrumbs,
CookieBanner,
ErrorSummary,
Gallery,
GlobalHeader,
Header,
Expand Down
1 change: 1 addition & 0 deletions src/nationalarchives/components/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@use "cookie-banner";
@use "date-input";
@use "date-search";
@use "error-summary";
@use "featured-records";
@use "filters";
@use "footer";
Expand Down
1 change: 1 addition & 0 deletions src/nationalarchives/components/button/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@use "button";
@use "button-group";
2 changes: 1 addition & 1 deletion src/nationalarchives/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

@include typography.relative-font-size(18);
@include typography.main-font-weight-bold;
line-height: #{math.div(16, 18) * 2};
line-height: 2rem;
text-decoration: none;
text-align: center;
text-wrap: balance;
Expand Down
12 changes: 6 additions & 6 deletions src/nationalarchives/components/checkboxes/fixtures.json
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions src/nationalarchives/components/checkboxes/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@
</h{{ params.headingLevel }}>
</legend>
{%- if params.hint %}
<p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
<p id="{{ params.id }}-hint" class="tna-form__hint">
{{ params.hint }}
</p>
{%- endif %}
{%- if params.error %}
<p id="tna-form__{{ params.id }}-error" class="tna-form__error-message">
<p id="{{ params.id }}-error" class="tna-form__error-message">
<span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
</p>
{%- endif %}
<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
{%- for item in params.items %}
<div class="tna-checkboxes__item">
<input type="checkbox" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
<label for="tna-form__{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
<input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
<label for="{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
{{ item.text }}
</label>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/nationalarchives/components/date-input/fixtures.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"id": "date",
"name": "date"
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"hidden": false
},
{
Expand All @@ -27,7 +27,7 @@
"year": "1986"
}
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"24\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"09\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"1986\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"24\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"09\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"1986\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"hidden": false
},
{
Expand All @@ -40,7 +40,7 @@
"name": "date",
"hint": "The earliest date of the record."
},
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"tna-form__date-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"tna-form__date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"tna-form__date-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"hidden": false
},
{
Expand All @@ -55,7 +55,7 @@
"text": "Date is not valid"
}
},
"html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" tna-form__date-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"tna-form__date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" tna-form__date-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"hidden": false
},
{
Expand All @@ -68,7 +68,7 @@
"name": "date",
"inline": true
},
"html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Enter a start date</h4></legend><div class=\"tna-date-input tna-date-input--inline\"><div class=\"tna-date-input__item\"><label for=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Enter a start date</h4></legend><div class=\"tna-date-input tna-date-input--inline\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
"hidden": false
}
]
Expand Down
16 changes: 8 additions & 8 deletions src/nationalarchives/components/date-input/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,33 @@
</h{{ params.headingLevel }}>
</legend>
{%- if params.hint %}
<p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
<p id="{{ params.id }}-hint" class="tna-form__hint">
{{ params.hint }}
</p>
{%- endif %}
{%- if params.error %}
<p id="tna-form__{{ params.id }}-error" class="tna-form__error-message">
<p id="{{ params.id }}-error" class="tna-form__error-message">
<span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
</p>
{%- endif %}
<div class="tna-date-input{% if params.inline %} tna-date-input--inline{% endif %}">
<div class="tna-date-input__item">
<label for="tna-form__{{ params.id }}-day" class="tna-date-input__item-label">
<label for="{{ params.id }}-day" class="tna-date-input__item-label">
Day
</label>
<input type="text" id="tna-form__{{ params.id }}-day" value="{{ params.value.day if params.value }}" name="{{ params.name }}-day" class="tna-date-input__item-input" inputmode="numeric">
<input type="text" id="{{ params.id }}-day" value="{{ params.value.day if params.value }}" name="{{ params.name }}-day" class="tna-date-input__item-input" inputmode="numeric">
</div>
<div class="tna-date-input__item">
<label for="tna-form__{{ params.id }}-month" class="tna-date-input__item-label">
<label for="{{ params.id }}-month" class="tna-date-input__item-label">
Month
</label>
<input type="text" id="tna-form__{{ params.id }}-month" value="{{ params.value.month if params.value }}" name="{{ params.name }}-month" class="tna-date-input__item-input" inputmode="numeric">
<input type="text" id="{{ params.id }}-month" value="{{ params.value.month if params.value }}" name="{{ params.name }}-month" class="tna-date-input__item-input" inputmode="numeric">
</div>
<div class="tna-date-input__item">
<label for="tna-form__{{ params.id }}-year" class="tna-date-input__item-label">
<label for="{{ params.id }}-year" class="tna-date-input__item-label">
Year
</label>
<input type="text" id="tna-form__{{ params.id }}-year" value="{{ params.value.year if params.value }}" name="{{ params.name }}-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
<input type="text" id="{{ params.id }}-year" value="{{ params.value.year if params.value }}" name="{{ params.name }}-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
</div>
</div>
</fieldset>
Expand Down
Loading

0 comments on commit ca57b90

Please sign in to comment.