Split hero component option (#117)

* Revert hero fields to pre-0.1.51, add more fixtures, update docs

* Add split option to hero components

* Improve nested lists

* Centre align split hero content

* Lint

* Only push to Chromatic when  changing relevant files

* Use detail font for date search component

* Fix broken story

* Improve typeface definitions and includes

* Fix broken story

.github/workflows/pull-request.yml

@@ -29,10 +29,6 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: storybook
           exitZeroOnChanges: true
-          # onlyChanged: true
-          # externals: |
-          #   - ".storybook/**"
-          #   - "src/nationalarchives/variables/**"
-          #   - "src/nationalarchives/tools/**"
-          #   - "src/nationalarchives/utilities/**"
-          #   - "src/nationalarchives/lib/**"
+          onlyChanged: true
+          externals: |
+            - (.storybook|src)/**

CHANGELOG.md

@@ -10,12 +10,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### 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
+- Hero components have a new split layout option
 
 ### Changed
+
+- Removed single `content` property in hero components in favour of separate fields (i.e. `title`, `text`/`body`)
+- Nested unordered lists use the same marker
+- The Cookie library is now a singleton
+- Improved typeface definitions and includes
+
 ### Deprecated
 ### Removed
 ### Fixed
+
+- Date search component text updated to use the defined detail font
+
 ### Security
 
 ## [0.1.52](https://github.com/nationalarchives/tna-frontend/compare/v0.1.51...v0.1.52) - 2024-04-04

src/nationalarchives/components/button/button-group.stories.js

@@ -105,14 +105,6 @@ Group.args = {
   ],
 };
 
-const GroupOfSmallTemplate = ({ buttons }) =>
-  `<div class="tna-button-group">
-    ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}`, small: true })).join("")}
-</div>`;
-
-export const GroupOfSmall = GroupOfSmallTemplate.bind({});
-GroupOfSmall.args = Group.args;
-
 const SmallGroupTemplate = ({ buttons }) =>
   `<div class="tna-button-group tna-button-group--small">
     ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}` })).join("")}

src/nationalarchives/components/button/fixtures.json

@@ -27,6 +27,82 @@
       },
       "html": "<a href=\"#\" class=\"tna-button tna-button--accent\">Log in</a>"
     },
+    {
+      "name": "with icon",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "icon": "heart"
+      },
+      "html": "<a href=\"#\" class=\"tna-button\"><i class=\"fa-solid fa-heart\" aria-hidden=\"true\"></i>Log in</a>"
+    },
+    {
+      "name": "with right aligned icon",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "icon": "heart",
+        "rightAlignIcon": true
+      },
+      "html": "<a href=\"#\" class=\"tna-button tna-button--icon-right\"><i class=\"fa-solid fa-heart\" aria-hidden=\"true\"></i>Log in</a>"
+    },
+    {
+      "name": "icon only",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "icon": "heart",
+        "iconOnly": true
+      },
+      "html": "<a href=\"#\" class=\"tna-button tna-button--icon-only\"><i class=\"fa-solid fa-heart\" aria-hidden=\"true\"></i>Log in</a>"
+    },
+    {
+      "name": "icon only on mobile",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "icon": "heart",
+        "iconOnlyOnMobile": true
+      },
+      "html": "<a href=\"#\" class=\"tna-button tna-button--icon-only-mobile\"><i class=\"fa-solid fa-heart\" aria-hidden=\"true\"></i>Log in</a>"
+    },
+    {
+      "name": "small",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "small": true
+      },
+      "html": "<a href=\"#\" class=\"tna-button tna-button--small\">Log in</a>"
+    },
+    {
+      "name": "plain",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "plain": true
+      },
+      "html": "<a href=\"#\" class=\"tna-button tna-button--plain\">Log in</a>"
+    },
+    {
+      "name": "button element",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "buttonElement": true
+      },
+      "html": "<button class=\"tna-button\" type=\"button\">Log in</button>"
+    },
+    {
+      "name": "button element with type",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "buttonElement": true,
+        "buttonType": "submit"
+      },
+      "html": "<button class=\"tna-button\" type=\"submit\">Log in</button>"
+    },
     {
       "name": "with classes",
       "options": {

src/nationalarchives/components/card/macro-options.json

@@ -22,7 +22,7 @@
     "type": "string",
     "required": false,
     "default": "m",
-    "description": "The physical size of the card title."
+    "description": "The physical size of the card title (`xl`, `l`, `m` or `s`)."
   },
   {
     "name": "href",

src/nationalarchives/components/cookie-banner/cookie-banner.stories.js

@@ -72,7 +72,6 @@ Accept.args = {
   serviceName: "My service",
   cookiesUrl: "#",
   allowInsecure: true,
-  style: "contrast",
   classes: "tna-cookie-banner--demo",
 };
 Accept.play = async ({ canvasElement }) => {
@@ -115,7 +114,6 @@ export const Reject = Template.bind({});
 Reject.args = {
   serviceName: "My service",
   cookiesUrl: "#",
-  style: "contrast",
   classes: "tna-cookie-banner--demo",
 };
 Reject.play = async ({ canvasElement }) => {
@@ -153,7 +151,6 @@ CustomPolicies.args = {
   serviceName: "My service",
   cookiesUrl: "#",
   policies: "custom",
-  style: "contrast",
   classes: "tna-cookie-banner--demo",
 };
 CustomPolicies.parameters = {
@@ -192,7 +189,6 @@ Existing.args = {
   serviceName: "My service",
   cookiesUrl: "#",
   allowInsecure: true,
-  style: "contrast",
   classes: "tna-cookie-banner--demo",
 };
 Existing.decorators = [

src/nationalarchives/components/date-search/date-search.scss

@@ -1,6 +1,7 @@
 @use "../../variables/forms";
 @use "../../tools/colour";
 @use "../../tools/spacing";
+@use "../../tools/typography";
 
 .tna-date-search {
   max-width: 100%;
@@ -11,6 +12,7 @@
 
   @include colour.light;
   @include colour.colour-font("input-foreground");
+  @include typography.detail-font;
   font-size: inherit;
   line-height: 2rem;
 

src/nationalarchives/components/footer/analytics.js

@@ -90,6 +90,14 @@ export default [
           data_link: valueGetters.text,
         },
       },
+      {
+        eventName: "theme.change",
+        targetElement: ".tna-footer__theme-selector-button",
+        on: "click",
+        data: {
+          value: valueGetters.value,
+        },
+      },
     ],
   },
 ];