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

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

@@ -0,0 +1,120 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
+import { ChangeEvent, createRef } from 'react'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { TextArea } from './textarea'
+
+describe('TextArea', () => {
+  it('renders', () => {
+    render(<TextArea label="Label" />)
+    expect(screen.getByLabelText('Label')).toBeVisible()
+  })
+
+  it('has the correct value', () => {
+    render(<TextArea label="Label" value="Value" />)
+    expect(screen.getByLabelText('Label')).toHaveValue('Value')
+  })
+
+  it('has the correct label', () => {
+    render(<TextArea label="Label" value="Value" />)
+    expect(screen.getByLabelText('Label')).toHaveValue('Value')
+  })
+
+  it('should fire onChange', async () => {
+    const user = userEvent.setup()
+    const mockFn: jest.Mock = jest
+      .fn()
+      .mockImplementation(
+        (event: ChangeEvent<HTMLTextAreaElement>) => event.target.value,
+      )
+
+    render(<TextArea label="Label" onChange={mockFn} />)
+
+    const inputElement = await screen.findByLabelText('Label')
+    await act(async () => await user.click(inputElement))
+    await act(async () => await user.keyboard('cat'))
+
+    expect(mockFn).toBeCalled()
+    expect(mockFn).lastReturnedWith('cat')
+  })
+
+  it('should be controlled with value prop', async () => {
+    const user = userEvent.setup()
+    const mockFn = jest.fn()
+
+    const { rerender } = render(
+      <TextArea
+        label="Label"
+        value="12345"
+        onChange={(e) => mockFn(e.currentTarget.value)}
+      />,
+    )
+    const inputElement = await screen.findByLabelText('Label')
+
+    expect(inputElement).toHaveValue('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')
+    rerender(<TextArea label="Label" value="54321" />)
+    expect(inputElement).toHaveValue('54321')
+  })
+
+  it('value can be changed to empty string', async () => {
+    const mockFn = jest.fn()
+
+    const { rerender } = render(
+      <TextArea
+        label="Label"
+        value="12345"
+        onChange={(e) => mockFn(e.currentTarget.value)}
+      />,
+    )
+
+    const inputElement = await screen.findByLabelText('Label')
+
+    expect(inputElement).toHaveValue('12345')
+
+    await rerender(<TextArea label="Label" value="" />)
+
+    expect(inputElement).toHaveValue('')
+  })
+
+  it('resets correctly', async () => {
+    render(
+      <form role="form">
+        <TextArea label="Label" />
+      </form>,
+    )
+
+    const input = screen.getByLabelText('Label') as HTMLInputElement
+    input.value = 'Hello'
+    expect(screen.getByLabelText('Label')).toHaveValue('Hello')
+
+    const form = screen.getByRole('form') as HTMLFormElement
+    form.reset()
+
+    expect(screen.getByLabelText('Label')).toHaveValue('')
+  })
+
+  it('validates', () => {
+    render(
+      <TextArea
+        label="Label"
+        validator={{ message: 'valid message', indicator: 'success' }}
+      />,
+    )
+    expect(screen.getByText('valid message')).toBeVisible()
+  })
+
+  it('ref becomes button element', () => {
+    const ref = createRef<HTMLTextAreaElement>()
+    render(<TextArea label="label" ref={ref} />)
+
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement)
+  })
+})

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

@@ -0,0 +1,86 @@
+import { TextArea } from './textarea'
+
+const TextAreaTemplate = ({ ...props }) => <TextArea {...props} />
+
+export default {
+  title: 'Components/Form/TextArea',
+  component: TextArea,
+}
+
+export const Default = {
+  render: TextAreaTemplate.bind({}),
+  name: 'TextArea',
+
+  parameters: {
+    componentIds: ['component-textarea'],
+  },
+
+  args: {
+    label: 'Text Area',
+  },
+}
+
+export const LabelInformation = {
+  render: TextAreaTemplate.bind({}),
+  name: 'Label Information',
+  args: {
+    label: 'Text Area',
+    info: 'Label Information',
+  },
+}
+
+export const ExpandableInformation = {
+  render: TextAreaTemplate.bind({}),
+  name: 'Expandable Information',
+  args: {
+    label: 'Text Area',
+    expandableInfo: 'Expandable Information',
+  },
+}
+
+export const MaxLength = {
+  render: TextAreaTemplate.bind({}),
+  name: 'Max Length',
+  args: {
+    label: 'Text Area',
+    maxLength: 100,
+  },
+}
+
+export const MoreRows = {
+  render: TextAreaTemplate.bind({}),
+  name: 'More Rows',
+  args: {
+    label: 'Text Area',
+    rows: 10,
+  },
+}
+
+export const ErrorMessage = {
+  render: TextAreaTemplate.bind({}),
+  name: 'Error message',
+  args: {
+    label: 'Error message',
+    validator: {
+      indicator: 'error',
+      message: 'Error message text',
+    },
+  },
+}
+
+export const Everything = {
+  render: TextAreaTemplate.bind({}),
+  name: 'Everthing enabled',
+  args: {
+    label: 'Text Area',
+    expandableInfo: 'Expandable Information',
+    info: 'Label information',
+    maxLength: 1000,
+    rows: 4,
+    validator: {
+      indicator: 'error',
+      message: 'Error message',
+    },
+    placeholder: 'Placeholder',
+  },
+}

package/src/lib/form/textarea/textarea.tsx

@@ -0,0 +1,134 @@
+import {
+  ChangeEvent,
+  DetailedHTMLProps,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import classNames from 'classnames'
+
+import type { ForwardedRef } from 'react'
+
+import {
+  IExpandableInformation,
+  IValidator,
+  randomId,
+  validateClassName,
+} from '@sebgroup/extract'
+import { FormItem } from '../../formItem'
+
+export interface ITextAreaProps
+  extends IExpandableInformation,
+    DetailedHTMLProps<
+      React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+      HTMLTextAreaElement
+    > {
+  /**
+   * Set the live region attribute of the form control footer, this will change how error messages are read by screen readers
+   * @default 'assertive'
+   */
+  'aria-live'?: React.AriaAttributes['aria-live']
+  /** Data test id used for finding elements in test */
+  testId?: string
+  /** Label describing the textarea */
+  label: string
+  /** Extra describing text, below the label */
+  info?: ReactNode
+  /** Validation object */
+  validator?: IValidator | undefined
+  /** Value of textarea */
+  value?: string
+}
+
+export const TextArea = forwardRef(
+  (
+    {
+      'aria-live': ariaLive = 'assertive',
+      'aria-describedby': ariaDescribedBy,
+      autoComplete = 'off',
+      className,
+      expandableInfo,
+      expandableInfoButtonLabel,
+      id = randomId(),
+      label,
+      info,
+      onChange,
+      role,
+      rows = 4,
+      validator,
+      value,
+      testId: dataTestId,
+      maxLength,
+      required,
+      ...props
+    }: ITextAreaProps,
+    ref: ForwardedRef<HTMLTextAreaElement>,
+  ) => {
+    const [uuid] = useState(id)
+    const [localValue, setLocalValue] = useState(value)
+
+    useEffect(() => {
+      setLocalValue(value)
+    }, [value])
+
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLTextAreaElement>) => {
+        setLocalValue(event.target.value)
+        if (onChange) onChange(event)
+      },
+      [setLocalValue, onChange],
+    )
+
+    const describedBy = classNames(ariaDescribedBy, {
+      [`gds-expandable-info-${uuid}`]: expandableInfo,
+      [`${uuid}_info`]: info,
+      [`${uuid}_message`]:
+        validator?.message !== undefined && validator.message.length > 0,
+    })
+
+    const inputClassName =
+      classNames(className, {
+        [validateClassName(validator?.indicator)]: validator,
+      }) || undefined
+
+    const rightAlignedFooterInfo = maxLength
+      ? `${localValue?.length || 0}/${maxLength}`
+      : undefined
+
+    return (
+      <FormItem
+        aria-live={ariaLive}
+        expandableInfo={expandableInfo}
+        expandableInfoButtonLabel={expandableInfoButtonLabel}
+        inputId={uuid}
+        label={label}
+        labelInformation={info}
+        role={role}
+        validator={validator}
+        rightAlignedFooterInfo={rightAlignedFooterInfo}
+      >
+        <div className="gds-input-wrapper">
+          <textarea
+            aria-describedby={describedBy || undefined}
+            aria-invalid={validator?.indicator === 'error'}
+            aria-required={required}
+            autoComplete={autoComplete}
+            className={inputClassName || undefined}
+            id={uuid}
+            onChange={handleChange}
+            role={role}
+            rows={rows}
+            value={localValue}
+            data-testid={dataTestId}
+            maxLength={maxLength}
+            required={required}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      </FormItem>
+    )
+  },
+)

package/src/lib/form/useInput.ts

@@ -0,0 +1,28 @@
+import React, { InputHTMLAttributes, RefObject, useMemo, useRef } from 'react'
+
+import { randomId } from '@sebgroup/extract'
+
+const useInput = (
+  props: InputHTMLAttributes<HTMLInputElement>,
+  onChanges?: (event: React.ChangeEvent<HTMLInputElement>) => void,
+  onChangeInput?: (value: string) => string,
+): InputHTMLAttributes<HTMLInputElement> & {
+  ref: RefObject<HTMLInputElement | null>
+} => {
+  const id = useMemo(() => props.id || randomId(), [props.id])
+  const ref = useRef<HTMLInputElement>(null)
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChanges && onChanges(event)
+    onChangeInput && onChangeInput(event.target.value)
+  }
+
+  return {
+    ...props,
+    id,
+    ref,
+    onChange,
+  }
+}
+
+export default useInput

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

@@ -0,0 +1,56 @@
+import { validateInputValue } from './validateInput'
+
+describe('ValidateInput Function', () => {
+  /* eslint-disable-next-line */
+  const args: any = {
+    target: {},
+    rules: { type: 'Required' },
+    setError: jest.fn(),
+  }
+
+  it('Should return error when value is undefined', () => {
+    args.target = { name: 'text', value: undefined, type: 'text' }
+    expect(validateInputValue(args.target, args.rules, args.setError)).toBe(
+      'error',
+    )
+  })
+
+  it('Should return null if input has value', () => {
+    args.target = { name: 'text', value: 'value', type: 'text' }
+    expect(validateInputValue(args.target, args.rules, args.setError)).toBe(
+      null,
+    )
+  })
+
+  it('Should validate checked value', () => {
+    args.target = {
+      name: 'text',
+      value: 'value',
+      type: 'checkbox',
+      checked: true,
+    }
+    expect(validateInputValue(args.target, args.rules, args.setError)).toBe(
+      null,
+    )
+  })
+
+  it('Should throw error for checked value', () => {
+    args.target = {
+      name: 'text',
+      value: null,
+      type: 'checkbox',
+      checked: false,
+    }
+    expect(validateInputValue(args.target, args.rules, args.setError)).not.toBe(
+      null,
+    )
+  })
+
+  it('Should use custom validation', () => {
+    args.target = { name: 'text', value: 'value', type: 'text' }
+    args.rules = { type: 'Required', custom: () => 'customError' }
+    expect(validateInputValue(args.target, args.rules, args.setError)).toBe(
+      'customError',
+    )
+  })
+})

package/src/lib/form/validateInput.ts

@@ -0,0 +1,77 @@
+import { ValidatorRules } from '@sebgroup/extract'
+
+interface InputTargetType {
+  name: string
+  value: string
+  type?: string
+  checked?: boolean
+}
+
+/* eslint-disable-next-line */
+export const validateInputValue = (
+  target: InputTargetType,
+  rules: ValidatorRules,
+  setError: React.Dispatch<React.SetStateAction<Record<string, any>>>,
+) => {
+  const errorMessage: string | undefined = validateInputValueErrors(
+    rules,
+    target,
+  ) as string
+  errorMessage
+    ? setErrorInsert(setError, target.name)
+    : setErrorRemove(setError, target.name)
+  return errorMessage
+}
+
+const validateInputValueErrors = (
+  rules: ValidatorRules,
+  target: InputTargetType,
+) => {
+  const { value } = target
+
+  if (rules?.custom instanceof Function) {
+    return rules?.custom()
+  }
+  return validateTextInputValues(value, rules)
+}
+
+/* eslint-disable-next-line */
+const setErrorInsert = (
+  setError: React.Dispatch<React.SetStateAction<Record<string, any>>>,
+  name: string,
+) => {
+  /* eslint-disable-next-line */
+  setError((errors: Record<string, any>) => {
+    return {
+      ...errors,
+      [name]: true,
+    }
+  })
+}
+
+/* eslint-disable-next-line */
+const setErrorRemove = (
+  setError: React.Dispatch<React.SetStateAction<Record<string, any>>>,
+  name: string,
+) => {
+  /* eslint-disable-next-line */
+  setError((errors: Record<string, any>) => {
+    /* eslint-disable-next-line */
+    const newError: Record<string, any> = { ...errors }
+    delete newError[name]
+    return newError
+  })
+}
+
+const validateTextInputValues = (value: string, rules: ValidatorRules) => {
+  switch (rules?.type) {
+    case 'Required': {
+      return value === '' || value === undefined || value === null
+        ? 'error'
+        : null
+    }
+    default: {
+      return
+    }
+  }
+}

package/src/lib/formItem/formItem.mdx

@@ -0,0 +1,21 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { FormItem } from './formItem'
+import { Select, Option } from '../select'
+import { NumberInput } from '../form/input/input'
+import * as FormItemStories from './formItem.stories';
+
+<Meta of={FormItemStories} />
+
+# FormItem
+
+<Canvas of={FormItemStories.TextInput} />
+
+### Expandable information
+
+<Canvas of={FormItemStories.ExpandableInformation} />
+
+Expandable information can also be used with JSX:
+
+<Canvas of={FormItemStories.ExpandableInformationJsx} />
+
+<Controls />

package/src/lib/formItem/formItem.spec.tsx

@@ -0,0 +1,97 @@
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { IValidator } from '@sebgroup/extract'
+import { FormItem } from './formItem'
+
+const formItemProps = {
+  label: 'Number of installments',
+  labelInformation: 'How many installments you want to pay of your loan with',
+  expandableInfo: 'This is longer information that is expandable',
+  validator: {
+    message: 'This is an error message',
+    indicator: 'error',
+  } as IValidator,
+  inputId: '12345',
+  expandableInfoButtonLabel: 'Button label',
+  role: 'radiogroup',
+}
+
+describe('FormItem', () => {
+  it('should display label', function () {
+    render(
+      <FormItem {...formItemProps}>
+        <input type="text" />
+      </FormItem>,
+    )
+    expect(screen.getByLabelText(formItemProps.label)).toBeInTheDocument()
+  })
+
+  it('should display label information', function () {
+    render(
+      <FormItem {...formItemProps}>
+        <input type="text" />
+      </FormItem>,
+    )
+    expect(screen.getByText(formItemProps.labelInformation)).toBeInTheDocument()
+  })
+
+  it('should display expandable information button', function () {
+    render(
+      <FormItem {...formItemProps}>
+        <input type="text" />
+      </FormItem>,
+    )
+    expect(screen.getByRole('button')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button').getAttribute('aria-controls'),
+    ).toBeTruthy()
+    expect(screen.getByRole('button').classList.contains('icon')).toEqual(true)
+  })
+
+  it('should display expandable information when expandable info button is pressed', async function () {
+    render(
+      <FormItem {...formItemProps}>
+        <input type="text" />
+      </FormItem>,
+    )
+    expect(screen.queryByText(formItemProps.expandableInfo)).toBeNull()
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole('button'))
+    })
+
+    expect(await screen.findByText(formItemProps.expandableInfo)).toBeVisible()
+  })
+
+  it('should get correct role from prop', function () {
+    render(
+      <FormItem {...formItemProps}>
+        <input type="text" />
+      </FormItem>,
+    )
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument()
+  })
+
+  it('should set correct classes when validated', function () {
+    const { container } = render(
+      <FormItem {...formItemProps}>
+        <input type="text" />
+      </FormItem>,
+    )
+    expect(container.querySelectorAll('.is-invalid').length).toEqual(1)
+    expect(
+      container
+        .querySelectorAll('.is-invalid')[0]
+        .classList.contains('gds-form-item'),
+    ).toEqual(true)
+    expect(
+      screen.getByText(formItemProps.validator.message),
+    ).toBeInTheDocument()
+    expect(
+      screen
+        .getByText(formItemProps.validator.message)
+        .classList.contains('form-info'),
+    ).toEqual(true)
+  })
+})

package/src/lib/formItem/formItem.stories.tsx

@@ -0,0 +1,68 @@
+import { NumberInput } from '../form/input/input'
+import { Option, Select } from '../select'
+import { FormItem } from './formItem'
+
+const Template = () => {
+  return (
+    <>
+      <Select label="This is a label" info="this is information label">
+        <Option>This is an option</Option>
+        <Option>This is an option</Option>
+      </Select>
+      <Select label="This is a label" info="this is information label">
+        <Option>This is an option</Option>
+        <Option>This is an option</Option>
+      </Select>
+    </>
+  )
+}
+
+export default {
+  title: 'Components/FormItem',
+  component: FormItem,
+}
+
+export const TextInput = {
+  render: Template.bind({}),
+  name: 'TextInput',
+
+  parameters: {
+    componentIds: ['component-input'],
+  },
+
+  args: {
+    label: 'Text input',
+    info: 'Input some text here',
+  },
+}
+
+export const ExpandableInformation = {
+  render: () => (
+    <NumberInput
+      label="Hur mycket vill du låna?"
+      info="För att du ska kunna få låna pengar behöver vi veta hur mycket"
+      expandableInfo="This is some expandable information that is very long as was created that way in order to test how it preforms in such a situation"
+      expandableInfoButtonLabel="Toggle additional information"
+    />
+  ),
+
+  name: 'Expandable information',
+}
+
+export const ExpandableInformationJsx = {
+  render: () => (
+    <NumberInput
+      label="Hur mycket vill du låna?"
+      info="För att du ska kunna få låna pengar behöver vi veta hur mycket"
+      expandableInfo={
+        <>
+          Using JSX here is useful if you need to include for example a
+          <a href="#">link</a>
+        </>
+      }
+      expandableInfoButtonLabel="Toggle additional information"
+    />
+  ),
+
+  name: 'Expandable information JSX',
+}