@nationalarchives/frontend 0.1.24-prerelease → 0.1.26-prerelease

package/nationalarchives/stories/utilities/forms/forms.mdx

@@ -0,0 +1,117 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as TextInputStories from "../../../components/text-input/text-input.stories";
+import * as TextareaStories from "../../../components/textarea/textarea.stories";
+import * as DateInputStories from "../../../components/date-input/date-input.stories";
+import * as DateSearchStories from "../../../components/date-search/date-search.stories";
+import * as SelectStories from "../../../components/select/select.stories";
+import * as RadiosStories from "../../../components/radios/radios.stories";
+import * as CheckboxesStories from "../../../components/checkboxes/checkboxes.stories";
+import * as SearchFieldStories from "../../../components/search-field/search-field.stories";
+
+<Meta title="Utilities/Form elements" />
+
+# Form elements
+
+<Canvas of={TextInputStories.Standard} />
+<Canvas of={TextareaStories.Standard} />
+<Canvas of={SelectStories.Standard} />
+<Canvas of={RadiosStories.Standard} />
+<Canvas of={RadiosStories.Small} />
+<Canvas of={CheckboxesStories.Standard} />
+<Canvas of={CheckboxesStories.Small} />
+<Canvas of={DateSearchStories.Standard} />
+<Canvas of={DateInputStories.Standard} />
+<Canvas of={SearchFieldStories.Standard} />
+
+## Inline
+
+<Canvas of={TextInputStories.Inline} />
+<Canvas of={TextareaStories.Inline} />
+<Canvas of={SelectStories.Inline} />
+<Canvas of={RadiosStories.Inline} />
+<Canvas of={CheckboxesStories.Inline} />
+<Canvas of={DateSearchStories.Inline} />
+<Canvas of={DateInputStories.Inline} />
+
+## Structure
+
+### Single form elements
+
+```html
+<div class="tna-form__group"> <!-- Optional: "tna-form__group--error" -->
+
+  <div class="tna-form__group-contents">
+
+    <h4 class="tna-form__heading tna-form__heading--m">
+      <label class="tna-form__label" for="tna-form__ELEMENT-ID">
+        <!-- Field title -->
+      </label>
+    </h4>
+
+    <!-- Optional hint
+    <p id="tna-form__ELEMENT-ID-hint" class="tna-form__hint">
+      [Hint text]
+    </p>
+    -->
+
+    <!-- Optional error
+    <p id="tna-form__ELEMENT-ID-error" class="tna-form__error-message">
+      <span class="tna-!--visually-hidden">Error:</span> [Error text]
+    </p>
+    -->
+
+  </div>
+
+  <!-- Field id="tna-form__ELEMENT-ID"
+    If hint:
+      aria-describedby="tna-form__ELEMENT-ID-hint"
+    If error:
+      aria-describedby="tna-form__ELEMENT-ID-error"
+    If hint and error:
+      aria-describedby="tna-form__ELEMENT-ID-hint tna-form__ELEMENT-ID-error"
+  -->
+
+</div>
+```
+
+### Fieldset (multiple inputs - e.g. checkboxes and radios)
+
+```html
+<div class="tna-form__group"> <!-- Optional: "tna-form__group--error" -->
+
+  <fieldset class="tna-form__fieldset"><!-- Fieldset
+      If hint:
+        aria-describedby="tna-form__ELEMENT-ID-hint"
+      If error:
+        aria-describedby="tna-form__ELEMENT-ID-error"
+      If hint and error:
+        aria-describedby="tna-form__ELEMENT-ID-hint tna-form__ELEMENT-ID-error"
+    -->
+
+    <div class="tna-form__group-contents">
+
+      <legend class="tna-form__legend">
+        <h4 class="tna-form__heading tna-form__heading--m">
+          <!-- Field title -->
+        </h4>
+      </legend>
+
+      <!-- Optional hint
+      <p id="tna-form__ELEMENT-ID-hint" class="tna-form__hint">
+        [Hint text]
+      </p>
+      -->
+
+      <!-- Optional error
+      <p id="tna-form__ELEMENT-ID-error" class="tna-form__error-message">
+        <span class="tna-!--visually-hidden">Error:</span> [Error text]
+      </p>
+      -->
+
+    </div>
+  </fieldset>
+
+  <!-- Fields -->
+  
+</div>
+```

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

@@ -30,6 +30,7 @@ MarginMobile.parameters = {
   },
   chromatic: {
     viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+    disableSnapshot: true,
   },
 };
 MarginMobile.args = {};

package/nationalarchives/stories/utilities/tables/tables.mdx

@@ -0,0 +1,8 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as TableStories from './tables.stories';
+
+<Meta of={TableStories} />
+
+# Tables
+
+<Canvas of={TableStories.Table} />

package/nationalarchives/stories/utilities/tables/tables.stories.js

@@ -0,0 +1,45 @@
+export default {
+  title: "Utilities/Tables",
+};
+
+const TableTemplate = () =>
+  `<table class="tna-table">
+  <caption class="tna-table__caption tna-heading-m tna-visually-hidden">Primary options</caption>
+  <thead class="tna-table__head">
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="col">Name</th>
+      <th class="tna-table__header" scope="col">Type</th>
+      <th class="tna-table__header" scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody class="tna-table__body">
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="row">items</th>
+      <td class="tna-table__cell">array</td>
+      <td class="tna-table__cell">
+        <p><strong>Required.</strong></p>
+        <p>See items.</p>
+      </td>
+    </tr>
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="row">noCollapse</th>
+      <td class="tna-table__cell">string</td>
+      <td class="tna-table__cell"></td>
+    </tr>
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="row">classes</th>
+      <td class="tna-table__cell">string</td>
+      <td class="tna-table__cell">
+        <p>Classes to add to the breadcrumbs.</p>
+      </td>
+    </tr>
+    <tr class="tna-table__row">
+      <th class="tna-table__header" scope="row">attributes</th>
+      <td class="tna-table__cell">object</td>
+      <td class="tna-table__cell">
+        <p>HTML attributes (for example data attributes) to add to the breadcrumbs.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>`;
+export const Table = TableTemplate.bind({});

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

@@ -3,7 +3,7 @@ const argTypes = {
   title: { control: "text" },
   level: { control: "number", min: 1, max: 6, step: 1 },
   size: { control: "radio", options: ["m", "l", "xl"] },
-  singleSentence: { control: "boolean" },
+  plainSupertitle: { control: "boolean" },
 };
 
 export default {
@@ -11,35 +11,75 @@ export default {
   argTypes,
 };
 
-const Template = ({
+const HeadingGroupTemplate = ({
   supertitle,
   title,
-  level = 3,
-  size = "l",
-  singleSentence,
+  level,
+  size,
+  plainSupertitle,
 }) =>
-  singleSentence
-    ? `<hgroup class="tna-hgroup-${size}">
-  <h${level} class="tna-hgroup__title">
-  <span class="tna-hgroup__supertitle">${supertitle}</span>
-  <span class="tna-hgroup__title">${title}</span>
-</h${level}>
-</hgroup>`
-    : `<hgroup class="tna-hgroup-${size}">
-  <p class="tna-hgroup__supertitle">${supertitle}</p>
+  `<hgroup class="tna-hgroup-${size}">
+  <p class="tna-hgroup__supertitle${
+    plainSupertitle ? " tna-hgroup__supertitle--plain" : ""
+  }">${supertitle}</p>
   <h${level} class="tna-hgroup__title">${title}</h${level}>
 </hgroup>`;
 
-export const HeadingGroup = Template.bind({});
+export const HeadingGroup = HeadingGroupTemplate.bind({});
 HeadingGroup.args = {
+  supertitle: "Record revealed",
+  title: "The Monteagle Letter",
+  level: 3,
+  size: "l",
+  plainSupertitle: false,
+};
+
+const HeadingGroupSingleSentenceTemplate = ({
+  supertitle,
+  title,
+  level,
+  size,
+  plainSupertitle,
+}) =>
+  `<hgroup class="tna-hgroup-${size}">
+  <h${level} class="tna-hgroup__title">
+    <span class="tna-hgroup__supertitle${
+      plainSupertitle ? " tna-hgroup__supertitle--plain" : ""
+    }">${supertitle}</span>
+    <span class="tna-hgroup__title">${title}</span>
+  </h${level}>
+</hgroup>`;
+
+export const HeadingGroupSingleSentence =
+  HeadingGroupSingleSentenceTemplate.bind({});
+HeadingGroupSingleSentence.args = {
   supertitle: "The story of",
   title: "Alice Hawkins",
-  singleSentence: true,
+  level: 3,
+  size: "l",
+  plainSupertitle: false,
 };
 
-export const HeadingGroupSeparated = Template.bind({});
-HeadingGroupSeparated.args = {
+const HeadingGroupPlainSupertitleTemplate = ({
+  supertitle,
+  title,
+  level,
+  size,
+  plainSupertitle,
+}) =>
+  `<hgroup class="tna-hgroup-${size}">
+  <p class="tna-hgroup__supertitle${
+    plainSupertitle ? " tna-hgroup__supertitle--plain" : ""
+  }">${supertitle}</p>
+  <h${level} class="tna-hgroup__title">${title}</h${level}>
+</hgroup>`;
+
+export const HeadingGroupPlainSupertitle =
+  HeadingGroupPlainSupertitleTemplate.bind({});
+HeadingGroupPlainSupertitle.args = {
   supertitle: "Record revealed",
   title: "The Monteagle Letter",
-  singleSentence: false,
+  level: 3,
+  size: "l",
+  plainSupertitle: true,
 };

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

@@ -57,12 +57,6 @@ 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>.`,
 };
 
-// const TextDetailsTemplate = () =>
-//   `<p>
-//     Typed slip with photographs - 'The <span class="tna-detail" title="Italian (miscellaneous)" data-type="misc">Italian</span> Steamer <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> which ran on the rocks near <span class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</span> a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> broken in two by a severe buffeting from the seas near <a href="#" class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</a>.
-//   </p>`;
-// export const TextDetails = TextDetailsTemplate.bind({});
-
 const BlockquoteTemplate = ({
   html,
   author,

package/nationalarchives/templates/layouts/_generic.njk

@@ -28,7 +28,7 @@
       <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">
     {% endblock %}
   </head>
-    <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <body class="tna-template__body {{ bodyClasses }}"{% for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
     {% block bodyStart %}
       {% block cookies %}
         {{ tnaCookieBanner({

package/nationalarchives/templates/layouts/_prototype-kit.njk

@@ -1,5 +1,7 @@
 {% extends "./_generic.njk" %}
 
+{% set assetPath = "/plugin-assets/%40nationalarchives%2Ffrontend/nationalarchives/assets" %}
+
 {% block stylesheets %}
   {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
   <link rel="stylesheet" type="text/css" href="https://use.typekit.net/hkj3kuz.css">