Merge pull request #3951 from alphagov/task-list-tests

Additional tests for task list Nunjucks macro, allow attributes on tags and tidy up
alphagov · Jul 13, 2023 · 087d680 · 087d680
2 parents 88fea75 + f92aa5b
commit 087d680
Show file tree

Hide file tree

Showing 4 changed files with 300 additions and 66 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/_index.scss b/packages/govuk-frontend/src/govuk/components/task-list/_index.scss
@@ -1,3 +1,5 @@
+@import "../tag/index";
+
 @include govuk-exports("govuk/component/task-list") {
   $govuk-task-list-hover-colour: govuk-colour("light-grey");
 

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -41,21 +41,9 @@ params:
         params:
           - name: tag
             type: object
+            isComponent: true
             required: false
-            description: Object containing the options for a tag that acts as the status for the task.
-            params:
-              - name: text
-                type: string
-                required: true
-                description: Text to use within the tag. If `html` is provided, the `text` argument will be ignored.
-              - name: html
-                type: string
-                required: true
-                description: HTML to use within the tag. If `html` is provided, the `text` argument will be ignored.
-              - name: classes
-                type: string
-                required: false
-                description: Classes to add to the tag.
+            description: Options for the tag component.
           - name: text
             required: false
             type: string
@@ -92,14 +80,12 @@ params:
 examples:
   - name: default
     data:
-      idPrefix: 'task-list-example'
       items:
         - title:
             text: Company Directors
           href: '#'
           status:
             text: Completed
-            classes: govuk-tag--black
 
         - title:
             text: Registered company details
@@ -119,7 +105,6 @@ examples:
 
   - name: example with 3 states
     data:
-      idPrefix: 'task-list-example'
       items:
         - title:
             text: Company Directors
@@ -150,7 +135,6 @@ examples:
 
   - name: example with hint text and additional states
     data:
-      idPrefix: 'task-list-example'
       items:
         - title:
             text: Company Directors
@@ -187,8 +171,7 @@ examples:
             tag:
               text: Error
               classes: govuk-tag--red
-        - classes: app-task-list__item--no-link
-          title:
+        - title:
             text: Payment
           hint:
             text: It will cost between £15 and £75
@@ -198,7 +181,6 @@ examples:
 
   - name: example with all possible colours
     data:
-      idPrefix: 'task-list-example'
       items:
         - title:
             text: Task A
@@ -281,3 +263,92 @@ examples:
             tag:
               text: Yellow
               classes: govuk-tag--yellow
+
+  # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+  - name: custom classes
+    hidden: true
+    data:
+      classes: custom-class-on-component
+      items:
+        - title:
+            text: A Link
+            classes: custom-class-on-linked-title
+          href: '#'
+          classes: custom-class-on-task
+          status:
+            classes: custom-class-on-status
+            tag:
+              text: Status
+              classes: custom-class-on-tag
+
+        - title:
+            text: Not a link
+            classes: custom-class-on-unlinked-title
+          status:
+            tag:
+              text: Status
+
+  - name: custom attributes
+    hidden: true
+    data:
+      attributes:
+        data-custom-attribute: custom-value
+      items:
+        - title:
+            text: A Link
+          href: '#'
+          status:
+            tag:
+              text: Status
+              attributes:
+                data-tag-attribute: tag-value
+
+  - name: custom id prefix
+    hidden: true
+    data:
+      idPrefix: my-custom-id
+      items:
+        - title:
+            text: A Link
+          hint:
+            text: Hint text
+          href: '#'
+          status:
+            tag:
+              text: Status
+
+  - name: html passed as text
+    hidden: true
+    data:
+      idPrefix: my-custom-id
+      items:
+        - title:
+            text: <strong>Linked Title</strong>
+          hint:
+            text: <strong>Hint</strong>
+          href: '#'
+          status:
+            text: <strong>Status</strong>
+        - title:
+            text: <strong>Unlinked Title</strong>
+          status:
+            tag:
+              text: <strong>Tag</strong>
+
+  - name: html
+    hidden: true
+    data:
+      idPrefix: my-custom-id
+      items:
+        - title:
+            html: <strong>Linked Title</strong>
+          hint:
+            html: <strong>Hint</strong>
+          href: '#'
+          status:
+            html: <strong>Status</strong>
+        - title:
+            html: <strong>Unlinked Title</strong>
+          status:
+            tag:
+              html: <strong>Tag</strong>
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.njk b/packages/govuk-frontend/src/govuk/components/task-list/template.njk
@@ -1,32 +1,26 @@
 {% from "../tag/macro.njk" import govukTag -%}
 
 {% set idPrefix = params.idPrefix if params.idPrefix else "task-list" %}
-<ul class="govuk-task-list {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<ul class="govuk-task-list {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for item in params.items %}
-    {% if item.hint %}
-      {%- set hintId = idPrefix + "-" + loop.index + "-hint" -%}
-    {% endif %}
+    {%- set hintId = idPrefix + "-" + loop.index + "-hint" -%}
     {%- set statusId = idPrefix + "-" + loop.index + "-status" -%}
     <li class="govuk-task-list__item {%- if item.href %} govuk-task-list__item--with-link{% endif %}{%- if item.classes %} {{ item.classes }}{% endif %}">
       <div class="govuk-task-list__task-name-and-hint">
         {% if item.href %}
           <a class="govuk-link govuk-task-list__link {%- if item.title.classes %} {{ item.title.classes }}{% endif %}" href="{{ item.href }}" aria-describedby="{{ hintId + " " if item.hint }}{{ statusId }}">{{ item.title.html | safe if item.title.html else item.title.text }}</a>
         {% else %}
-          <div{% if item.title.classes %} class="{{ item.title.classes }}" {%- endif %}>{{ item.title.html | safe if item.title.html else item.title.text }}</div>
+          <div {%- if item.title.classes %} class="{{ item.title.classes }}"{% endif %}>{{ item.title.html | safe if item.title.html else item.title.text }}</div>
         {% endif %}
         {% if item.hint %}
           <div id="{{ hintId }}" class="govuk-task-list__task_hint">
             {{ item.hint.html | safe if item.hint.html else item.hint.text }}
           </div>
         {% endif %}
       </div>
-      <div class="govuk-task-list__status {{ item.status.classes }}" id="{{ statusId }}">
+      <div class="govuk-task-list__status {%- if item.status.classes %} {{ item.status.classes }}{% endif %}" id="{{ statusId }}">
         {% if item.status.tag %}
-          {{ govukTag({
-            text: item.status.tag.text,
-            html: item.status.tag.html,
-            classes: item.status.tag.classes
-          }) | indent(4) | trim }}
+          {{ govukTag(item.status.tag) | indent(4) | trim }}
         {% else %}
           {{ item.status.html | safe if item.status.html else item.status.text }}
         {% endif %}