@nationalarchives/frontend 0.1.65 → 0.2.0

package/nationalarchives/components/search-filters/search-filters.scss

@@ -1,198 +0,0 @@
-@use "sass:math";
-
-@use "../../tools/colour";
-@use "../../tools/media";
-@use "../../tools/spacing";
-@use "../../tools/typography";
-
-.tna-search-filters {
-  @include spacing.space-above;
-
-  &__title {
-  }
-
-  &__update {
-    display: block;
-  }
-
-  .tna-heading-s {
-    margin: 0;
-    padding: 0;
-  }
-
-  &__fieldset {
-    border: none;
-  }
-
-  &__legend {
-    width: 100%;
-  }
-
-  &__heading-inner,
-  &__item-toggle {
-    padding: spacing.space(0.5) spacing.space(0.75);
-
-    @include colour.colour-border("keyline", 1px, solid);
-    border-bottom-width: 0;
-  }
-
-  &__heading-inner {
-    margin-top: spacing.space(1);
-    padding: spacing.space(0.5) spacing.space(0.75);
-  }
-
-  &__item-toggle {
-    width: 100%;
-    margin: 0;
-    padding-right: spacing.space(2.5);
-
-    display: block;
-
-    position: relative;
-
-    color: inherit;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-
-    background: none;
-
-    cursor: pointer;
-
-    &::before {
-      content: "";
-
-      width: 0;
-      height: 0;
-
-      position: absolute;
-      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
-      right: spacing.space(0.75);
-
-      border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;
-      border-color: colour.colour-var("font-light") transparent transparent
-        transparent;
-      border-style: solid;
-    }
-
-    &:hover,
-    &:active {
-      @include typography.interacted-text-decoration;
-
-      background: none;
-
-      &::before {
-        border-top-color: colour.colour-var("font-dark");
-      }
-    }
-
-    &[aria-expanded="true"] {
-      &::before {
-        top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);
-
-        border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;
-        border-color: transparent transparent colour.colour-var("font-light")
-          transparent;
-      }
-
-      &:hover {
-        &::before {
-          border-bottom-color: colour.colour-var("font-dark");
-        }
-      }
-    }
-  }
-
-  &__item-toggle-label {
-  }
-
-  &__item-toggle-info {
-    display: block;
-
-    @include typography.main-font-weight;
-    @include typography.font-size(14);
-  }
-
-  &__item {
-    padding: spacing.space(0.75);
-
-    @include colour.tint;
-
-    @include colour.colour-border("keyline", 1px);
-    border-width: 0 1px 1px;
-  }
-
-  &__hint {
-    margin-bottom: spacing.space(0.75);
-
-    @include typography.font-size(16);
-    @include colour.colour-font("font-light");
-  }
-
-  &__inline-fields {
-    display: flex;
-    flex-wrap: wrap;
-    gap: spacing.space(0.5) spacing.space(2);
-  }
-
-  &__label {
-    display: block;
-  }
-
-  &__footer {
-    padding: spacing.space(0.75);
-
-    display: none;
-
-    @include colour.colour-border("keyline", 1px);
-  }
-
-  &--js-enabled &__title {
-    margin-bottom: spacing.space(1);
-  }
-
-  &--js-enabled &__footer {
-    display: block;
-  }
-
-  &--js-enabled &__item {
-    border-bottom: none;
-  }
-
-  &--js-enabled &__update-item {
-    display: none;
-  }
-
-  &__fieldset[data-type="multiple"] &__item {
-    max-height: 15rem;
-
-    overflow: auto;
-  }
-
-  @include colour.on-forced-colours {
-    &__item-toggle {
-      &::before {
-        content: "\2193";
-
-        width: auto;
-        height: auto;
-
-        top: calc(50% - 0.5rem);
-
-        line-height: 1rem;
-
-        border: none;
-      }
-
-      &[aria-expanded="true"] {
-        &::before {
-          content: "\2191";
-
-          border: none;
-        }
-      }
-    }
-  }
-}

package/nationalarchives/components/search-filters/search-filters.stories.js

@@ -1,207 +0,0 @@
-import Filters from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  title: { control: "text" },
-  rootHeadingLevel: { control: { type: "number", min: 1, max: 6 } },
-  formId: { control: "text" },
-  items: { control: "object" },
-  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/Search filters",
-  argTypes,
-};
-
-const Template = ({
-  title,
-  rootHeadingLevel,
-  formId,
-  items,
-  classes,
-  attributes,
-}) =>
-  Filters({
-    params: {
-      title,
-      rootHeadingLevel,
-      formId,
-      items,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  title: "Filters",
-  rootHeadingLevel: 2,
-  formId: "test-form",
-  items: [
-    {
-      type: "text",
-      label: "Refine",
-      id: "refine1",
-      name: "refine1",
-      // open: true,
-      hint: "Search within the current results",
-    },
-    // {
-    //   type: "single",
-    //   label: "Type",
-    //   id: "type1",
-    //   name: "type1",
-    //   small: true,
-    //   // open: true,
-    //   hint: "You can only select one.",
-    //   items: [
-    //     {
-    //       text: "Audio",
-    //       value: "audio",
-    //     },
-    //     {
-    //       text: "Image",
-    //       value: "image",
-    //     },
-    //     {
-    //       text: "Video",
-    //       value: "video",
-    //     },
-    //   ],
-    // },
-    {
-      type: "multiple",
-      label: "Category",
-      id: "categories1",
-      name: "categories1",
-      small: true,
-      // open: true,
-      hint: "The category of the record",
-      // count: 2,
-      seeMoreText: "See all 29 categories",
-      seeMoreUrl: "#",
-      items: [
-        {
-          text: "Alpha",
-          value: "alpha",
-        },
-        {
-          text: "Beta",
-          value: "beta",
-          // checked: true,
-        },
-        {
-          text: "Gamma",
-          value: "gamma",
-        },
-      ],
-    },
-    {
-      type: "date",
-      label: "Opening date",
-      id: "date1",
-      name: "date1",
-      hint: "The earliest opening date of the record",
-    },
-    {
-      type: "daterange",
-      label: "Covering date",
-      id: "dates",
-      hint: "The earliest and/or latest covering date of the record",
-      // open: true,
-      from: {
-        label: "From",
-        id: "date2",
-        name: "date2",
-      },
-      to: {
-        label: "To",
-        id: "date3",
-        name: "date3",
-      },
-    },
-  ],
-  classes: "tna-search-filters--demo",
-};
-
-export const OpenedAndPrepopulated = Template.bind({});
-OpenedAndPrepopulated.args = {
-  title: "Filters",
-  rootHeadingLevel: 2,
-  formId: "test-form",
-  items: [
-    {
-      type: "text",
-      label: "Refine",
-      id: "refine1",
-      name: "refine1",
-      open: true,
-      hint: "Search within the current results",
-      value: "iceberg",
-    },
-    {
-      type: "multiple",
-      label: "Category",
-      id: "categories1",
-      name: "categories1",
-      small: true,
-      open: true,
-      hint: "The category of the record",
-      seeMoreText: "See all 29 categories",
-      seeMoreUrl: "#",
-      items: [
-        {
-          text: "Alpha",
-          value: "alpha",
-        },
-        {
-          text: "Beta",
-          value: "beta",
-          checked: true,
-        },
-        {
-          text: "Gamma",
-          value: "gamma",
-          checked: true,
-        },
-      ],
-    },
-    {
-      type: "date",
-      label: "Opening date",
-      id: "date1",
-      name: "date1",
-      hint: "The earliest opening date of the record",
-      open: true,
-      value: "1969-07-16",
-    },
-    {
-      type: "daterange",
-      label: "Covering date",
-      id: "dates",
-      hint: "The earliest and/or latest covering date of the record",
-      open: true,
-      from: {
-        label: "From",
-        id: "date2",
-        name: "date2",
-        value: "1912-04-14",
-      },
-      to: {
-        label: "To",
-        id: "date3",
-        name: "date3",
-        value: "1912-04-15",
-      },
-    },
-  ],
-  classes: "tna-search-filters--demo",
-};

package/nationalarchives/components/search-filters/template.njk

@@ -1,108 +0,0 @@
-{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
-{% from "nationalarchives/components/checkboxes/checkboxes.njk" import tnaCheckboxesElement %}
-{% from "nationalarchives/components/date-search/date-search.njk" import tnaDateSearchElement %}
-{% from "nationalarchives/components/radios/radios.njk" import tnaRadiosElement %}
-{% from "nationalarchives/components/text-input/text-input.njk" import tnaTextInputElement %}
-
-{%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- set classes = containerClasses | join(' ') -%}
-<div class="tna-search-filters{% if classes %} {{ classes }}{% endif %}" data-module="tna-search-filters"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-  <h{{ params.rootHeadingLevel }} class="tna-heading-m tna-search-filters__title">
-    {{ params.title }}
-  </h{{ params.rootHeadingLevel }}>
-  {%- for filter in params.items %}
-  <fieldset class="tna-search-filters__fieldset" {%- if filter.hint and (filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange') %} aria-describedby="{{ filter.id }}-hint"{% endif %} data-type="{{ filter.type }}">
-    <legend class="tna-search-filters__legend">
-      <h{{ params.rootHeadingLevel + 1 }} class="tna-heading-s">
-        <div class="tna-search-filters__heading-inner">
-          {% if filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange' %}
-          {{ filter.label }}
-          {% else %}
-          <label for="{{ filter.id }}">
-            {{ filter.label }}
-          </label>
-          {% endif %}
-        </div>
-        <button class="tna-search-filters__item-toggle" aria-controls="{{ filter.id }}-wrapper" aria-expanded="{{ filter.open or false }}" hidden>
-          {% if filter.type == 'single' or filter.type == 'multiple' or filter.type == 'daterange' %}
-          <span class="tna-search-filters__item-toggle-label">
-            {{ filter.label }}
-          </span>
-          {% else %}
-          <label class="tna-search-filters__item-toggle-label" for="{{ filter.id }}">
-            {{ filter.label }}
-          </label>
-          {% endif %}
-          {% if filter.count %}
-          <span class="tna-search-filters__item-toggle-info">({{ filter.count }} selected)</span>
-          {% else %}
-          <span class="tna-search-filters__item-toggle-info"></span>
-          {% endif %}
-        </button>
-      </h{{ params.rootHeadingLevel + 1 }}>
-    </legend>
-    <div id="{{ filter.id }}-wrapper" class="tna-search-filters__item">
-      {%- if filter.hint %}
-      <p id="{{ filter.id }}-hint" class="tna-search-filters__hint">
-        {{ filter.hint }}
-      </p>
-      {%- endif %}
-      {% if filter.type == 'single' %}
-      {{ tnaRadiosElement(filter, { form: params.formId }) }}
-      {% elif filter.type == 'multiple' %}
-      {{ tnaCheckboxesElement(filter, { form: params.formId }) }}
-      <div class="tna-button-group tna-button-group--small tna-!--margin-top-xs">
-        {{ tnaButton({
-          text: filter.seeMoreText or 'See more',
-          href: filter.seeMoreUrl,
-          plain: true
-        }) }}
-      </div>
-      {% elif filter.type == 'text' %}
-      {{ tnaTextInputElement(filter, { form: params.formId }) }}
-      {% elif filter.type == 'date' %}
-      {{ tnaDateSearchElement(filter, { form: params.formId }) }}
-      {% elif filter.type == 'daterange' %}
-      <div class="tna-search-filters__inline-fields">
-        <label class="tna-search-filters__label">
-          {{ filter.from.label }}
-          {{ tnaDateSearchElement(filter.from, { form: params.formId }) }}
-        </label>
-        <label class="tna-search-filters__label">
-          {{ filter.to.label }}
-          {{ tnaDateSearchElement(filter.to, { form: params.formId }) }}
-        </label>
-      </div>
-      {% endif %}
-      <div class="tna-button-group tna-button-group--small tna-search-filters__update-item tna-!--margin-top-s">
-        {{ tnaButton({
-          text: 'Update',
-          buttonElement: true,
-          buttonType: 'submit',
-          attributes: {
-            form: params.formId
-          }
-        }) }}
-      </div>
-    </div>
-  </fieldset>
-  {%- endfor %}
-  <div class="tna-search-filters__footer">
-    <div class="tna-button-group tna-button-group--small">
-      {{ tnaButton({
-        text: 'Update',
-        buttonElement: true,
-        buttonType: 'submit',
-        classes: 'tna-search-filters__update',
-        attributes: {
-          form: params.formId
-        }
-      }) }}
-      {{ tnaButton({
-        text: 'Clear all filters',
-        href: '#',
-        plain: true
-      }) }}
-    </div>
-  </div>
-</div>

package/nationalarchives/components/select/select.stories.js

@@ -1,197 +0,0 @@
-import Select from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  label: { control: "text" },
-  headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: {
-    control: "inline-radio",
-    options: ["xs", "s", "m", "l", "xl"],
-  },
-  id: { control: "text" },
-  name: { control: "text" },
-  hint: { control: "text" },
-  error: { control: "object" },
-  items: { control: "object" },
-  selected: { control: "text" },
-  size: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
-  inline: { control: "boolean" },
-  formGroupClasses: { control: "text" },
-  formGroupAttributes: { control: "object" },
-  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/Select",
-  argTypes,
-};
-
-const Template = ({
-  label,
-  headingLevel,
-  headingSize,
-  id,
-  name,
-  hint,
-  error,
-  items,
-  selected,
-  size,
-  inline,
-  formGroupClasses,
-  formGroupAttributes,
-  classes,
-  attributes,
-}) =>
-  Select({
-    params: {
-      label,
-      headingLevel,
-      headingSize,
-      id,
-      name,
-      hint,
-      error,
-      items,
-      selected,
-      size,
-      inline,
-      formGroupClasses,
-      formGroupAttributes,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  label: "Sort by",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "sort1",
-  name: "sort1",
-  items: [
-    {
-      text: "Relevance",
-      value: "relevance",
-    },
-    {
-      text: "Date",
-      value: "date",
-    },
-    {
-      text: "Title",
-      value: "title",
-    },
-  ],
-  classes: "tna-select--demo",
-};
-
-export const Preselected = Template.bind({});
-Preselected.args = {
-  label: "Sort by",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "sort2",
-  name: "sort2",
-  items: [
-    {
-      text: "Relevance",
-      value: "relevance",
-    },
-    {
-      text: "Date",
-      value: "date",
-    },
-    {
-      text: "Title",
-      value: "title",
-    },
-  ],
-  selected: "date",
-  classes: "tna-select--demo",
-};
-
-export const WithHint = Template.bind({});
-WithHint.args = {
-  label: "Sort by",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "sort3",
-  name: "sort3",
-  hint: "Select a sort.",
-  items: [
-    {
-      text: "Relevance",
-      value: "relevance",
-    },
-    {
-      text: "Date",
-      value: "date",
-    },
-    {
-      text: "Title",
-      value: "title",
-    },
-  ],
-  classes: "tna-select--demo",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  label: "Sort by",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "sort4",
-  name: "sort4",
-  error: {
-    text: "You must select a type",
-  },
-  items: [
-    {
-      text: "Relevance",
-      value: "relevance",
-    },
-    {
-      text: "Date",
-      value: "date",
-    },
-    {
-      text: "Title",
-      value: "title",
-    },
-  ],
-  classes: "tna-select--demo",
-};
-
-export const Inline = Template.bind({});
-Inline.args = {
-  label: "Sort by",
-  headingLevel: 4,
-  headingSize: "xs",
-  id: "sort5",
-  name: "sort5",
-  items: [
-    {
-      text: "Relevance",
-      value: "relevance",
-    },
-    {
-      text: "Date",
-      value: "date",
-    },
-    {
-      text: "Title",
-      value: "title",
-    },
-  ],
-  inline: true,
-  classes: "tna-select--demo",
-};

package/nationalarchives/components/sensitive-image/_index.scss

@@ -1 +0,0 @@
-@use "sensitive-image";