Search filters (#94)

* Initial draft of search filters

* Extra attributes on search filter fields

* Accessibility fixes to search filters

* Remove some classes from compound filters

* Fix missing data in fixtures

* More updates to search filters

* More updates to search filters

* Add hover state to button

* Add opened example

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

@@ -45,7 +45,6 @@ runs:
         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/error-summary/macro.njk\" import tnaErrorSummary %}\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 &&
         echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/gallery/macro.njk\" import tnaGallery %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/global-header/macro.njk\" import tnaGlobalHeader %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -57,9 +56,11 @@ runs:
         echo -e "{% from \"nationalarchives/components/pagination/macro.njk\" import tnaPagination %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         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/quick-filters/macro.njk\" import tnaQuickFilters %}\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-filters/macro.njk\" import tnaSearchFilters %}\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 &&
@@ -79,7 +80,6 @@ runs:
         echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaErrorSummary({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
-        echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGallery({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGlobalHeader({}) }}" >> prototype/app/views/index.html &&
@@ -91,9 +91,11 @@ runs:
         echo "{{ tnaPagination({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPhaseBanner({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPicture({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaQuickFilters({}) }}" >> 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 "{{ tnaSearchFilters({}) }}" >> 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 &&

CHANGELOG.md

@@ -10,13 +10,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Error summary component
+- Initial idea for search filters
 - Allow structured data in breadcrumbs with `structuredData`
 
 ### Changed
+
+- `filters` are now `quick-filters` (and the Nunjucks has changed from `tnaFilters` to `tnaQuickFilters`)
+- Borders size around inputs has been increased
+- Removed `tna-ul tna-ul--plain` classes from compound filters
+
 ### Deprecated
 ### Removed
 
-- Removed the `tna-form__` prefix from form field IDs
+- Removed the automatic `tna-form__` prefix from form field IDs
 
 ### Fixed
 ### Security

src/nationalarchives/all.mjs

@@ -5,6 +5,7 @@ import { Gallery } from "./components/gallery/gallery.mjs";
 import { GlobalHeader } from "./components/global-header/global-header.mjs";
 import { Header } from "./components/header/header.mjs";
 import { Picture } from "./components/picture/picture.mjs";
+import { SearchFilters } from "./components/search-filters/search-filters.mjs";
 import { SensitiveImage } from "./components/sensitive-image/sensitive-image.mjs";
 import { SkipLink } from "./components/skip-link/skip-link.mjs";
 import { Tabs } from "./components/tabs/tabs.mjs";
@@ -80,6 +81,13 @@ const initAll = (options) => {
     new Picture($picture);
   });
 
+  const $searchFilters = $scope.querySelectorAll(
+    '[data-module="tna-search-filters"]',
+  );
+  $searchFilters.forEach(($searchFilter) => {
+    new SearchFilters($searchFilter);
+  });
+
   const $sensitiveImages = $scope.querySelectorAll(
     '[data-module="tna-sensitive-image"]',
   );
@@ -108,6 +116,7 @@ export {
   GlobalHeader,
   Header,
   Picture,
+  SearchFilters,
   SensitiveImage,
   SkipLink,
   Tabs,

src/nationalarchives/components/_index.scss

@@ -8,7 +8,6 @@
 @use "date-search";
 @use "error-summary";
 @use "featured-records";
-@use "filters";
 @use "footer";
 @use "gallery";
 @use "global-header";
@@ -20,9 +19,11 @@
 @use "pagination";
 @use "phase-banner";
 @use "picture";
+@use "quick-filters";
 @use "radios";
 @use "sensitive-image";
 @use "search-field";
+@use "search-filters";
 @use "select";
 @use "skip-link";
 @use "tabs";

src/nationalarchives/components/button/button.scss

@@ -22,6 +22,7 @@
   @include colour.colour-background("button-background");
 
   @include colour.colour-border("button-background", 0.25rem);
+  // border-radius: 0.1px;
 
   cursor: pointer;
 

src/nationalarchives/components/checkboxes/checkboxes.njk

@@ -0,0 +1,12 @@
+{% macro tnaCheckboxesElement(params, extraAttributes) %}
+  <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="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
+      <label for="{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
+        {{ item.text }}
+      </label>
+    </div>
+    {%- endfor %}
+  </div>
+{% endmacro %}

src/nationalarchives/components/checkboxes/checkboxes.scss

@@ -61,6 +61,7 @@
           "input-border",
           forms.$form-field-border-width
         );
+        border-radius: 0.1px;
       }
 
       &::after {

src/nationalarchives/components/checkboxes/fixtures.json

@@ -130,7 +130,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"tna-form__categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "checkboxes with an error",
@@ -158,7 +158,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" tna-form__categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "inline checkboxes",

src/nationalarchives/components/checkboxes/template.njk

@@ -1,9 +1,11 @@
+{% from "nationalarchives/components/checkboxes/checkboxes.njk" import tnaCheckboxesElement %}
+
 {%- 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.formGroupAttributes %} {{ 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 %}>
+  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
@@ -19,7 +21,8 @@
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
-    <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+    {{ tnaCheckboxesElement(params) }}
+    {# <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="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
@@ -28,6 +31,6 @@
         </label>
       </div>
       {%- endfor %}
-    </div>
+    </div> #}
   </fieldset>
 </div>

src/nationalarchives/components/compound-filters/compound-filters.scss

@@ -10,6 +10,8 @@
   align-items: center;
   gap: 0.75rem 1rem;
 
+  list-style: none;
+
   &__item {
     padding: 0 0.125rem 0 0.75rem;
 

src/nationalarchives/components/compound-filters/fixtures.json

@@ -39,7 +39,7 @@
           }
         ]
       },
-      "html": "<ul class=\"tna-compound-filters tna-ul tna-ul--plain \"><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Medieval (974—1485)</span><a href=\"#?filter=alpha\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early Modern (1485—1714)</span><a href=\"#?filter=beta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Georgians (1714—1837)</span><a href=\"#?filter=gamma\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Victorians (1837—1901)</span><a href=\"#?filter=delta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early 20th century (1901—1918)</span><a href=\"#?filter=epsilon\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Interwar (1918—1939)</span><a href=\"#?filter=zeta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Second World War (1939—1945)</span><a href=\"#?filter=eta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Postwar (1945—2000)</span><a href=\"#?filter=theta\" class=\"tna-compound-filters__link\">Remove filter</a></li></ul>"
+      "html": "<ul class=\"tna-compound-filters \"><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Medieval (974—1485)</span><a href=\"#?filter=alpha\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early Modern (1485—1714)</span><a href=\"#?filter=beta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Georgians (1714—1837)</span><a href=\"#?filter=gamma\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Victorians (1837—1901)</span><a href=\"#?filter=delta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Early 20th century (1901—1918)</span><a href=\"#?filter=epsilon\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Interwar (1918—1939)</span><a href=\"#?filter=zeta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Second World War (1939—1945)</span><a href=\"#?filter=eta\" class=\"tna-compound-filters__link\">Remove filter</a></li><li class=\"tna-compound-filters__item\"><span class=\"tna-compound-filters__label\">Postwar (1945—2000)</span><a href=\"#?filter=theta\" class=\"tna-compound-filters__link\">Remove filter</a></li></ul>"
     }
   ]
 }

src/nationalarchives/components/compound-filters/template.njk

@@ -1,5 +1,5 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<ul class="tna-compound-filters tna-ul tna-ul--plain {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<ul class="tna-compound-filters {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- for item in params.items -%}
   <li class="tna-compound-filters__item">
     <span class="tna-compound-filters__label">{{ item.label }}</span>