@nationalarchives/frontend 0.1.65 → 0.2.1

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

@@ -1,117 +0,0 @@
-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="ELEMENT-ID">
-        <!-- Field title -->
-      </label>
-    </h4>
-
-    <!-- Optional hint
-    <p id="ELEMENT-ID-hint" class="tna-form__hint">
-      [Hint text]
-    </p>
-    -->
-
-    <!-- Optional error
-    <p id="ELEMENT-ID-error" class="tna-form__error-message">
-      <span class="tna-!--visually-hidden">Error:</span> [Error text]
-    </p>
-    -->
-
-  </div>
-
-  <!-- Field id="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="ELEMENT-ID-hint" class="tna-form__hint">
-        [Hint text]
-      </p>
-      -->
-
-      <!-- Optional error
-      <p id="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/lists/lists.stories.js

@@ -1,212 +0,0 @@
-const argTypes = {
-  items: { control: "object" },
-  plain: { control: "boolean" },
-  classes: { control: "text" },
-};
-
-export default {
-  title: "Utilities/Lists",
-  argTypes,
-};
-
-const UnorderedListTemplate = ({ items, style, classes = "" }) =>
-  `<ul class="tna-ul${style ? ` tna-ul--${style}` : ""} ${classes}">${items.reduce(
-    (list, item) => `${list}<li>${item}</li>`,
-    "",
-  )}</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"],
-  style: "plain",
-};
-export const UnorderedListDashed = UnorderedListTemplate.bind({});
-UnorderedListDashed.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-UnorderedListDashed.args = {
-  items: ["Alpha", "Beta", "Gamma"],
-  style: "dashed",
-};
-
-const OrderedListTemplate = ({ items, style, classes = "" }) =>
-  `<ol class="tna-ol${style ? ` tna-ol--${style}` : ""} ${classes}">${items.reduce(
-    (list, item) => `${list}<li>${item}</li>`,
-    "",
-  )}</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"],
-  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 = "" }) =>
-  `<dl class="tna-dl${plain ? " tna-dl--plain" : ""}${
-    items.some((item) => item.icon) ? " tna-dl--icon-padding" : ""
-  } ${classes}">${items.reduce(
-    (list, item) => `${list}
-    <dt>
-      ${
-        item.icon
-          ? `<i class="fa-solid fa-${item.icon}" aria-hidden="true"></i>`
-          : ""
-      }
-      ${item.title}
-    </dt>
-    ${
-      Array.isArray(item.description)
-        ? item.description.reduce(
-            (descriptions, description) =>
-              `${descriptions}<dd>${description}</dd>`,
-            "",
-          )
-        : `<dd>${item.description}</dd>`
-    }`,
-    "",
-  )}
-</dl>`;
-
-export const DescriptionList = DescriptionListTemplate.bind({});
-DescriptionList.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-DescriptionList.args = {
-  items: [
-    { title: "Alpha", description: "Lorem ipsum" },
-    { title: "Beta", description: "Lorem ipsum" },
-    { title: "Gamma", description: "Lorem ipsum" },
-    { title: "Delta", description: "Lorem ipsum" },
-    { title: "Epsilon", description: "Lorem ipsum" },
-    { title: "Zeta", description: "Lorem ipsum" },
-    { title: "Eta", description: "Lorem ipsum" },
-  ],
-};
-
-export const PlainDescriptionList = DescriptionListTemplate.bind({});
-PlainDescriptionList.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-PlainDescriptionList.args = {
-  items: [
-    { title: "Alpha", description: "Lorem ipsum" },
-    { title: "Beta", description: "Lorem ipsum" },
-    { title: "Gamma", description: "Lorem ipsum" },
-    { title: "Delta", description: "Lorem ipsum" },
-  ],
-  plain: true,
-};
-
-export const DescriptionListWithIcons = DescriptionListTemplate.bind({});
-DescriptionListWithIcons.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-DescriptionListWithIcons.args = {
-  items: [
-    {
-      title: "Held by",
-      description: "The National Archives, Kew",
-      icon: "landmark",
-    },
-    { title: "Date", description: "1972&ndash;1979", icon: "calendar" },
-    { title: "Reference", description: "LC 4", icon: "database" },
-  ],
-};
-
-export const PlainDescriptionListWithIcons = DescriptionListTemplate.bind({});
-PlainDescriptionListWithIcons.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-PlainDescriptionListWithIcons.args = {
-  items: [
-    {
-      title: "Held by",
-      description: "The National Archives, Kew",
-      icon: "landmark",
-    },
-    { title: "Date", description: "1972&ndash;1979", icon: "calendar" },
-    { title: "Reference", description: "LC 4", icon: "database" },
-  ],
-  plain: true,
-};
-
-export const ComplexDescriptionList = DescriptionListTemplate.bind({});
-ComplexDescriptionList.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-ComplexDescriptionList.args = {
-  items: [
-    { title: "Alpha", description: "Lorem ipsum" },
-    { title: "Beta", description: "Lorem ipsum" },
-    {
-      title: "Gamma",
-      description: ["Lorem ipsum 1", "Lorem ipsum 2", "Lorem ipsum 3"],
-    },
-    {
-      title: "Delta",
-      description: ["Lorem ipsum 1", "Lorem ipsum 2", "Lorem ipsum 3"],
-    },
-    { title: "Epsilon", description: ["Lorem ipsum 1", "Lorem ipsum 2"] },
-    { title: "Zeta", description: "Lorem ipsum" },
-    { title: "Eta", description: ["Lorem ipsum 1", "Lorem ipsum 2"] },
-  ],
-};
-
-const ChipListTemplate = ({ items, plain, classes = "" }) =>
-  `<dl class="tna-dl-chips${plain ? " tna-dl-chips--plain" : ""} ${classes}">${items.reduce(
-    (list, item) => `${list}
-    <dt>${item.title}</dt>
-    <dd>
-      <${item.href ? "a" : "span"} class="tna-dl-chips__item">
-        ${item.icon ? `<i class="fa-solid fa-${item.icon}" aria-hidden="true"></i>` : ""}
-        ${item.text}
-      </${item.href ? "a" : "span"}>
-    </dd>`,
-    "",
-  )}</dl>`;
-export const ChipList = ChipListTemplate.bind({});
-ChipList.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-ChipList.args = {
-  items: [
-    { title: "Published", text: "Saturday 28 June 2014", icon: "calendar" },
-    { title: "Author", text: "James Cronan", icon: "user", href: "#" },
-    { title: "Category", text: "Records and research", href: "#" },
-    { title: "Comments", text: "3 comments" },
-  ],
-};

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

@@ -1,42 +0,0 @@
-import { customViewports } from "../../../../../.storybook/viewports";
-
-const argTypes = {};
-
-export default {
-  title: "Utilities/Overrides",
-  argTypes,
-};
-
-const Template = () => {
-  return `<div class="tna-spacing-demo">
-  <p>Lorem ipsum</p>
-  <p class="tna-!--no-margin-top">Lorem ipsum (tna-!--no-margin-top)</p>
-  <p class="tna-!--margin-top-xs">Lorem ipsum (tna-!--margin-top-xs)</p>
-  <p class="tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
-  <p class="tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
-  <p class="tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
-  <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>
-  <p class="tna-!--margin-top-xxl">Lorem ipsum (tna-!--margin-top-xxl)</p>
-</div>`;
-};
-
-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",
-  },
-  chromatic: {
-    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
-    disableSnapshot: true,
-  },
-};
-MarginMobile.args = {};

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

@@ -1,47 +0,0 @@
-export default {
-  title: "Utilities/Tables",
-};
-
-const TableTemplate = () =>
-  `<table class="tna-table">
-  <caption class="tna-table__caption">
-    Records added and removed between 2020 and 2022.
-  </caption>
-  <thead class="tna-table__head">
-    <tr class="tna-table__row">
-      <th class="tna-table__header" scope="col">Year</th>
-      <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
-      <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
-      <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
-    </tr>
-  </thead>
-  <tbody class="tna-table__body">
-    <tr>
-      <th class="tna-table__header" scope="row">2020</th>
-      <td class="tna-table__cell">Rat</td>
-      <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
-      <td class="tna-table__cell tna-table__cell--numeric">789</td>
-    </tr>
-    <tr>
-      <th class="tna-table__header" scope="row">2021</th>
-      <td class="tna-table__cell">Ox</td>
-      <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
-      <td class="tna-table__cell tna-table__cell--numeric">123</td>
-    </tr>
-    <tr>
-      <th class="tna-table__header" scope="row">2022</th>
-      <td class="tna-table__cell">Tiger</td>
-      <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
-      <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
-    </tr>
-  </tbody>
-  <tfoot class="tna-table__foot">
-    <tr>
-      <th class="tna-table__header" scope="row">Totals</th>
-      <td class="tna-table__cell"></td>
-      <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
-      <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
-    </tr>
-  </tfoot>
-</table>`;
-export const Table = TableTemplate.bind({});

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

@@ -1,94 +0,0 @@
-const argTypes = {
-  supertitle: { control: "text" },
-  title: { control: "text" },
-  level: { control: "number", min: 1, max: 6, step: 1 },
-  size: { control: "radio", options: ["m", "l", "xl"] },
-  plainSupertitle: { control: "boolean" },
-};
-
-export default {
-  title: "Utilities/Typography",
-  argTypes,
-};
-
-const HeadingGroupTemplate = ({
-  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 HeadingGroup = HeadingGroupTemplate.bind({});
-HeadingGroup.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-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.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-HeadingGroupSingleSentence.args = {
-  supertitle: "The story of",
-  title: "Alice Hawkins",
-  level: 3,
-  size: "l",
-  plainSupertitle: false,
-};
-
-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.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-HeadingGroupPlainSupertitle.args = {
-  supertitle: "Record revealed",
-  title: "The Monteagle Letter",
-  level: 3,
-  size: "l",
-  plainSupertitle: true,
-};

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

@@ -1,33 +0,0 @@
-const argTypes = {
-  text: { control: "text" },
-  size: { control: "text" },
-};
-
-export default {
-  title: "Utilities/Typography",
-  argTypes,
-};
-
-const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading-${
-  params.size
-}">
-  ${params.text} (${params.size.toUpperCase()})
-</h${level}>
-`;
-
-const HeadingsTemplate = ({ text }) =>
-  `${HeadingTemplate({ params: { text, size: "xl" } }, 1)}${HeadingTemplate(
-    { params: { text, size: "l" } },
-    2,
-  )}${HeadingTemplate({ params: { text, size: "m" } }, 3)}${HeadingTemplate(
-    { params: { text, size: "s" } },
-    4,
-  )}`;
-
-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

@@ -1,91 +0,0 @@
-const argTypes = {
-  text: { control: "text" },
-};
-
-export default {
-  title: "Utilities/Typography",
-  argTypes,
-};
-
-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.",
-    "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.",
-    "Nam a posuere lectus. Vivamus facilisis est pretium augue aliquet iaculis. Phasellus ligula orci, commodo eget lectus et, tincidunt scelerisque erat. Aliquam in est vel purus ultricies vulputate non sed ligula. Pellentesque ut felis ullamcorper, eleifend erat dapibus, feugiat metus. Phasellus vitae dolor commodo, posuere nisl sed, luctus mauris. Etiam malesuada tincidunt enim, ac fermentum est pulvinar id. Maecenas id accumsan libero. Curabitur at velit nisi. Nullam gravida mauris quam, tempor pharetra risus venenatis vel. Proin quis malesuada lacus. Nulla condimentum facilisis turpis, et elementum leo. Nulla gravida quam mauris, id scelerisque est rhoncus ac.",
-  ],
-};
-
-const LargeParagraphTemplate = ({ paragraphs }) =>
-  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.",
-  ],
-};
-
-const HeadingLinkTemplate = ({ text, href }) =>
-  `<h2 class="tna-heading-s">
-    <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: "#",
-};
-
-const SceneSetterTemplate = ({ text }) =>
-  `<p class="tna-scene-setter">
-    ${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>.`,
-};
-
-const SceneSetterSmallTemplate = ({ text }) =>
-  `<p class="tna-scene-setter tna-scene-setter--small">
-    ${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>.`,
-};
-
-const BlockquoteTemplate = ({
-  html,
-  author,
-}) => `<blockquote class="tna-blockquote">
-  <div class="tna-blockquote__quote">
-    ${html}
-  </div>
-  <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",
-};