@nationalarchives/frontend 0.1.48 → 0.1.50

package/nationalarchives/stories/intro.mdx

@@ -4,8 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 # Welcome
 
-TNA Frontend contains the code you need to start building user interfaces for National Archives platforms and services.
+[TNA Frontend](https://github.com/nationalarchives/tna-frontend) contains the code you need to start building user interfaces for National Archives platforms and services.
 
-This Storybook instance represents the current working branch (`main`) of [TNA Frontend](https://github.com/nationalarchives/tna-frontend). This may contain unreleased styles and code.
+This Storybook instance represents the working branch (`main`) of TNA Frontend. This may contain unreleased styles and code.
 
 To get the latest release, see the [GitHub releases page](https://github.com/nationalarchives/tna-frontend/releases).

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

@@ -31,8 +31,8 @@ const Template = () => {
 
   const blocks = [
     "",
-    "tna-background-tint",
     "tna-background-accent-light",
+    "tna-background-tint",
     "tna-background-accent",
     "tna-background-contrast",
   ];
@@ -72,8 +72,9 @@ const Template = () => {
         `${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> / <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="#"><strong>Link</strong></a> / <a href="#" class="tna-colour-contrast-demo__link--visited"><strong>Link (visited)</strong></a></p>
+          <h6 class="tna-heading-s">Heading</h6>
+          <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">
             <li class="tna-chip-list__item">
               <span class="tna-chip">Chip</span>

package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js

@@ -10,7 +10,6 @@ import Gallery from "../../../components/gallery/template.njk";
 import GlobalHeader from "../../../components/global-header/template.njk";
 import Hero from "../../../components/hero/template.njk";
 import IndexGrid from "../../../components/index-grid/template.njk";
-import Message from "../../../components/message/template.njk";
 import Pagination from "../../../components/pagination/template.njk";
 import PhaseBanner from "../../../components/phase-banner/template.njk";
 import Picture from "../../../components/picture/template.njk";
@@ -20,6 +19,7 @@ import Select from "../../../components/select/template.njk";
 import Tabs from "../../../components/tabs/template.njk";
 import TextInput from "../../../components/text-input/template.njk";
 import Textarea from "../../../components/textarea/template.njk";
+import Warning from "../../../components/warning/template.njk";
 
 const argTypes = {
   theme: {
@@ -114,7 +114,6 @@ const Template = ({ theme, accent }) => {
     ${GlobalHeader({
       params: {
         logo: {
-          strapline: "Colours",
           href: "#/",
         },
         topNavigation: [
@@ -413,7 +412,7 @@ const Template = ({ theme, accent }) => {
               </a>
             </li>
           </ul>
-          ${Message({
+          ${Warning({
             params: {
               message:
                 "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
@@ -426,10 +425,9 @@ const Template = ({ theme, accent }) => {
             params: {
               items: [
                 {
-                  imageSrc:
-                    "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp",
-                  imageWidth: 576,
-                  imageHeight: 591,
+                  imageSrc: "https://picsum.photos/id/237/400/600",
+                  imageWidth: 400,
+                  imageHeight: 600,
                   collection: "TS 11/45/167",
                   title: "Court records relating to Robert Wedderburn's trial",
                   href: "#",
@@ -723,9 +721,9 @@ const Template = ({ theme, accent }) => {
               },
             })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button" role="button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
-              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
         </div>
@@ -807,9 +805,9 @@ const Template = ({ theme, accent }) => {
               },
             })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button" role="button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
-              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
         </div>
@@ -891,9 +889,9 @@ const Template = ({ theme, accent }) => {
               },
             })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button" role="button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
-              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
         </div>
@@ -975,9 +973,9 @@ const Template = ({ theme, accent }) => {
               },
             })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button" role="button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
-              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
         </div>
@@ -1059,9 +1057,9 @@ const Template = ({ theme, accent }) => {
               },
             })}
             <div class="tna-button-group">
-              <a href="#" class="tna-button" role="button">Primary button</a>
-              <a href="#" class="tna-button tna-button--accent" role="button">Accent button</a>
-              <a href="" class="tna-button tna-button--plain" role="button">Plain button</a>
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+              <a href="" class="tna-button tna-button--plain">Plain button</a>
             </div>
           </div>
         </div>
@@ -1283,7 +1281,7 @@ const Template = ({ theme, accent }) => {
                 href: "https://www.nationalarchives.gov.uk/about/press-room/",
               },
               {
-                text: "Jobs and careers",
+                text: "Jobs",
                 href: "https://www.nationalarchives.gov.uk/about/jobs/",
               },
               {

package/nationalarchives/stories/utilities/lists/lists.stories.js

@@ -15,10 +15,16 @@ const UnorderedListTemplate = ({ items, plain, classes }) =>
     "",
   )}</ul>`;
 export const UnorderedList = UnorderedListTemplate.bind({});
+UnorderedList.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 UnorderedList.args = {
   items: ["Alpha", "Beta", "Gamma"],
 };
 export const UnorderedListPlain = UnorderedListTemplate.bind({});
+UnorderedListPlain.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 UnorderedListPlain.args = {
   items: ["Alpha", "Beta", "Gamma"],
   plain: true,
@@ -30,10 +36,16 @@ const OrderedListTemplate = ({ items, plain, classes }) =>
     "",
   )}</ol>`;
 export const OrderedList = OrderedListTemplate.bind({});
+OrderedList.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 OrderedList.args = {
   items: ["Alpha", "Beta", "Gamma"],
 };
 export const OrderedListPlain = OrderedListTemplate.bind({});
+OrderedListPlain.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 OrderedListPlain.args = {
   items: ["Alpha", "Beta", "Gamma"],
   plain: true,
@@ -66,6 +78,9 @@ const DescriptionListTemplate = ({ items, plain, classes }) =>
 </dl>`;
 
 export const DescriptionList = DescriptionListTemplate.bind({});
+DescriptionList.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 DescriptionList.args = {
   items: [
     { title: "Alpha", description: "Lorem ipsum" },
@@ -79,6 +94,9 @@ DescriptionList.args = {
 };
 
 export const PlainDescriptionList = DescriptionListTemplate.bind({});
+PlainDescriptionList.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 PlainDescriptionList.args = {
   items: [
     { title: "Alpha", description: "Lorem ipsum" },
@@ -90,6 +108,9 @@ PlainDescriptionList.args = {
 };
 
 export const DescriptionListWithIcons = DescriptionListTemplate.bind({});
+DescriptionListWithIcons.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 DescriptionListWithIcons.args = {
   items: [
     {
@@ -103,6 +124,9 @@ DescriptionListWithIcons.args = {
 };
 
 export const PlainDescriptionListWithIcons = DescriptionListTemplate.bind({});
+PlainDescriptionListWithIcons.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 PlainDescriptionListWithIcons.args = {
   items: [
     {
@@ -117,6 +141,9 @@ PlainDescriptionListWithIcons.args = {
 };
 
 export const ComplexDescriptionList = DescriptionListTemplate.bind({});
+ComplexDescriptionList.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 ComplexDescriptionList.args = {
   items: [
     { title: "Alpha", description: "Lorem ipsum" },
@@ -146,6 +173,9 @@ const ChipListTemplate = ({ items, plain, classes }) =>
     "",
   )}</ul>`;
 export const ChipList = ChipListTemplate.bind({});
+ChipList.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 ChipList.args = {
   items: [
     { text: "Alpha", icon: "heart" },

package/nationalarchives/stories/utilities/overrides/overrides.stories.js

@@ -21,9 +21,15 @@ const Template = () => {
 };
 
 export const Margin = Template.bind({});
+Margin.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 Margin.args = {};
 
 export const MarginMobile = Template.bind({});
+MarginMobile.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 MarginMobile.parameters = {
   viewport: {
     defaultViewport: "small",

package/nationalarchives/stories/utilities/typography/heading-groups.stories.js

@@ -26,6 +26,9 @@ const HeadingGroupTemplate = ({
 </hgroup>`;
 
 export const HeadingGroup = HeadingGroupTemplate.bind({});
+HeadingGroup.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 HeadingGroup.args = {
   supertitle: "Record revealed",
   title: "The Monteagle Letter",
@@ -52,6 +55,9 @@ const HeadingGroupSingleSentenceTemplate = ({
 
 export const HeadingGroupSingleSentence =
   HeadingGroupSingleSentenceTemplate.bind({});
+HeadingGroupSingleSentence.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 HeadingGroupSingleSentence.args = {
   supertitle: "The story of",
   title: "Alice Hawkins",
@@ -76,6 +82,9 @@ const HeadingGroupPlainSupertitleTemplate = ({
 
 export const HeadingGroupPlainSupertitle =
   HeadingGroupPlainSupertitleTemplate.bind({});
+HeadingGroupPlainSupertitle.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 HeadingGroupPlainSupertitle.args = {
   supertitle: "Record revealed",
   title: "The Monteagle Letter",

package/nationalarchives/stories/utilities/typography/headings.stories.js

@@ -25,6 +25,9 @@ const HeadingsTemplate = ({ text }) =>
   )}`;
 
 export const Headings = HeadingsTemplate.bind({});
+Headings.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 Headings.args = {
   text: "This is a heading",
 };

package/nationalarchives/stories/utilities/typography/typography.stories.js

@@ -10,6 +10,9 @@ export default {
 const ParagraphTemplate = ({ paragraphs }) =>
   paragraphs.map((paragraph) => `<p>${paragraph}</p>`).join("");
 export const Paragraph = ParagraphTemplate.bind({});
+Paragraph.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 Paragraph.args = {
   paragraphs: [
     "This is some body text.",
@@ -23,6 +26,9 @@ const LargeParagraphTemplate = ({ paragraphs }) =>
     .map((paragraph) => `<p class="tna-large-paragraph">${paragraph}</p>`)
     .join("");
 export const LargeParagraph = LargeParagraphTemplate.bind({});
+LargeParagraph.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 LargeParagraph.args = {
   paragraphs: [
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh. Donec ac tellus in dui rutrum maximus. Aliquam vel euismod eros. Integer ut magna velit. Fusce sed dui sit amet metus eleifend dictum quis vitae mi. Aenean sagittis euismod purus, in accumsan metus venenatis nec. Nullam nec velit felis. Sed nec felis eu nisl varius dictum eu quis nisl. Donec dapibus est arcu, vel pellentesque risus pellentesque eget.",
@@ -34,6 +40,9 @@ const HeadingLinkTemplate = ({ text, href }) =>
     <a href="${href}">${text}</a>
   </h2>`;
 export const HeadingLink = HeadingLinkTemplate.bind({});
+HeadingLink.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 HeadingLink.args = {
   text: "Researching with The National Archives",
   href: "#",
@@ -44,6 +53,9 @@ const SceneSetterTemplate = ({ text }) =>
     ${text}
   </p>`;
 export const SceneSetter = SceneSetterTemplate.bind({});
+SceneSetter.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 SceneSetter.args = {
   text: `We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.`,
 };
@@ -53,6 +65,9 @@ const SceneSetterSmallTemplate = ({ text }) =>
     ${text}
   </p>`;
 export const SceneSetterSmall = SceneSetterSmallTemplate.bind({});
+SceneSetterSmall.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 SceneSetterSmall.args = {
   text: `We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.`,
 };
@@ -67,6 +82,9 @@ const BlockquoteTemplate = ({
   <p class="tna-blockquote__citation">${author}</p>
 </blockquote>`;
 export const Blockquote = BlockquoteTemplate.bind({});
+Blockquote.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 Blockquote.args = {
   html: "<p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>",
   author: "Douglas Adams, Mostly Harmless",