Skip to content

Commit

Permalink
Merge branch 'main' into add-task-list-component
Browse files Browse the repository at this point in the history
  • Loading branch information
@edwardhorsford
edwardhorsford authored Sep 11, 2024
2 parents a0b3197 + a66882b commit 176aa9e
Show file tree
Hide file tree
Showing 8 changed files with 102 additions and 22 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
- Change "Contact us" in the footer link examples to "Give us feedback" ([PR 972](https://github.com/nhsuk/nhsuk-frontend/pull/972))
- Adjusted default spacing of back link component ([PR 964](https://github.com/nhsuk/nhsuk-frontend/pull/964))
- Reduce main wrapper padding on mobile ([PR 1003](https://github.com/nhsuk/nhsuk-frontend/pull/1003))
- Fix image encoding issue introduced in Gulp v5.0 ([PR 1013](https://github.com/nhsuk/nhsuk-frontend/pull/1013))

## 8.3.0 - 24 July 2024

Expand Down
16 changes: 1 addition & 15 deletions app/components/date-input/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,7 @@
},
"hint": {
"text": "For example, 31 3 1980"
},
"items": [
{
"name": "day",
"classes": "nhsuk-input--width-2"
},
{
"name": "month",
"classes": "nhsuk-input--width-2"
},
{
"name": "year",
"classes": "nhsuk-input--width-4"
}
]
}
}) }}
</div>
</div>
Expand Down
45 changes: 45 additions & 0 deletions app/components/date-input/month-and-year-with-values.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Date input' %}
{% from 'components/date-input/macro.njk' import dateInput %}
{% extends 'layout.njk' %}

{% block body %}

<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent">

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{{ dateInput({
"id": "dob",
"namePrefix": "dob",
"fieldset": {
"legend": {
"text": "When did you start your job?"
}
},
"hint": {
"text": "For example, 11 2023"
},
values: {
month: "8",
year: "2024"
},
"items": [
{
"name": "month",
"classes": "nhsuk-input--width-2"
},
{
"name": "year",
"classes": "nhsuk-input--width-4"
}
]
}) }}
</div>
</div>

</main>
</div>

{% endblock %}
36 changes: 36 additions & 0 deletions app/components/date-input/with-values.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Date input' %}
{% from 'components/date-input/macro.njk' import dateInput %}
{% extends 'layout.njk' %}

{% block body %}

<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent">

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{{ dateInput({
"id": "dob",
"namePrefix": "dob",
"fieldset": {
"legend": {
"text": "What is your date of birth?"
}
},
"hint": {
"text": "For example, 31 3 1980"
},
values: {
day: "5",
month: "8",
year: "2024"
}
}) }}
</div>
</div>

</main>
</div>

{% endblock %}
2 changes: 2 additions & 0 deletions app/pages/examples.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@
<li><a href="../components/date-input/autocomplete.html">Date input with autocomplete attribute</a></li>
<li><a href="../components/date-input/error.html">Date input with error</a></li>
<li><a href="../components/date-input/multiple-errors.html">Date input with multiple errors</a></li>
<li><a href="../components/date-input/with-values.html">Date input with values</a></li>
<li><a href="../components/date-input/month-and-year-with-values.html">Date (month and year) input with values</a></li>
<li><a href="../components/details/index.html">Details</a></li>
<li><a href="../components/do-dont-list/index.html">Do and Don't list</a></li>
<li><a href="../components/error-message/index.html">Error message</a></li>
Expand Down
7 changes: 5 additions & 2 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ function versionJS() {
* Copy assets such as icons and images into the distribution
*/
function assets() {
return gulp.src('packages/assets/**').pipe(gulp.dest('dist/assets/'))
return gulp.src('packages/assets/**', { encoding: false }).pipe(gulp.dest('dist/assets/'))
}

/**
Expand All @@ -145,7 +145,10 @@ function cssFolder() {

function createZip() {
return gulp
.src(['dist/css/*.min.css', 'dist/js/*.min.js', 'dist/assets/**', '!dist/js/nhsuk.min.js'], { base: 'dist' })
.src(['dist/css/*.min.css', 'dist/js/*.min.js', 'dist/assets/**', '!dist/js/nhsuk.min.js'], {
base: 'dist',
encoding: false
})
.pipe(zip(`nhsuk-frontend-${version}.zip`))
.pipe(gulp.dest('dist'))
}
Expand Down
4 changes: 4 additions & 0 deletions packages/components/date-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,10 @@ The date input Nunjucks macro takes the following arguments:
| **pattern** | string | No | Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value. |
| **classes** | string | No | Optional additional classes to add to the date-input container. Separate each class with a space. |
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the date-input component. |
| **values** | object | No | An optional object use to specify value attributes for the date parts without setting rows. |
| **values.day** | string | No | Value attribute for the day input. |
| **values.month** | string | No | Value attribute for the month input. |
| **values.year** | string | No | Value attribute for the year input. |

If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).

Expand Down
13 changes: 8 additions & 5 deletions packages/components/date-input/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,18 @@
{% set dateInputItems = [
{
name: "day",
classes: "nhsuk-input--width-2"
classes: "nhsuk-input--width-2",
value: params.values.day
},
{
name: "month",
classes: "nhsuk-input--width-2"
classes: "nhsuk-input--width-2",
value: params.values.month
},
{
name: "year",
classes: "nhsuk-input--width-4"
classes: "nhsuk-input--width-4",
value: params.values.year
}
] %}
{% endif %}
Expand Down Expand Up @@ -64,8 +67,8 @@
},
id: item.id if item.id else (params.id + "-" + item.name),
classes: "nhsuk-date-input__input " + (item.classes if item.classes),
name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
value: item.value,
name: (params.namePrefix + "[" + item.name + "]") if params.namePrefix else item.name,
value: item.value or params.values[item.name],
inputmode: item.inputmode if item.inputmode else "numeric",
autocomplete: item.autocomplete,
pattern: item.pattern,
Expand Down

0 comments on commit 176aa9e

Please sign in to comment.