Fix and tweak chips and chip lists

nationalarchives · Nov 20, 2023 · 34810b1 · 34810b1
1 parent 61310d9
commit 34810b1
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,10 +8,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.25-prerelease...HEAD)
 
 ### Added
+
+- High contrast support for chip lists with icons
+
 ### Changed
+
+- Card meta information changed to chip list
+
 ### 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;
@@ -200,24 +200,5 @@
 
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline-dark", 1px);
-
-    &__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);
-        }
-      }
-    }
   }
 }
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
@@ -173,16 +173,65 @@ small {
 
 .tna-chip-list {
   @include spacing.space-above;
-  margin-bottom: 0;
-  padding-left: 0;
+  // margin-bottom: 0;
+  // padding-left: 0;
 
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  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);
+
+      .tna-chip {
+      // display: flex;
+      // align-items: center;
+
+      &:has(.fa-solid, .fa-brand) {
+        padding-left: 0;
+
+      .fa-solid,
+      .fa-brand {
+        margin-right: 0.5rem;
+      }
+      }
+      }
+
+      .fa-solid,
+      .fa-brand {
+        padding: .375rem .25rem;
+
+        @include colour.colour-font("contrast-font-base");
+
+        @include colour.colour-background("contrast-background");
+
+        @include colour.colour-border("keyline-dark", 1px, solid, right);
+      }
+    }
+  }
+
+  &--accent {
+    .fa-solid,
+    .fa-brand {
+      @include colour.colour-font("accent-background");
+    }
   }
 }
 

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"),