Merge branch 'add-task-list-component' of github.com:nhsuk/nhsuk-fron…

…tend into add-task-list-component * 'add-task-list-component' of github.com:nhsuk/nhsuk-frontend: (34 commits) Fix encoding issue introduce in gulp v5.0 (#1013) Make it easier to set date values (#994) Update app/components/task-list/multiple-sections.njk Update packages/components/task-list/_task-list.scss Update packages/components/task-list/_task-list.scss Update app/components/task-list/multiple-sections.njk Add summary list row classes (#1007) Add summary list row condition (#1008) changelog backstop refs backstop refs change margins to padding still trying to fix linting error backstop refs remove testing markup from component examples backstop refs updated Use page template in examples update reference images tweak main wrapper margin reduce the padding on main wrapper on mobile ...
nhsuk · Sep 19, 2024 · 1a9c187 · 1a9c187
2 parents 54debe3 + 176aa9e
commit 1a9c187
Show file tree

Hide file tree

Showing 203 changed files with 231 additions and 98 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,20 @@
 
 ## Unreleased
 
+:new: **New features**
+
+- Add task list component ([PR 969](https://github.com/nhsuk/nhsuk-frontend/pull/969))
+
+:wrench: **Fixes**
+
 - Fix Sass deprecation on `mix` function (passing a number without unit) ([PR 995](https://github.com/nhsuk/nhsuk-frontend/pull/995))
 - Add nhsukAttributes macro, copied from GOV.UK ([PR 998](https://github.com/nhsuk/nhsuk-frontend/pull/998))
-- Add task list component ([PR 969](https://github.com/nhsuk/nhsuk-frontend/pull/969))
+- Fix missing classes option for summary list rows ([PR 1007](https://github.com/nhsuk/nhsuk-frontend/pull/1007))
+- Add support for inline conditions on summary list rows ([PR 1008](https://github.com/nhsuk/nhsuk-frontend/pull/1008))
+- 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
 

diff --git a/app/_templates/page.njk b/app/_templates/page.njk
@@ -48,9 +48,8 @@
 
 {% block body %}
 
-  {% block breadcrumb %}{% endblock %}
-
   <div class="nhsuk-width-container">
+    {% block beforeContent %}{% endblock %}
     <main class="nhsuk-main-wrapper" id="maincontent">
 
       <div class="nhsuk-grid-row">

diff --git a/app/components/all.njk b/app/components/all.njk
@@ -64,7 +64,7 @@
   }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

diff --git a/app/components/back-link/button.njk b/app/components/back-link/button.njk
@@ -20,4 +20,4 @@
     </main>
   </div>
 
-{% endblock %}
+{% endblock %}
diff --git a/app/components/back-link/index.njk b/app/components/back-link/index.njk
@@ -11,13 +11,17 @@
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-two-thirds">
           {{ backLink({
-            "href": "#",
-            "text": "Go back"
+            href: "#",
+            text: "Go back"
           }) }}
         </div>
       </div>
 
     </main>
   </div>
+
+{% endblock %}
 
+{% block heading %}
+  <h1 class="govuk-heading-l">Page title</h1>
 {% endblock %}
diff --git a/app/components/breadcrumb/index.njk b/app/components/breadcrumb/index.njk
@@ -5,27 +5,41 @@
 
 {% block body %}
 
-  {{ breadcrumb({
-    items: [
-      {
-        href: "#",
-        text: "Level one",
-        attributes: {lang: "en"}
-      },
-      {
-        href: "#",
-        text: "Level two"
-      },
-      {
-        href: "#",
-        text: "Level three",
-        attributes: {lang: "en"}
-      }
-    ],
-    href: "#",
-    text: "Level four",
-    classes: "example-class-one example-class-two",
-    attributes: {lang: "en"}
-  }) }}
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
 
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ breadcrumb({
+              items: [
+                {
+                  href: "#",
+                  text: "Level one",
+                  attributes: {lang: "en"}
+                },
+                {
+                  href: "#",
+                  text: "Level two"
+                },
+                {
+                  href: "#",
+                  text: "Level three",
+                  attributes: {lang: "en"}
+                }
+              ],
+              href: "#",
+              text: "Level four",
+              classes: "example-class-one example-class-two",
+              attributes: {lang: "en"}
+            }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
+
+{% block heading %}
+  <h1 class="govuk-heading-l">Page title</h1>
 {% endblock %}
diff --git a/app/components/date-input/index.njk b/app/components/date-input/index.njk
@@ -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>

diff --git a/app/components/date-input/month-and-year-with-values.njk b/app/components/date-input/month-and-year-with-values.njk
@@ -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 %}
diff --git a/app/components/date-input/with-values.njk b/app/components/date-input/with-values.njk
@@ -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 %}
diff --git a/app/components/task-list/multiple-sections.njk b/app/components/task-list/multiple-sections.njk
@@ -42,7 +42,7 @@
             ]
           }) }}
 
-          <h2 class="nhsuk-heading-m nhsuk-u-margin-top-3">Prepare application</h2>
+          <h2 class="nhsuk-heading-m">Prepare application</h2>
 
           {{ taskList({
             idPrefix: "your-health",
@@ -107,7 +107,7 @@
           }) }}
 
           {{ button({
-            "text": "Continue"
+            text: "Continue"
           }) }}
         </div>
       </div>

diff --git a/app/pages/about.njk b/app/pages/about.njk
@@ -7,7 +7,7 @@
   {{ super() }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -7,7 +7,7 @@
   {{ super() }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {
@@ -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>

diff --git a/app/pages/install.njk b/app/pages/install.njk
@@ -7,7 +7,7 @@
   {{ super() }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

diff --git a/app/styles/lists.njk b/app/styles/lists.njk
@@ -6,7 +6,7 @@
   {{ super() }}
 {% endblock %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

diff --git a/gulpfile.js b/gulpfile.js
@@ -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/'))
 }
 
 /**
@@ -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'))
 }

diff --git a/packages/components/back-link/_back-link.scss b/packages/components/back-link/_back-link.scss
@@ -6,10 +6,16 @@
  * 1. Allow space for the arrow.
  * 2. Align the icon with the start of the back link.
  * 3. Align the icon with the middle of the text.
+ * 4. Make back link same height as breadcrumb.
  */
 
 .nhsuk-back-link {
-  margin-bottom: nhsuk-spacing(3);
+  margin-top: nhsuk-spacing(3);
+  line-height: 1; /* 4 */
+
+  @include mq($from: tablet) {
+    margin-top: nhsuk-spacing(4);
+  }
 }
 
 .nhsuk-back-link__link {
@@ -30,6 +36,10 @@
     position: absolute;
     top: -1px; /* 3 */
     width: 24px;
+
+    @include mq($from: tablet) {
+      top: 0; /* 3 */
+    }
   }
 
   &:visited {
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,4 +20,4 @@ @@
         </main>
       </div>
-    {% endblock %}
+    {% endblock %}