Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Update fieldset examples to use macros #179

Closed
wants to merge 3 commits into from
Closed

Update fieldset examples to use macros #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
916e6f3
Update fieldset component example
Feb 12, 2018
fcee61c
Update addresses pattern example
Feb 12, 2018
9cdfd66
Update question page passport example
Feb 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 51 additions & 30 deletions src/components/fieldset/address-group.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>'
Copy link
Contributor

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 to label here and avoid using html?

},
"id": "address-line-2",
"name": "address-line-2"
}) }}

{{ govukInput({
"label": {
"html": 'Town or city'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to use html here?

},
"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 %}
2 changes: 1 addition & 1 deletion src/components/fieldset/index.md.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Use the Fieldset component to group related form inputs.

Use the Fieldset component when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when [asking for an address](../../patterns/addresses).

{{ example({group: 'components', item: 'fieldset', example: 'address-group', html: true, open: true}) }}
{{ example({group: 'components', item: 'fieldset', example: 'address-group', html: true, nunjucks: true, open: true}) }}

If you’re using the examples or macros for [Radios](../radios), [Checkboxes](../checkboxes) or [Date input](../date-input), the fieldset will already be included.

Expand Down
2 changes: 1 addition & 1 deletion src/patterns/addresses/index.md.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ When using an address lookup, you should:

## Multiple text inputs

{{ example({group: 'patterns', item: 'addresses', example: 'multiple', html: true, nunjucks: false, open: true}) }}
{{ example({group: 'patterns', item: 'addresses', example: 'multiple', html: true, nunjucks: true, open: true}) }}

### When to use multiple text inputs

Expand Down
81 changes: 51 additions & 30 deletions src/patterns/addresses/multiple.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
},
"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 %}
25 changes: 17 additions & 8 deletions src/patterns/question-pages/passport.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand All @@ -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>',
Copy link
Contributor

Choose a reason for hiding this comment

The 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?

Copy link
Contributor

Choose a reason for hiding this comment

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

Copy link
Contributor

@36degrees 36degrees Feb 20, 2018 •
edited
Loading

Choose a reason for hiding this comment

The 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 govuk-heading-m).

"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({
Expand Down