Tweak spacing on compound and quick filters and remove rounded corners (

#125)
nationalarchives · May 29, 2024 · 8830960 · 8830960
1 parent f5d3310
commit 8830960
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Index grids can now have supertitles, `hrefClasses` and `hrefAttributes`
+- Quick filters component styling has changed and has a new `fill` option
 
 ### Changed
 

diff --git a/src/nationalarchives/components/compound-filters/compound-filters.scss b/src/nationalarchives/components/compound-filters/compound-filters.scss
@@ -8,7 +8,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: spacing.space(0.75) spacing.space(1);
+  gap: spacing.space(0.5) spacing.space(0.75);
 
   list-style: none;
 

diff --git a/src/nationalarchives/components/quick-filters/fixtures.json b/src/nationalarchives/components/quick-filters/fixtures.json
@@ -44,7 +44,89 @@
           }
         ]
       },
-      "html": "<ul class=\"tna-quick-filters \"><li class=\"tna-quick-filters__item tna-quick-filters__item--selected\"><a href=\"#?filter=all\" class=\"tna-quick-filters__link\">All</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=alpha\" class=\"tna-quick-filters__link\">Medieval (974—1485)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=beta\" class=\"tna-quick-filters__link\">Early Modern (1485—1714)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=gamma\" class=\"tna-quick-filters__link\">Georgians (1714—1837)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=delta\" class=\"tna-quick-filters__link\">Victorians (1837—1901)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=epsilon\" class=\"tna-quick-filters__link\">Early 20th century (1901—1918)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=zeta\" class=\"tna-quick-filters__link\">Interwar (1918—1939)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=eta\" class=\"tna-quick-filters__link\">Second World War (1939—1945)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=theta\" class=\"tna-quick-filters__link\">Postwar (1945—2000)</a></li></ul>",
+      "html": "<ul class=\"tna-quick-filters  \"><li class=\"tna-quick-filters__item tna-quick-filters__item--selected\"><a href=\"#?filter=all\" class=\"tna-quick-filters__link\">All</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=alpha\" class=\"tna-quick-filters__link\">Medieval (974—1485)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=beta\" class=\"tna-quick-filters__link\">Early Modern (1485—1714)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=gamma\" class=\"tna-quick-filters__link\">Georgians (1714—1837)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=delta\" class=\"tna-quick-filters__link\">Victorians (1837—1901)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=epsilon\" class=\"tna-quick-filters__link\">Early 20th century (1901—1918)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=zeta\" class=\"tna-quick-filters__link\">Interwar (1918—1939)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=eta\" class=\"tna-quick-filters__link\">Second World War (1939—1945)</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=theta\" class=\"tna-quick-filters__link\">Postwar (1945—2000)</a></li></ul>",
+      "hidden": false
+    },
+    {
+      "name": "stacked",
+      "options": {
+        "items": [
+          {
+            "label": "All",
+            "href": "#?filter=all",
+            "selected": true
+          },
+          {
+            "label": "Alpha",
+            "href": "#?filter=alpha"
+          },
+          {
+            "label": "Beta",
+            "href": "#?filter=beta"
+          },
+          {
+            "label": "Gamma",
+            "href": "#?filter=gamma"
+          }
+        ],
+        "stack": true
+      },
+      "html": "<ul class=\"tna-quick-filters tna-quick-filters--stacked  \"><li class=\"tna-quick-filters__item tna-quick-filters__item--selected\"><a href=\"#?filter=all\" class=\"tna-quick-filters__link\">All</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=alpha\" class=\"tna-quick-filters__link\">Alpha</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=beta\" class=\"tna-quick-filters__link\">Beta</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=gamma\" class=\"tna-quick-filters__link\">Gamma</a></li></ul>",
+      "hidden": false
+    },
+    {
+      "name": "filled",
+      "options": {
+        "items": [
+          {
+            "label": "All",
+            "href": "#?filter=all",
+            "selected": true
+          },
+          {
+            "label": "Alpha",
+            "href": "#?filter=alpha"
+          },
+          {
+            "label": "Beta",
+            "href": "#?filter=beta"
+          },
+          {
+            "label": "Gamma",
+            "href": "#?filter=gamma"
+          }
+        ],
+        "fill": true
+      },
+      "html": "<ul class=\"tna-quick-filters  tna-quick-filters--filled \"><li class=\"tna-quick-filters__item tna-quick-filters__item--selected\"><a href=\"#?filter=all\" class=\"tna-quick-filters__link\">All</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=alpha\" class=\"tna-quick-filters__link\">Alpha</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=beta\" class=\"tna-quick-filters__link\">Beta</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=gamma\" class=\"tna-quick-filters__link\">Gamma</a></li></ul>",
+      "hidden": false
+    },
+    {
+      "name": "stacked and filled",
+      "options": {
+        "items": [
+          {
+            "label": "All",
+            "href": "#?filter=all",
+            "selected": true
+          },
+          {
+            "label": "Alpha",
+            "href": "#?filter=alpha"
+          },
+          {
+            "label": "Beta",
+            "href": "#?filter=beta"
+          },
+          {
+            "label": "Gamma",
+            "href": "#?filter=gamma"
+          }
+        ],
+        "stack": true,
+        "fill": true
+      },
+      "html": "<ul class=\"tna-quick-filters tna-quick-filters--stacked  tna-quick-filters--filled \"><li class=\"tna-quick-filters__item tna-quick-filters__item--selected\"><a href=\"#?filter=all\" class=\"tna-quick-filters__link\">All</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=alpha\" class=\"tna-quick-filters__link\">Alpha</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=beta\" class=\"tna-quick-filters__link\">Beta</a></li><li class=\"tna-quick-filters__item\"><a href=\"#?filter=gamma\" class=\"tna-quick-filters__link\">Gamma</a></li></ul>",
       "hidden": false
     }
   ]

diff --git a/src/nationalarchives/components/quick-filters/macro-options.json b/src/nationalarchives/components/quick-filters/macro-options.json
@@ -37,6 +37,12 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "fill",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "classes",
     "type": "string",

diff --git a/src/nationalarchives/components/quick-filters/quick-filters.scss b/src/nationalarchives/components/quick-filters/quick-filters.scss
@@ -6,25 +6,42 @@
 
   display: flex;
   flex-wrap: wrap;
-  gap: spacing.space(0.75) spacing.space(1);
+  gap: spacing.space(0.5) spacing.space(0.75);
 
   list-style: none;
 
   &--stacked {
     flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &--filled {
+    align-items: flex-start;
+  }
+
+  &--stacked#{&}--filled {
+    align-items: stretch;
   }
 
   &__item {
   }
 
+  &--filled &__item {
+    flex: 1 1 auto;
+
+    text-align: center;
+  }
+
   &__link {
-    padding: spacing.space(0.125) spacing.space(0.75);
+    padding: 0 spacing.space(0.75);
+
+    display: block;
 
     line-height: 1.75;
 
     text-decoration: none;
 
-    border-radius: 1rem;
+    // border-radius: 1rem;
 
     @include colour.colour-border("keyline", 1px);
 
@@ -33,6 +50,10 @@
     &:visited {
       @include colour.colour-font("font-base");
     }
+
+    &:hover {
+      @include colour.tint;
+    }
   }
 
   &__item--selected &__link {
@@ -41,6 +62,7 @@
     &:visited,
     &:hover {
       @include colour.accent;
+      @include colour.colour-border("background");
     }
   }
 }
diff --git a/src/nationalarchives/components/quick-filters/quick-filters.stories.js b/src/nationalarchives/components/quick-filters/quick-filters.stories.js
@@ -4,6 +4,7 @@ import macroOptions from "./macro-options.json";
 const argTypes = {
   items: { control: "object" },
   stack: { control: "boolean" },
+  fill: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -19,11 +20,12 @@ export default {
   argTypes,
 };
 
-const Template = ({ items, stack, classes, attributes }) =>
+const Template = ({ items, stack, fill, classes, attributes }) =>
   Filters({
     params: {
       items,
       stack,
+      fill,
       classes,
       attributes,
     },

diff --git a/src/nationalarchives/components/quick-filters/template.njk b/src/nationalarchives/components/quick-filters/template.njk
@@ -1,5 +1,5 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<ul class="tna-quick-filters{% if params.stack %} tna-quick-filters--stacked{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<ul class="tna-quick-filters{% if params.stack %} tna-quick-filters--stacked{% endif %} {% if params.fill %} tna-quick-filters--filled{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- for item in params.items %}
   <li class="tna-quick-filters__item{%- if item.selected %} tna-quick-filters__item--selected{% endif %}">
     <a href="{{ item.href }}" {%- if item.title %} title="{{ item.title }}"{% endif %} class="tna-quick-filters__link">{{ item.label }}</a>