`.
+
+## Variables
+
+```
+name
+id
+legend
+hint
+value
+error
+radioButtons
+classes
+```
+
+## Descriptions of variables
+
+| Name | Description |
+| ------------- |---------------------------------------------------------------|
+| name | sets the name of each input |
+| id | sets the base id for each label |
+| legend | sets the text of the legend |
+| hint | sets hint text within the legend |
+| value | sets the radio button to checked when matched |
+| error | sets the error message within the legend |
+| radioButtons | object of values to generate a radio button |
+| classes | object used for styling elements |
+
+With hint and error if the values are empty, then they are not displayed in the render.
+
+## radioButtons
+
+You have to pass these as an array of objects, there is no set order to this.
+
+| Name | Description |
+| ---------------- |---------------------------------------------------------------|
+| id | this is prefixed by the main id |
+| value | sets value of the radio button |
+| label | sets value of the label |
+| dataTarget | sets the dataTarget, this is used to with show/hide javascript|
+| dataJourneyClick | sets a dataJourneyClick to be used with stage prompt |
+
+if two radio buttons are provided then they appear side by side, else it will appear as a list.
+
+An example of yes/no radio buttons array:
+
+```javascript
+[
+ {id: 'yes', value: 'yes', label: 'Yes'},
+ {id: 'no', value: 'no', label: 'Yno'}
+]
+```
+
+## Classes
+
+You can add various styles to the elements within the macro.
+
+| Name | Description |
+| ------------- |---------------------------------------------------------------|
+| legend | adds addtional classes to the legend |
+
+These are supplied as a string i.e `{legend: 'new-class new-class-two'}`.
+
+## Using with express
+
+You will need to expose the views to the nunjucks config, an example is below.
+
+```javascript
+
+const appViews = [path.join(__dirname, '/app/views/'),
+ path.join(__dirname, '/node_modules/govuk-elements-nunjucks/components/'),
+ path.join(__dirname, '/lib/')]
+
+const nunjucksAppEnv = nunjucks.configure(appViews, {
+ autoescape: true,
+ express: app,
+ noCache: true,
+ watch: true
+})
+```
+
+## Example in use
+Include the nunjucks macro and render it like so:
+
+```javascript
+{% from 'gov-radios/macro.njk' import govRadios %}
+
+{{ govRadios('yes-or-no',
+ 'yes-or-no',
+ 'Please select an option',
+ '',
+ 'yes',
+ '',
+ [{id: 'yes', value: 'yes', label: 'Yes'},
+ {id: 'no', value: 'no', label: 'Yno'}]
+ ) }}
+```
+
+## Links
+
+- [nunjucks](https://mozilla.github.io/nunjucks/)
+- [nunjucks with node](https://mozilla.github.io/nunjucks/getting-started.html)
+- [GOVUK elements](https://github.com/alphagov/govuk_elements)
+- [GOV.UK frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit)
\ No newline at end of file
diff --git a/components/retired/gov-radios/__tests__/__snapshots__/gov-radios.spec.js.snap b/components/retired/gov-radios/__tests__/__snapshots__/gov-radios.spec.js.snap
new file mode 100644
index 0000000..92577c7
--- /dev/null
+++ b/components/retired/gov-radios/__tests__/__snapshots__/gov-radios.spec.js.snap
@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gov-radios class options should add classes to legend span 1`] = `
+
+
+
+ Select a radio button
+
+
+
+
+
+
+
+`;
+
+exports[`gov-radios class options should add inline class to form to fieldset when two radio buttons are supplied 1`] = `
+
+
+
+ Select a radio button
+
+
+
+
+
+
+
+`;
+
+exports[`gov-radios class options should have no classes on fieldset when two or more radio buttons are supplied 1`] = `
+
+
+
+ Select a radio button
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`gov-radios radio button options should add data fields when supplied 1`] = `
+
+
+
+ Select a radio button
+
+
+
+
+
+`;
+
+exports[`gov-radios should add a form hint using the hint attribute 1`] = `
+
+
+
+ Select a radio button
+ Select one of the below
+
+
+
+
+
+
+
+`;
+
+exports[`gov-radios should add error message and classes when passed an error object 1`] = `
+
+
+
+ Select a radio button
+ Select an option
+
+
+
+
+
+
+
+`;
+
+exports[`gov-radios should set the ID as input-{name} if ID attr not supplied and generate radio buttons 1`] = `
+
+
+
+ Select a radio button
+
+
+
+
+
+
+
+`;
+
+exports[`gov-radios should set the radio button to checked if the value matches 1`] = `
+
+
+
+ Select a radio button
+
+
+
+
+
+
+
+`;
+
+exports[`gov-radios should use ID attribute value over generated input-{name} ID and generate radio buttons 1`] = `
+
+
+
+ Select a radio button
+
+
+
+
+
+
+
+`;
diff --git a/components/retired/gov-radios/__tests__/gov-radios.spec.js b/components/retired/gov-radios/__tests__/gov-radios.spec.js
new file mode 100644
index 0000000..6eccdc5
--- /dev/null
+++ b/components/retired/gov-radios/__tests__/gov-radios.spec.js
@@ -0,0 +1,181 @@
+'use strict';
+
+const nunjucks = require('nunjucks');
+const cheerio = require('cheerio');
+
+const yesNoRadios = [{id: 'yes', label: 'Yes', value: 'yes'}, {id: 'no', label: 'No', value: 'no'}];
+const yesNoMaybeRadios = [{id: 'yes', label: 'Yes', value: 'yes'}, {id: 'no', label: 'No', value: 'no'}, {id: 'maybe', label: 'Maybe', value: 'maybe'}];
+describe('gov-radios', () => {
+ it('should set the ID as input-{name} if ID attr not supplied and generate radio buttons', () => {
+ const name = 'selection';
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: yesNoRadios,
+ name
+ });
+ const $ = cheerio.load(output);
+ const inputs = $('input');
+ expect(inputs).toHaveLength(2);
+ expect(inputs.get(0).attribs.id).toBe(`input-${name}-yes`);
+ expect(inputs.get(1).attribs.id).toBe(`input-${name}-no`);
+ expect(output).toMatchSnapshot();
+ });
+
+ it('should use ID attribute value over generated input-{name} ID and generate radio buttons', () => {
+ const id = 'my-id';
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: yesNoRadios,
+ name: 'selection',
+ id
+ });
+ const $ = cheerio.load(output);
+ const inputs = $('input');
+ expect(inputs).toHaveLength(2);
+ expect(inputs.get(0).attribs.id).toBe(`${id}-yes`);
+ expect(inputs.get(1).attribs.id).toBe(`${id}-no`);
+ expect(output).toMatchSnapshot();
+ });
+
+ it('should add a form hint using the hint attribute', () => {
+ const hint = 'Select one of the below';
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: yesNoRadios,
+ name: 'selection',
+ id: 'my-id',
+ hint
+ });
+ const $ = cheerio.load(output);
+ const hintText = $('legend span.form-hint').text();
+ expect(hintText).toBe(hint);
+
+ const inputs = $('input');
+ expect(inputs).toHaveLength(2);
+ expect(inputs.get(0).attribs.id).toBe(`my-id-yes`);
+ expect(inputs.get(1).attribs.id).toBe(`my-id-no`);
+ expect(output).toMatchSnapshot();
+ });
+
+ it('should set the radio button to checked if the value matches', () => {
+ const value = 'no';
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: yesNoRadios,
+ name: 'selection',
+ id: 'my-id',
+ value
+ });
+ const $ = cheerio.load(output);
+ const inputs = $('input');
+ expect(inputs).toHaveLength(2);
+ const firstRadio = inputs.get(0).attribs;
+ const secondRadio = inputs.get(1).attribs;
+ expect(firstRadio.id).toBe(`my-id-yes`);
+ expect(firstRadio.checked).toBe(undefined);
+ expect(secondRadio.id).toBe(`my-id-no`);
+ expect(secondRadio.checked).toBe('');
+ expect(output).toMatchSnapshot();
+ });
+
+ it('should add error message and classes when passed an error object', () => {
+ const error = 'Select an option';
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: yesNoRadios,
+ name: 'selection',
+ id: 'my-id',
+ error
+ });
+ const $ = cheerio.load(output);
+
+ const inputs = $('input');
+ expect(inputs).toHaveLength(2);
+ expect(inputs.get(0).attribs.id).toBe(`my-id-yes`);
+ expect(inputs.get(1).attribs.id).toBe(`my-id-no`);
+
+ const formGroupClasses = $('.form-group').attr('class');
+ const errorMsg = $('legend span.error-message').text();
+
+ expect(formGroupClasses).toBe('form-group error');
+ expect(errorMsg).toBe(error);
+ expect(output).toMatchSnapshot();
+ });
+ describe('radio button options', () => {
+ it('should add data fields when supplied', () => {
+ const radioButton = [{id: 'id',
+ value: 'value-id',
+ label: 'label-id',
+ dataTarget: 'data-target',
+ dataJourneyClick: 'data-target-click'}];
+
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: radioButton,
+ id: 'my-id',
+ name: 'selection'
+ });
+
+ const $ = cheerio.load(output);
+ 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();
+ });
+ });
+ describe('class options', () => {
+ it('should add classes to legend span', () => {
+ const classes = {legend: 'test-legend-class'};
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: yesNoRadios,
+ name: 'selection',
+ id: 'my-id',
+ classes
+ });
+ const $ = cheerio.load(output);
+ const labelClasses = $('.form-group legend span').attr('class');
+
+ expect(labelClasses).toBe('form-label test-legend-class');
+ expect(output).toMatchSnapshot();
+ });
+ it('should add inline class to form to fieldset when two radio buttons are supplied', () => {
+ const classes = {legend: 'test-legend-class'};
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: yesNoRadios,
+ name: 'selection',
+ id: 'my-id',
+ classes
+ });
+ const $ = cheerio.load(output);
+ const labelClasses = $('fieldset').attr('class');
+
+ expect(labelClasses).toBe('inline');
+ expect(output).toMatchSnapshot();
+ });
+ it('should have no classes on fieldset when two or more radio buttons are supplied', () => {
+ const classes = {legend: 'test-legend-class'};
+ const output = nunjucks.render('./components/retired/gov-radios/template.njk', {
+ legend: 'Select a radio button',
+ radioButtons: yesNoMaybeRadios,
+ name: 'selection',
+ id: 'my-id',
+ classes
+ });
+ const $ = cheerio.load(output);
+ const labelClasses = $('fieldset').attr('class');
+
+ expect(labelClasses).toBe(undefined);
+ expect(output).toMatchSnapshot();
+ });
+ });
+});
+
diff --git a/components/retired/gov-radios/macro.njk b/components/retired/gov-radios/macro.njk
new file mode 100644
index 0000000..d072d52
--- /dev/null
+++ b/components/retired/gov-radios/macro.njk
@@ -0,0 +1,3 @@
+{% macro govRadios(name, id, legend, hint, value, error, radioButtons, classes) %}
+ {% include './template.njk' %}
+{% endmacro %}
\ No newline at end of file
diff --git a/components/retired/gov-radios/template.njk b/components/retired/gov-radios/template.njk
new file mode 100644
index 0000000..62ab416
--- /dev/null
+++ b/components/retired/gov-radios/template.njk
@@ -0,0 +1,22 @@
+{% if not id %}
+ {% set id="input-" + name %}
+{% endif %}
+
+
+
+
+ {{legend}}
+ {% if error %}{{error}} {% endif %}
+ {% if hint %}{{hint}} {% endif %}
+
+
+ {% for radio in radioButtons %}
+
+
+ {% endfor %}
+
+
diff --git a/package.json b/package.json
index 7e1a9b5..fc6789d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,9 @@
"homepage": "https://github.com/htmlandbacon/govuk-elements-nunjucks#readme",
"jest": {
"testEnvironment": "node",
- "snapshotSerializers": ["jest-serializer-html-string"]
+ "snapshotSerializers": [
+ "jest-serializer-html-string"
+ ]
},
"xo": {
"esnext": true,