Move card actions into card body (#163)

nationalarchives · Aug 30, 2024 · 930f2bb · 930f2bb
1 parent 1f31d74
commit 930f2bb
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 33 deletions.
diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
@@ -66,20 +66,19 @@
   &__body {
     order: 3;
 
-    p {
-      margin-top: spacing.space(1);
+    display: flex;
+    flex-direction: column;
 
-      &:first-child {
-        margin-top: 0;
-      }
+    gap: spacing.space(1);
+
+    > * {
+      margin-top: 0;
     }
   }
 
   &__actions {
     display: flex;
     gap: spacing.space(1) spacing.space(2);
-
-    order: 4;
   }
 
   &__action {
@@ -91,8 +90,7 @@
   }
 
   &--padded &__heading,
-  &--padded &__body,
-  &--padded &__actions {
+  &--padded &__body {
     padding-right: spacing.space(1);
     padding-left: spacing.space(1);
   }
@@ -102,11 +100,10 @@
       padding-bottom: 0;
 
       display: grid;
-      grid-template: min-content min-content 1fr / 50% 50%;
+      grid-template: min-content 1fr / 50% 50%;
       grid-template-areas:
         "image header"
-        "image body"
-        "image footer";
+        "image body";
       gap: 0;
 
       > * + * {
@@ -130,8 +127,7 @@
     }
 
     &--horizontal &__heading,
-    &--horizontal &__body,
-    &--horizontal &__actions {
+    &--horizontal &__body {
       padding-right: spacing.space(2);
       padding-left: spacing.space(2);
     }
@@ -152,10 +148,6 @@
     &--horizontal &__body {
       grid-area: body;
     }
-
-    &--horizontal &__actions {
-      grid-area: footer;
-    }
   }
 
   @include colour.on-high-contrast {

diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
@@ -178,7 +178,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></article>"
+      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></article>"
     },
     {
       "name": "with actions with titles",
@@ -194,7 +194,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></article>"
+      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></div></article>"
     },
     {
       "name": "with actions with classes",
@@ -210,7 +210,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action card__test-class\">Card action</a></div></article>"
+      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action card__test-class\">Card action</a></div></div></article>"
     },
     {
       "name": "with actions with attributes",
@@ -228,7 +228,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" data-testattribute=\"foobar\">Card action</a></div></article>"
+      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" data-testattribute=\"foobar\">Card action</a></div></div></article>"
     },
     {
       "name": "with a label",
@@ -345,7 +345,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></article>"
+      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></article>"
     },
     {
       "name": "with a different element",

diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
@@ -64,7 +64,7 @@
     </div>
     {%- endif %}
   {%- endif %}
-  {%- if params.meta or params.text or params.body %}
+  {%- if params.meta or params.text or params.body or params.actions %}
     <div class="tna-card__body">
     {%- if params.meta %}
       <dl class="tna-card__meta tna-dl-chips{{ '' if params.accentMeta else ' tna-dl-chips--plain' }}">
@@ -86,15 +86,15 @@
     {%- else %}
       {{ params.body | safe }}
     {%- endif %}
-    </div>
-  {%- endif %}
-  {%- if params.actions %}
-    <div class="tna-card__actions">
-    {%- for item in params.actions %}
-      <a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-        {{ item.text }}
-      </a>
-    {%- endfor %}
+    {%- if params.actions %}
+      <div class="tna-card__actions">
+      {%- for item in params.actions %}
+        <a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+          {{ item.text }}
+        </a>
+      {%- endfor %}
+      </div>
+    {%- endif %}
     </div>
   {%- endif %}
 </{{ htmlElement }}>