Allow accent colours on blocks, allow card label colour to be changed (…

…#113) * Allow accent colours on blocks, allow card label colour to be changed * Fix checkbox and radios active states * Transition focus outline
nationalarchives · Apr 3, 2024 · e97c2d5 · e97c2d5
1 parent 96f6eec
commit e97c2d5
Show file tree

Hide file tree

Showing 13 changed files with 212 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,7 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- "Thick" and button border widths are customisable
+- "Thick" and button border widths are both customisable
+- The colour of a card label can be changed
+- Accent colours can be set on blocks with `tna-accent-pink`, `tna-accent-orange`, `tna-accent-yellow`, `tna-accent-blue` and `tna-accent-green`
 
 ### Changed
 
@@ -29,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fixed column margin removal classes
 - Added missing IDs to some form elements so they can be linked top from the error summary
+- Active states of checkboxes and radios fixed
 
 ### Security
 

diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
@@ -17,6 +17,10 @@ const argTypes = {
   imageType: { control: "text" },
   imageSources: { control: "object" },
   label: { control: "text" },
+  labelColour: {
+    control: "inline-radio",
+    options: ["accent", "black", "pink", "orange", "yellow", "green", "blue"],
+  },
   meta: { control: "object" },
   body: { control: "text" },
   text: { control: "text" },
@@ -60,6 +64,7 @@ const Template = ({
   imageType,
   imageSources,
   label,
+  labelColour,
   meta,
   body,
   text,
@@ -87,6 +92,7 @@ const Template = ({
       imageType,
       imageSources,
       label,
+      labelColour,
       meta,
       body,
       text,
@@ -146,6 +152,7 @@ Meta.args = {
   imageWidth: 499,
   imageHeight: 333,
   label: "New",
+  labelColour: "green",
   meta: [
     { text: "24th September 2023", icon: "calendar" },
     { text: "From £16", icon: "ticket" },

diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
@@ -197,10 +197,29 @@
       "options": {
         "title": "Card title",
         "headingLevel": 3,
+        "imageSrc": "https://loremflickr.com/640/360",
+        "imageAlt": "A placeholder image",
+        "imageWidth": 640,
+        "imageHeight": 360,
         "label": "New",
         "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\"><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__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture><div class=\"tna-chip tna-card__image-label\">New</div></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
+    },
+    {
+      "name": "with a coloured label",
+      "options": {
+        "title": "Card title",
+        "headingLevel": 3,
+        "imageSrc": "https://loremflickr.com/640/360",
+        "imageAlt": "A placeholder image",
+        "imageWidth": 640,
+        "imageHeight": 360,
+        "label": "New",
+        "labelColour": "green",
+        "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__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture><div class=\"tna-chip tna-chip--green tna-card__image-label\">New</div></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
     {
       "name": "with a contrast style",

diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json
@@ -114,7 +114,13 @@
     "name": "label",
     "type": "string",
     "required": false,
-    "description": "A label which will appear over the top left of the card's image. If there is no imagem, the label is not displayed."
+    "description": "A label which will appear over the top left of the card's image. If there is no image, the label is not displayed."
+  },
+  {
+    "name": "labelColour",
+    "type": "string",
+    "required": false,
+    "description": "The colour to use for the label. Can be set to `black`, `pink`, `orange`, `yellow`, `green` or `blue`. If not set, the default is the current accent colour."
   },
   {
     "name": "meta",

diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
@@ -49,7 +49,7 @@
         <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
       </picture>
       {%- if params.label %}
-      <div class="tna-chip tna-card__image-label">
+      <div class="tna-chip{% if params.labelColour %} tna-chip--{{ params.labelColour }}{% endif %} tna-card__image-label">
         {{ params.label }}
       </div>
       {%- endif %}

diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss
@@ -122,6 +122,13 @@
     }
   }
 
+  &__item-label:active {
+    &::before {
+      @include a11y.focus-outline;
+      @include a11y.active-outline;
+    }
+  }
+
   input:focus + &__item-label {
     &::before {
       @include a11y.focus-outline;

diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
@@ -53,7 +53,7 @@
     @include colour.colour-border("keyline", 1px, solid, bottom);
   }
 
-  @include media.on-mobile {
+  @include media.on-tiny {
     &__image-wrapper {
       padding: 0;
     }

diff --git a/src/nationalarchives/components/radios/radios.scss b/src/nationalarchives/components/radios/radios.scss
@@ -113,6 +113,13 @@
     }
   }
 
+  &__item-label:active {
+    &::before {
+      @include a11y.focus-outline;
+      @include a11y.active-outline;
+    }
+  }
+
   input:focus + &__item-label {
     &::before {
       @include a11y.focus-outline;

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js
@@ -21,12 +21,12 @@ const Template = () => {
 
   const accents = [
     "",
-    // "tna-template--black-accent",
-    "tna-template--yellow-accent",
-    "tna-template--pink-accent",
-    "tna-template--orange-accent",
-    "tna-template--green-accent",
-    "tna-template--blue-accent",
+    "tna-accent-black",
+    "tna-accent-yellow",
+    "tna-accent-pink",
+    "tna-accent-orange",
+    "tna-accent-green",
+    "tna-accent-blue",
   ];
 
   const blocks = [
@@ -63,8 +63,7 @@ const Template = () => {
         .replace(/tna-template--/g, "")
         .replace(/-theme/g, "")}</strong></p>
       <p>Accent: <strong>${
-        accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
-        "[none]"
+        accent.replace(/tna-accent-/g, "") || "[none]"
       }</strong></p>
     </div>
     ${blocks.reduce(

diff --git a/src/nationalarchives/tools/_a11y.scss b/src/nationalarchives/tools/_a11y.scss
@@ -8,6 +8,10 @@
     solid
   );
   outline-offset: a11y.$focus-outline-offset;
+
+  transition:
+    outline 100ms,
+    outline-offset 100ms;
 }
 
 @mixin active-outline {

diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -353,6 +353,93 @@
   @extend %accent-light;
 }
 
+%yellow-accent {
+  --accent-background: #{colour.brand-colour("yellow")} !important;
+  --accent-background-light: #{colour.brand-colour("cream")} !important;
+  --accent-font-base: #{colour.brand-colour("black")} !important;
+  --accent-font-dark: #{colour.brand-colour("black")} !important;
+  --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
+  --accent-icon-light: #{colour.brand-colour("black", 0.45)} !important;
+  --accent-link: #{colour.brand-colour("black")} !important;
+  --accent-link-visited: #{colour.brand-colour("black")} !important;
+  --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
+  --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
+  --button-accent-text: #{colour.brand-colour("black")} !important;
+  --button-accent-background: #{colour.brand-colour("yellow")} !important;
+}
+
+@mixin yellow-accent {
+  @extend %yellow-accent;
+}
+
+%accent-lighter-text {
+  --accent-font-base: #{colour.brand-colour("white")} !important;
+  --accent-font-dark: #{colour.brand-colour("white")} !important;
+  --accent-font-light: #{colour.brand-colour("white", 0.7)} !important;
+  --accent-icon-light: #{colour.brand-colour("white", 0.45)} !important;
+  --accent-link: #{colour.brand-colour("white")} !important;
+  --accent-link-visited: #{colour.brand-colour("white")} !important;
+  --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
+  --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
+  --button-accent-text: #{colour.brand-colour("white")} !important;
+}
+
+%black-accent {
+  --accent-background: #{colour.brand-colour("black")} !important;
+  --accent-background-light: #{colour.brand-colour("light-grey")} !important;
+  --button-accent-text: #{colour.brand-colour("black")} !important;
+  --button-accent-background: #{colour.brand-colour("grey")} !important;
+}
+
+@mixin black-accent {
+  @extend %black-accent;
+  @extend %accent-lighter-text;
+}
+
+%pink-accent {
+  --accent-background: #{colour.brand-colour("maroon")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
+  --button-accent-background: #{colour.brand-colour("maroon")} !important;
+}
+
+@mixin pink-accent {
+  @extend %pink-accent;
+  @extend %accent-lighter-text;
+}
+
+%orange-accent {
+  --accent-background: #{colour.brand-colour("chestnut")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
+  --button-accent-background: #{colour.brand-colour("chestnut")} !important;
+}
+
+@mixin orange-accent {
+  @extend %orange-accent;
+  @extend %accent-lighter-text;
+}
+
+%green-accent {
+  --accent-background: #{colour.brand-colour("forest")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
+  --button-accent-background: #{colour.brand-colour("forest")} !important;
+}
+
+@mixin green-accent {
+  @extend %green-accent;
+  @extend %accent-lighter-text;
+}
+
+%blue-accent {
+  --accent-background: #{colour.brand-colour("navy")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
+  --button-accent-background: #{colour.brand-colour("navy")} !important;
+}
+
+@mixin blue-accent {
+  @extend %blue-accent;
+  @extend %accent-lighter-text;
+}
+
 @mixin on-high-contrast {
   .tna-template--high-contrast-theme & {
     @content;

diff --git a/src/nationalarchives/utilities/_colour.scss b/src/nationalarchives/utilities/_colour.scss
@@ -56,49 +56,28 @@
   //   }
   // }
 
-  &--yellow-accent {
-    --accent-background: #{colour.brand-colour("yellow")} !important;
-    --accent-background-light: #{colour.brand-colour("cream")} !important;
-    --button-accent-background: #{colour.brand-colour("yellow")} !important;
-  }
-
-  &--pink-accent,
-  &--orange-accent,
-  &--green-accent,
-  &--blue-accent {
-    --accent-font-base: #{colour.brand-colour("white")} !important;
-    --accent-font-dark: #{colour.brand-colour("white")} !important;
-    --accent-font-light: #{colour.brand-colour("white", 0.7)} !important;
-    --accent-icon-light: #{colour.brand-colour("white", 0.45)} !important;
-    --accent-link: #{colour.brand-colour("white")} !important;
-    --accent-link-visited: #{colour.brand-colour("white")} !important;
-    --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
-    --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
-    --button-accent-text: #{colour.brand-colour("white")} !important;
+  &--black--accent {
+    @include colour.black-accent;
   }
 
   &--pink-accent {
-    --accent-background: #{colour.brand-colour("maroon")} !important;
-    --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
-    --button-accent-background: #{colour.brand-colour("maroon")} !important;
+    @include colour.pink-accent;
   }
 
   &--orange-accent {
-    --accent-background: #{colour.brand-colour("chestnut")} !important;
-    --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
-    --button-accent-background: #{colour.brand-colour("chestnut")} !important;
+    @include colour.orange-accent;
+  }
+
+  &--yellow-accent {
+    @include colour.yellow-accent;
   }
 
   &--green-accent {
-    --accent-background: #{colour.brand-colour("forest")} !important;
-    --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
-    --button-accent-background: #{colour.brand-colour("forest")} !important;
+    @include colour.green-accent;
   }
 
   &--blue-accent {
-    --accent-background: #{colour.brand-colour("navy")} !important;
-    --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
-    --button-accent-background: #{colour.brand-colour("navy")} !important;
+    @include colour.blue-accent;
   }
 }
 
@@ -129,3 +108,29 @@
     @include colour.colour-border("keyline-dark", 1px);
   }
 }
+
+.tna-accent {
+  &-black {
+    @include colour.black-accent;
+  }
+
+  &-pink {
+    @include colour.pink-accent;
+  }
+
+  &-orange {
+    @include colour.orange-accent;
+  }
+
+  &-yellow {
+    @include colour.yellow-accent;
+  }
+
+  &-green {
+    @include colour.green-accent;
+  }
+
+  &-blue {
+    @include colour.blue-accent;
+  }
+}