-
Notifications
You must be signed in to change notification settings - Fork 231
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update fieldset examples to use macros #179
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,33 +4,54 @@ stylesheets: | |
- address-wrapper.css | ||
--- | ||
|
||
<fieldset class="govuk-c-fieldset"> | ||
<legend class="govuk-c-fieldset__legend"> | ||
<h1 class="govuk-heading-xl">What is your address?</h1> | ||
</legend> | ||
|
||
<label class="govuk-c-label" for="address-line-1"> | ||
Building and street <span class="govuk-h-visually-hidden">line 1 of 2</span> | ||
</label> | ||
<input class="govuk-c-input" id="address-line-1" name="address-line-1" type="text"> | ||
|
||
<label class="govuk-c-label govuk-h-visually-hidden" for="address-street"> | ||
Building and street line 2 of 2 | ||
</label> | ||
<input class="govuk-c-input" id="address-line-2" name="address-line-2" type="text"> | ||
|
||
<label class="govuk-c-label" for="address-town"> | ||
Town or city | ||
</label> | ||
<input class="govuk-c-input govuk-!-width-two-thirds" id="address-town" name="address-town" type="text"> | ||
|
||
<label class="govuk-c-label" for="address-county"> | ||
County | ||
</label> | ||
<input class="govuk-c-input govuk-!-width-two-thirds" id="address-county" name="address-county" type="text"> | ||
|
||
<label class="govuk-c-label" for="address-postcode"> | ||
Postcode | ||
</label> | ||
<input class="govuk-c-input govuk-!-width-one-third" id="address-postcode" name="address-postcode" type="text"> | ||
</fieldset> | ||
{% from "input/macro.njk" import govukInput %} | ||
{% from "fieldset/macro.njk" import govukFieldset %} | ||
|
||
{% call govukFieldset({ | ||
"legendHtml": '<h1 class="govuk-heading-xl govuk-!-mb-r4">What is your address?</h1>' | ||
}) %} | ||
|
||
{{ govukInput({ | ||
"label": { | ||
"html": 'Building and street <span class="govuk-h-visually-hidden">line 1 of 2</span>' | ||
}, | ||
"id": "address-line-1", | ||
"name": "address-line-1" | ||
}) }} | ||
|
||
{{ govukInput({ | ||
"label": { | ||
"html": '<span class="govuk-h-visually-hidden">Building and street line 2 of 2</span>' | ||
}, | ||
"id": "address-line-2", | ||
"name": "address-line-2" | ||
}) }} | ||
|
||
{{ govukInput({ | ||
"label": { | ||
"html": 'Town or city' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we need to use |
||
}, | ||
"classes": 'govuk-!-width-two-thirds', | ||
"id": "address-town", | ||
"name": "address-town" | ||
}) }} | ||
|
||
{{ govukInput({ | ||
"label": { | ||
"html": 'County' | ||
}, | ||
"classes": 'govuk-!-width-two-thirds', | ||
"id": "address-county", | ||
"name": "address-county" | ||
}) }} | ||
|
||
{{ govukInput({ | ||
"label": { | ||
"html": 'Postcode' | ||
}, | ||
"classes": 'govuk-!-width-one-third', | ||
"id": "address-postcode", | ||
"name": "address-postcode" | ||
}) }} | ||
|
||
{% endcall %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,6 +6,7 @@ layout: layout-example.njk | |
{% from "input/macro.njk" import govukInput %} | ||
{% from "date-input/macro.njk" import govukDateInput %} | ||
{% from "button/macro.njk" import govukButton %} | ||
{% from "fieldset/macro.njk" import govukFieldset %} | ||
|
||
<div class="govuk-o-width-container"> | ||
|
||
|
@@ -20,14 +21,22 @@ layout: layout-example.njk | |
|
||
<form class="form" action="/url/of/next/page" method="post"> | ||
|
||
{{ govukInput({ | ||
label: { | ||
"html": '<h3 class="govuk-heading-m govuk-!-mb-r1">Passport number</h3>', | ||
"hintText": "For example, 502135326" | ||
}, | ||
id: "passport-number", | ||
name: "passport-number" | ||
}) }} | ||
{% call govukFieldset({ | ||
"legendHtml": '<h3 class="govuk-heading-m govuk-!-mb-r1">Passport number</h3>', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could we instead here set a class for the legend, do we need the nested heading? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Adding a heading in a legend helps AT users to navigate using headings. (see #724), so I see it bringing value and no harm. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think adding a class to the legend would also not work if the question needed a hint (unless the hint styles are defensive enough to be able to be used as a descendant of |
||
"legendHintText": 'For example, 502135326' | ||
}) %} | ||
|
||
{{ govukInput({ | ||
label: { | ||
"html": 'Passport number', | ||
"hintText": 'For example, 502135326', | ||
"classes": 'govuk-h-visually-hidden' | ||
}, | ||
id: "passport-number", | ||
name: "passport-number" | ||
}) }} | ||
|
||
{% endcall %} | ||
|
||
|
||
{{ govukDateInput({ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if we could pass through
classes
tolabel
here and avoid usinghtml
?