Add StandaloneInput component

.storybook/main.js

@@ -31,6 +31,7 @@ module.exports = {
     '../components/radios/spec/*.stories.@(js|mdx)',
     '../components/select/spec/*.stories.@(js|mdx)',
     '../components/skip-link/spec/*.stories.@(js|mdx)',
+    '../components/standalone-input/spec/*.stories.@(js|mdx)',
     '../components/table/spec/*.stories.@(js|mdx)',
     '../components/tabs/spec/*.stories.@(js|mdx)',
     '../components/tag/spec/*.stories.@(js|mdx)',

apps/govuk-docs/src/common/stories.ts

@@ -46,7 +46,8 @@ const unofficialStories = [
   require('../../../../components/form/spec/Form.stories.mdx'),
   require('../../../../components/form-field/spec/FormField.stories.mdx'),
   require('../../../../components/navigation-menu/spec/NavigationMenu.stories.mdx'),
-  require('../../../../components/page/spec/Page.stories.mdx')
+  require('../../../../components/page/spec/Page.stories.mdx'),
+  require('../../../../components/standalone-input/spec/StandaloneInput.stories.mdx')
 ];
 const internalStories = [
   require('../../../../components/button-group/spec/ButtonGroup.stories.mdx'),

components/form/package.json

@@ -32,6 +32,7 @@
     "@not-govuk/forms": "workspace:^0.15.1",
     "@not-govuk/radios": "workspace:^0.15.1",
     "@not-govuk/select": "workspace:^0.15.1",
+    "@not-govuk/standalone-input": "workspace:^0.15.1",
     "@not-govuk/text-input": "workspace:^0.15.1",
     "@not-govuk/textarea": "workspace:^0.15.1"
   },

components/form/src/Form.ts

@@ -14,6 +14,7 @@ import {
   Field,
   Radios,
   Select,
+  StandaloneInput,
   TextInput,
   Textarea
 } from './fields';
@@ -30,6 +31,7 @@ type TForm = ComponentType<FormProps> & {
   Radios: ComponentType<any>
   Select: ComponentType<any>
   Submit: ComponentType<any>
+  StandaloneInput: ComponentType<any>
   TextInput: ComponentType<any>
   Textarea: ComponentType<any>
 };
@@ -49,6 +51,7 @@ export const Form: TForm = Object.assign(
     Page,
     Radios,
     Select,
+    StandaloneInput,
     Submit,
     TextInput,
     Textarea

components/form/src/fields.ts

@@ -5,6 +5,7 @@ import { DateInput as _DateInput, DateInputProps } from '@not-govuk/date-input';
 import { FormField as _Field, FormFieldProps } from '@not-govuk/form-field';
 import { Radios as _Radios, RadiosProps } from '@not-govuk/radios';
 import { Select as _Select, SelectProps } from '@not-govuk/select';
+import { StandaloneInput as _StandaloneInput, StandaloneInputProps } from '@not-govuk/standalone-input';
 import { TextInput as _TextInput, TextInputProps } from '@not-govuk/text-input';
 import { Textarea as _Textarea, TextareaProps } from '@not-govuk/textarea';
 
@@ -17,5 +18,6 @@ export const DateInput: ComponentType<DateInputProps & FieldProps> = withForm(_D
 export const Field: ComponentType<FormFieldProps & FieldProps> = withForm(_Field as any);
 export const Radios: ComponentType<RadiosProps & FieldProps> = withForm(_Radios);
 export const Select: ComponentType<SelectProps & FieldProps> = withForm(_Select);
+export const StandaloneInput: ComponentType<StandaloneInputProps & FieldProps> = withForm(_StandaloneInput);
 export const TextInput: ComponentType<TextInputProps & FieldProps> = withForm(_TextInput);
 export const Textarea: ComponentType<TextareaProps & FieldProps> = withForm(_Textarea);

components/standalone-input/.gitignore

@@ -0,0 +1,5 @@
+dist/
+node_modules/
+package-lock.json
+pnpm-lock.yaml
+tsconfig.tsbuildinfo

components/standalone-input/README.md

@@ -0,0 +1,69 @@
+NotGovUK - Standalone Input
+===========================
+
+A single-line, form field with a submit button.
+
+
+Using this package
+------------------
+
+First install the package into your project:
+
+```shell
+npm install -S @not-govuk/standalone-input
+```
+
+Then use it in your code as follows:
+
+```js
+import React, { createElement as h } from 'react';
+import StandaloneInput from '@not-govuk/standalone-input';
+
+export const MyComponent = props => (
+  <StandaloneInput
+    label="Your message"
+    name="message"
+    button="Send"
+  />
+);
+
+export default MyComponent;
+```
+
+
+Working on this package
+-----------------------
+
+Before working on this package you must install its dependencies using
+the following command:
+
+```shell
+pnpm install
+```
+
+
+### Testing
+
+Run the unit tests.
+
+```shell
+npm test
+```
+
+
+### Building
+
+Build the package by compiling the TypeScript source code.
+
+```shell
+npm run build
+```
+
+
+### Clean-up
+
+Remove any previously built files.
+
+```shell
+npm run clean
+```

components/standalone-input/assets/StandaloneInput.scss

@@ -0,0 +1,43 @@
+@import "@not-govuk/sass-base";
+
+.not-govuk-standalone-input {
+  display: flex;
+  width: 100%;
+
+  &__input {
+    display: flex;
+    flex: 0 1 auto;
+
+    &.govuk-input {
+      border-right-width: 0;
+
+      &:focus {
+        border-right-width: 2px;
+        margin-right: -2px;
+        z-index: 2;
+      }
+    }
+  }
+
+  &__button {
+    $button-shadow-size: $govuk-border-width-form-element;
+
+    display: flex;
+    flex: 0 0 auto;
+    margin-bottom: 0;
+
+    &.govuk-button {
+      margin-bottom: $button-shadow-size;
+    }
+  }
+
+  &--fixed-width {
+    .not-govuk-standalone-input__input {
+      &.govuk-input {
+        &:focus {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}

components/standalone-input/jest.config.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const baseConfig = require('../../jest.config.base');
+
+const config = {
+  ...baseConfig,
+  collectCoverageFrom: [
+    '<rootDir>/src/**.{ts,tsx}',
+  ],
+  testMatch: [
+    '<rootDir>/spec/**.{ts,tsx}'
+  ]
+};
+
+module.exports = config;

components/standalone-input/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@not-govuk/standalone-input",
+  "version": "0.15.1",
+  "description": "A single-line, form field with a submit button.",
+  "main": "src/StandaloneInput.tsx",
+  "sass": "assets/StandaloneInput.scss",
+  "publishConfig": {
+    "main": "dist/StandaloneInput.js",
+    "typings": "dist/StandaloneInput.d.ts"
+  },
+  "files": [
+    "/assets",
+    "/dist"
+  ],
+  "scripts": {
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "prepublishOnly": "npm run clean && npm run build",
+    "build": "tsc",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "author": "Daniel A.C. Martin <[email protected]> (http://daniel-martin.co.uk/)",
+  "license": "MIT",
+  "keywords": [
+    "react-components"
+  ],
+  "dependencies": {
+    "@not-govuk/button": "workspace:^0.15.1",
+    "@not-govuk/component-helpers": "workspace:^0.15.1",
+    "@not-govuk/form-group": "workspace:^0.15.1",
+    "@not-govuk/input": "workspace:^0.15.1",
+    "@not-govuk/sass-base": "workspace:^0.15.1"
+  },
+  "peerDependencies": {
+    "@not-govuk/docs-components": "^0.15.1",
+    "@storybook/addon-docs": "^6.5.16",
+    "react": "^18.3.1"
+  },
+  "peerDependenciesMeta": {
+    "@not-govuk/docs-components": {
+      "optional": true
+    },
+    "@storybook/addon-docs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@mdx-js/react": "1.6.22",
+    "@not-govuk/component-test-helpers": "workspace:^0.15.1",
+    "@not-govuk/tag": "workspace:^0.15.1",
+    "@types/react": "18.3.12",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "ts-jest": "29.2.5",
+    "typescript": "4.9.5"
+  }
+}

components/standalone-input/spec/StandaloneInput.stories.mdx

@@ -0,0 +1,110 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs';
+import { Tag } from '@not-govuk/tag';
+import { StandaloneInput } from '../src/StandaloneInput';
+import readMe from '../README.md';
+
+<Meta
+  title="Standalone input"
+  component={ StandaloneInput }
+  parameters={ {
+    chromatic: { viewports: [640, 480] },
+    description: 'A single-line, form field with a submit button.',
+    jest: ['StandaloneInput'],
+    notes: readMe
+  } }
+/>
+
+# Standalone input
+
+<p><Tag text="Unofficial" /> <Tag text="Experimental" /></p>
+
+A single-line, form field with a submit button.
+
+(Created to support the [Search box component] but may have other uses.)
+
+<Preview withToolbar>
+  <Story name="StandaloneInput">
+    <StandaloneInput
+      label="Your message"
+      name="message"
+      button="Send"
+    />
+  </Story>
+</Preview>
+
+<Props of={ StandaloneInput } />
+
+
+## Stories
+### Standard
+
+A standard Standalone input.
+
+<Preview>
+  <Story name="Standard">
+    <StandaloneInput name="message" label="Message" />
+  </Story>
+</Preview>
+
+
+### Hint
+
+If you provide a hint, it will be displayed instead of the label.
+
+<Preview>
+  <Story name="Hint">
+    <StandaloneInput name="message" label="Message" hint="What do you want to say?" />
+  </Story>
+</Preview>
+
+
+### Custom submit button text
+
+The text of the submit button is visually hidden, but can be customised for screen-readers.
+
+<Preview>
+  <Story name="Custom button">
+    <StandaloneInput name="message" label="Message" button="Send" />
+  </Story>
+</Preview>
+
+
+### Fixed width
+
+<Preview>
+  <Story name="Fixed width">
+    <StandaloneInput name="message" label="Message" width="10" />
+  </Story>
+</Preview>
+
+
+### Fluid width
+
+<Preview>
+  <Story name="Fluid width">
+    <StandaloneInput name="message" label="Message" className="govuk-!-width-one-half" />
+  </Story>
+</Preview>
+
+
+### Error
+
+Currently errors are visually hidden, so it is best to avoid them. They will however be accessible to screen-readers, and the field will still be highlighted in red.
+
+<Preview>
+  <Story name="Error">
+    <StandaloneInput name="message" label="Message" error="Something went wrong" />
+  </Story>
+</Preview>
+
+
+### Disabled
+
+<Preview>
+  <Story name="Disabled">
+    <StandaloneInput name="message" label="Message" disabled />
+  </Story>
+</Preview>
+
+
+[Search box component]: /components?name=Search%20box