diff --git a/app/views/examples/error-messages/index.njk b/app/views/examples/error-messages/index.njk index 2153b26712..b57d423b56 100644 --- a/app/views/examples/error-messages/index.njk +++ b/app/views/examples/error-messages/index.njk @@ -54,14 +54,16 @@ {{ govukInput({ label: { - text: "National Insurance Number", - hintText: "It’s on your National Insurance card, benefit letter, - payslip or P60. For example, ‘QQ 12 34 56 C’." + text: "National Insurance Number" + }, + hint: { + text: 'It’s on your National Insurance card, benefit letter, + payslip or P60. For example, ‘QQ 12 34 56 C’.' }, id: "input-1", name: "test-name", errorMessage: { - text: "National Insurance Number" + text: "Enter your National Insurance Number" } }) }} @@ -103,7 +105,9 @@ {{ govukRadios({ fieldset: { - legendHtml: "

How do you want to be contacted?

" + legend: { + text: "How do you want to be contacted?" + } }, errorMessage: { text: "Please select an option" @@ -130,7 +134,9 @@ {{ govukCheckboxes({ fieldset: { - legendHtml: "

What type of waste do you want to dispose of?

" + legend: { + text: "What type of waste do you want to dispose of?" + } }, errorMessage: { text: "Please select an option" @@ -157,23 +163,30 @@ {{- govukDateInput({ fieldset: { - legendText: 'What is your date of birth?', - legendHintText: 'For example, 31 3 1980' + legend: { + text: "What is your date of birth?" + } + }, + hint: { + text: 'For example, 31 3 1980' }, errorMessage: { - text: 'Error message goes here' + text: 'Date of birth must be in the past' }, id: 'dob', name: 'dob', items:[ { - name: 'day' + name: 'day', + classes: 'govuk-input--width-2 govuk-input--error' }, { - name: 'month' + name: 'month', + classes: 'govuk-input--width-2 govuk-input--error' }, { - name: 'year' + name: 'year', + classes: 'govuk-input--width-4 govuk-input--error' } ] }) @@ -183,24 +196,32 @@ {{- govukDateInput({ fieldset: { - legendText: 'What is your date of birth?', - legendHintText: 'For example, 31 3 1980' + legend: { + text: "What is your date of birth?" + } + }, + hint: { + text: 'For example, 31 3 1980' }, errorMessage: { - text: 'Day not valid' + text: 'Date of birth must include a day' }, id: 'dob', name: 'dob', items:[ { name: 'day', - classes: 'govuk-input--error' + classes: 'govuk-input--width-2 govuk-input--error' }, { - name: 'month' + name: 'month', + value: '10', + classes: 'govuk-input--width-2' }, { - name: 'year' + name: 'year', + value: '1985', + classes: 'govuk-input--width-4' } ] }) @@ -240,8 +261,10 @@ id: "more-detail", name: "more-detail", label: { - text: "Can you provide more detail?", - hintText: "Don't include personal or financial information, eg your National Insurance number or credit card details." + text: "Can you provide more detail?" + }, + hint: { + text: 'Don’t include personal or financial information, for example your National Insurance number or credit card details.' }, "errorMessage": { text: "Error message goes here" diff --git a/app/views/examples/error-summary-with-messages/index.njk b/app/views/examples/error-summary-with-messages/index.njk index 15e040a200..621d22f1a0 100644 --- a/app/views/examples/error-summary-with-messages/index.njk +++ b/app/views/examples/error-summary-with-messages/index.njk @@ -35,8 +35,11 @@ {{ govukInput({ label: { - "html": '

Passport number

', - "hintText": "For example, 502135326" + text: "Passport number", + classes: "govuk-label--m" + }, + hint: { + text: "For example, 502135326" }, id: "passport-number", name: "passport-number", @@ -47,8 +50,13 @@ {{ govukDateInput({ fieldset: { - legendHtml: '

Expiry date

', - legendHintText: 'For example, 08 2014' + legend: { + text: 'Expiry date', + classes: 'govuk-fieldset__legend--m' + } + }, + hint: { + text: 'For example, 08 2014' }, id: 'expiry', name: 'expiry', @@ -63,7 +71,7 @@ } ], errorMessage: { - "text": "You must provide your expiry date" + "text": "Enter your expiry date" } }) }} diff --git a/app/views/examples/form-elements/index.njk b/app/views/examples/form-elements/index.njk index 96521db14d..4f86964b89 100644 --- a/app/views/examples/form-elements/index.njk +++ b/app/views/examples/form-elements/index.njk @@ -60,7 +60,10 @@ {{ govukRadios({ "fieldset": { - "legendHtml": "

How do you want to be contacted?

" + "legend": { + text: "How do you want to be contacted?", + classes: "govuk-fieldset__legend--m" + } }, "idPrefix": "radio-stacked", "name": "radio-stacked", @@ -83,7 +86,7 @@ {{ govukRadios({ "fieldset": {}, - "classes": "govuk-radio--inline", + "classes": "govuk-radios--inline", "idPrefix": "radio-inline", "name": "radio-inline", "items": [ @@ -121,12 +124,17 @@ {{- govukDateInput({ - fieldset: { - legendText: 'What is your date of birth?', - legendHintText: 'For example, 31 3 1980' + "fieldset": { + "legend": { + "text": "What is your date of birth?", + "classes": "govuk-fieldset__legend--m" + } + }, + "hint": { + "text": "For example, 31 3 1980" }, - id: 'dob', - name: 'dob' + "id": "dob", + "name": "dob" }) -}} {% call govukFieldset() %} diff --git a/app/views/full-page-examples/bank-holidays/index.njk b/app/views/full-page-examples/bank-holidays/index.njk index d5a42b25d4..271db559a3 100644 --- a/app/views/full-page-examples/bank-holidays/index.njk +++ b/app/views/full-page-examples/bank-holidays/index.njk @@ -122,7 +122,7 @@ text: "Monday" }, { - text: " Summer bank holiday" + text: "Summer bank holiday" } ], [ @@ -1209,7 +1209,7 @@ text: "Monday" }, { - text: " St Andrew’s Day" + text: "St Andrew’s Day" } ], [ @@ -1327,7 +1327,7 @@ text: "Monday" }, { - text: " St Andrew’s Day" + text: "St Andrew’s Day" } ], [ @@ -1448,7 +1448,7 @@ text: "Monday" }, { - text: " St Andrew’s Day" + text: "St Andrew’s Day" } ], [ @@ -1569,7 +1569,7 @@ text: "Monday" }, { - text: " St Andrew’s Day" + text: "St Andrew’s Day" } ], [ @@ -1690,7 +1690,7 @@ text: "Monday" }, { - text: " St Andrew’s Day" + text: "St Andrew’s Day" } ], [ @@ -1811,7 +1811,7 @@ text: "Monday" }, { - text: " St Andrew’s Day" + text: "St Andrew’s Day" } ], [ @@ -1932,7 +1932,7 @@ text: "Monday" }, { - text: " St Andrew’s Day" + text: "St Andrew’s Day" } ], [ @@ -2053,7 +2053,7 @@ text: "Monday" }, { - text: " St Andrew’s Day" + text: "St Andrew’s Day" } ], [ @@ -2206,7 +2206,7 @@ text: "Monday" }, { - text: " Early May bank holiday" + text: "Early May bank holiday" } ], [ diff --git a/app/views/full-page-examples/passport-details/index.njk b/app/views/full-page-examples/passport-details/index.njk index 2389ef9ce3..7e3ef433fd 100644 --- a/app/views/full-page-examples/passport-details/index.njk +++ b/app/views/full-page-examples/passport-details/index.njk @@ -14,89 +14,89 @@ {% block beforeContent %} {{ govukBackLink({ - text: "Back" + text: "Back" }) }} {% endblock %} {% block content %}
-
- {% if errorSummary.length > 0 %} - {{ govukErrorSummary({ - titleText: "There is a problem", - errorList: errorSummary - }) }} - {% endif %} -

{{ pageTitle }}

+
+ {% if errorSummary.length > 0 %} + {{ govukErrorSummary({ + titleText: "There is a problem", + errorList: errorSummary + }) }} + {% endif %} +

{{ pageTitle }}

-
+ - {{ govukInput({ - label: { - text: "Passport number", - classes: "govuk-label--m" - }, - hint: { - text: "For example, 502135326" - }, - classes: "govuk-input--width-10", - id: "passport-number", - name: "passport-number", - value: values["passport-number"], - errorMessage: errors["passport-number"] - }) }} + {{ govukInput({ + label: { + text: "Passport number", + classes: "govuk-label--m" + }, + hint: { + text: "For example, 502135326" + }, + classes: "govuk-input--width-10", + id: "passport-number", + name: "passport-number", + value: values["passport-number"], + errorMessage: errors["passport-number"] + }) }} - {% set dateInputDayClass = "govuk-input--width-2" %} - {% set dateInputMonthClass = "govuk-input--width-2" %} - {% set dateInputYearClass = "govuk-input--width-4" %} + {% set dateInputDayClass = "govuk-input--width-2" %} + {% set dateInputMonthClass = "govuk-input--width-2" %} + {% set dateInputYearClass = "govuk-input--width-4" %} - {% if errors["expiry-day"] %} - {% set dateInputDayClass = dateInputDayClass + " govuk-input--error" %} - {% endif %} - {% if errors["expiry-month"] %} - {% set dateInputMonthClass = dateInputMonthClass + " govuk-input--error" %} - {% endif %} - {% if errors["expiry-year"] %} - {% set dateInputYearClass = dateInputYearClass + " govuk-input--error" %} - {% endif %} + {% if errors["expiry-day"] %} + {% set dateInputDayClass = dateInputDayClass + " govuk-input--error" %} + {% endif %} + {% if errors["expiry-month"] %} + {% set dateInputMonthClass = dateInputMonthClass + " govuk-input--error" %} + {% endif %} + {% if errors["expiry-year"] %} + {% set dateInputYearClass = dateInputYearClass + " govuk-input--error" %} + {% endif %} - {{ govukDateInput({ - id: "expiry", - namePrefix: "expiry", - fieldset: { - legend: { - text: "Expiry date", - classes: "govuk-fieldset__legend--m" - } - }, - hint: { - text: "For example, 31 3 1980" - }, - items: [ - { - classes: dateInputDayClass, - name: "day", - value: values["expiry-day"] - }, - { - classes: dateInputMonthClass, - name: "month", - value: values["expiry-month"] - }, - { - classes: dateInputYearClass, - name: "year", - value: values["expiry-year"] - } - ], - errorMessage: errors["expiry"] - }) }} + {{ govukDateInput({ + id: "expiry", + namePrefix: "expiry", + fieldset: { + legend: { + text: "Expiry date", + classes: "govuk-fieldset__legend--m" + } + }, + hint: { + text: "For example, 31 3 1980" + }, + items: [ + { + classes: dateInputDayClass, + name: "day", + value: values["expiry-day"] + }, + { + classes: dateInputMonthClass, + name: "month", + value: values["expiry-month"] + }, + { + classes: dateInputYearClass, + name: "year", + value: values["expiry-year"] + } + ], + errorMessage: errors["expiry"] + }) }} - {{ govukButton({ - text: "Continue" - }) }} + {{ govukButton({ + text: "Continue" + }) }} -
-
+ +
-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/app/views/full-page-examples/update-your-account-details/index.njk b/app/views/full-page-examples/update-your-account-details/index.njk index 0cbcdc34b1..9d515e2ba3 100644 --- a/app/views/full-page-examples/update-your-account-details/index.njk +++ b/app/views/full-page-examples/update-your-account-details/index.njk @@ -12,60 +12,60 @@ {% block beforeContent %} {{ govukBackLink({ - text: "Back" + text: "Back" }) }} {% endblock %} {% block content %}
-
- {% if errorSummary.length > 0 %} - {{ govukErrorSummary({ - titleText: "There is a problem", - errorList: errorSummary - }) }} - {% endif %} -

{{ pageTitle }}

+
+ {% if errorSummary.length > 0 %} + {{ govukErrorSummary({ + titleText: "There is a problem", + errorList: errorSummary + }) }} + {% endif %} +

{{ pageTitle }}

-
+ - {{ govukInput({ - label: { - text: "Email address", - classes: "govuk-label--m" - }, - type: "email", - id: "email", - name: "email", - value: values["email"], - errorMessage: errors["email"], - autocomplete: "email", - attributes: { - spellcheck: false - } - }) }} + {{ govukInput({ + label: { + text: "Email address", + classes: "govuk-label--m" + }, + type: "email", + id: "email", + name: "email", + value: values["email"], + errorMessage: errors["email"], + autocomplete: "email", + attributes: { + spellcheck: false + } + }) }} - {{ govukInput({ - label: { - text: "New password", - classes: "govuk-label--m" - }, - type: "password", - id: "password", - name: "password", - value: values["password"], - errorMessage: errors["password"], - autocomplete: "new-password", - attributes: { - spellcheck: false - } - }) }} + {{ govukInput({ + label: { + text: "New password", + classes: "govuk-label--m" + }, + type: "password", + id: "password", + name: "password", + value: values["password"], + errorMessage: errors["password"], + autocomplete: "new-password", + attributes: { + spellcheck: false + } + }) }} - {{ govukButton({ - text: "Save account details" - }) }} + {{ govukButton({ + text: "Save account details" + }) }} -
-
+ +
-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/app/views/full-page-examples/what-is-your-address/index.njk b/app/views/full-page-examples/what-is-your-address/index.njk index 91ebd42f95..6795a9c1c4 100644 --- a/app/views/full-page-examples/what-is-your-address/index.njk +++ b/app/views/full-page-examples/what-is-your-address/index.njk @@ -19,7 +19,7 @@ {% block content %}
-
+
{% if errorSummary.length > 0 %} {{ govukErrorSummary({ diff --git a/docs/contributing/coding-standards/nunjucks-api.md b/docs/contributing/coding-standards/nunjucks-api.md index 01c221bf19..36b35b0ae5 100644 --- a/docs/contributing/coding-standards/nunjucks-api.md +++ b/docs/contributing/coding-standards/nunjucks-api.md @@ -36,23 +36,23 @@ If a component depends on another component, we group the options for the depend Example of a component depending on another component ``` {{ govukLabel({ - "text": "Label text", - "errorMessage": { - "text": "Error message" - } + "text": "Label text", + "errorMessage": { + "text": "Error message" + } }) }} ``` Example of a component depending on two other components ``` {{ govukInput({ - "name": "example-input", - "label": { - "text": "Label text" - }, - "errorMessage": { - "text": "Error message" - } + "name": "example-input", + "label": { + "text": "Label text" + }, + "errorMessage": { + "text": "Error message" + } }) }} ``` @@ -74,11 +74,11 @@ You cannot use this to set attributes that are already defined, such as class Example: ``` {{ govukButton({ - "attributes" : { - "data-target" : "contact-by-text", - "aria-labelledby": "error-summary-heading-example-1", - "tabindex": "-1" - } + "attributes" : { + "data-target" : "contact-by-text", + "aria-labelledby": "error-summary-heading-example-1", + "tabindex": "-1" + } }) }} ``` @@ -106,13 +106,13 @@ When a component has multiple visual presentations, such default button vs start Default button example: ``` {{ govukButton({ - "text" : "Continue" + "text" : "Continue" }) }} ``` Start button example: ``` {{ govukButton({ - "text" : "Start", - "classes" : "govuk-button--start" + "text" : "Start", + "classes" : "govuk-button--start" }) }} ``` diff --git a/src/components/fieldset/template.njk b/src/components/fieldset/template.njk index eb93358274..cb0a683443 100644 --- a/src/components/fieldset/template.njk +++ b/src/components/fieldset/template.njk @@ -4,13 +4,13 @@ {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> {% if params.legend.html or params.legend.text %} - {%- if params.legend.isPageHeading %} + {% if params.legend.isPageHeading %}

{{ params.legend.html | safe if params.legend.html else params.legend.text }}

{% else %} {{ params.legend.html | safe if params.legend.html else params.legend.text }} - {% endif -%} + {% endif %}
{% endif %} {{ caller() if caller }} {#- if statement allows usage of `call` to be optional -#} diff --git a/src/components/file-upload/file-upload.yaml b/src/components/file-upload/file-upload.yaml index fadf4d1544..51d2d346f0 100644 --- a/src/components/file-upload/file-upload.yaml +++ b/src/components/file-upload/file-upload.yaml @@ -10,7 +10,7 @@ params: - name: value type: string required: false - description: Optional initial value of the input + description: Optional initial value of the input - name: label type: object required: true diff --git a/src/components/radios/radios.yaml b/src/components/radios/radios.yaml index 2c0fe788fd..53e9cf21d8 100644 --- a/src/components/radios/radios.yaml +++ b/src/components/radios/radios.yaml @@ -124,7 +124,7 @@ examples: - name: inline data: - idPrefix: example' + idPrefix: example classes: govuk-radios--inline name: example fieldset: @@ -330,7 +330,7 @@ examples: - name: inline with conditional items - + data: classes: govuk-radios--inline idPrefix: how-contacted