@sebgroup/green-react 3.28.4 → 3.29.1-rc.20250730100346308

package/src/lib/form/input/input.spec.tsx

@@ -0,0 +1,376 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
+import React, { useState } from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import {
+  Checkbox,
+  EmailInput,
+  NumberInput,
+  RadioButton,
+  TextInput,
+} from './input'
+
+describe('Inputs', () => {
+  describe('Checkbox', () => {
+    it('renders', () => {
+      render(<Checkbox defaultChecked />)
+
+      expect(screen.getByRole('checkbox')).toBeVisible()
+    })
+    it('has the correct value', () => {
+      render(<Checkbox defaultChecked />)
+
+      expect(screen.getByRole('checkbox')).toBeChecked()
+    })
+    it('has the correct label', () => {
+      render(<Checkbox label="Input" defaultChecked />)
+
+      expect(screen.getByLabelText('Input')).toBeChecked()
+    })
+    it('resets correctly', async () => {
+      render(
+        <form role="form">
+          <Checkbox label="Input" />
+        </form>,
+      )
+
+      const input = screen.getByRole('checkbox') as HTMLInputElement
+      input.checked = true
+      expect(screen.getByLabelText('Input')).toBeChecked()
+
+      const form = screen.getByRole('form') as HTMLFormElement
+      form.reset()
+
+      expect(screen.getByLabelText('Input')).not.toBeChecked()
+    })
+    it('gets the correct ref', () => {
+      const ref = React.createRef<HTMLInputElement>()
+      render(<Checkbox ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    })
+  })
+  describe('EmailInput', () => {
+    it('renders', () => {
+      render(<EmailInput value="foo@bar.baz" />)
+
+      expect(screen.getByRole('textbox')).toBeVisible()
+    })
+    it('has the correct value', () => {
+      render(<EmailInput value="foo@bar.baz" />)
+
+      expect(screen.getByRole('textbox')).toHaveValue('foo@bar.baz')
+    })
+    it('has the correct label', () => {
+      render(<EmailInput value="foo@bar.baz" label="Input" />)
+
+      expect(screen.getByLabelText('Input')).toHaveValue('foo@bar.baz')
+    })
+    it('resets correctly', async () => {
+      render(
+        <form role="form">
+          <EmailInput label="Input" />
+        </form>,
+      )
+
+      const input = screen.getByRole('textbox') as HTMLInputElement
+      input.value = 'foo@bar.baz'
+      expect(screen.getByLabelText('Input')).toHaveValue('foo@bar.baz')
+
+      const form = screen.getByRole('form') as HTMLFormElement
+      form.reset()
+
+      expect(screen.getByLabelText('Input')).toHaveValue('')
+    })
+    it('gets the correct ref', () => {
+      const ref = React.createRef<HTMLInputElement>()
+      render(<EmailInput ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    })
+    it('Should set the correct aria-live value', () => {
+      const { container } = render(
+        <EmailInput
+          label="Radio button"
+          validator={{ message: 'Error', indicator: 'error' }}
+          aria-live="off"
+        />,
+      )
+      expect(
+        container
+          .querySelector('.gds-form-item__footer')
+          ?.getAttribute('aria-live'),
+      ).toEqual('off')
+    })
+  })
+  describe('NumberInput', () => {
+    it('renders', () => {
+      render(<NumberInput value={1337} />)
+
+      expect(screen.getByRole('spinbutton')).toBeVisible()
+    })
+    it('has the correct value', () => {
+      render(<NumberInput value={1337} />)
+
+      expect(screen.getByRole('spinbutton')).toHaveValue(1337)
+    })
+    it('has the correct label', () => {
+      render(<NumberInput value={1337} label="Input" />)
+
+      expect(screen.getByLabelText('Input')).toHaveValue(1337)
+    })
+    it('resets correctly', async () => {
+      render(
+        <form role="form">
+          <NumberInput label="Input" />
+        </form>,
+      )
+
+      const input = screen.getByRole('spinbutton') as HTMLInputElement
+      input.value = '1337'
+      expect(screen.getByLabelText('Input')).toHaveValue(1337)
+
+      const form = screen.getByRole('form') as HTMLFormElement
+      form.reset()
+
+      expect(screen.getByLabelText('Input')).toHaveValue(null)
+    })
+    it('gets the correct ref', () => {
+      const ref = React.createRef<HTMLInputElement>()
+      render(<NumberInput ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    })
+    it('Should set the correct aria-live value', () => {
+      const { container } = render(
+        <NumberInput
+          label="Radio button"
+          validator={{ message: 'Error', indicator: 'error' }}
+          aria-live="off"
+        />,
+      )
+      expect(
+        container
+          .querySelector('.gds-form-item__footer')
+          ?.getAttribute('aria-live'),
+      ).toEqual('off')
+    })
+  })
+  describe('TextInput', () => {
+    it('renders', () => {
+      render(<TextInput value="Hello" />)
+
+      expect(screen.getByRole('textbox')).toBeVisible()
+    })
+    it('has the correct value', () => {
+      render(<TextInput value="Hello" />)
+
+      expect(screen.getByRole('textbox')).toHaveValue('Hello')
+    })
+    it('has the correct label', () => {
+      render(<TextInput value="Hello" label="Input" />)
+
+      expect(screen.getByLabelText('Input')).toHaveValue('Hello')
+    })
+
+    it('Should fire onChangeInput', async () => {
+      const user = userEvent.setup()
+      const mockFn: jest.Mock = jest
+        .fn()
+        .mockImplementation((value: string) => value)
+
+      render(
+        <TextInput
+          placeholder="text field"
+          testId={'text-input'}
+          onChangeInput={mockFn}
+        />,
+      )
+
+      const inputElement = await screen.findByTestId('text-input')
+      await act(async () => await user.click(inputElement))
+      await act(async () => await user.keyboard('cat'))
+
+      expect(mockFn).toBeCalled()
+      expect(mockFn).lastReturnedWith('cat')
+    })
+
+    it('Should fire onChange', async () => {
+      const user = userEvent.setup()
+
+      const mockFn: jest.Mock = jest
+        .fn()
+        .mockImplementation((value: string) => value)
+
+      render(<TextInput testId="text-input" onChange={mockFn} />)
+      const inputElement = await screen.findByTestId('text-input')
+
+      await act(async () => await user.click(inputElement))
+      await act(async () => await user.keyboard('GDS'))
+
+      expect(mockFn).toBeCalledTimes(3)
+    })
+
+    it('Should be controlled with value prop', async () => {
+      const user = userEvent.setup()
+
+      const mockFn = jest.fn()
+
+      const { rerender } = render(
+        <TextInput
+          testId="text-input"
+          value={'12345'}
+          onChange={(e) => {
+            mockFn(e.currentTarget.value)
+          }}
+        />,
+      )
+      const inputElement = (await screen.findByTestId(
+        'text-input',
+      )) as HTMLInputElement
+
+      expect(inputElement.value).toEqual('12345')
+
+      await act(async () => await user.click(inputElement))
+      await act(async () => await user.keyboard('GDS'))
+      expect(mockFn).toHaveBeenCalledTimes(3)
+      expect(mockFn).toHaveBeenNthCalledWith(1, '12345G')
+      expect(mockFn).toHaveBeenNthCalledWith(2, '12345GD')
+      expect(mockFn).toHaveBeenNthCalledWith(3, '12345GDS')
+      await rerender(<TextInput testId="text-input" value={'54321'} />)
+      expect(inputElement.value).toEqual('54321')
+    })
+
+    it('value can be changed to empty string', async () => {
+      const mockFn = jest.fn()
+
+      const { rerender } = render(
+        <TextInput
+          testId="text-input"
+          value={'12345'}
+          onChange={(e) => {
+            mockFn(e.currentTarget.value)
+          }}
+        />,
+      )
+
+      const inputElement = (await screen.findByTestId(
+        'text-input',
+      )) as HTMLInputElement
+
+      expect(inputElement.value).toEqual('12345')
+
+      await rerender(<TextInput testId="text-input" value={''} />)
+
+      expect(inputElement.value).toEqual('')
+    })
+
+    it('resets correctly', async () => {
+      render(
+        <form role="form">
+          <TextInput label="Input" />
+        </form>,
+      )
+
+      const input = screen.getByRole('textbox') as HTMLInputElement
+      input.value = 'Hello'
+      expect(screen.getByLabelText('Input')).toHaveValue('Hello')
+
+      const form = screen.getByRole('form') as HTMLFormElement
+      form.reset()
+
+      expect(screen.getByLabelText('Input')).toHaveValue('')
+    })
+  })
+
+  it('gets the correct ref', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<TextInput ref={ref} />)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+  })
+  it('Should set the correct aria-live value', () => {
+    const { container } = render(
+      <TextInput
+        label="Radio button"
+        validator={{ message: 'Error', indicator: 'error' }}
+        aria-live="off"
+      />,
+    )
+    expect(
+      container
+        .querySelector('.gds-form-item__footer')
+        ?.getAttribute('aria-live'),
+    ).toEqual('off')
+  })
+})
+
+describe('Component: RadioButton', () => {
+  it('should render component and display label', () => {
+    render(<RadioButton value={'test value'} label={'Radio Button'} />)
+    expect(screen.getByText('Radio Button')).toBeVisible()
+  })
+
+  it('Should capture onChange events from individual radio buttons and emit it as one event', () => {
+    const onChange: jest.Mock = jest.fn()
+    render(
+      <RadioButton
+        onChange={onChange}
+        value="test value"
+        label="Radio button"
+      />,
+    )
+    fireEvent.click(screen.getByText('Radio button'))
+    expect(onChange).toBeCalled()
+  })
+
+  it('Should not fire onchange when disabled', () => {
+    const onChange: jest.Mock = jest.fn().mockImplementation((value) => value)
+    render(
+      <RadioButton
+        onChange={onChange}
+        value="test value"
+        label="Radio button"
+        disabled
+      />,
+    )
+    fireEvent.click(screen.getByText('Radio button'))
+    expect(onChange).not.toBeCalled()
+  })
+
+  it('Should render validator: invalid', () => {
+    const { container } = render(
+      <RadioButton
+        label="Radio button"
+        value=""
+        validator={{ message: 'Error', indicator: 'error' }}
+      />,
+    )
+    expect(container.querySelectorAll('.is-invalid')).toHaveLength(1)
+  })
+  it('gets the correct ref', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<RadioButton ref={ref} label="label" value="true" />)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+  })
+})
+
+describe('Validation: text, number and email component', () => {
+  const MockComponent = () => (
+    <>
+      <TextInput
+        label="Input label"
+        validator={{ message: 'valid message', indicator: 'success' }}
+      />
+      <NumberInput
+        label="Input label"
+        validator={{ message: 'valid message', indicator: 'success' }}
+      />
+      <EmailInput
+        label="Input label"
+        validator={{ message: 'valid message', indicator: 'success' }}
+      />
+    </>
+  )
+  it('Should render validation: valid', () => {
+    render(<MockComponent />)
+    expect(screen.getAllByText('valid message')).toHaveLength(3)
+  })
+})

package/src/lib/form/input/input.stories.tsx

@@ -0,0 +1,82 @@
+import { Input } from './input'
+
+const InputTemplate = ({ ...props }) => <Input {...props} />
+
+export default {
+  title: 'Components/Form/Input',
+  component: Input,
+}
+
+export const Default = {
+  render: InputTemplate.bind({}),
+  name: 'Input',
+
+  parameters: {
+    componentIds: ['component-input'],
+  },
+
+  args: {},
+}
+
+export const WithFormInfo = {
+  render: InputTemplate.bind({}),
+  name: 'With form info',
+
+  args: {
+    label: 'Label',
+    info: 'Some info text',
+  },
+}
+
+export const WithExpandableInfo = {
+  render: InputTemplate.bind({}),
+  name: 'With expandable info',
+
+  args: {
+    label: 'Label',
+    expandableInfo: 'Some info text',
+    expandableInfoButtonLabel: 'Show more info',
+  },
+}
+
+export const UnitLabel = {
+  render: InputTemplate.bind({}),
+  name: 'With unit label',
+
+  args: {
+    label: 'Label',
+    unit: 'kr',
+  },
+}
+
+export const Validator = {
+  render: InputTemplate.bind({}),
+  name: 'With validator',
+
+  args: {
+    label: 'Label',
+    validator: {
+      indicator: 'error',
+      message: 'Error message',
+    },
+  },
+}
+
+export const Everything = {
+  render: InputTemplate.bind({}),
+  name: 'With everything enabled',
+
+  args: {
+    label: 'Label',
+    expandableInfo: 'Some expandable text',
+    info: 'Some info text',
+    maxLength: 100,
+    rows: 5,
+    placeholder: 'Placeholder',
+    unit: 'kr',
+    validator: {
+      indicator: 'error',
+      message: 'Error message',
+    },
+  },
+}

package/src/lib/form/input/input.tsx

@@ -0,0 +1,204 @@
+import {
+  ChangeEvent,
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+  InputHTMLAttributes,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import classNames from 'classnames'
+
+import {
+  IExpandableInformation,
+  IValidator,
+  randomId,
+  validateClassName,
+} from '@sebgroup/extract'
+import { FormItem } from '../../formItem'
+import Group from '../group/group'
+
+export interface InputProps
+  extends IExpandableInformation,
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  /**
+   * Data test id used for finding elements in test
+   */
+  testId?: string
+  /**
+   * Function to format the value on change
+   */
+  formatter?: (value: string) => string
+  /**
+   * Additional descriptive text displayed below the label
+   */
+  info?: ReactNode
+  /**
+   * Label text describing the input field
+   */
+  label?: string
+  /**
+   * Text displayed on the right side of the input, typically used for units like 'kr' or '%'
+   */
+  unit?: string
+  /**
+   * Validation object for input validation
+   */
+  validator?: IValidator
+  /**
+   * Current value of the input field
+   */
+  value?: string | number
+  /**
+   * Callback function triggered when the input value changes
+   */
+  onChangeInput?: (value: string) => string
+  /**
+   * ID of another element that describes the input field
+   */
+  'aria-describedby'?: string
+  /**
+   * ARIA live region attribute for the form control footer, affecting how error messages are read by screen readers
+   */
+  'aria-live'?: React.AriaAttributes['aria-live']
+}
+
+export const Input = forwardRef(
+  (
+    {
+      'aria-describedby': ariaDescribedBy,
+      'aria-live': ariaLive = 'assertive',
+      autoComplete = 'off',
+      children,
+      className,
+      testId: dataTestId,
+      expandableInfo,
+      expandableInfoButtonLabel,
+      formatter,
+      id = randomId(),
+      label,
+      info,
+      onChange,
+      unit,
+      role,
+      validator,
+      onChangeInput,
+      value = '',
+      required,
+      ...props
+    }: InputProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const [uuid] = useState(id)
+    const [localValue, setLocalValue] = useState(value)
+
+    useEffect(() => {
+      setLocalValue(value)
+    }, [value])
+
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        const { selectionStart, value } = event.target
+        const formattedValue = formatter ? formatter(value) : value
+        const nrAddedChars = formattedValue.length - value.length
+        const updateCaretPosition = nrAddedChars !== 0
+        const newSelectionStart =
+          updateCaretPosition && selectionStart
+            ? selectionStart + nrAddedChars
+            : selectionStart
+
+        // Fixes bug: React loses caret position when you format the input value
+        window.requestAnimationFrame(() => {
+          event.target.selectionStart = newSelectionStart
+          event.target.selectionEnd = newSelectionStart
+        })
+
+        setLocalValue(formattedValue)
+        if (onChange) onChange(event)
+        if (onChangeInput) onChangeInput(formattedValue)
+      },
+      [formatter, setLocalValue, onChange, onChangeInput],
+    )
+
+    const showSimpleInput = !label && !info && !expandableInfo
+
+    const describedBy = classNames(ariaDescribedBy, {
+      [`${uuid}_info`]: !showSimpleInput && info,
+      [`gds-expandable-info-${uuid}`]: !showSimpleInput && expandableInfo,
+    })
+
+    const inputClassName = classNames(className, {
+      [validateClassName(validator?.indicator)]: validator,
+    })
+
+    const input = (
+      <input
+        aria-describedby={describedBy || undefined}
+        aria-invalid={validator?.indicator === 'error'}
+        aria-required={required}
+        aria-errormessage={
+          validator?.indicator === 'error' ? `${uuid}_message` : undefined
+        }
+        autoComplete={autoComplete}
+        className={inputClassName || undefined}
+        data-testid={dataTestId}
+        id={uuid}
+        onChange={handleChange}
+        role={role}
+        value={localValue}
+        required={required}
+        ref={ref}
+        {...props}
+      />
+    )
+
+    if (showSimpleInput) return input
+
+    const spanClassName = classNames('form-text', { disabled: props.disabled })
+
+    return (
+      <FormItem
+        expandableInfo={expandableInfo}
+        expandableInfoButtonLabel={expandableInfoButtonLabel}
+        inputId={uuid}
+        label={label}
+        labelInformation={info}
+        role={role}
+        validator={validator}
+        aria-live={ariaLive}
+      >
+        <div className="gds-input-wrapper">
+          <Group groupBorder groupFocus id={`${uuid}_group`}>
+            {input}
+            {unit && <span className={spanClassName}>{unit}</span>}
+            {children}
+          </Group>
+        </div>
+      </FormItem>
+    )
+  },
+)
+
+export const TextInput = forwardRef(
+  (props: Omit<InputProps, 'type'>, ref: ForwardedRef<HTMLInputElement>) => {
+    return <Input type="text" {...props} ref={ref} />
+  },
+)
+
+export const EmailInput = forwardRef(
+  (props: Omit<InputProps, 'type'>, ref: ForwardedRef<HTMLInputElement>) => {
+    return <Input type="email" {...props} ref={ref} />
+  },
+)
+
+export const NumberInput = forwardRef(
+  (props: Omit<InputProps, 'type'>, ref: ForwardedRef<HTMLInputElement>) => {
+    return <Input type="number" {...props} ref={ref} />
+  },
+)
+
+// For backwards compatibility
+export { RadioButton } from '../radioButton/radioButton'
+export { Checkbox } from '../checkbox/checkbox'

package/src/lib/form/radioButton/index.tsx

@@ -0,0 +1,2 @@
+export * from './radioButton'
+export * from './radioGroup'

package/src/lib/form/radioButton/radioButton.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { RadioButton } from './radioButton'
+import { RadioGroup } from './radioGroup'
+import * as RadioButtonStories from './radioButton.stories';
+
+export const RadioButtonTemplate = ({ ...props }) => <RadioButton {...props} />
+
+export const RadioGroupTemplate = ({ ...props }) => <RadioGroup {...props} />
+
+<Meta of={RadioButtonStories} />
+
+# Radio button
+
+Simple Radio Button Component
+
+<Canvas of={RadioButtonStories.Default} />
+
+## Radio Group
+
+Radio buttons are typically used in a group. Check the RadioGroup stories for examples.
+
+## Properties
+
+<Controls />