Initial commit of form and search elements

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

@@ -38,6 +38,7 @@ runs:
         echo -e "{% from \"nationalarchives/components/breadcrumbs/macro.njk\" import tnaBreadcrumbs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/button/macro.njk\" import tnaButton %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         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/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -51,16 +52,23 @@ runs:
         echo -e "{% from \"nationalarchives/components/phase-banner/macro.njk\" import tnaPhaseBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/picture/macro.njk\" import tnaPicture %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/profile/macro.njk\" import tnaProfile %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/radios/macro.njk\" import tnaRadios %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
         echo -e "{% from \"nationalarchives/components/sensitive-image/macro.njk\" import tnaSensitiveImage %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/search-field/macro.njk\" import tnaSearchField %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/search-result/macro.njk\" import tnaSearchResult %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/search-view/macro.njk\" import tnaSearchView %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/select/macro.njk\" import tnaSelect %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
         echo -e "{% from \"nationalarchives/components/skip-link/macro.njk\" import tnaSkipLink %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/tabs/macro.njk\" import tnaTabs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
+        echo -e "{% from \"nationalarchives/components/text-input/macro.njk\" import tnaTextInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
       shell: bash
     - name: Add components to template
       run: >
         echo "\n{% block bodyEnd %}" >> prototype/app/views/index.html &&
         echo "{{ tnaBreadcrumbs({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaButton({text:\"I am a button\",url:\"#\"}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaCard({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaCheckboxes({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
@@ -74,9 +82,15 @@ runs:
         echo "{{ tnaPhaseBanner({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPicture({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaProfile({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaRadios({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSensitiveImage({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaSearchField({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaSearchResult({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaSearchView({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaSelect({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSkipLink({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaTabs({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaTextInput({}) }}" >> prototype/app/views/index.html &&
         echo "{% endblock %}" >> prototype/app/views/index.html
       shell: bash
     - name: Run prototype

src/nationalarchives/components/_index.scss

@@ -1,6 +1,7 @@
 @use "breadcrumbs";
 @use "button";
 @use "card";
+@use "checkboxes";
 @use "cookie-banner";
 @use "filters";
 @use "footer";
@@ -14,6 +15,12 @@
 @use "phase-banner";
 @use "picture";
 @use "profile";
+@use "radios";
 @use "sensitive-image";
+@use "search-field";
+@use "search-result";
+@use "search-view";
+@use "select";
 @use "skip-link";
 @use "tabs";
+@use "text-input";

src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs

@@ -42,7 +42,7 @@ export class Breadcrumbs {
       const $expandButton = document.createElement("button");
       $expandButton.classList.add("tna-breadcrumbs__link");
       $expandButton.innerHTML =
-        "<span class='tna-visually-hidden'>Expand breadcrumbs</span>&hellip;";
+        "<span class='tna-!--visually-hidden'>Expand breadcrumbs</span>&hellip;";
       $expandButton.setAttribute("aria-expanded", "false");
       $expandButton.setAttribute("aria-controls", uniqueId);
       $expandButton.addEventListener("click", () => {

src/nationalarchives/components/breadcrumbs/template.njk

@@ -2,7 +2,7 @@
 {%- if params.noCollapse -%}
   {%- set containerClasses = containerClasses.concat('tna-breadcrumbs--no-collapse') -%}
 {%- endif -%}
-<div class="tna-breadcrumbs {{ containerClasses | join(' ') }}" data-module="tna-breadcrumbs" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="tna-breadcrumbs {{ containerClasses | join(' ') }}" data-module="tna-breadcrumbs"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
     <nav class="tna-breadcrumbs__wrapper tna-column tna-column--full" aria-label="Breadcrumb">
       <ol class="tna-breadcrumbs__list">

src/nationalarchives/components/button/_button-group.scss

@@ -13,4 +13,8 @@
     flex-direction: column;
     align-items: stretch;
   }
+
+  &--small {
+    gap: 0.5rem;
+  }
 }

src/nationalarchives/components/button/button.scss

@@ -10,11 +10,9 @@
 
   display: inline-block;
 
-  @include typography.relative-font-size(18);
   @include typography.main-font-weight-bold;
   text-decoration: none;
   text-align: center;
-  line-height: #{math.div(16, 18) * 2};
 
   @include colour.colour-background("button-background");
 
@@ -27,6 +25,13 @@
 
   cursor: pointer;
 
+  &,
+  .fa-solid,
+  .fa-brands {
+    @include typography.relative-font-size(18);
+    line-height: #{math.div(16, 18) * 2};
+  }
+
   &,
   &:link,
   &:visited {
@@ -63,12 +68,6 @@
     }
   }
 
-  &--small {
-    padding: 0.125rem 0.5rem;
-
-    @include typography.relative-font-size(14);
-  }
-
   &--accent {
     @include colour.colour-background("button-accent-background");
 
@@ -85,6 +84,66 @@
     }
   }
 
+  &--icon-right {
+    .fa-solid,
+    .fa-brands {
+      margin-left: 0.5rem;
+      margin-right: 0;
+    }
+  }
+
+  .fa-solid,
+  .fa-brands {
+    min-width: 1.25rem;
+    margin-right: 0.5rem;
+  }
+
+  &--small,
+  &-group--small & {
+    padding: 0.125rem 0.5rem;
+
+    &,
+    .fa-solid,
+    .fa-brands {
+      @include typography.relative-font-size(14);
+    }
+  }
+
+  @mixin icon-only {
+    font-size: 0;
+
+    .fa-solid,
+    .fa-brands {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+
+  @mixin icon-only-small {
+    padding-right: 0.25rem;
+    padding-left: 0.25rem;
+  }
+
+  &--icon-only:has(.fa-solid, .fa-brands) {
+    @include icon-only;
+  }
+
+  &--small#{&}--icon-only:has(.fa-solid, .fa-brands),
+  &-group--small &--icon-only:has(.fa-solid, .fa-brands) {
+    @include icon-only-small;
+  }
+
+  @include media.on-mobile {
+    &--icon-only-mobile:has(.fa-solid, .fa-brands) {
+      @include icon-only;
+    }
+
+    &--small#{&}--icon-only-mobile:has(.fa-solid, .fa-brands),
+    &-group--small &--icon-only-mobile:has(.fa-solid, .fa-brands) {
+      @include icon-only-small;
+    }
+  }
+
   &--solid-hover,
   .tna-background--accent-light &,
   .tna-background--accent &:not(.tna-button--accent) {
@@ -112,9 +171,4 @@
       @include colour.colour-background("font-dark");
     }
   }
-
-  .fa-solid,
-  .fa-brands {
-    margin-right: 0.5rem;
-  }
 }

src/nationalarchives/components/button/button.stories.js

@@ -10,6 +10,7 @@ const argTypes = {
   accent: { control: "boolean" },
   small: { control: "boolean" },
   plain: { control: "boolean" },
+  iconOnly: { control: "boolean" },
   buttonElement: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -35,6 +36,7 @@ const Template = ({
   accent,
   small,
   plain,
+  iconOnly,
   buttonElement,
   classes,
   attributes,
@@ -49,6 +51,7 @@ const Template = ({
       accent,
       small,
       plain,
+      iconOnly,
       buttonElement,
       classes,
       attributes,
@@ -95,6 +98,15 @@ BrandIcon.args = {
   classes: "tna-button--demo",
 };
 
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+  text: "Show as a list",
+  href: "#",
+  icon: "list",
+  iconOnly: true,
+  classes: "tna-button--demo",
+};
+
 export const Small = Template.bind({});
 Small.args = {
   text: "Small button",

src/nationalarchives/components/button/template.njk

@@ -8,7 +8,10 @@
 {%- if params.plain -%}
   {%- set buttonClasses = buttonClasses.concat('tna-button--plain') -%}
 {%- endif -%}
-<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if not params.buttonElement %} role="button"{%- endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- if params.iconOnly -%}
+  {%- set buttonClasses = buttonClasses.concat('tna-button--icon-only') -%}
+{%- endif -%}
+<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if not params.buttonElement %} role="button"{%- endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.brandIcon -%}
   <i class="fa-brands fa-{{ params.brandIcon }}"></i>
   {%- elseif params.icon -%}

src/nationalarchives/components/card/template.njk

@@ -8,7 +8,7 @@
 {%- elseif params.style == "accent" -%}
   {%- set containerClasses = containerClasses.concat('tna-card--accent') -%}
 {%- endif -%}
-<{{ htmlElement }} class="tna-card {{ containerClasses | join(' ') }}" data-module="tna-card" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<{{ htmlElement }} class="tna-card {{ containerClasses | join(' ') }}" data-module="tna-card"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-card__inner">
   {%- if params.supertitle -%}
     <hgroup class="tna-hgroup tna-hgroup--{{ params.headingSize or 's' }} tna-card__heading">

src/nationalarchives/components/checkboxes/_index.scss

@@ -0,0 +1 @@
+@use "checkboxes";

src/nationalarchives/components/checkboxes/checkboxes.scss

@@ -0,0 +1,93 @@
+@use "../../tools/colour";
+@use "../../utilities/a11y";
+@use "../../utilities";
+
+.tna-checkboxes {
+  margin-top: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__item {
+    padding-left: 3rem;
+
+    position: relative;
+
+    line-height: 2rem;
+
+    input {
+      width: 1px;
+      height: 1px;
+      margin: 0;
+      padding: 0;
+
+      position: absolute;
+      top: -1px;
+      left: -1px;
+
+      opacity: 0;
+    }
+
+    &-label {
+      cursor: pointer;
+
+      &::before,
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        content: "";
+      }
+
+      &::before {
+        width: 2rem;
+        height: 2rem;
+
+        display: block;
+        box-sizing: border-box;
+
+        z-index: 1;
+
+        @include colour.colour-background("background");
+
+        @include colour.colour-border("keyline-dark", 3px);
+      }
+
+      &::after {
+        width: 1rem;
+        height: 1rem;
+        margin: 0.25rem 0.375rem;
+
+        display: none;
+
+        z-index: 2;
+
+        @include colour.colour-font("font-dark");
+        font-size: 1.5rem;
+        /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+        font-family: "Font Awesome 6 Free";
+        -webkit-font-smoothing: antialiased;
+        font-style: normal;
+        font-variant: normal;
+        line-height: 1;
+        text-rendering: auto;
+
+        content: "\f00c";
+      }
+    }
+
+    input:focus + &-label {
+      &::before {
+        @include a11y.focus-outline;
+      }
+    }
+
+    input:checked + &-label {
+      &::after {
+        display: var(--fa-display, inline-block);
+      }
+    }
+  }
+}