Add dashed lists (#132)

CHANGELOG.md

@@ -10,8 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Allow `lazyImages` attribute for lazy loading of index grid images
+- Dashed lists open with `.tna-ul--dashed` and `.tna-ol--dashed` replace the markers with dashes
 
 ### Changed
+
+- The transcript button on picture components no longer gets a `tna-picture__toggle-transcript--opened` class when opened
+
 ### Deprecated
 ### Removed
 ### Fixed

src/nationalarchives/components/hero/hero.scss

@@ -232,6 +232,30 @@ $shift-units: 5 !default;
     padding-bottom: spacing.space($padding-units-narrow);
   }
 
+  &--details-cutout &__details {
+    &::before {
+      content: "";
+      @include colour.plain;
+
+      width: 3rem;
+      height: 3rem;
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+
+      border-radius: 0% 0 0% 50%;
+      @include colour.colour-background("background");
+    }
+
+    &[open] {
+      &::before {
+        display: none;
+      }
+    }
+  }
+
   @include media.on-mobile {
     & &__figure {
       min-height: auto;

src/nationalarchives/components/picture/picture.mjs

@@ -42,16 +42,12 @@ export class Picture {
   }
 
   handleToggleTranscript() {
-    const transcriptToggleOpenedClass =
-      "tna-picture__toggle-transcript--opened";
     this.transcriptOpened = !this.transcriptOpened;
     if (this.transcriptOpened) {
-      this.$transcriptToggle.classList.add(transcriptToggleOpenedClass);
       this.$transcriptToggle.setAttribute("aria-expanded", true);
       this.$transcriptToggle.innerText = this.closeLabel;
       this.$transcript.removeAttribute("hidden");
     } else {
-      this.$transcriptToggle.classList.remove(transcriptToggleOpenedClass);
       this.$transcriptToggle.setAttribute("aria-expanded", false);
       this.$transcriptToggle.innerText = this.openLabel;
       this.$transcript.setAttribute("hidden", true);

src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js

@@ -17,20 +17,20 @@ const Template = ({ theme }) => {
 
   const accents = [
     "",
-    "tna-accent-black",
-    "tna-accent-yellow",
     "tna-accent-pink",
     "tna-accent-orange",
+    "tna-accent-yellow",
     "tna-accent-green",
     "tna-accent-blue",
+    "tna-accent-black",
   ];
 
   const blocks = [
     "",
     "tna-background-tint",
-    "tna-background-accent-light",
-    "tna-background-accent",
     "tna-background-contrast",
+    "tna-background-accent",
+    "tna-background-accent-light",
   ];
 
   return `<div class="tna-colour-contrast-demo">

src/nationalarchives/stories/utilities/lists/lists.stories.js

@@ -9,8 +9,8 @@ export default {
   argTypes,
 };
 
-const UnorderedListTemplate = ({ items, plain, classes }) =>
-  `<ul class="tna-ul${plain ? " tna-ul--plain" : ""} ${classes}">${items.reduce(
+const UnorderedListTemplate = ({ items, style, classes = "" }) =>
+  `<ul class="tna-ul${style ? ` tna-ul--${style}` : ""} ${classes}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
     "",
   )}</ul>`;
@@ -27,11 +27,19 @@ UnorderedListPlain.parameters = {
 };
 UnorderedListPlain.args = {
   items: ["Alpha", "Beta", "Gamma"],
-  plain: true,
+  style: "plain",
+};
+export const UnorderedListDashed = UnorderedListTemplate.bind({});
+UnorderedListDashed.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+UnorderedListDashed.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+  style: "dashed",
 };
 
-const OrderedListTemplate = ({ items, plain, classes }) =>
-  `<ol class="tna-ol${plain ? " tna-ol--plain" : ""} ${classes}">${items.reduce(
+const OrderedListTemplate = ({ items, style, classes = "" }) =>
+  `<ol class="tna-ol${style ? ` tna-ol--${style}` : ""} ${classes}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
     "",
   )}</ol>`;
@@ -48,10 +56,26 @@ OrderedListPlain.parameters = {
 };
 OrderedListPlain.args = {
   items: ["Alpha", "Beta", "Gamma"],
-  plain: true,
+  style: "plain",
+};
+export const OrderedListDashed = OrderedListTemplate.bind({});
+OrderedListDashed.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+OrderedListDashed.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+  style: "dashed",
+};
+export const OrderedListNested = OrderedListTemplate.bind({});
+OrderedListNested.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+OrderedListNested.args = {
+  items: ["Alpha", "Beta", "Gamma", "Delta"],
+  style: "dashed",
 };
 
-const DescriptionListTemplate = ({ items, plain, classes }) =>
+const DescriptionListTemplate = ({ items, plain, classes = "" }) =>
   `<dl class="tna-dl${plain ? " tna-dl--plain" : ""}${
     items.some((item) => item.icon) ? " tna-dl--icon-padding" : ""
   } ${classes}">${items.reduce(

src/nationalarchives/tools/_colour.scss

@@ -173,6 +173,7 @@
   --button-hover-text: var(--contrast-button-hover-text);
   --button-hover-background: var(--contrast-button-hover-background);
   --accent-list-marker: var(--accent-border);
+  // --accent-list-marker: var(--font-base);
 
   @include colour-background("background");
 
@@ -199,6 +200,7 @@
     --button-hover-text: var(--contrast-button-hover-text);
     --button-hover-background: var(--contrast-button-hover-background);
     --accent-list-marker: var(--accent-border);
+    // --accent-list-marker: var(--font-base);
 
     @include colour-background("background");
 
@@ -359,6 +361,8 @@
   --accent-background-light: #{colour.brand-colour("light-grey")} !important;
   --accent-border: #{colour.brand-colour("black")} !important;
   --accent-list-marker: #{colour.brand-colour("black")} !important;
+  --button-background: #{colour.brand-colour("light-grey")} !important;
+  --button-text: #{colour.brand-colour("black")} !important;
   --button-accent-text: #{colour.brand-colour("black")} !important;
   --button-accent-background: #{colour.brand-colour("grey")} !important;
 }

src/nationalarchives/utilities/_lists.scss

@@ -4,42 +4,43 @@
 @use "../tools/typography";
 @use "../utilities/typography" as typographyUtils;
 
-.tna-ul,
-.tna-ul > li > ul {
+.tna-ul {
   list-style-type: disc;
 }
 
 .tna-ul,
 .tna-ol {
   margin: spacing.space(1) 0 0;
 
-  > li > ul,
-  > li > ol {
+  padding: 0 0 0 spacing.space(2);
+
+  &:first-child {
     margin-top: 0;
   }
 
-  &,
-  & > li > ul,
-  & > li > ol {
-    padding: 0 0 0 spacing.space(2);
+  &--plain {
+    padding-left: 0;
 
-    &--plain {
-      padding-left: 0;
+    list-style: none;
+  }
 
-      &,
-      & > li > ul {
-        list-style: none;
-      }
-    }
+  & > li > & {
+    padding-left: spacing.space(1);
+  }
 
-    > li::marker {
+  > li {
+    &::marker {
       @include colour.colour-font("accent-list-marker");
-      font-weight: 700;
+      @include typography.main-font-weight-bold;
     }
   }
 
-  &:first-child {
-    margin-top: 0;
+  &--dashed {
+    > li::marker {
+      content: "—  ";
+      @include colour.colour-font("font-light");
+      @include typography.main-font-weight;
+    }
   }
 }
 

src/nationalarchives/variables/_colour.scss

@@ -127,8 +127,6 @@ $colour-palette-dark: map.merge(
     "button-hover-text": brand-colour("white"),
     "button-hover-background": brand-colour("black"),
     "contrast-background": #101112,
-    "contrast-link-visited":
-      map.get($colour-palette-default, "contrast-link-visited"),
     "accent-border": brand-colour("white"),
     "accent-list-marker": brand-colour("white", 0.51),
   )