@nationalarchives/frontend 0.1.64 → 0.2.0

package/nationalarchives/components/accordion/accordion.stories.js

@@ -1,410 +0,0 @@
-import Accordion from "./template.njk";
-import macroOptions from "./macro-options.json";
-import { fireEvent, expect } from "@storybook/test";
-
-const argTypes = {
-  items: { control: "object" },
-  group: { control: "text" },
-  classes: { control: "text" },
-  attributes: { control: "object" },
-};
-
-Object.keys(argTypes).forEach((argType) => {
-  argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType,
-  )?.description;
-});
-
-export default {
-  title: "Components/Accordion",
-  argTypes,
-};
-
-const Template = ({ items, group, classes, attributes }) =>
-  Accordion({
-    params: { items, group, classes, attributes },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  items: [
-    {
-      title: "Alpha",
-      text: "Content",
-    },
-    {
-      title: "Beta",
-      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
-    },
-    {
-      title: "Gamma",
-      body: `<ul class="tna-ul">
-  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
-  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
-  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
-</ul>`,
-    },
-    {
-      title: "Delta",
-      body: `<div class="tna-table-wrapper">
-  <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>
-</div>`,
-    },
-  ],
-  group: "group-1",
-  classes: "tna-accordion--demo",
-};
-
-export const OpenItems = Template.bind({});
-OpenItems.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-OpenItems.args = {
-  items: [
-    {
-      title: "Alpha",
-      text: "Content",
-    },
-    {
-      title: "Beta",
-      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
-    },
-    {
-      title: "Gamma",
-      body: `<ul class="tna-ul">
-  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
-  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
-  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
-</ul>`,
-      open: true,
-    },
-    {
-      title: "Delta",
-      body: `<div class="tna-table-wrapper">
-  <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>
-</div>`,
-    },
-  ],
-  group: "group-2",
-  classes: "tna-accordion--demo",
-};
-
-export const NoGroup = Template.bind({});
-NoGroup.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-NoGroup.args = {
-  items: [
-    {
-      title: "Alpha",
-      text: "Content",
-    },
-    {
-      title: "Beta",
-      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
-    },
-    {
-      title: "Gamma",
-      body: `<ul class="tna-ul">
-  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
-  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
-  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
-</ul>`,
-    },
-    {
-      title: "Delta",
-      body: `<div class="tna-table-wrapper">
-  <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>
-</div>`,
-    },
-  ],
-  classes: "tna-accordion--demo",
-};
-
-export const Test = Template.bind({});
-Test.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Test.args = {
-  items: [
-    {
-      title: "Alpha",
-      text: "Content",
-    },
-    {
-      title: "Beta",
-      body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p>",
-    },
-    {
-      title: "Gamma",
-      body: `<ul class="tna-ul">
-  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-  <li>Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim.</li>
-  <li>Donec bibendum est leo, sed dapibus mauris facilisis vitae.</li>
-  <li>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi.</li>
-</ul>`,
-    },
-    {
-      title: "Delta",
-      body: `<div class="tna-table-wrapper">
-  <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>
-</div>`,
-    },
-  ],
-  group: "group-1",
-  classes: "tna-accordion--demo",
-};
-Test.play = async ({ step }) => {
-  const $allDetails = Array.from(
-    document.querySelectorAll(".tna-accordion__details"),
-  );
-
-  await step("Initial load", async () => {
-    await $allDetails.forEach(async ($details) => {
-      await expect(
-        $details.querySelector(".tna-accordion__summary"),
-      ).toBeVisible();
-      await expect(
-        $details.querySelector(".tna-accordion__content"),
-      ).not.toBeVisible();
-    });
-  });
-
-  await step("Open first item", async () => {
-    await fireEvent.click(
-      $allDetails[0].querySelector(".tna-accordion__summary"),
-    );
-    console.log($allDetails[0].querySelector(".tna-accordion__summary"));
-    await $allDetails.forEach(async ($details, index) => {
-      if (index === 0) {
-        await expect(
-          $details.querySelector(".tna-accordion__content"),
-        ).toBeVisible();
-      } else {
-        await expect(
-          $details.querySelector(".tna-accordion__content"),
-        ).not.toBeVisible();
-      }
-    });
-  });
-
-  await step("Close first item", async () => {
-    await fireEvent.click(
-      $allDetails[0].querySelector(".tna-accordion__summary"),
-    );
-    await $allDetails.forEach(async ($details) => {
-      await expect(
-        $details.querySelector(".tna-accordion__content"),
-      ).not.toBeVisible();
-    });
-  });
-
-  await step("Open first item", async () => {
-    await fireEvent.click(
-      $allDetails[0].querySelector(".tna-accordion__summary"),
-    );
-    await $allDetails.forEach(async ($details, index) => {
-      if (index === 0) {
-        await expect(
-          $details.querySelector(".tna-accordion__content"),
-        ).toBeVisible();
-      } else {
-        await expect(
-          $details.querySelector(".tna-accordion__content"),
-        ).not.toBeVisible();
-      }
-    });
-  });
-
-  // TODO: fireEvent doesn't work on Firefox
-  // await step("Open second item", async () => {
-  //   await fireEvent.click(
-  //     $allDetails[1].querySelector(".tna-accordion__summary"),
-  //   );
-  //   await $allDetails.forEach(async ($details, index) => {
-  //     if (index === 1) {
-  //       await expect(
-  //         $details.querySelector(".tna-accordion__content"),
-  //       ).toBeVisible();
-  //     } else {
-  //       await expect(
-  //         $details.querySelector(".tna-accordion__content"),
-  //       ).not.toBeVisible();
-  //     }
-  //   });
-  // });
-
-  // await step("Close second item", async () => {
-  //   await fireEvent.click(
-  //     $allDetails[1].querySelector(".tna-accordion__summary"),
-  //   );
-  //   await $allDetails.forEach(async ($details) => {
-  //     await expect(
-  //       $details.querySelector(".tna-accordion__content"),
-  //     ).not.toBeVisible();
-  //   });
-  // });
-};

package/nationalarchives/components/breadcrumbs/breadcrumbs.stories.js

@@ -1,128 +0,0 @@
-import Breadcrumbs from "./template.njk";
-import macroOptions from "./macro-options.json";
-import { within, userEvent, expect } from "@storybook/test";
-import { customViewports } from "../../../../.storybook/viewports";
-
-const argTypes = {
-  items: { control: "object" },
-  noCollapse: { control: "boolean" },
-  structuredData: { control: "boolean" },
-  classes: { control: "text" },
-  attributes: { control: "object" },
-};
-
-Object.keys(argTypes).forEach((argType) => {
-  argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType,
-  )?.description;
-});
-
-export default {
-  title: "Components/Breadcrumbs",
-  argTypes,
-};
-
-const Template = ({ items, noCollapse, structuredData, classes, attributes }) =>
-  Breadcrumbs({
-    params: {
-      items,
-      noCollapse,
-      structuredData,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  items: [
-    {
-      text: "Alpha",
-      href: "#/alpha",
-    },
-    {
-      text: "Beta",
-      href: "#/beta",
-    },
-    {
-      text: "Gamma",
-      href: "#/gamma",
-    },
-    {
-      text: "Delta",
-      href: "#/delta",
-    },
-    {
-      text: "Epsilon",
-      href: "#/epsilon",
-    },
-  ],
-  classes: "tna-breadcrumbs--demo",
-};
-
-export const NoCollapse = Template.bind({});
-NoCollapse.parameters = {
-  viewport: {
-    defaultViewport: "small",
-  },
-  chromatic: {
-    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
-  },
-};
-NoCollapse.args = {
-  ...Standard.args,
-  noCollapse: true,
-};
-
-export const Mobile = Template.bind({});
-Mobile.parameters = {
-  viewport: {
-    defaultViewport: "small",
-  },
-  chromatic: {
-    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
-  },
-};
-Mobile.args = {
-  ...Standard.args,
-};
-
-export const MobileExpanded = Template.bind({});
-MobileExpanded.parameters = {
-  viewport: {
-    defaultViewport: "small",
-  },
-  chromatic: {
-    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
-  },
-};
-MobileExpanded.args = {
-  ...Standard.args,
-};
-MobileExpanded.play = async ({ args, canvasElement }) => {
-  const canvas = within(canvasElement);
-
-  const $module = document.querySelector('[data-module="tna-breadcrumbs"]');
-  const $items = args.items.map((item) => canvas.getByText(item.text));
-  const $expandButton = document.querySelector(
-    ".tna-breadcrumbs__item--expandable button",
-  );
-
-  await expect($items[0]).toBeVisible();
-  await expect($items[1]).not.toBeVisible();
-  await expect($items[2]).not.toBeVisible();
-  await expect($items[3]).not.toBeVisible();
-  await expect($items[4]).toBeVisible();
-  await expect($expandButton).toBeVisible();
-
-  await userEvent.click($expandButton);
-
-  await expect($items[0]).toBeVisible();
-  await expect($items[1]).toBeVisible();
-  await expect($items[2]).toBeVisible();
-  await expect($items[3]).toBeVisible();
-  await expect($items[4]).toBeVisible();
-  await expect($expandButton).not.toBeVisible();
-
-  await expect($module).toHaveFocus();
-};

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

@@ -1,114 +0,0 @@
-import Button from "./template.njk";
-
-export default {
-  title: "Components/Button group",
-};
-
-const Template = ({
-  text,
-  href,
-  title,
-  icon,
-  accent,
-  small,
-  plain,
-  iconOnly,
-  iconOnlyOnMobile,
-  rightAlignIcon,
-  buttonElement,
-  buttonType,
-  classes,
-  attributes,
-}) =>
-  Button({
-    params: {
-      text,
-      href,
-      title,
-      icon,
-      accent,
-      small,
-      plain,
-      iconOnly,
-      iconOnlyOnMobile,
-      rightAlignIcon,
-      buttonElement,
-      buttonType,
-      classes,
-      attributes,
-    },
-  });
-
-const GroupTemplate = ({ buttons }) =>
-  `<div class="tna-button-group">
-    ${buttons.map((button) => Template(button)).join("")}
-</div>`;
-
-export const Group = GroupTemplate.bind({});
-Group.args = {
-  buttons: [
-    {
-      text: "Standard",
-      href: "#",
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Accent",
-      href: "#",
-      accent: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Icon",
-      href: "#",
-      icon: "phone",
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Right Aligned Icon",
-      href: "#",
-      icon: "chevron-right",
-      rightAlignIcon: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Icon Only",
-      href: "#",
-      icon: "list",
-      iconOnly: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Icon Only On Mobile",
-      href: "#",
-      icon: "list",
-      iconOnlyOnMobile: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Plain",
-      plain: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Plain With Icon",
-      href: "#",
-      icon: "map-location-dot",
-      plain: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Button",
-      buttonElement: true,
-      classes: "tna-button--demo",
-    },
-  ],
-};
-
-const SmallGroupTemplate = ({ buttons }) =>
-  `<div class="tna-button-group tna-button-group--small">
-    ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}` })).join("")}
-</div>`;
-
-export const SmallGroup = SmallGroupTemplate.bind({});
-SmallGroup.args = Group.args;