Add date input coomponent

.github/actions/prototype-kit-test/action.yml

@@ -40,6 +40,7 @@ runs:
         echo -e "{% from \"nationalarchives/components/card/macro.njk\" import tnaCard %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/checkboxes/macro.njk\" import tnaCheckboxes %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/cookie-banner/macro.njk\" import tnaCookieBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/date-input/macro.njk\" import tnaDateInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/date-search/macro.njk\" import tnaDateSearch %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -70,6 +71,7 @@ runs:
         echo "{{ tnaCard({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaCheckboxes({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaDateInput({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&

.storybook/test-runner.js

@@ -65,7 +65,7 @@ const { injectAxe, checkA11y } = require("axe-playwright");
 const DEFAULT_VP_SIZE = { width: 1280, height: 720 };
 
 module.exports = {
-  async preRender(page, story) {
+  async preVisit(page, story) {
     const context = await getStoryContext(page, story);
     const vpName = context.parameters?.viewport?.defaultViewport;
     const vpParams = customViewports[vpName];
@@ -85,7 +85,7 @@ module.exports = {
     }
     await injectAxe(page);
   },
-  async postRender(page, story) {
+  async postVisit(page) {
     await checkA11y(page, "#storybook-root", a11yConfig, "v2");
   },
 };

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Form element components have been added: checkboxes, date search, search field, select, text input and textarea
+- Form element components have been added: checkboxes, date input, date search, radios, search field, select, text input and textarea
 - High contrast support for chip lists with icons
 - Allow custom cookie path to be passed to cookie banner
 

src/nationalarchives/components/_index.scss

@@ -3,6 +3,7 @@
 @use "card";
 @use "checkboxes";
 @use "cookie-banner";
+@use "date-input";
 @use "date-search";
 @use "featured-records";
 @use "filters";

src/nationalarchives/components/date-input/_index.scss

@@ -0,0 +1 @@
+@use "date-input";

src/nationalarchives/components/date-input/date-input.scss

@@ -0,0 +1,48 @@
+@use "../../variables/forms";
+@use "../../tools/colour";
+@use "../../tools/typography";
+@use "../../utilities";
+
+.tna-date-input {
+  display: flex;
+  gap: 1rem;
+
+  &__item {
+    &-label {
+      display: block;
+
+      @include typography.relative-font-size(16);
+    }
+
+    &-input {
+      width: 3rem;
+      padding: 0 0.375rem;
+
+      display: block;
+      box-sizing: border-box;
+
+      @include colour.colour-font("input-foreground");
+      font-size: inherit;
+      line-height: 2rem;
+
+      @include colour.colour-background("input-background");
+
+      @include colour.colour-border(
+        "input-border",
+        forms.$form-field-border-width
+      );
+      border-radius: 0;
+
+      &--wider {
+        width: 4.5rem;
+      }
+
+      .tna-form__group--error & {
+        @include colour.colour-border("form-error");
+      }
+    }
+  }
+
+  &--inline {
+  }
+}

src/nationalarchives/components/date-input/date-input.stories.js

@@ -0,0 +1,122 @@
+import DateInput 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" },
+  value: { control: "object" },
+  error: { control: "object" },
+  maxWidth: { control: "boolean" },
+  inline: { control: "boolean" },
+  classes: { control: "text" },
+  formGroupClasses: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Date input",
+  argTypes,
+};
+
+const Template = ({
+  label,
+  headingLevel,
+  headingSize,
+  id,
+  name,
+  hint,
+  value,
+  error,
+  maxWidth,
+  inline,
+  classes,
+  formGroupClasses,
+  attributes,
+}) =>
+  DateInput({
+    params: {
+      label,
+      headingLevel,
+      headingSize,
+      id,
+      name,
+      hint,
+      value,
+      error,
+      maxWidth,
+      inline,
+      classes,
+      formGroupClasses,
+      attributes,
+    },
+  });
+
+export const Standard = Template.bind({});
+Standard.args = {
+  label: "Enter a start date",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "date11",
+  name: "date11",
+  classes: "tna-date-search--demo",
+};
+
+export const Predefined = Template.bind({});
+Predefined.args = {
+  label: "Enter a start date",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "date12",
+  name: "date12",
+  value: {
+    day: "24",
+    month: "09",
+    year: "1986",
+  },
+  classes: "tna-date-search--demo",
+};
+
+export const WithHint = Template.bind({});
+WithHint.args = {
+  label: "Enter a start date",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "date13",
+  name: "date13",
+  hint: "The earliest date of the record",
+  classes: "tna-date-search--demo",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: "Enter a start date",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "date14",
+  name: "date14",
+  error: {
+    text: "Date is not valid",
+  },
+  classes: "tna-date-search--demo",
+};
+
+export const Inline = Template.bind({});
+Inline.args = {
+  label: "Enter a start date",
+  headingLevel: 4,
+  headingSize: "xs",
+  id: "date15",
+  name: "date15",
+  inline: true,
+  classes: "tna-date-search--demo",
+};

src/nationalarchives/components/date-input/fixtures.json

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

src/nationalarchives/components/date-input/macro-options.json

@@ -0,0 +1,14 @@
+[
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the date date input."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the date date input."
+  }
+]

src/nationalarchives/components/date-input/macro.njk

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

src/nationalarchives/components/date-input/template.njk

@@ -0,0 +1,45 @@
+{%- 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 %} aria-describedby="tna-form__{{ params.id }}-hint"{% endif %}>
+    <div class="tna-form__group-contents">
+      <legend class="tna-form__legend">
+        <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-date-input{% if params.inline %} tna-date-input--inline{% endif %}">
+      <div class="tna-date-input__item">
+        <label for="tna-form__{{ params.id }}-day" class="tna-date-input__item-label">
+          Day
+        </label>
+        <input type="text" id="tna-form__{{ params.id }}-day" value="{{ params.value.day if params.value }}" name="{{ params.name }}-day" class="tna-date-input__item-input" type="text" inputmode="numeric">
+      </div>
+      <div class="tna-date-input__item">
+        <label for="tna-form__{{ params.id }}-month" class="tna-date-input__item-label">
+          Month
+        </label>
+        <input type="text" id="tna-form__{{ params.id }}-month" value="{{ params.value.month if params.value }}" name="{{ params.name }}-month" class="tna-date-input__item-input" type="text" inputmode="numeric">
+      </div>
+      <div class="tna-date-input__item">
+        <label for="tna-form__{{ params.id }}-year" class="tna-date-input__item-label">
+          Year
+        </label>
+        <input type="text" id="tna-form__{{ params.id }}-year" value="{{ params.value.year if params.value }}" name="{{ params.name }}-year" class="tna-date-input__item-input tna-date-input__item-input--wider" type="text" inputmode="numeric">
+      </div>
+    </div>
+  </fieldset>
+</div>

src/nationalarchives/components/date-search/macro-options.json

@@ -3,12 +3,12 @@
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the date search input."
+    "description": "Classes to add to the date date search."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the date search input."
+    "description": "HTML attributes (for example data attributes) to add to the date date search."
   }
 ]

src/nationalarchives/stories/utilities/forms/forms.mdx

@@ -1,6 +1,7 @@
 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";
@@ -13,22 +14,24 @@ import * as SearchFieldStories from "../../../components/search-field/search-fie
 
 <Canvas of={TextInputStories.Standard} />
 <Canvas of={TextareaStories.Standard} />
-<Canvas of={DateSearchStories.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={DateSearchStories.Inline} />
 <Canvas of={SelectStories.Inline} />
 <Canvas of={RadiosStories.Inline} />
 <Canvas of={CheckboxesStories.Inline} />
+<Canvas of={DateSearchStories.Inline} />
+<Canvas of={DateInputStories.Inline} />
 
 ## Structure
 

tasks/test-package.js

@@ -72,6 +72,7 @@ const checkExists = [
   ...componentFiles("card"),
   ...componentFiles("checkboxes"),
   ...componentFiles("cookie-banner", "CookieBanner"),
+  ...componentFiles("date-input"),
   ...componentFiles("date-search"),
   ...componentFiles("featured-records"),
   ...componentFiles("filters"),