Chip list updates (#53)

* Fix and tweak chips and chip lists * Lint * Lint * Update card fixtures
nationalarchives · Nov 20, 2023 · 989869f · 989869f
1 parent db292d4
commit 989869f
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 99 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,15 +9,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- High contrast support for chip lists with icons
 - Allow custom cookie path to be passed to cookie banner
 
 ### Changed
 
+- Card meta information changed to chip list
 - Improvements to high contrast modes
 
 ### Deprecated
 ### Removed
+
+- Removed generic `accent` CSS variable
+
 ### Fixed
+
+- Multiple line spacing for chip lists fixed
+
 ### Security
 
 ## [0.1.25-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.24-prerelease...v0.1.25-prerelease) - 2023-11-16

diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
@@ -61,8 +61,8 @@
   }
 
   &__meta {
-    margin: 0;
-    padding: 0;
+    // margin: 0;
+    // padding: 0;
 
     display: flex;
     flex-wrap: wrap;
@@ -72,19 +72,19 @@
 
     list-style: none;
 
-    &-item {
-      display: flex;
-      align-items: center;
+    // &-item {
+    //   display: flex;
+    //   align-items: center;
 
-      @include colour.colour-font("font-dark");
-      @include typography.detail-font-small;
+    //   @include colour.colour-font("font-dark");
+    //   @include typography.detail-font-small;
 
-      .fa-solid {
-        margin-right: 0.75rem;
+    //   .fa-solid {
+    //     margin-right: 0.75rem;
 
-        @include colour.colour-font("icon-light");
-      }
-    }
+    //     @include colour.colour-font("icon-light");
+    //   }
+    // }
 
     + p {
       margin-top: 1rem;
@@ -201,23 +201,6 @@
   }
 
   @include colour.on-high-contrast {
-    &__meta {
-      &-item {
-        padding-right: 0.5rem;
-
-        @include colour.colour-border("keyline-dark", 1px, solid);
-
-        .fa-solid {
-          margin-right: 0.5rem;
-          padding: 0.5rem;
-
-          @include colour.colour-font("contrast-font-base");
-
-          @include colour.colour-background("contrast-background");
-
-          @include colour.colour-border("keyline-dark", 1px, solid, right);
-        }
-      }
-    }
+    @include colour.colour-border("keyline-dark", 1px);
   }
 }
diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
@@ -75,7 +75,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta\"><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-fw fa-calendar\"></i>24th September 2023</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-fw fa-ticket\"></i>From £16</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-fw fa-location-dot\"></i>Online</li></ul><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\"></i>Online</div></li></ul><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {

diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
@@ -59,13 +59,15 @@
   {%- endif %}
     <div class="tna-card__body">
     {%- if params.meta %}
-      <ul class="tna-card__meta">
+      <ul class="tna-card__meta tna-chip-list">
         {%- for item in params.meta %}
-        <li class="tna-card__meta-item">
-          {%- if item.icon %}
-          <i class="fa-solid fa-fw fa-{{ item.icon }}"></i>
-          {%- endif %}
-          {{ item.text }}
+        <li class="tna-chip-list__item">
+          <div class="tna-chip tna-chip--plain">
+            {%- if item.icon %}
+            <i class="fa-solid fa-fw fa-{{ item.icon }}"></i>
+            {%- endif %}
+            {{ item.text }}
+          </div>
         </li>
         {%- endfor %}
       </ul>

diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -32,7 +32,7 @@
 
 @mixin accent-css-vars($colour) {
   @if $colour == "yellow" {
-    --accent: #{brand-colour("yellow")} !important;
+    // --accent: #{brand-colour("yellow")} !important;
     --accent-background: #{brand-colour("yellow")} !important;
     --accent-background-light: #{brand-colour("cream")} !important;
     --accent-font-base: #{brand-colour("black")} !important;
@@ -56,22 +56,22 @@
     @if $colour != "black" {
       --button-accent-text: #{brand-colour("white")} !important;
       @if $colour == "pink" {
-        --accent: #{brand-colour("pink")} !important;
+        // --accent: #{brand-colour("pink")} !important;
         --accent-background: #{brand-colour("maroon")} !important;
         --accent-background-light: #{brand-colour("pastel-pink")} !important;
         --button-accent-background: #{brand-colour("maroon")} !important;
       } @else if $colour == "orange" {
-        --accent: #{brand-colour("orange")} !important;
+        // --accent: #{brand-colour("orange")} !important;
         --accent-background: #{brand-colour("chestnut")} !important;
         --accent-background-light: #{brand-colour("pastel-orange")} !important;
         --button-accent-background: #{brand-colour("chestnut")} !important;
       } @else if $colour == "green" {
-        --accent: #{brand-colour("green")} !important;
+        // --accent: #{brand-colour("green")} !important;
         --accent-background: #{brand-colour("forest")} !important;
         --accent-background-light: #{brand-colour("pastel-green")} !important;
         --button-accent-background: #{brand-colour("forest")} !important;
       } @else if $colour == "blue" {
-        --accent: #{brand-colour("blue")} !important;
+        // --accent: #{brand-colour("blue")} !important;
         --accent-background: #{brand-colour("navy")} !important;
         --accent-background-light: #{brand-colour("pastel-blue")} !important;
         --button-accent-background: #{brand-colour("navy")} !important;

diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -130,62 +130,6 @@ small {
   );
 }
 
-// .tna-detail[title][data-type] {
-//   padding: 0 0.375rem;
-
-//   display: inline-flex;
-//   flex-flow: row nowrap;
-//   align-items: baseline;
-//   gap: 0.5rem;
-
-//   vertical-align: baseline;
-
-//   background-color: #ccc;
-
-//   &::after {
-//     @include colour.colour-font("font-base");
-//     @include typography.detail-font-small;
-//     vertical-align: baseline;
-
-//     content: attr(data-type) / "";
-//   }
-
-//   &[data-type="misc"] {
-//     background-color: #f28482;
-//   }
-
-//   &[data-type="loc"] {
-//     background-color: #edae49;
-//   }
-
-//   &[data-type="per"] {
-//     background-color: #b5e2fa;
-//   }
-
-//   @at-root #{selector.unify("a", &)} {
-//     @include colour.colour-font("font-base");
-
-//     &::after {
-//       text-decoration: none;
-//     }
-//   }
-// }
-
-.tna-chip-list {
-  @include spacing.space-above;
-  margin-bottom: 0;
-  padding-left: 0;
-
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-
-  list-style: none;
-
-  &__item {
-  }
-}
-
 %chip {
   max-width: max-content;
   padding: 0.125em 0.25rem;
@@ -237,6 +181,65 @@ small {
   }
 }
 
+.tna-chip-list {
+  @include spacing.space-above;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+
+  list-style: none;
+
+  &__item {
+    display: flex;
+    align-items: center;
+
+    .tna-chip {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .fa-solid,
+    .fa-brand {
+      @include colour.colour-font("icon-light");
+    }
+
+    @include colour.on-high-contrast {
+      @include colour.colour-border("keyline-dark", 1px, solid);
+
+      .fa-solid,
+      .fa-brand {
+        padding: 0.375rem 0.25rem;
+
+        @include colour.colour-font("contrast-font-base");
+
+        @include colour.colour-background("contrast-background");
+
+        @include colour.colour-border("keyline-dark", 1px, solid, right);
+      }
+
+      .tna-chip {
+        &:has(.fa-solid, .fa-brand) {
+          padding-left: 0;
+
+          .fa-solid,
+          .fa-brand {
+            margin-right: 0.5rem;
+          }
+        }
+      }
+    }
+  }
+
+  &--accent {
+    .fa-solid,
+    .fa-brand {
+      @include colour.colour-font("accent-background");
+    }
+  }
+}
+
 %heading {
   @include colour.colour-font("font-dark");
 

diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss
@@ -77,7 +77,7 @@ $colour-palette-default: (
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
   "contrast-button-hover-background": brand-colour("black"),
-  "accent": map.get($colour-palette-brand, "light-grey"),
+  // "accent": map.get($colour-palette-brand, "light-grey"),
   "accent-background": #111,
   "accent-background-light": map.get($colour-palette-brand, "light-grey"),
   "accent-font-base": brand-colour("white"),