@nationalarchives/frontend 0.1.24-prerelease → 0.1.26-prerelease

package/nationalarchives/components/checkboxes/checkboxes.scss

@@ -0,0 +1,143 @@
+@use "../../variables/forms";
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../utilities/a11y";
+@use "../../utilities";
+
+.tna-checkboxes {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+
+  &__item {
+    position: relative;
+
+    input {
+      width: 1px;
+      height: 1px;
+      margin: 0;
+      padding: 0;
+
+      position: absolute;
+      top: -1px;
+      left: -1px;
+
+      opacity: 0;
+    }
+
+    &-label {
+      padding-left: 3rem;
+
+      display: block;
+
+      line-height: 2rem;
+
+      cursor: pointer;
+
+      &::before,
+      &::after {
+        width: 2rem;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        content: "";
+      }
+
+      &::before {
+        height: 2rem;
+
+        display: block;
+        box-sizing: border-box;
+
+        z-index: 1;
+
+        @include colour.colour-background("input-background");
+
+        @include colour.colour-border(
+          "input-border",
+          forms.$form-field-border-width
+        );
+      }
+
+      &::after {
+        width: 1.25rem;
+        height: 0.5rem;
+        margin-top: -0.1875rem;
+
+        display: none;
+
+        top: 1rem;
+        left: 1rem;
+        z-index: 2;
+
+        @include colour.colour-border("input-background", 0, solid);
+        border-width: 0 0 forms.$checkbox-checkmark-width
+          forms.$checkbox-checkmark-width;
+
+        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
+      }
+    }
+  }
+
+  &--small {
+    gap: 0.5rem;
+  }
+
+  &--small &__item {
+    &-label {
+      padding-left: 2.5rem;
+
+      line-height: 1.5rem;
+
+      &::before {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      &::after {
+        width: 0.825rem;
+        height: 0.375rem;
+        margin-top: -0.125rem;
+
+        top: 0.75rem;
+        left: 0.75rem;
+      }
+    }
+  }
+
+  &--inline {
+    flex-flow: row wrap;
+    align-items: center;
+    gap: 1rem 2rem;
+
+    @include media.on-tiny {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  input:focus + &__item-label {
+    &::before {
+      @include a11y.focus-outline;
+    }
+  }
+
+  input:checked + &__item-label {
+    &::before {
+      @include colour.colour-background("input-foreground");
+    }
+
+    &::after {
+      display: block;
+    }
+  }
+
+  &--small &__item:hover &__item-label {
+    &::before {
+      box-shadow: 0 0 0 0.125rem var(--input-border);
+    }
+  }
+}

package/nationalarchives/components/checkboxes/checkboxes.stories.js

@@ -0,0 +1,238 @@
+import Checkboxes 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: ["s", "m", "l", "xl"] },
+  id: { control: "text" },
+  name: { control: "text" },
+  hint: { control: "text" },
+  error: { control: "object" },
+  items: { control: "object" },
+  small: { control: "boolean" },
+  inline: { 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/Checkboxes",
+  argTypes,
+};
+
+const Template = ({
+  label,
+  headingLevel,
+  headingSize,
+  id,
+  name,
+  hint,
+  error,
+  items,
+  small,
+  inline,
+  classes,
+  attributes,
+}) =>
+  Checkboxes({
+    params: {
+      label,
+      headingLevel,
+      headingSize,
+      id,
+      name,
+      hint,
+      error,
+      items,
+      small,
+      inline,
+      classes,
+      attributes,
+    },
+  });
+
+export const Standard = Template.bind({});
+Standard.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories1",
+  name: "categories1",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha",
+    },
+    {
+      text: "Beta",
+      value: "beta",
+    },
+    {
+      text: "Gamma",
+      value: "gamma",
+    },
+  ],
+  classes: "tna-checkboxes--demo",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories2",
+  name: "categories2",
+  items: [
+    {
+      text: "Admiralty, Navy, Royal Marines, and Coastguard",
+      value: "ADM",
+    },
+    {
+      text: "Air Ministry and Royal Air Force records",
+      value: "AIR",
+    },
+    {
+      text: "Board of Trade and successors",
+      value: "BT",
+    },
+    {
+      text: "Chancery, the Wardrobe, Royal Household, Exchequer and various commissions",
+      value: "C",
+    },
+    {
+      text: "Colonial Office, Commonwealth and Foreign and Commonwealth Offices",
+      value: "CO",
+    },
+    {
+      text: "Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations",
+      value: "E",
+    },
+    {
+      text: "Foreign Office",
+      value: "FO",
+    },
+    {
+      text: "Home Office",
+      value: "HO",
+    },
+    {
+      text: "Prerogative Court of Canterbury",
+      value: "PROB",
+    },
+    {
+      text: "War Office, Armed Forces, Judge Advocate General, and related bodies",
+      value: "WO",
+    },
+  ],
+  small: true,
+  classes: "tna-checkboxes--demo",
+};
+
+export const Preselected = Template.bind({});
+Preselected.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories3",
+  name: "categories3",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha",
+    },
+    {
+      text: "Beta",
+      value: "beta",
+      checked: true,
+    },
+    {
+      text: "Gamma",
+      value: "gamma",
+    },
+  ],
+  classes: "tna-checkboxes--demo",
+};
+
+export const WithHint = Template.bind({});
+WithHint.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories4",
+  name: "categories4",
+  hint: "Select all that apply.",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha",
+    },
+    {
+      text: "Beta",
+      value: "beta",
+    },
+    {
+      text: "Gamma",
+      value: "gamma",
+    },
+  ],
+  classes: "tna-checkboxes--demo",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories5",
+  name: "categories5",
+  error: {
+    text: "You must select a category",
+  },
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha",
+    },
+    {
+      text: "Beta",
+      value: "beta",
+    },
+    {
+      text: "Gamma",
+      value: "gamma",
+    },
+  ],
+  classes: "tna-checkboxes--demo",
+};
+
+export const Inline = Template.bind({});
+Inline.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "xs",
+  id: "categories6",
+  name: "categories6",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha",
+    },
+    {
+      text: "Beta",
+      value: "beta",
+    },
+    {
+      text: "Gamma",
+      value: "gamma",
+    },
+  ],
+  inline: true,
+  classes: "tna-checkboxes--demo",
+};

package/nationalarchives/components/checkboxes/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "checkboxes",
+  "fixtures": []
+}

package/nationalarchives/components/checkboxes/macro-options.json

@@ -0,0 +1,102 @@
+[
+  {
+    "name": "label",
+    "type": "text",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "headingLevel",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "headingSize",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "id",
+    "type": "text",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "name",
+    "type": "text",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "hint",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "error",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "text",
+        "required": true,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "text",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "value",
+        "type": "text",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "checked",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "small",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "inline",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the checkboxes."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the checkboxes."
+  }
+]

package/nationalarchives/components/checkboxes/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaCheckboxes(params) %}
+  {%- include "nationalarchives/components/checkboxes/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/checkboxes/template.njk

@@ -0,0 +1,35 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- if params.inline -%}
+  {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
+{%- endif -%}
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ params.id }}-error{%- endif -%}"{%- endif %}>
+    <div class="tna-form__group-contents">
+      <legend class="tna-form__legend tna-form__group-contents">
+        <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
+          {{ params.label }}
+        </h{{ params.headingLevel }}>
+      </legend>
+      {%- if params.hint %}
+      <p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
+        {{ params.hint }}
+      </p>
+      {%- endif %}
+      {%- if params.error %}
+      <p id="tna-form__{{ params.id }}-error" class="tna-form__error-message">
+        <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
+      </p>
+      {%- endif %}
+    </div>
+    <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+      {%- for item in params.items %}
+      <div class="tna-checkboxes__item">
+        <input type="checkbox" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% if item.checked %} checked{% endif %}>
+        <label for="tna-form__{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
+          {{ item.text }}
+        </label>
+      </div>
+      {%- endfor %}
+    </div>
+  </fieldset>
+</div>