hmrc-frontend 4.9.1 → 5.0.2

package/hmrc/VERSION.txt

@@ -1 +1 @@
-4.9.1
+5.0.2

package/hmrc/components/list-with-actions/_list-with-actions.scss

@@ -4,22 +4,35 @@
 
 .hmrc-list-with-actions {
   @include govuk-font($size: 19);
-}
 
-// Kept for backward compatibility with add-to-a-list
-.hmrc-list-with-actions--short {
   @include govuk-media-query($from: desktop) {
+    .hmrc-summary-list__key {
+      width: 50%;
+    }
+
+    .hmrc-summary-list__actions {
+      width: 50%;
+    }
+
     .hmrc-list-with-actions__name {
-      width: 30%;
+      width: 50%;
     }
   }
 }
 
 // Kept for backward compatibility with add-to-a-list
-.hmrc-list-with-actions--long {
+.hmrc-list-with-actions--short {
   @include govuk-media-query($from: desktop) {
+    .hmrc-summary-list__key {
+      width: 30%;
+    }
+
+    .hmrc-summary-list__actions {
+      width: 70%;
+    }
+
     .hmrc-list-with-actions__name {
-      width: 50%;
+      width: 30%;
     }
   }
 }

package/hmrc/components/list-with-actions/template.njk

@@ -1,33 +1,50 @@
 {%- macro _actionLink(action) %}
   <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-    {% if action.html %}
-      {{ action.html | safe }}
-    {% else %}
-      {%- if action.visuallyHiddenText -%}
-        <span aria-hidden="true">{{ action.text }}</span>
-        <span class="govuk-visually-hidden">{{ action.visuallyHiddenText }}</span>
-      {% else %}
-        {{ action.text }}
-      {% endif -%}
-    {% endif %}
+  {%- if action.html -%}
+    {{ action.html | safe }}
+  {%- else -%}
+    {%- if action.visuallyHiddenText -%}
+      <span aria-hidden="true">{{ action.text }}</span>{#- strip spaces -#}
+      <span class="govuk-visually-hidden">{{ action.visuallyHiddenText }}</span>
+    {%- else -%}
+      {{ action.text }}
+    {%- endif -%}
+  {%- endif -%}
   </a>
 {% endmacro -%}
 
-{% if params.items.length > 0 %}
-<dl class="hmrc-list-with-actions {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% for item in params.items %}
-  <div class="hmrc-list-with-actions__item">
-    <dt class="hmrc-list-with-actions__name">
-      {{ item.name.html | safe if item.name.html else item.name.text }}
-    </dt>
-    <div class="hmrc-list-with-actions__actions">
-      {% for action in item.actions %}
-        <dd class="hmrc-list-with-actions__action">
-          {{ _actionLink(action) | indent(6) | trim }}
-        </dd>
-      {% endfor %}
-    </div>
-  </div>
+{# Determine if we need 2 or 3 columns #}
+{% set anyRowHasActions = false %}
+{% for row in params.items %}
+  {% set anyRowHasActions = true if row.actions.length else anyRowHasActions %}
+{% endfor -%}
+
+{% if params.items.length %}
+  <dl class="govuk-summary-list hmrc-list-with-actions {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% for row in params.items %}
+    {% if row %}
+      <div class="govuk-summary-list__row {%- if anyRowHasActions and not (row.actions | length) %} govuk-summary-list__row--no-actions{% endif %} {%- if row.classes %} {{ row.classes }}{% endif %}">
+        <dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
+          {{ row.name.html | safe if row.name.html else row.name.text }}
+        </dt>
+        {% if row.actions.length %}
+          <dd class="govuk-summary-list__actions hmrc-summary-list__actions">
+            {% if row.actions.length == 1 %}
+              {{ _actionLink(row.actions[0]) | indent(12) | trim }}
+            {% else %}
+              <ul class="govuk-summary-list__actions-list">
+                {% for action in row.actions %}
+                  <li class="govuk-summary-list__actions-list-item">
+                    {{ _actionLink(action) | indent(18) | trim }}
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </dd>
+        {% endif %}
+      </div>
+    {% endif %}
   {% endfor %}
-</dl>
-{% endif -%}
+  </dl>
+{% endif %}
+