Fix search input min width, remove comments

nationalarchives · Jan 18, 2024 · 511d9c3 · 511d9c3
1 parent 6430796
commit 511d9c3
Show file tree

Hide file tree

Showing 9 changed files with 8 additions and 112 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -28,38 +28,3 @@
     document.addEventListener("DOMContentLoaded", removeAllClasses, false);
   }
 </script>
-<!-- <link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/OpenSans-Medium.ttf"
-  as="font"
-  type="font/ttf"
-  crossorigin="anonymous"
-/>
-<link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/OpenSans-Bold.ttf"
-  as="font"
-  type="font/ttf"
-  crossorigin="anonymous"
-/>
-<link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/RobotoMono-Regular.ttf"
-  as="font"
-  type="font/ttf"
-  crossorigin="anonymous"
-/>
-<link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/fa-solid-900.woff2"
-  as="font"
-  type="font/woff2"
-  crossorigin="anonymous"
-/>
-<link
-  rel="preload"
-  href="/static/media/src/nationalarchives/assets/fonts/fa-brands-400.woff2"
-  as="font"
-  type="font/woff2"
-  crossorigin="anonymous"
-/> -->
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -42,13 +42,3 @@ export const decorators = [
     return Story();
   },
 ];
-
-// const fontLoader = async () => ({
-//   fonts: await Promise.all([
-//     document.fonts.load("normal 1em Open Sans"),
-//     document.fonts.load("bold 1em Open Sans"),
-//     document.fonts.load("normal 1em Roboto Mono"),
-//   ]),
-// });
-
-// export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -155,10 +155,6 @@
   max-width: 480px;
 }
 
-.tna-picture--demo {
-  // max-width: 480px;
-}
-
 .tna-spacing-demo {
   p {
     padding-right: 0.5rem;

diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js
@@ -1,61 +1,3 @@
-// https://storybook.js.org/addons/@storybook/test-runner
-
-// const { toMatchImageSnapshot } = require("jest-image-snapshot");
-// const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
-
-// module.exports = {
-//   setup() {
-//     expect.extend({ toMatchImageSnapshot });
-//   },
-//   async postRender(page, context) {
-//     // the #root element wraps the story. From Storybook 7.0 onwards, the selector should be #storybook-root
-//     const elementHandler = await page.$("#storybook-root");
-//     const innerHTML = await elementHandler.innerHTML();
-//     expect(innerHTML).toMatchSnapshot();
-
-//     // If you want to take screenshot of multiple browsers, use
-//     // page.context().browser().browserType().name() to get the browser name to prefix the file name
-//     const image = await page.screenshot();
-//     expect(image).toMatchImageSnapshot({
-//       customSnapshotsDir,
-//       customSnapshotIdentifier: context.id,
-//     });
-//   },
-// };
-
-// const { getStoryContext } = require('@storybook/test-runner');
-// const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
-
-// module.exports = {
-//   async preRender(page, context) {
-//     await injectAxe(page);
-//   },
-//   async postRender(page, context) {
-//     // Get entire context of a story, including parameters, args, argTypes, etc.
-//     const storyContext = await getStoryContext(page, context);
-
-//     // Do not test a11y for stories that disable a11y
-//     if (storyContext.parameters?.a11y?.disable) {
-//       return;
-//     }
-
-//     // Apply story-level a11y rules
-//     await configureAxe(page, {
-//       rules: storyContext.parameters?.a11y?.config?.rules,
-//     });
-
-//     // from Storybook 7.0 onwards, the selector should be #storybook-root
-//     await checkA11y(page, '#root', {
-//       detailedReport: true,
-//       detailedReportOptions: {
-//         html: true,
-//       },
-//       // pass axe options defined in @storybook/addon-a11y
-//       axeOptions: storyContext.parameters?.a11y?.options,
-//     });
-//   },
-// };
-
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
 

diff --git a/.storybook/viewports.js b/.storybook/viewports.js
@@ -1,5 +1,4 @@
 export const customViewports = {
-  // ...MINIMAL_VIEWPORTS,
   medium: {
     name: "Medium device",
     styles: {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Set smaller minimum width for search field inputs
+
 ### Deprecated
 ### Removed
 ### Fixed

diff --git a/src/nationalarchives/components/search-field/fixtures.json b/src/nationalarchives/components/search-field/fixtures.json
@@ -10,7 +10,7 @@
         "id": "search1",
         "name": "q"
       },
-      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\"></i></button></div></div></div>",
+      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\"></i></button></div></div></div>",
       "hidden": false
     },
     {
@@ -23,7 +23,7 @@
         "name": "q",
         "value": "badgers"
       },
-      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"badgers\" spellcheck=\"false\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\"></i></button></div></div></div>",
+      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"badgers\" spellcheck=\"false\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\"></i></button></div></div></div>",
       "hidden": false
     },
     {
@@ -36,7 +36,7 @@
         "name": "q",
         "hint": "Try searching for something interesting"
       },
-      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group \"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1><p id=\"tna-form__search1-hint\" class=\"tna-form__hint\">Try searching for something interesting</p></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"tna-form__search1-hint\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\"></i></button></div></div></div>",
+      "html": "<div class=\"tna-search-field \"><div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h1 class=\"tna-form__heading tna-form__heading--l\"><label class=\"tna-form__label\" for=\"tna-form__search1\">Catalogue search results</label></h1><p id=\"tna-form__search1-hint\" class=\"tna-form__hint\">Try searching for something interesting</p></div><div class=\"tna-search-field__fields\"><input type=\"search\" id=\"tna-form__search1\" class=\"tna-search-field__input \" name=\"q\" value=\"\" spellcheck=\"false\" aria-describedby=\"tna-form__search1-hint\"><button type=\"submit\" class=\"tna-button tna-search-field__button\">Search<i class=\"fa-solid fa-fw fa-arrow-right tna-!--hide-on-tiny\"></i></button></div></div></div>",
       "hidden": false
     }
   ]

diff --git a/src/nationalarchives/components/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss
@@ -9,6 +9,7 @@
   }
 
   &__input {
+    min-width: 8rem;
     padding: 0 0.375rem;
 
     display: block;

diff --git a/src/nationalarchives/components/search-field/template.njk b/src/nationalarchives/components/search-field/template.njk
@@ -1,7 +1,7 @@
 {%- set containerClasses = [params.formGroupClasses] if params.formGroupClasses else [] -%}
 {%- set inputClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-search-field {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}">
+  <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %}">
     <div class="tna-form__group-contents">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         <label class="tna-form__label" for="tna-form__{{ params.id }}">