Small button styles

.github/workflows/publish-chromatic.yml

@@ -0,0 +1,41 @@
+name: Publish to Chromatic
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '.storybook/**'
+      - 'src/**'
+    tags-ignore:
+      - '**'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: chromatic
+  cancel-in-progress: true
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+      - name: Install dependencies
+        run: npm ci
+      - name: Build Storybook
+        run: npm run build:storybook
+      - uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          storybookBuildDir: storybook
+          exitZeroOnChanges: true
+          autoAcceptChanges: true

.github/workflows/publish-storybook.yml

@@ -1,4 +1,4 @@
-name: Publish Storybook
+name: Publish to GitHub pages
 
 on:
   push:
@@ -50,23 +50,3 @@ jobs:
           path: storybook
       - id: deployment
         uses: actions/deploy-pages@v4
-
-  chromatic:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-      - name: Install dependencies
-        run: npm ci
-      - name: Build Storybook
-        run: npm run build:storybook
-      - uses: chromaui/action@v1
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          storybookBuildDir: storybook
-          exitZeroOnChanges: true
-          autoAcceptChanges: true

.storybook/storybook.scss

@@ -242,6 +242,10 @@
     p:not(:first-child) {
       margin-top: 0.25rem;
     }
+
+    .tna-ul {
+      margin-top: 0.25rem;
+    }
   }
 
   .tna-form__group {

CHANGELOG.md

@@ -8,6 +8,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.52...HEAD)
 
 ### Added
+
+- Footer component can now contain an optional theme selector which requires the component to have JavaScript initialised
+- The Cookie library is now a singleton
+
 ### Changed
 ### Deprecated
 ### Removed

src/nationalarchives/components/button/button.scss

@@ -68,7 +68,7 @@ $button-border-width: 4px !default;
 
   &--small#{&}--plain,
   &-group--small &--plain {
-    @include typography.main-font-weight-bold;
+    // @include typography.main-font-weight-bold;
   }
 
   &--accent {

src/nationalarchives/components/footer/footer.scss

@@ -15,6 +15,10 @@
     .tna-button-group {
       justify-content: flex-end;
     }
+
+    .tna-button {
+      @include typography.main-font-weight-bold;
+    }
   }
 
   &__theme-selector-button {

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

@@ -65,7 +65,10 @@ const Template = ({ theme }) => {
           <h1 class="tna-heading-s">Heading</h1>
           <p>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span> / <i class="fa-solid fa-heart" aria-hidden="true"></i> <i class="fa-solid fa-heart light-icon" aria-hidden="true"></i></p>
           <p><a href="#">Link</a> / <a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
-          <ul class="tna-chip-list">
+          <ul class="tna-ul">
+            <li>Alpha</li>
+          </ul>
+          <ul class="tna-chip-list tna-!--margin-top-xs">
             <li class="tna-chip-list__item">
               <span class="tna-chip">Chip</span>
             </li>
@@ -87,6 +90,7 @@ const Template = ({ theme }) => {
                 },
               ],
               disableAutoFocus: true,
+              classes: "tna-!--margin-top-s",
             },
           })}
           ${TextInput({

src/nationalarchives/utilities/_lists.scss

@@ -15,6 +15,10 @@
   li::marker {
     @include colour.colour-font("accent-background");
     font-weight: 700;
+
+    .tna-background-accent & {
+      @include colour.colour-font("font-dark");
+    }
   }
 
   &--plain {