Skip to content

Commit

Permalink
moved to new style radio and checkboxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@htmlandbacon
htmlandbacon committed Nov 27, 2017
1 parent d1c7cf1 commit 049f3bb
Show file tree
Hide file tree
Showing 18 changed files with 972 additions and 84 deletions.
7 changes: 5 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ This includes a selection form macros from [GOV.UK elements](http://govuk-elemen

This is a mirror of [govuk-elelemt-marko](https://github.com/gunjam/govuk-elements-marko) in nunjucks.

This currently is to work with old style radio buttons and checkboxes. (GOV.UK elements v2.1.2 or GOV.UK Frontend Toolkit pre 4.17.0)
Old style radio and checkboxes can be found under **retired** these can be used with GOV.UK elements v2.1.2 or GOV.UK Frontend Toolkit pre 4.17.0.

## Tests

Expand All @@ -29,7 +29,6 @@ Current components:
Things to add/improve

- common approach to data-attributes
- update radios to be new style

## Examples

Expand Down Expand Up @@ -63,6 +62,10 @@ This will need to be exposed in the nunjuck render and can be called like this:
- [gov-select](./components/gov-select/README.md)
- [gov-textarea](./components/gov-textarea/README.md)

## UI Graveyard

- [gov-checkboxes](./components/retired/gov-checkboxes/README.md)
- [gov-radios](./components/retired/gov-radios/README.md)

## Contributing

Expand Down
81 changes: 55 additions & 26 deletions components/gov-checkboxes/__tests__/__snapshots__/gov-checkboxes.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ exports[`gov-checkBoxes checkbox options should add data fields when supplied 1`
<legend>
<span class="form-label">Select a check box</span>
</legend>
<label class="block-label" for="my-id-one" data-target="data-target">
<input id="my-id-one" type="checkbox" name="selection" value="one" data-journey-click="data-target-click">One</label>
<div class="multiple-choice" data-target="data-target" data-journey-click="data-target-click">
<input id="my-id-one" type="checkbox" name="selection" value="one" />
<label for="my-id-one">One</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -18,10 +20,14 @@ exports[`gov-checkBoxes class options should add classes to legend span 1`] = `
<legend>
<span class="form-label test-legend-class">Select a check box</span>
</legend>
<label class="block-label" for="my-id-one">
<input id="my-id-one" type="checkbox" name="selection" value="one">One</label>
<label class="block-label" for="my-id-two">
<input id="my-id-two" type="checkbox" name="selection" value="two">Two</label>
<div class="multiple-choice">
<input id="my-id-one" type="checkbox" name="selection" value="one" />
<label for="my-id-one">One</label>
</div>
<div class="multiple-choice">
<input id="my-id-two" type="checkbox" name="selection" value="two" />
<label for="my-id-two">Two</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -33,10 +39,14 @@ exports[`gov-checkBoxes should add a form hint using the hint attribute 1`] = `
<span class="form-label">Select a checkbox</span>
<span class="form-hint">select as many or as few as you like</span>
</legend>
<label class="block-label" for="my-id-one">
<input id="my-id-one" type="checkbox" name="selection" value="one">One</label>
<label class="block-label" for="my-id-two">
<input id="my-id-two" type="checkbox" name="selection" value="two">Two</label>
<div class="multiple-choice">
<input id="my-id-one" type="checkbox" name="selection" value="one" />
<label for="my-id-one">One</label>
</div>
<div class="multiple-choice">
<input id="my-id-two" type="checkbox" name="selection" value="two" />
<label for="my-id-two">Two</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -48,10 +58,14 @@ exports[`gov-checkBoxes should add error message and classes when passed an erro
<span class="form-label">Select a checkbox</span>
<span class="error-message">Select an checkbox</span>
</legend>
<label class="block-label" for="my-id-one">
<input id="my-id-one" type="checkbox" name="selection" value="one">One</label>
<label class="block-label" for="my-id-two">
<input id="my-id-two" type="checkbox" name="selection" value="two">Two</label>
<div class="multiple-choice">
<input id="my-id-one" type="checkbox" name="selection" value="one" />
<label for="my-id-one">One</label>
</div>
<div class="multiple-choice">
<input id="my-id-two" type="checkbox" name="selection" value="two" />
<label for="my-id-two">Two</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -62,10 +76,16 @@ exports[`gov-checkBoxes should set the ID as input-{name} if ID attr not supplie
<legend>
<span class="form-label">Select a checkbox</span>
</legend>
<label class="block-label" for="input-selection-one">
<input id="input-selection-one" type="checkbox" name="selection" value="one">One</label>
<label class="block-label" for="input-selection-two">
<input id="input-selection-two" type="checkbox" name="selection" value="two">Two</label>
<div class="multiple-choice">
<input id="input-selection-one" type="checkbox" name="selection" value="one"
/>
<label for="input-selection-one">One</label>
</div>
<div class="multiple-choice">
<input id="input-selection-two" type="checkbox" name="selection" value="two"
/>
<label for="input-selection-two">Two</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -76,10 +96,15 @@ exports[`gov-checkBoxes should set the check box to selected if value is set 1`]
<legend>
<span class="form-label">Select a checkbox</span>
</legend>
<label class="block-label" for="my-id-one">
<input id="my-id-one" type="checkbox" name="selection" value="one">One</label>
<label class="block-label" for="my-id-two">
<input id="my-id-two" type="checkbox" name="selection" value="two" checked>Two</label>
<div class="multiple-choice">
<input id="my-id-one" type="checkbox" name="selection" value="one" />
<label for="my-id-one">One</label>
</div>
<div class="multiple-choice">
<input id="my-id-two" type="checkbox" name="selection" value="two" checked
/>
<label for="my-id-two">Two</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -90,10 +115,14 @@ exports[`gov-checkBoxes should use ID attribute value over generated input-{name
<legend>
<span class="form-label">Select a checkbox</span>
</legend>
<label class="block-label" for="my-id-one">
<input id="my-id-one" type="checkbox" name="selection" value="one">One</label>
<label class="block-label" for="my-id-two">
<input id="my-id-two" type="checkbox" name="selection" value="two">Two</label>
<div class="multiple-choice">
<input id="my-id-one" type="checkbox" name="selection" value="one" />
<label for="my-id-one">One</label>
</div>
<div class="multiple-choice">
<input id="my-id-two" type="checkbox" name="selection" value="two" />
<label for="my-id-two">Two</label>
</div>
</fieldset>
</div>
`;
8 changes: 5 additions & 3 deletions components/gov-checkboxes/__tests__/gov-checkboxes.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,16 +113,18 @@ describe('gov-checkBoxes', () => {
});

const $ = cheerio.load(output);

const firstDivContainer = $('div.multiple-choice');
expect(firstDivContainer.get(0).attribs['data-target']).toBe('data-target');
expect(firstDivContainer.get(0).attribs['data-journey-click']).toBe('data-target-click');

const firstLabel = $('label');
const oneCheck = expect.stringContaining('One');
expect(firstLabel.text()).toEqual(oneCheck);
expect(firstLabel.get(0).attribs['data-target']).toBe('data-target');

const firstRadio = $('input').get(0).attribs;
expect(firstRadio.id).toBe('my-id-one');
expect(firstRadio.name).toBe('selection');
expect(firstRadio.value).toBe('one');
expect(firstRadio['data-journey-click']).toBe('data-target-click');
expect(output).toMatchSnapshot();
});
});
Expand Down
10 changes: 4 additions & 6 deletions components/gov-checkboxes/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,10 @@
</legend>

{% for checkBox in checkBoxes %}
<label class="block-label" for="{{id}}-{{checkBox.id}}"
{% if checkBox.dataTarget %} data-target="{{checkBox.dataTarget}}"{% endif %}>
<input id="{{id}}-{{checkBox.id}}" type="checkbox" name="{{name}}" value="{{checkBox.value}}" {% if checkBox.checked %} checked{% endif %}
{% if checkBox.dataJourneyClick %} data-journey-click="{{checkBox.dataJourneyClick}}"{% endif %}>
{{checkBox.label}}
</label>
<div class="multiple-choice"{% if checkBox.dataTarget %} data-target="{{checkBox.dataTarget}}"{% endif %}{% if checkBox.dataJourneyClick %} data-journey-click="{{checkBox.dataJourneyClick}}"{% endif %}>
<input id="{{id}}-{{checkBox.id}}" type="checkbox" name="{{name}}" value="{{checkBox.value}}"{% if checkBox.checked %} checked{% endif %} />
<label for="{{id}}-{{checkBox.id}}">{{checkBox.label}}</label>
</div>
{% endfor %}
</fieldset>
</div>
111 changes: 75 additions & 36 deletions components/gov-radios/__tests__/__snapshots__/gov-radios.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,14 @@ exports[`gov-radios class options should add classes to legend span 1`] = `
<legend>
<span class="form-label test-legend-class">Select a radio button</span>
</legend>
<label class="block-label" for="my-id-yes">
<input id="my-id-yes" type="radio" name="selection" value="yes">Yes</label>
<label class="block-label" for="my-id-no">
<input id="my-id-no" type="radio" name="selection" value="no">No</label>
<div class="multiple-choice">
<input id="my-id-yes" type="radio" name="selection" value="yes" />
<label for="my-id-yes">Yes</label>
</div>
<div class="multiple-choice">
<input id="my-id-no" type="radio" name="selection" value="no" />
<label for="my-id-no">No</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -20,10 +24,14 @@ exports[`gov-radios class options should add inline class to form to fieldset wh
<legend>
<span class="form-label test-legend-class">Select a radio button</span>
</legend>
<label class="block-label" for="my-id-yes">
<input id="my-id-yes" type="radio" name="selection" value="yes">Yes</label>
<label class="block-label" for="my-id-no">
<input id="my-id-no" type="radio" name="selection" value="no">No</label>
<div class="multiple-choice">
<input id="my-id-yes" type="radio" name="selection" value="yes" />
<label for="my-id-yes">Yes</label>
</div>
<div class="multiple-choice">
<input id="my-id-no" type="radio" name="selection" value="no" />
<label for="my-id-no">No</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -34,12 +42,18 @@ exports[`gov-radios class options should have no classes on fieldset when two or
<legend>
<span class="form-label test-legend-class">Select a radio button</span>
</legend>
<label class="block-label" for="my-id-yes">
<input id="my-id-yes" type="radio" name="selection" value="yes">Yes</label>
<label class="block-label" for="my-id-no">
<input id="my-id-no" type="radio" name="selection" value="no">No</label>
<label class="block-label" for="my-id-maybe">
<input id="my-id-maybe" type="radio" name="selection" value="maybe">Maybe</label>
<div class="multiple-choice">
<input id="my-id-yes" type="radio" name="selection" value="yes" />
<label for="my-id-yes">Yes</label>
</div>
<div class="multiple-choice">
<input id="my-id-no" type="radio" name="selection" value="no" />
<label for="my-id-no">No</label>
</div>
<div class="multiple-choice">
<input id="my-id-maybe" type="radio" name="selection" value="maybe" />
<label for="my-id-maybe">Maybe</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -50,8 +64,10 @@ exports[`gov-radios radio button options should add data fields when supplied 1`
<legend>
<span class="form-label">Select a radio button</span>
</legend>
<label class="block-label" for="my-id-id" data-target="data-target">
<input id="my-id-id" type="radio" name="selection" value="value-id" data-journey-click="data-target-click">label-id</label>
<div class="multiple-choice" data-target="data-target" data-journey-click="data-target-click">
<input id="my-id-id" type="radio" name="selection" value="value-id" />
<label for="my-id-id">label-id</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -63,10 +79,14 @@ exports[`gov-radios should add a form hint using the hint attribute 1`] = `
<span class="form-label">Select a radio button</span>
<span class="form-hint">Select one of the below</span>
</legend>
<label class="block-label" for="my-id-yes">
<input id="my-id-yes" type="radio" name="selection" value="yes">Yes</label>
<label class="block-label" for="my-id-no">
<input id="my-id-no" type="radio" name="selection" value="no">No</label>
<div class="multiple-choice">
<input id="my-id-yes" type="radio" name="selection" value="yes" />
<label for="my-id-yes">Yes</label>
</div>
<div class="multiple-choice">
<input id="my-id-no" type="radio" name="selection" value="no" />
<label for="my-id-no">No</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -78,10 +98,14 @@ exports[`gov-radios should add error message and classes when passed an error ob
<span class="form-label">Select a radio button</span>
<span class="error-message">Select an option</span>
</legend>
<label class="block-label" for="my-id-yes">
<input id="my-id-yes" type="radio" name="selection" value="yes">Yes</label>
<label class="block-label" for="my-id-no">
<input id="my-id-no" type="radio" name="selection" value="no">No</label>
<div class="multiple-choice">
<input id="my-id-yes" type="radio" name="selection" value="yes" />
<label for="my-id-yes">Yes</label>
</div>
<div class="multiple-choice">
<input id="my-id-no" type="radio" name="selection" value="no" />
<label for="my-id-no">No</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -92,10 +116,16 @@ exports[`gov-radios should set the ID as input-{name} if ID attr not supplied an
<legend>
<span class="form-label">Select a radio button</span>
</legend>
<label class="block-label" for="input-selection-yes">
<input id="input-selection-yes" type="radio" name="selection" value="yes">Yes</label>
<label class="block-label" for="input-selection-no">
<input id="input-selection-no" type="radio" name="selection" value="no">No</label>
<div class="multiple-choice">
<input id="input-selection-yes" type="radio" name="selection" value="yes"
/>
<label for="input-selection-yes">Yes</label>
</div>
<div class="multiple-choice">
<input id="input-selection-no" type="radio" name="selection" value="no"
/>
<label for="input-selection-no">No</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -106,10 +136,15 @@ exports[`gov-radios should set the radio button to checked if the value matches
<legend>
<span class="form-label">Select a radio button</span>
</legend>
<label class="block-label" for="my-id-yes">
<input id="my-id-yes" type="radio" name="selection" value="yes">Yes</label>
<label class="block-label" for="my-id-no">
<input id="my-id-no" type="radio" name="selection" value="no" checked>No</label>
<div class="multiple-choice">
<input id="my-id-yes" type="radio" name="selection" value="yes" />
<label for="my-id-yes">Yes</label>
</div>
<div class="multiple-choice">
<input id="my-id-no" type="radio" name="selection" value="no" checked
/>
<label for="my-id-no">No</label>
</div>
</fieldset>
</div>
`;
Expand All @@ -120,10 +155,14 @@ exports[`gov-radios should use ID attribute value over generated input-{name} ID
<legend>
<span class="form-label">Select a radio button</span>
</legend>
<label class="block-label" for="my-id-yes">
<input id="my-id-yes" type="radio" name="selection" value="yes">Yes</label>
<label class="block-label" for="my-id-no">
<input id="my-id-no" type="radio" name="selection" value="no">No</label>
<div class="multiple-choice">
<input id="my-id-yes" type="radio" name="selection" value="yes" />
<label for="my-id-yes">Yes</label>
</div>
<div class="multiple-choice">
<input id="my-id-no" type="radio" name="selection" value="no" />
<label for="my-id-no">No</label>
</div>
</fieldset>
</div>
`;
9 changes: 5 additions & 4 deletions components/gov-radios/__tests__/gov-radios.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,18 +115,19 @@ describe('gov-radios', () => {
id: 'my-id',
name: 'selection'
});

const $ = cheerio.load(output);

const firstDivContainer = $('div.multiple-choice');
expect(firstDivContainer.get(0).attribs['data-target']).toBe('data-target');
expect(firstDivContainer.get(0).attribs['data-journey-click']).toBe('data-target-click');

const firstLabel = $('label');
const labelCheck = expect.stringContaining('label-id');
expect(firstLabel.text()).toEqual(labelCheck);
expect(firstLabel.get(0).attribs['data-target']).toBe('data-target');

const firstRadio = $('input').get(0).attribs;
expect(firstRadio.id).toBe('my-id-id');
expect(firstRadio.name).toBe('selection');
expect(firstRadio.value).toBe('value-id');
expect(firstRadio['data-journey-click']).toBe('data-target-click');
expect(output).toMatchSnapshot();
});
});
Expand Down
Loading

0 comments on commit 049f3bb

Please sign in to comment.