diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 941cf675..06360698 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -28,38 +28,3 @@ document.addEventListener("DOMContentLoaded", removeAllClasses, false); } - diff --git a/.storybook/preview.js b/.storybook/preview.js index 265b55c0..2c5657b0 100644 --- 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 index 9501e218..8ee74084 100644 --- 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 index 97abb811..ee898b69 100644 --- 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 index e55285c0..7fab47c8 100644 --- 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 index 8bdb85f0..002409cc 100644 --- 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 index a1c3d9c4..17c0cddf 100644 --- 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": "

", + "html": "

", "hidden": false }, { @@ -23,7 +23,7 @@ "name": "q", "value": "badgers" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -36,7 +36,7 @@ "name": "q", "hint": "Try searching for something interesting" }, - "html": "

Try searching for something interesting

", + "html": "

Try searching for something interesting

", "hidden": false } ] diff --git a/src/nationalarchives/components/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss index 58c50eb4..bbd7015c 100644 --- 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 index 31e148b2..bc46eb12 100644 --- 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 [] -%}
-
+