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

Add tests for checkboxes macro #513

Merged
merged 3 commits into from
Feb 8, 2018
Merged

Add tests for checkboxes macro #513

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
4d124eb
Update examples
alex-ju Feb 8, 2018
65c29eb
Add tests for checkboxes macro
alex-ju Feb 8, 2018
b7f8bf8
Update changelog
alex-ju Feb 8, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ Internal:
- Add tests for label component component (PR [#508](https://github.com/alphagov/govuk-frontend/pull/508))
- Add tests for fieldset component (PR [#509](https://github.com/alphagov/govuk-frontend/pull/509))
- Add tests for select component (PR [#506](https://github.com/alphagov/govuk-frontend/pull/506))
- Add tests for checkboxes component (PR [#513](https://github.com/alphagov/govuk-frontend/pull/513))

## 0.0.22-alpha (Breaking release)

Expand Down
129 changes: 117 additions & 12 deletions src/components/checkboxes/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,61 @@ More information about when to use checkboxes can be found on [GOV.UK Design Sys
]
}) }}

### Checkboxes--with-disabled

[Preview the checkboxes--with-disabled example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled/preview)

#### Markup

<div class="govuk-c-checkboxes">

<div class="govuk-c-checkboxes__item">
<input class="govuk-c-checkboxes__input" id="colours-1" name="colours" type="checkbox" value="red">
<label class="govuk-c-label govuk-c-checkboxes__label" for="colours-1">
Red

</label>
</div>

<div class="govuk-c-checkboxes__item">
<input class="govuk-c-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
<label class="govuk-c-label govuk-c-checkboxes__label" for="colours-2">
Green

</label>
</div>

<div class="govuk-c-checkboxes__item">
<input class="govuk-c-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
<label class="govuk-c-label govuk-c-checkboxes__label" for="colours-3">
Blue

</label>
</div>

</div>

#### Macro

{{ govukCheckboxes({
"name": "colours",
"items": [
{
"value": "red",
"text": "Red"
},
{
"value": "green",
"text": "Green"
},
{
"value": "blue",
"text": "Blue",
"disabled": true
}
]
}) }}

### Checkboxes--with-html

[Preview the checkboxes--with-html example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-html/preview)
Expand Down Expand Up @@ -200,33 +255,83 @@ More information about when to use checkboxes can be found on [GOV.UK Design Sys
]
}) }}

### Checkboxes--disabled
### Checkboxes--with-extreme-fieldset

[Preview the checkboxes--disabled example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/disabled/preview)
[Preview the checkboxes--with-extreme-fieldset example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-extreme-fieldset/preview)

#### Markup

<div class="govuk-c-checkboxes">

<div class="govuk-c-checkboxes__item">
<input class="govuk-c-checkboxes__input" id="disabled-example-1" name="disabled-example" type="checkbox" value="disabled" disabled>
<label class="govuk-c-label govuk-c-checkboxes__label" for="disabled-example-1">
Disabled option
<fieldset class="govuk-c-fieldset app-c-fieldset--custom-modifier" data-attribute="value" data-second-attribute="second-value">

</label>
</div>
<legend class="govuk-c-fieldset__legend">
What is your nationality?

<span class="govuk-c-fieldset__hint">If you have dual nationality, select all options that are relevant to you.</span>

<span class="govuk-c-error-message">
Please select an option
</span>

</legend>

<div class="govuk-c-checkboxes__item">
<input class="govuk-c-checkboxes__input" id="example-1" name="example" type="checkbox" value="british">
<label class="govuk-c-label govuk-c-checkboxes__label" for="example-1">
British

</label>
</div>

<div class="govuk-c-checkboxes__item">
<input class="govuk-c-checkboxes__input" id="example-2" name="example" type="checkbox" value="irish">
<label class="govuk-c-label govuk-c-checkboxes__label" for="example-2">
Irish

</label>
</div>

<div class="govuk-c-checkboxes__item">
<input class="govuk-c-checkboxes__input" id="example-3" name="example" type="checkbox" value="other">
<label class="govuk-c-label govuk-c-checkboxes__label" for="example-3">
Citizen of another country

</label>
</div>
</fieldset>

</div>

#### Macro

{{ govukCheckboxes({
"name": "disabled-example",
"idPrefix": "example",
"name": "example",
"errorMessage": {
"text": "Please select an option"
},
"fieldset": {
"classes": "app-c-fieldset--custom-modifier",
"attributes": {
"data-attribute": "value",
"data-second-attribute": "second-value"
},
"legendText": "What is your nationality?",
"legendHintText": "If you have dual nationality, select all options that are relevant to you."
},
"items": [
{
"value": "disabled",
"text": "Disabled option",
"disabled": true
"value": "british",
"text": "British"
},
{
"value": "irish",
"text": "Irish"
},
{
"value": "other",
"text": "Citizen of another country"
}
]
}) }}
Expand Down
61 changes: 61 additions & 0 deletions src/components/checkboxes/__snapshots__/template.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Checkboxes nested dependant components passes through fieldset params without breaking 1`] = `

<span class="govuk-c-error-message">
Please select an option
</span>

`;

exports[`Checkboxes nested dependant components passes through fieldset params without breaking 2`] = `

<fieldset class="govuk-c-fieldset app-c-fieldset--custom-modifier"
data-attribute="value"
data-second-attribute="second-value"
>
<legend class="govuk-c-fieldset__legend">
What is your nationality?
<span class="govuk-c-fieldset__hint">
If you have dual nationality, select all options that are relevant to you.
</span>
</legend>
</fieldset>

`;

exports[`Checkboxes nested dependant components passes through html fieldset params without breaking 1`] = `

<fieldset class="govuk-c-fieldset">
<legend class="govuk-c-fieldset__legend">
What is your &lt;b&gt;nationality&lt;/b&gt;?
<span class="govuk-c-fieldset__hint">
If you have dual nationality,
<b>
select all options
</b>
that are relevant to you.
</span>
</legend>
</fieldset>

`;

exports[`Checkboxes nested dependant components passes through label params without breaking 1`] = `

<label class="govuk-c-label govuk-c-checkboxes__label"
data-attribute="value"
data-second-attribute="second-value"
for="example-name-1"
>
<b>
Option 1
</b>
</label>
<label class="govuk-c-label govuk-c-checkboxes__label"
for="example-name-2"
>
&lt;b&gt;Option 2&lt;/b&gt;
</label>

`;
36 changes: 31 additions & 5 deletions src/components/checkboxes/checkboxes.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,18 @@ examples:
- value: 'other'
text: 'Citizen of another country'

- name: with-disabled
data:
name: colours
items:
- value: "red"
text: 'Red'
- value: "green"
text: 'Green'
- value: "blue"
text: "Blue"
disabled: true

- name: with-html
data:
fieldset:
Expand All @@ -39,10 +51,24 @@ examples:
- value: "blue"
text: "Blue"

- name: disabled
- name: with-extreme-fieldset
data:
name: disabled-example
idPrefix: 'example'
name: 'example'
errorMessage:
text: 'Please select an option'
fieldset:
classes: 'app-c-fieldset--custom-modifier'
attributes:
'data-attribute': 'value'
'data-second-attribute': 'second-value'
legendText: What is your nationality?
legendHintText:
If you have dual nationality, select all options that are relevant to you.
items:
- value: disabled
text: Disabled option
disabled: true
- value: 'british'
text: 'British'
- value: 'irish'
text: 'Irish'
- value: 'other'
text: 'Citizen of another country'
Loading