feat(input): Add component

e2e/tests/components/input/default.spec.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '../../../fixtures'
+
+test.describe('input, default', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/components/input/default')
+  })
+
+  test('displays the heading', async ({ page }) => {
+    await expect(
+      page.getByRole('heading'),
+    ).toHaveText('What is the name of the event?')
+  })
+
+  test('displays the input', async ({ page }) => {
+    await expect(page.getByRole('textbox')).toBeVisible()
+  })
+})

e2e/tests/components/input/with-error.spec.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '../../../fixtures'
+
+test.describe('input, with error', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/components/input/with-error')
+  })
+
+  test('displays the heading', async ({ page }) => {
+    await expect(
+      page.getByRole('heading'),
+    ).toHaveText('What is the name of the event?')
+  })
+
+  test('displays the error message', async ({ page }) => {
+    await expect(page.getByRole('textbox')).toHaveDescription('Error: Enter an event name')
+  })
+})

e2e/tests/components/input/with-hint.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '../../../fixtures'
+
+test.describe('input, with hint', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/components/input/with-hint')
+  })
+
+  test('displays the hint text', async ({ page }) => {
+    await expect(
+      page.getByText('The name you’ll use on promotional material'),
+    ).toBeVisible()
+  })
+})

e2e/tests/components/input/with-prefix-and-suffix.spec.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '../../../fixtures'
+
+test.describe('input, with prefix and suffix', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/components/input/with-prefix-and-suffix')
+  })
+
+  test('displays prefix and suffix', async ({ page }) => {
+    await expect(
+      page.getByText('£'),
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('per item', { exact: true }),
+    ).toBeVisible()
+  })
+})

global.d.ts

@@ -12,6 +12,7 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     interface Matchers<R, T> {
       toHaveNoViolations(disabledRules?: string[]): Promise<void>
+      toHaveDescription(text: string): Promise<void>
     }
   }
 }

playwright.config.ts

@@ -1,5 +1,5 @@
 import AxeBuilder from '@axe-core/playwright'
-import { devices, expect, Page, PlaywrightTestConfig } from '@playwright/test'
+import { devices, Expect, expect, Locator, Page, PlaywrightTestConfig } from '@playwright/test'
 
 expect.extend({
   toHaveNoViolations: async (
@@ -30,6 +30,44 @@ expect.extend({
       pass: false,
     }
   },
+  async toHaveDescription(this: ReturnType<Expect['getState']>, locator: Locator, describeBy: string) {
+    const page = locator.page()
+    const describedBy = await locator.getAttribute('aria-describedby')
+    const describedByIds = `#${describedBy?.split(' ').join(', #')}`
+
+    const result = page.locator(describedByIds, {
+      hasText: describeBy,
+    })
+
+    if (await result.isVisible()) {
+      return {
+        message: () => `Expected aria-describedby not to have text content ${this.utils.printReceived(describeBy)}`,
+        pass: true,
+      }
+    }
+
+    const receivedResult = page.locator(describedByIds)
+    const receivedTextPromises: Promise<string | null>[] = []
+
+    const count = await receivedResult.count()
+    for (let i = 0; i < count; i += 1) {
+      receivedTextPromises.push(receivedResult.nth(i).textContent())
+    }
+
+    const receivedText = await Promise.all(receivedTextPromises)
+
+    return {
+      message: () => `
+        ${
+        this.utils.matcherHint('toHaveDescription', 'HTMLElement', describeBy, {
+          isNot: this.isNot,
+          promise: this.promise,
+        })
+      }\n
+        Received: ${this.utils.printReceived(receivedText.join('\n'))}`,
+      pass: false,
+    }
+  },
 })
 
 const config: PlaywrightTestConfig = {

src/nunjucks/moduk/components/input/__examples__/default.njk

@@ -0,0 +1,11 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  label: {
+    text: "What is the name of the event?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  id: "default",
+  name: "event-name"
+}) }}

src/nunjucks/moduk/components/input/__examples__/not-as-page-heading.njk

@@ -0,0 +1,9 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  label: {
+    text: "What is the name of the event?"
+  },
+  id: "with-not-as-page-heading",
+  name: "event-name"
+}) }}

src/nunjucks/moduk/components/input/__examples__/with-error.njk

@@ -0,0 +1,17 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  label: {
+    text: "What is the name of the event?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  id: "with-error",
+  name: "event-name",
+  hint: {
+    text: "The name you’ll use on promotional material"
+  },
+  errorMessage: {
+    text: "Enter an event name"
+  }
+}) }}

src/nunjucks/moduk/components/input/__examples__/with-fixed-width.njk

@@ -0,0 +1,57 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+<div>
+  {{ modukInput({
+    label: {
+      text: "20 character width"
+    },
+    classes: "govuk-input--width-20",
+    id: "width-20",
+    name: "width-20"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "10 character width"
+    },
+    classes: "govuk-input--width-10",
+    id: "width-10",
+    name: "width-10"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "5 character width"
+    },
+    classes: "govuk-input--width-5",
+    id: "width-5",
+    name: "width-5"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "4 character width"
+    },
+    classes: "govuk-input--width-4",
+    id: "width-4",
+    name: "width-4"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "3 character width"
+    },
+    classes: "govuk-input--width-3",
+    id: "width-3",
+    name: "width-3"
+  }) }}
+
+    {{ modukInput({
+      label: {
+        text: "2 character width"
+      },
+      classes: "govuk-input--width-2",
+      id: "width-2",
+      name: "width-2"
+    }) }}
+</div>

src/nunjucks/moduk/components/input/__examples__/with-fluid-width.njk

@@ -0,0 +1,57 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+<div>
+  {{ modukInput({
+    label: {
+      text: "Full width"
+    },
+    classes: "govuk-!-width-full",
+    id: "full",
+    name: "full"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "Three-quarters width"
+    },
+    classes: "govuk-!-width-three-quarters",
+    id: "three-quarters",
+    name: "three-quarters"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "Two-thirds width"
+    },
+    classes: "govuk-!-width-two-thirds",
+    id: "two-thirds",
+    name: "two-thirds"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "One-half width"
+    },
+    classes: "govuk-!-width-one-half",
+    id: "one-half",
+    name: "one-half"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "One-third width"
+    },
+    classes: "govuk-!-width-one-third",
+    id: "one-third",
+    name: "one-third"
+  }) }}
+
+  {{ modukInput({
+    label: {
+      text: "One-quarter width"
+    },
+    classes: "govuk-!-width-one-quarter",
+    id: "one-quarter",
+    name: "one-quarter"
+  }) }}
+</div>

src/nunjucks/moduk/components/input/__examples__/with-hint.njk

@@ -0,0 +1,14 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  label: {
+    text: "What is the name of the event?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  hint: {
+    text: "The name you’ll use on promotional material"
+  },
+  id: "with-hint",
+  name: "event-name"
+}) }}

src/nunjucks/moduk/components/input/__examples__/with-numeric.njk

@@ -0,0 +1,17 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  label: {
+    text: "What is your account number?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  classes: "govuk-input--width-10",
+  hint: {
+    text: "Must be between 6 and 8 digits long"
+  },
+  id: "with-numeric",
+  name: "account-number",
+  inputmode: "numeric",
+  spellcheck: false
+}) }}

src/nunjucks/moduk/components/input/__examples__/with-prefix-and-suffix-error.njk

@@ -0,0 +1,22 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  id: "with-prefix-and-suffix-error",
+  name: "cost-per-item",
+  label: {
+    text: "What is the cost per item, in pounds?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  prefix: {
+    text: "£"
+  },
+  suffix: {
+    text: "per item"
+  },
+  errorMessage: {
+    text: "Enter a cost per item, in pounds"
+  },
+  classes: "govuk-input--width-5",
+  spellcheck: false
+}) }}

src/nunjucks/moduk/components/input/__examples__/with-prefix-and-suffix.njk

@@ -0,0 +1,19 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  id: "with-prefix-and-suffix",
+  name: "cost-per-item",
+  label: {
+    text: "What is the cost per item, in pounds?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  prefix: {
+    text: "£"
+  },
+  suffix: {
+    text: "per item"
+  },
+  classes: "govuk-input--width-5",
+  spellcheck: false
+}) }}

src/nunjucks/moduk/components/input/__examples__/with-prefix.njk

@@ -0,0 +1,16 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  id: "with-prefix",
+  name: "cost",
+  label: {
+    text: "What is the cost in pounds?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  prefix: {
+    text: "£"
+  },
+  classes: "govuk-input--width-5",
+  spellcheck: false
+}) }}

src/nunjucks/moduk/components/input/__examples__/with-suffix.njk

@@ -0,0 +1,16 @@
+{% from "moduk/components/input/macro.njk" import modukInput %}
+
+{{ modukInput({
+  id: "with-suffix",
+  name: "weight",
+  label: {
+    text: "What is the weight in kilograms?",
+    classes: "govuk-label--l",
+    isPageHeading: true
+  },
+  suffix: {
+    text: "kg"
+  },
+  classes: "govuk-input--width-5",
+  spellcheck: false
+}) }}