Work on scss and add second example

nhsuk · Jun 13, 2024 · 0aeccf8 · 0aeccf8
1 parent 4515b3a
commit 0aeccf8
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 20 deletions.
diff --git a/app/components/task-list/index.njk b/app/components/task-list/index.njk
@@ -29,10 +29,8 @@
                 },
                 href: "#",
                 status: {
-                  tag: {
-                    text: "Incomplete",
-                    classes: "nhsuk-tag--blue"
-                  }
+                  text: "Completed",
+                  classes: "nhsuk-task-list__status--completed"
                 }
               },
               {
@@ -73,6 +71,7 @@
               }
             ]
           }) }}
+
         </div>
       </div>
 

diff --git a/app/components/task-list/multiple-sections.njk b/app/components/task-list/multiple-sections.njk
@@ -0,0 +1,118 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Task list' %}
+{% from 'components/task-list/macro.njk' import taskList %}
+{% from 'components/button/macro.njk' import button %}
+{% 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">
+          <h1 class="nhsuk-heading-l">Service name</h1>
+
+          <h2 class="nhsuk-heading-m">Check before you start</h2>
+          {{ taskList({
+            idPrefix: "before-you-start",
+            items: [
+              {
+                title: {
+                  text: "Check eligibility"
+                },
+                href: "#",
+                status: {
+                  text: "Completed",
+                  classes: "nhsuk-task-list__status--completed"
+                }
+              },
+              {
+                title: {
+                  text: "Read declaration"
+                },
+                href: "#",
+                status: {
+                  tag: {
+                    text: "Incomplete",
+                    classes: "nhsuk-tag--blue"
+                  }
+                }
+              }
+            ]
+          }) }}
+
+          <h2 class="nhsuk-heading-m nhsuk-u-margin-top-3">Prepare application</h2>
+
+          {{ taskList({
+            idPrefix: "your-health",
+            items: [
+              {
+                title: {
+                  text: "Exercise"
+                },
+                href: "#",
+                status: {
+                  text: "Completed",
+                  classes: "nhsuk-task-list__status--completed"
+                }
+              },
+              {
+                title: {
+                  text: "Personal health"
+                },
+                href: "#",
+                status: {
+                  text: "Completed",
+                  classes: "nhsuk-task-list__status--completed"
+                }
+              },
+              {
+                title: {
+                  text: "Family health history"
+                },
+                hint: {
+                  text: "Details of your parents and siblings"
+                },
+                href: "#",
+                status: {
+                  tag: {
+                    text: "Incomplete",
+                    classes: "nhsuk-tag--blue"
+                  }
+                }
+              },
+              {
+                title: {
+                  text: "Smoking history"
+                },
+                href: "#",
+                status: {
+                  tag: {
+                    text: "Incomplete",
+                    classes: "nhsuk-tag--blue"
+                  }
+                }
+              },
+              {
+                title: {
+                  text: "Blood test"
+                },
+                status: {
+                  text: "Cannot start yet",
+                  classes: "nhsuk-task-list__status--cannot-start-yet"
+                }
+              }
+            ]
+          }) }}
+
+          {{ button({
+            "text": "Continue"
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -122,6 +122,7 @@
     <li><a href="../components/tabs/index.html">Tabs</a> <strong class="nhsuk-tag nhsuk-tag--yellow">Experimental</strong></li>
     <li><a href="../components/tag/index.html">Tag</a></li>
     <li><a href="../components/task-list/index.html">Task list</a></li>
+    <li><a href="../components/task-list/multiple-sections.html">Task list with multiple sections</a></li>
     <li><a href="../components/textarea/index.html">Textarea</a></li>
     <li><a href="../components/textarea/autocomplete.html">Textarea with autocomplete attribute</a></li>
     <li><a href="../components/textarea/error.html">Textarea with error message</a></li>

diff --git a/packages/components/task-list/_task-list.scss b/packages/components/task-list/_task-list.scss
@@ -5,12 +5,13 @@
  */
 
 // NHS pages have a grey background, so we need a slightly daker colour for the hover
-$nhsuk-task-list-hover-color: darken($color_nhsuk-grey-5, 5%);
+// This produces 1.1:1 contrast, the same as GOV.UK’s
+$nhsuk-task-list-hover-color: darken($color_nhsuk-grey-5, 6%);
 
 .nhsuk-task-list {
   @include nhsuk-font($size: 19);
   margin-top: 0;
-  @include nhsuk-responsive-margin(6, "bottom");
+  @include nhsuk-responsive-margin(5, "bottom");
   padding: 0;
   list-style-type: none;
 }
@@ -55,20 +56,16 @@ $nhsuk-task-list-hover-color: darken($color_nhsuk-grey-5, 5%);
   color: $nhsuk-text-color;
 }
 
-// .nhsuk-task-list__status--completed, .nhsuk-task-list__status--cannot-start-yet {
-//   @include nhsuk-font($size: 16, $weight: bold, $line-height: 1);
-//   // background-color: shade($color_nhsuk-blue, 10%);
-//   // border: 1px solid shade($color_nhsuk-blue, 10%);
-//   // color: $color_nhsuk-white;
-//   // display: inline-block;
-//   outline: 2px solid transparent;
-//   outline-offset: -2px;
-//   // padding-bottom: nhsuk-spacing(1);
-//   padding-left: nhsuk-spacing(2);
-//   // padding-right: nhsuk-spacing(2);
-//   padding-top: nhsuk-spacing(1);
-//   text-decoration: none;
-// }
+// This replicates some of the styling and spacing of tags so that these non-tag
+// statuses don’t look out of place with them. Longer term we may want to look to
+// adjusting the tag styles to be closer to body text.
+.nhsuk-task-list__status--completed, .nhsuk-task-list__status--cannot-start-yet {
+  @include nhsuk-font($size: 16, $weight: regular, $line-height: 1);
+  padding-bottom: nhsuk-spacing(1);
+  padding-left: nhsuk-spacing(2);
+  padding-top: calc(nhsuk-spacing(1) + 2px); // to match the spacing on tags
+  text-decoration: none;
+}
 
 .nhsuk-task-list__status--cannot-start-yet {
   color: $nhsuk-secondary-text-color;