@nationalarchives/frontend 0.1.65 → 0.2.0

package/nationalarchives/components/files/template.njk

@@ -1,33 +0,0 @@
-{%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- set classes = containerClasses | join(' ') -%}
-<div class="tna-files{% if classes %} {{ classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="tna-files__icon"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
-  <ul class="tna-files__items">
-    {%- for item in params.items %}
-    <li class="tna-files__item">
-      <p class="tna-files__item-title">
-        <a href="{{ item.href }}" class="tna-files__link">{{ item.text }}</a>
-      </p>
-      <dl class="tna-dl-chips tna-dl-chips--plain tna-files__item-meta">
-        <dt>File type</dt>
-        <dd>
-          <span class="tna-dl-chips__item">{{ item.fileType }}</span>
-        </dd>
-        <dt>File size</dt>
-        <dd>
-          <span class="tna-dl-chips__item">{{ item.fileSize }}</span>
-        </dd>
-        {% if item.fileExtent %}
-        <dt>Extent</dt>
-        <dd>
-          <span class="tna-dl-chips__item">{{ item.fileExtent }}</span>
-        </dd>
-        {% endif %}
-      </dl>
-      {% if item.description %}
-      <p class="tna-files__item-description">{{ item.description }}</p>
-      {% endif %}
-    </li>
-    {%- endfor %}
-  </ul>
-</div>

package/nationalarchives/components/footer/footer.stories.js

@@ -1,241 +0,0 @@
-import Footer from "./template.njk";
-import macroOptions from "./macro-options.json";
-import { within, expect } from "@storybook/test";
-import Cookies from "../../lib/cookies.mjs";
-
-const argTypes = {
-  meta: { control: "text" },
-  social: { control: "object" },
-  navigation: { control: "object" },
-  showNewsletter: { control: "boolean" },
-  legal: { control: "object" },
-  themeSelector: { control: "boolean" },
-  currentTheme: {
-    control: "inline-radio",
-    options: ["system", "light", "dark", ""],
-  },
-  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/Footer",
-  argTypes,
-};
-
-const Template = ({
-  meta,
-  social,
-  navigation,
-  showNewsletter,
-  legal,
-  themeSelector,
-  currentTheme,
-  classes,
-  attributes,
-}) =>
-  Footer({
-    params: {
-      meta,
-      social,
-      navigation,
-      showNewsletter,
-      legal,
-      themeSelector,
-      currentTheme,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  social: [
-    {
-      href: "https://twitter.com/UKNatArchives",
-      icon: "twitter",
-      title: "The National Archives X feed (formally known as Twitter)",
-    },
-    {
-      href: "https://www.youtube.com/c/TheNationalArchivesUK",
-      icon: "youtube",
-      title: "The National Archives YouTube channel",
-    },
-    {
-      href: "https://www.facebook.com/TheNationalArchives",
-      icon: "facebook",
-      title: "The National Archives Facebook page",
-    },
-    {
-      href: "https://www.flickr.com/photos/nationalarchives",
-      icon: "flickr",
-      title: "The National Archives Flickr feed",
-    },
-    {
-      href: "https://www.instagram.com/nationalarchivesuk/",
-      icon: "instagram",
-      title: "The National Archives Instagram feed",
-    },
-    {
-      href: "https://www.tiktok.com/@uknatarchives",
-      icon: "tiktok",
-      title: "The National Archives TikTok feed",
-    },
-  ],
-  navigation: [
-    {
-      title: "Quick links",
-      items: [
-        {
-          text: "About us",
-          href: "https://www.nationalarchives.gov.uk/about/",
-        },
-        {
-          text: "Contact us",
-          href: "https://www.nationalarchives.gov.uk/contact-us/",
-        },
-        {
-          text: "News",
-          href: "https://www.nationalarchives.gov.uk/about/news/",
-        },
-        {
-          text: "Blog",
-          href: "https://blog.nationalarchives.gov.uk/",
-        },
-        {
-          text: "Podcasts",
-          href: "https://media.nationalarchives.gov.uk/index.php/category/podcasts-2/",
-        },
-        {
-          text: "Image library",
-          href: "https://images.nationalarchives.gov.uk/",
-        },
-        {
-          text: "Press room",
-          href: "https://www.nationalarchives.gov.uk/about/press-room/",
-        },
-        {
-          text: "Jobs",
-          href: "https://www.nationalarchives.gov.uk/about/jobs/",
-        },
-        {
-          text: "British citizenship services",
-          href: "https://www.nationalarchives.gov.uk/contact-us/british-citizenship-services/",
-        },
-        {
-          text: "Historical Manuscripts Commission",
-          href: "https://www.nationalarchives.gov.uk/archives-sector/our-archives-sector-role/historical-manuscripts-commission/",
-        },
-      ],
-    },
-    {
-      title: "Other websites",
-      items: [
-        {
-          text: "UK Government Web Archive",
-          href: "https://www.nationalarchives.gov.uk/webarchive/",
-        },
-        { text: "Legislation.gov.uk", href: "https://www.legislation.gov.uk/" },
-        {
-          text: "Find case law",
-          href: "https://caselaw.nationalarchives.gov.uk/",
-        },
-        {
-          text: "The Gazette",
-          href: "https://www.thegazette.co.uk/",
-        },
-        {
-          text: "The National Archives Trust",
-          href: "https://www.nationalarchivestrust.org.uk/",
-        },
-        {
-          text: "Friends of The National Archives",
-          href: "https://ftna.org.uk/",
-        },
-      ],
-    },
-  ],
-  showNewsletter: true,
-  legal: [
-    {
-      text: "Accessibility statement",
-      href: "#/accessibility",
-    },
-    {
-      text: "Freedom of information",
-      href: "#/freedom-of-information",
-    },
-    {
-      text: "Terms and conditions",
-      href: "#/terms-and-conditions",
-    },
-    {
-      text: "Privacy policy",
-      href: "#/privacy",
-    },
-    {
-      text: "Cookies",
-      href: "#/cookies",
-    },
-  ],
-};
-
-export const Minimal = Template.bind({});
-Minimal.args = {};
-
-export const ThemeSelector = Template.bind({});
-ThemeSelector.args = {
-  themeSelector: true,
-  currentTheme: "",
-};
-ThemeSelector.decorators = [
-  (Story) => {
-    const cookies = new Cookies({ newInstance: true });
-    cookies.set("cookie_preferences_set", true);
-    cookies.acceptPolicy("settings");
-    return Story();
-  },
-];
-ThemeSelector.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const systemLightButton = canvas.getByText("System theme");
-  const themeLightButton = canvas.getByText("Light theme");
-  const darkLightButton = canvas.getByText("Dark theme");
-
-  await expect(systemLightButton).toBeVisible();
-  await expect(themeLightButton).toBeVisible();
-  await expect(darkLightButton).toBeVisible();
-};
-
-export const ThemeSelectorWithoutCookies = Template.bind({});
-ThemeSelectorWithoutCookies.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-ThemeSelectorWithoutCookies.args = {
-  themeSelector: true,
-  currentTheme: "",
-};
-ThemeSelectorWithoutCookies.decorators = [
-  (Story) => {
-    const cookies = new Cookies({ newInstance: true });
-    cookies.set("cookie_preferences_set", true);
-    cookies.rejectPolicy("settings");
-    return Story();
-  },
-];
-ThemeSelectorWithoutCookies.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const systemLightButton = canvas.getByText("System theme");
-  const themeLightButton = canvas.getByText("Light theme");
-  const darkLightButton = canvas.getByText("Dark theme");
-
-  await expect(systemLightButton).not.toBeVisible();
-  await expect(themeLightButton).not.toBeVisible();
-  await expect(darkLightButton).not.toBeVisible();
-};

package/nationalarchives/components/gallery/gallery.stories.js

@@ -1,87 +0,0 @@
-import Gallery from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  title: { control: "text" },
-  headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["s", "m", "l"] },
-  body: { control: "text" },
-  text: { control: "text" },
-  items: { control: "object" },
-  id: { 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/Gallery",
-  argTypes,
-};
-
-const Template = ({
-  title,
-  headingLevel,
-  headingSize,
-  body,
-  text,
-  items,
-  id,
-  classes,
-  attributes,
-}) =>
-  Gallery({
-    params: {
-      title,
-      headingLevel,
-      headingSize,
-      body,
-      text,
-      items,
-      id,
-      classes,
-      attributes,
-    },
-  });
-
-const exampleWidth = 600;
-const exampleHeight = 400;
-
-export const Standard = Template.bind({});
-Standard.args = {
-  title: "My gallery",
-  headingLevel: 3,
-  text: "Lorem ipsum",
-  items: Array(24)
-    .fill({
-      alt: "",
-      width: "",
-      height: "",
-    })
-    .map((item, index) => ({
-      ...item,
-      src: `https://picsum.photos/id/${index + 50}/${
-        index % 3 === 0
-          ? `${exampleWidth}/${exampleHeight}`
-          : index % 3 === 1
-            ? `${exampleWidth}/${exampleWidth}`
-            : `${exampleHeight}/${exampleWidth}`
-      }`,
-      width: index % 3 === 0 ? exampleWidth : exampleHeight,
-      height:
-        index % 3 === 0
-          ? exampleHeight
-          : index % 3 === 1
-            ? exampleHeight
-            : exampleWidth,
-      alt: `Photo ${index + 1}`,
-      description: `This is photo number ${index + 1}`,
-    })),
-  id: "test",
-  classes: "tna-gallery--demo",
-};