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

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

@@ -0,0 +1,29 @@
+/* eslint no-console: "off" */
+import { RadioButton } from './radioButton'
+import { RadioGroup } from './radioGroup'
+
+const RadioButtonTemplate = ({ ...props }) => <RadioButton {...props} />
+const RadioGroupTemplate = ({ ...props }) => <RadioGroup {...props} />
+
+export default {
+  title: 'Components/Form/RadioButton',
+  component: RadioButton,
+}
+
+export const Default = {
+  render: RadioButtonTemplate.bind({}),
+  name: 'RadioButton',
+
+  parameters: {
+    componentIds: ['component-radiobutton'],
+  },
+
+  args: {
+    label: 'Radio Button',
+    value: 'Button value',
+
+    onChange: (e) => {
+      console.log(e.target.checked)
+    },
+  },
+}

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

@@ -0,0 +1,40 @@
+import { forwardRef, HTMLProps } from 'react'
+import classNames from 'classnames'
+
+import { IValidator, validateClassName } from '@sebgroup/extract'
+import useInput from '../useInput'
+
+export interface RadioButtonProps extends HTMLProps<HTMLInputElement> {
+  label: string
+  testId?: string
+  validator?: IValidator
+  value: string
+}
+
+export const RadioButton = forwardRef(
+  (
+    { label, validator, testId, ...props }: RadioButtonProps,
+    ref: React.ForwardedRef<HTMLInputElement>,
+  ) => {
+    const { id } = useInput(props)
+
+    const inputClassNames = classNames(
+      validator && validateClassName(validator?.indicator),
+    )
+
+    return (
+      <label htmlFor={id} className="form-control">
+        <input
+          id={id}
+          type="radio"
+          data-testid={testId}
+          {...props}
+          className={inputClassNames}
+          ref={ref}
+        />
+        <span>{label}</span>
+        <i />
+      </label>
+    )
+  },
+)

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

@@ -0,0 +1,48 @@
+import { Meta, Story, Canvas, ArgTypes, Markdown } from '@storybook/blocks'
+import { RadioButton } from './radioButton'
+import { RadioGroup } from './radioGroup'
+import * as RadioGroupStories from './radioGroup.stories';
+
+export const RadioButtonTemplate = ({ ...props }) => <RadioButton {...props} />
+
+export const RadioGroupTemplate = ({ ...props }) => (
+  <RadioGroup {...props}>
+    <RadioButton value={'value-1'} label="First label" />
+    <RadioButton value={'value-2'} label="Second label" />
+  </RadioGroup>
+)
+
+<Meta of={RadioGroupStories} />
+
+## RadioGroup and RadioButton Components
+
+### RadioGroup
+
+`RadioGroup` is a container component for managing radio buttons, ensuring only one can be selected at a time. It provides customization options such as horizontal alignment, default selection, and expandable information. The component can also be configured with validation functions and event handlers.
+
+### RadioButton
+
+`RadioButton` represents an individual radio button within a `RadioGroup`. It extends native HTML input properties for customization. Each `RadioButton` can have its own label, value, and optional test ID. Validation functions can be applied to individual radio buttons if needed.
+
+Together, `RadioGroup` and `RadioButton` components facilitate the use of radio buttons in React applications.
+
+### Default Radio Group
+
+<Canvas of={RadioGroupStories.Default} />
+
+## Expandable information
+
+<Canvas of={RadioGroupStories.ExpandableInformation} />
+
+## Validation
+
+<Canvas of={RadioGroupStories.Validation} />
+
+## Horizontal
+
+<Canvas of={RadioGroupStories.Horizontal} />
+
+### Props of RadioGroup
+
+<ArgTypes of={RadioGroup} />
+

package/src/lib/form/radioButton/radioGroup.spec.tsx

@@ -0,0 +1,146 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { IValidator } from '@sebgroup/extract'
+import { RadioButton } from '../input/input'
+import RadioGroup from './radioGroup'
+
+const radioBtnValues: Array<{ label: string; value: string }> = [
+  {
+    value: 'Car 1',
+    label: 'Car 1',
+  },
+  {
+    value: 'Car 2',
+    label: 'Car 2',
+  },
+]
+
+type MockComponentProps = {
+  validator?: IValidator
+  valueSelected?: string
+  defaultSelected?: string
+  onChangeRadio?: (value: string) => string
+}
+
+const MockComponent = (props: MockComponentProps) => (
+  <RadioGroup
+    label="Radio group label"
+    labelInformation="Radio group label information"
+    {...props}
+  >
+    {radioBtnValues.map(
+      (value: { label: string; value: string }, index: number) => (
+        <RadioButton key={index} {...value} />
+      ),
+    )}
+  </RadioGroup>
+)
+
+describe('RadioButton Group Component', () => {
+  it('Should render component with label and label information', () => {
+    render(<MockComponent />)
+    expect(screen.getByText('Radio group label')).toBeVisible()
+    expect(screen.getByText('Radio group label information')).toBeVisible()
+    expect(screen.getAllByText(/Car/)).toHaveLength(2)
+  })
+
+  it('Should render any non radio button components', () => {
+    render(<RadioGroup>test</RadioGroup>)
+    expect(screen.getByText('test')).toBeVisible()
+  })
+
+  it('Should fire onChangeRadio', () => {
+    const mockFn: jest.Mock = jest
+      .fn()
+      .mockImplementation((value: string) => value)
+    const { container } = render(<MockComponent onChangeRadio={mockFn} />)
+    fireEvent.click(screen.getByText('Car 1'))
+    expect(mockFn).toBeCalled()
+    expect(mockFn).lastCalledWith('Car 1')
+    expect(mockFn).toBeCalledWith('Car 1')
+    expect(
+      container.querySelectorAll<HTMLInputElement>("input[type='radio']")[0]
+        ?.checked,
+    ).toEqual(true)
+    fireEvent.click(screen.getByText('Car 2'))
+    expect(mockFn).lastCalledWith('Car 2')
+    expect(mockFn).toBeCalledWith('Car 2')
+    expect(
+      container.querySelectorAll<HTMLInputElement>("input[type='radio']")[1]
+        ?.checked,
+    ).toEqual(true)
+  })
+
+  it('Should render validator: invalid', () => {
+    const { container } = render(
+      <MockComponent
+        validator={{ message: 'invalid message', indicator: 'error' }}
+      />,
+    )
+    expect(screen.getByText('invalid message')).toBeVisible()
+    expect(container.querySelectorAll('.is-invalid')).toHaveLength(3)
+    expect(
+      screen.getByText('invalid message').classList.contains('form-info'),
+    ).toEqual(true)
+  })
+
+  it('Should reset radio values when form reset', () => {
+    const { container } = render(
+      <form>
+        <MockComponent
+          validator={{ message: 'invalid message', indicator: 'error' }}
+        />
+        <button type="reset">reset</button>
+      </form>,
+    )
+    expect(
+      container.querySelector<HTMLInputElement>("input[type='radio']")?.checked,
+    ).toBe(false)
+    fireEvent.click(screen.getByText('Car 1'))
+    expect(
+      container.querySelector<HTMLInputElement>("input[type='radio']")?.checked,
+    ).toBe(true)
+    fireEvent.click(screen.getByText('reset'))
+    expect(
+      container.querySelector<HTMLInputElement>("input[type='radio']")?.checked,
+    ).toBe(false)
+  })
+
+  it('should select correct input when using default selected', async function () {
+    const { container } = render(<MockComponent defaultSelected={'Car 2'} />)
+
+    expect(
+      container.querySelectorAll<HTMLInputElement>("input[type='radio']")[1]
+        ?.checked,
+    ).toBe(true)
+  })
+
+  it('should be able to set value programmatically', async function () {
+    const { container, rerender } = render(
+      <MockComponent defaultSelected={'Car 1'} />,
+    )
+
+    rerender(
+      <MockComponent defaultSelected={'Car 1'} valueSelected={'Car 2'} />,
+    )
+
+    expect(
+      container.querySelectorAll<HTMLInputElement>("input[type='radio']")[0]
+        ?.checked,
+    ).toBe(false)
+    expect(
+      container.querySelectorAll<HTMLInputElement>("input[type='radio']")[1]
+        ?.checked,
+    ).toBe(true)
+
+    rerender(
+      <MockComponent defaultSelected={'Car 1'} valueSelected={'Car 1'} />,
+    )
+
+    expect(
+      container.querySelectorAll<HTMLInputElement>("input[type='radio']")[0]
+        ?.checked,
+    ).toBe(true)
+  })
+})

package/src/lib/form/radioButton/radioGroup.stories.tsx

@@ -0,0 +1,85 @@
+import { RadioButton } from './radioButton'
+import { RadioGroup } from './radioGroup'
+
+const RadioButtonTemplate = ({ ...props }) => <RadioButton {...props} />
+
+const RadioGroupTemplate = ({ ...props }) => (
+  <RadioGroup {...props}>
+    <RadioButton value={'value-1'} label="First label" />
+    <RadioButton value={'value-2'} label="Second label" />
+  </RadioGroup>
+)
+
+export default {
+  title: 'Components/Form/RadioGroup',
+  component: RadioGroup,
+}
+
+export const Default = {
+  render: RadioGroupTemplate.bind({}),
+  name: 'Default',
+
+  parameters: {
+    componentIds: ['component-radiogroup'],
+  },
+
+  args: {
+    label: 'Radio group',
+    labelInformation: 'This is longer information describing the input',
+  },
+}
+
+export const ExpandableInformation = {
+  render: () => (
+    <RadioGroup
+      label="Radio Group"
+      labelInformation="Radio Group Description"
+      expandableInfo="This is a long expandable information that can be sent to the radio group component"
+      expandableInfoButtonLabel="Toggle additional information"
+    >
+      <RadioButton label="Radio Button 1" name="name" value="button1" />
+      <RadioButton label="Radio Button 2" name="name" value="button2" />
+    </RadioGroup>
+  ),
+
+  name: 'Expandable information',
+}
+
+export const Validation = {
+  render: () => (
+    <RadioGroup
+      label="Radio Group"
+      labelInformation="Radio Group Description"
+      validator={{
+        message:
+          'This form item is invalid! And what happens if its really long?',
+        indicator: 'error',
+      }}
+    >
+      <RadioButton label="Radio Button 1" name="name" value="button1" />
+      <RadioButton label="Radio Button 2" name="name" value="button2" />
+    </RadioGroup>
+  ),
+
+  name: 'Validation',
+}
+
+export const Horizontal = {
+  render: () => (
+    <RadioGroup
+      label="Radio Group"
+      labelInformation="Radio Group Description"
+      validator={{
+        message:
+          'This form item is invalid! And what happens if its really long?',
+        indicator: 'error',
+      }}
+      horizontal
+    >
+      <RadioButton label="Radio Button 1" name="name" value="button1" />
+      <RadioButton label="Radio Button 2" name="name" value="button2" />
+    </RadioGroup>
+  ),
+
+  name: 'Horizontal',
+}

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

@@ -0,0 +1,134 @@
+import React, { ChangeEvent, useRef, useState } from 'react'
+import classNames from 'classnames'
+
+import {
+  IExpandableInformation,
+  ILabelAndLabelInformation,
+  IValidator,
+  randomId,
+} from '@sebgroup/extract'
+import { FormItem } from '../../formItem'
+import { RadioButtonProps } from './radioButton'
+
+export interface RadioGroupProps
+  extends IExpandableInformation,
+    ILabelAndLabelInformation {
+  /**
+   * 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']
+  label?: string
+  title?: string
+  valueSelected?: string
+  description?: string
+  defaultSelected?: string
+  validator?: IValidator
+  onChangeRadio?: (value: string) => string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  name?: string
+  horizontal?: boolean
+}
+
+export const RadioGroup = ({
+  'aria-live': ariaLive,
+  defaultSelected,
+  valueSelected,
+  label,
+  /** @deprecated use `label` instead */
+  title,
+  labelInformation,
+  /** @deprecated use `labelInformation` instead */
+  description,
+  expandableInfo,
+  expandableInfoButtonLabel,
+  validator,
+  onChangeRadio,
+  onChange,
+  name: propName = randomId(),
+  horizontal,
+  children,
+}: React.PropsWithChildren<RadioGroupProps>) => {
+  const [selected, setSelected] = useState<string | undefined>(
+    valueSelected ?? defaultSelected,
+  )
+  const [prevValueSelected, setPrevValueSelected] = useState(valueSelected)
+  const [name] = useState(propName)
+  const [uuid] = useState(randomId())
+
+  if (valueSelected !== prevValueSelected) {
+    setSelected(valueSelected)
+    setPrevValueSelected(valueSelected)
+  }
+
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value !== selected) {
+      setSelected(event.target.value)
+      onChangeRadio && onChangeRadio(event.target.value)
+      onChange && onChange(event)
+    }
+  }
+
+  const radioBtnRef = useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (radioBtnRef && radioBtnRef.current) {
+      const form: HTMLFormElement = radioBtnRef?.current
+        ?.form as HTMLFormElement
+      const resetListener = () => {
+        setSelected(undefined)
+      }
+      form?.addEventListener('reset', resetListener)
+      return () => form?.removeEventListener('reset', resetListener)
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {}
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const labelFromTitle = label || title
+  const labelInformationFromDescription = labelInformation || description
+
+  const formItemProps = {
+    validator,
+    labelInformation: labelInformationFromDescription,
+    label: labelFromTitle,
+    expandableInfo,
+    expandableInfoButtonLabel,
+    role: 'radiogroup',
+    'aria-live': ariaLive,
+  }
+
+  const radioGroupWrapperClassNames = classNames('gds-radio-group-wrapper', {
+    'gds-radio-group-wrapper--horizontal': horizontal,
+  })
+
+  const describedBy = classNames({
+    [`${uuid}_message`]:
+      validator?.message !== undefined && validator.message.length > 0,
+    [`${uuid}_info`]: labelInformation,
+    [`gds-expandable-info-${uuid}`]: expandableInfo,
+  })
+
+  return (
+    <FormItem {...formItemProps} inputId={uuid}>
+      <div className={radioGroupWrapperClassNames}>
+        {React.Children.map(children as React.ReactNode, (radioButton) => {
+          return React.isValidElement<RadioButtonProps>(radioButton)
+            ? React.cloneElement(radioButton, {
+                'aria-describedby': describedBy,
+                validator: validator,
+                onChange: handleOnChange,
+                checked: selected === radioButton.props.value,
+                name,
+                ref: radioBtnRef,
+              })
+            : radioButton
+        })}
+      </div>
+    </FormItem>
+  )
+}
+
+export default RadioGroup

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

@@ -0,0 +1 @@
+export * from './text'

package/src/lib/form/text/text.mdx

@@ -0,0 +1,13 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Text } from './text'
+import * as TextStories from './text.stories';
+
+export const TextInputTempalte = ({ children }) => <Text>{children}</Text>
+
+<Meta of={TextStories} />
+
+# Text
+
+<Canvas>
+  <Story of={TextStories.Default} />
+</Canvas>

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

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+
+import Text from './text'
+
+describe('Text', () => {
+  it('renders', () => {
+    render(<Text>Hello</Text>)
+
+    expect(screen.getByText('Hello')).toBeVisible()
+  })
+})

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

@@ -0,0 +1,17 @@
+import { Text } from './text'
+
+const TextInputTempalte = ({ children }) => <Text>{children}</Text>
+
+export default {
+  title: 'Components/Form/Text',
+  component: Text,
+}
+
+export const Default = {
+  render: TextInputTempalte.bind({}),
+  name: 'Text',
+
+  args: {
+    children: 'This is a line of text',
+  },
+}

package/src/lib/form/text/text.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+
+interface TextProps {
+  children: ReactNode
+}
+
+export const Text = ({ children }: TextProps) => (
+  <span className="form-text">{children}</span>
+)
+
+export default Text

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

@@ -0,0 +1 @@
+export * from './textarea'

package/src/lib/form/textarea/textarea.mdx

@@ -0,0 +1,41 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { TextArea } from './textarea'
+import * as TextareaStories from './textarea.stories';
+
+export const TextAreaTemplate = ({ ...props }) => <TextArea {...props} />
+
+<Meta of={TextareaStories} />
+
+# Text Area
+
+## Default
+
+<Canvas of={TextareaStories.Default} />
+
+## Label Information
+
+<Canvas of={TextareaStories.LabelInformation} />
+
+## Expandable Information
+
+<Canvas of={TextareaStories.ExpandableInformation} />
+
+## Max Length
+
+<Canvas of={TextareaStories.MaxLength} />
+
+## More Rows
+
+<Canvas of={TextareaStories.MoreRows} />
+
+## Validation
+
+<Canvas of={TextareaStories.ErrorMessage} />
+
+## Everything On
+
+<Canvas of={TextareaStories.Everything} />
+
+## Properties
+
+<Controls />