Fix chip colours and icons in chip lists

nationalarchives · Dec 6, 2023 · daa57ab · daa57ab
1 parent 4ca8b2a
commit daa57ab
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 42 deletions.
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -182,7 +182,7 @@
   }
 
   &__block {
-    width: #{math.div(100%, 6)};
+    // width: #{math.div(100%, 6)};
     padding: 1rem;
 
     display: table-cell;
@@ -234,14 +234,14 @@
     }
   }
 
-  .tna-chip {
-    margin: 1rem 0;
+  .tna-chip-list {
+    margin-top: 1rem;
 
-    display: inline-block;
+    flex-wrap: nowrap;
   }
 
   .fa-solid {
-    margin-left: 0.5rem;
+    // margin-left: 0.5rem;
 
     &.light-icon {
       @include colour.colour-font("icon-light", true);

diff --git a/src/nationalarchives/components/button/template.njk b/src/nationalarchives/components/button/template.njk
@@ -18,10 +18,10 @@
   {%- set buttonClasses = buttonClasses.concat('tna-button--icon-right') -%}
 {%- endif -%}
 <{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if params.buttonElement %} type="{{ params.buttonType or 'button' }}"{% endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {%- if params.brandIcon %}
+  {%- if params.brandIcon -%}
   <i class="fa-brands fa-fw fa-{{ params.brandIcon }}" aria-hidden="true"></i>
-  {%- elseif params.icon %}
+  {% elseif params.icon -%}
   <i class="fa-solid fa-fw fa-{{ params.icon }}" aria-hidden="true"></i>
-  {%- endif %}
+  {% endif -%}
   {{ params.text }}
 </{{ 'button' if params.buttonElement else 'a' }}>
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -1395,9 +1395,19 @@ const CombinationsTemplate = () => {
         `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
       <div class="tna-template__body">
         <div class="tna-colour-contrast-demo__example-content ${block}">
-          <p><strong>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span></strong></p>
+          <p><strong>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span></strong> / <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-heart light-icon"></i></p>
           <p><a href="#"><strong>Link</strong></a> / <a href="#" class="tna-colour-contrast-demo__link--visited"><strong>Link (visited)</strong></a></p>
-          <p><span class="tna-chip">Chip</span> <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-heart light-icon"></i></p>
+          <ul class="tna-chip-list">
+            <li class="tna-chip-list__item">
+              <span class="tna-chip">Chip</span>
+            </li>
+            <li class="tna-chip-list__item">
+              <span class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</span>
+            </li>
+            <li class="tna-chip-list__item">
+              <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</span>
+            </li>
+          </ul>
           <div class="tna-button-group">
             ${Button({
               params: {

diff --git a/src/nationalarchives/stories/utilities/lists/lists.stories.js b/src/nationalarchives/stories/utilities/lists/lists.stories.js
@@ -129,3 +129,22 @@ ComplexDescriptionList.args = {
     { title: "Eta", description: ["Lorem ipsum 1", "Lorem ipsum 2"] },
   ],
 };
+
+const ChipListTemplate = ({ items }) =>
+  `<ul class="tna-chip-list">${items.reduce(
+    (list, item) => `${list}<li class="tna-chip-list__item">
+      <span class="tna-chip">
+        ${item.icon ? `<i class="fa-solid fa-${item.icon}"></i>` : ""}
+        ${item.text}
+      </span>
+    </li>`,
+    "",
+  )}</ul>`;
+export const ChipList = ChipListTemplate.bind({});
+ChipList.args = {
+  items: [
+    { text: "Alpha", icon: "heart" },
+    { text: "Beta" },
+    { text: "Gamma" },
+  ],
+};
diff --git a/src/nationalarchives/stories/utilities/typography/typography.mdx b/src/nationalarchives/stories/utilities/typography/typography.mdx
@@ -15,7 +15,8 @@ import * as TypographyStories from './typography.stories';
 ## Heading groups
 
 <Canvas of={HeadingGroupStories.HeadingGroup} />
-<Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
+<Canvas of={HeadingGroupStories.HeadingGroupSingleSentence} />
+<Canvas of={HeadingGroupStories.HeadingGroupPlainSupertitle} />
 
 ## General typography
 

diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -134,21 +134,30 @@ small {
   max-width: max-content;
   padding: 0.125em 0.25rem;
 
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 
   @include colour.colour-font("font-dark");
   @include typography.detail-font-small;
   line-height: 1;
 
-  @include colour.accent;
+  &:not(#{&}--plain) {
+    @include colour.accent;
 
-  @include colour.colour-border("accent-background", 0.125rem);
+    @include colour.colour-border("accent-background", 0.125rem);
+  }
 
   .tna-background-accent &:not(#{&}--plain) {
     @include colour.plain;
 
     @include colour.colour-border("background");
   }
+
+  .fa-solid,
+  .fa-brand {
+    @include colour.colour-font("icon-light");
+  }
 }
 
 .tna-chip {
@@ -162,6 +171,11 @@ small {
     background-color: transparent;
 
     border: none;
+
+    .fa-solid,
+    .fa-brand {
+      color: inherit;
+    }
   }
 
   @at-root #{selector.unify("a", &)} {
@@ -206,42 +220,21 @@ small {
       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:not(.tna-chip--plain) {
+        padding: 0.25rem 0.5rem;
+
+        @include colour.colour-border("keyline-dark");
+      }
 
       .fa-solid,
       .fa-brand {
-        padding: 0.375rem 0.25rem;
+        padding-right: 0.5rem;
 
-        @include colour.colour-font("contrast-font-base");
-
-        @include colour.colour-background("contrast-background");
+        color: inherit;
 
         @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");
     }
   }
 }