IBX-10619: Radio buttons list

packages/components/src/formControls/InputText/InputText.tsx

@@ -56,4 +56,4 @@ const FormControlInputText = ({
 
 export default FormControlInputText;
 
-export const FormControlInputTextStateful = withStateValue<ValueType>(FormControlInputText);
+export const FormControlInputTextStateful = withStateValue<FormControlInputTextProps, ValueType>(FormControlInputText);

packages/components/src/formControls/RadioButtonsList/RadioButtonsList.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import { DIRECTION } from './RadioButtonsList.types';
+import { RadioButtonsListStateful } from './RadioButtonsList';
+
+const meta: Meta<typeof RadioButtonsListStateful> = {
+    component: RadioButtonsListStateful,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs', 'foundation', 'base'],
+    argTypes: {
+        className: { control: 'text' },
+        direction: {
+            control: 'select',
+            options: Object.values(DIRECTION),
+        },
+        items: { control: false },
+    },
+    args: {
+        onChange: action('on-change'),
+        value: 'item1',
+        items: [
+            { id: 'item1', label: 'Item 1', value: 'item1' },
+            { id: 'item2', label: 'Item 2', value: 'item2' },
+            { id: 'item3', label: 'Item 3', value: 'item3' },
+        ],
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioButtonsListStateful>;
+
+export const Default: Story = {
+    name: 'Default',
+    args: {
+        label: 'Choice Inputs List Label',
+        helperText: 'This is a helper text',
+    },
+};
+
+export const Horizontal: Story = {
+    name: 'Horizontal',
+    args: {
+        label: 'Choice Inputs List Label',
+        helperText: 'This is a helper text',
+        direction: DIRECTION.HORIZONTAL,
+    },
+};
+
+export const NoHelper: Story = {
+    name: 'No Helper',
+    args: {
+        label: 'Choice Inputs List Label',
+    },
+};
+
+export const NoLabel: Story = {
+    name: 'No Label',
+    args: {
+        helperText: 'This is a helper text',
+    },
+};
+
+export const OnlyItems: Story = {
+    name: 'Only Items',
+    args: {},
+};

packages/components/src/formControls/RadioButtonsList/RadioButtonsList.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import BaseInputsList from '@ids-internal/partials/BaseInputsList';
+import RadioButtonField from '../RadioButtonField';
+import withStateValue from '@ids-internal/hoc/withStateValue';
+
+import { DIRECTION, RadioButtonItem, RadioButtonsListProps } from './RadioButtonsList.types';
+
+const RadioButtonsList = ({
+    className = '',
+    direction = DIRECTION.VERTICAL,
+    helperText,
+    helperTextExtra = {},
+    id,
+    items,
+    label,
+    labelExtra = {},
+    name,
+    onChange = () => undefined,
+    required = false,
+    value = '',
+}: RadioButtonsListProps) => {
+    const helperTextProps = {
+        children: helperText,
+        type: 'default' as const,
+        ...helperTextExtra,
+    };
+    const labelProps = {
+        children: label,
+        error: false,
+        htmlFor: id,
+        required,
+        ...labelExtra,
+    };
+    const renderItem = (item: RadioButtonItem) => {
+        return (
+            <RadioButtonField
+                {...item}
+                checked={item.value === value}
+                name={name}
+                onChange={(...args) => {
+                    onChange(item.value);
+                    item.onChange?.(...args);
+                }}
+            />
+        );
+    };
+
+    return (
+        <BaseInputsList
+            className={className}
+            direction={direction}
+            helperTextProps={helperTextProps}
+            items={items}
+            labelProps={labelProps}
+            renderItem={renderItem}
+        />
+    );
+};
+
+export default RadioButtonsList;
+
+export const RadioButtonsListStateful = withStateValue<RadioButtonsListProps, string>(RadioButtonsList);

packages/components/src/formControls/RadioButtonsList/RadioButtonsList.types.ts

@@ -0,0 +1,24 @@
+import { BaseComponentAttributes } from '@ids-types/general';
+
+import { DIRECTION } from '@ids-internal/partials/BaseInputsList/BaseInputsList.types';
+import { HelperTextProps } from '../../HelperText/HelperText.types';
+import { LabelProps } from '../../Label/Label.types';
+import { RadioButtonFieldProps } from '../RadioButtonField/RadioButtonField.types';
+
+export { DIRECTION };
+
+export type RadioButtonItem = Omit<RadioButtonFieldProps, 'name' | 'checked'>;
+
+export interface RadioButtonsListProps extends BaseComponentAttributes {
+    id: string;
+    name: string;
+    onChange?: (value: string) => void;
+    direction?: DIRECTION;
+    helperText?: HelperTextProps['children'];
+    helperTextExtra?: Omit<HelperTextProps, 'children' | 'type'>;
+    items: RadioButtonItem[];
+    label?: LabelProps['children'];
+    labelExtra?: Omit<LabelProps, 'children' | 'error' | 'htmlFor' | 'required'>;
+    required?: boolean;
+    value?: string;
+}

packages/components/src/formControls/RadioButtonsList/index.ts

@@ -0,0 +1,5 @@
+import RadioButtonsList from './RadioButtonsList';
+import { RadioButtonsListProps } from './RadioButtonsList.types';
+
+export default RadioButtonsList;
+export type { RadioButtonsListProps };

packages/components/src/inputs/InputText/InputText.tsx

@@ -119,4 +119,4 @@ const InputText = ({
 
 export default InputText;
 
-export const InputTextStateful = withStateValue<string | number>(InputText);
+export const InputTextStateful = withStateValue<InputTextProps, string | number>(InputText);

packages/components/src/inputs/RadioButton/RadioButton.stories.tsx

@@ -23,6 +23,7 @@ const meta: Meta<typeof RadioButtonStateful> = {
         },
     },
     args: {
+        value: 'value1',
         onBlur: action('on-blur'),
         onChange: action('on-change'),
         onFocus: action('on-focus'),

packages/components/src/inputs/RadioButton/RadioButton.types.ts

@@ -1,3 +1,5 @@
 import { BaseChoiceInputProps } from '@ids-internal/partials/BaseChoiceInput';
 
-export type RadioButtonProps = Omit<BaseChoiceInputProps, 'type'>;
+export type RadioButtonProps = Omit<BaseChoiceInputProps, 'type'> & {
+    value: string;
+};

packages/components/src/internal/hoc/withStateValue.tsx

@@ -1,18 +1,20 @@
 import React, { FC, useState } from 'react';
 
 type OnChangeFn<T> = (value: T, ...args: any[]) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
-interface WrappedComponentProps<T> {
+
+interface BaseProps<T> {
     onChange?: OnChangeFn<T>;
     value: T;
-    [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
+export type WrappedComponentProps<Props, ValueType> = BaseProps<ValueType> & Props;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default <T,>(WrappedComponent: FC<any>) => {
-    const WrapperComponent = ({ value, onChange, ...restProps }: WrappedComponentProps<T>) => {
+export default <Props, ValueType>(WrappedComponent: FC<any>) => {
+    const WrapperComponent = ({ value, onChange, ...restProps }: WrappedComponentProps<Props, ValueType>) => {
         const [componentValue, setComponentValue] = useState(value);
 
-        const handleChange = (...args: Parameters<OnChangeFn<T>>): ReturnType<OnChangeFn<T>> => {
+        const handleChange = (...args: Parameters<OnChangeFn<ValueType>>): ReturnType<OnChangeFn<ValueType>> => {
             setComponentValue(args[0]);
 
             if (onChange) {