@lumx/react 3.20.1-alpha.12 → 3.20.1-alpha.14

package/src/components/radio-button/RadioButton.test.tsx

@@ -0,0 +1,143 @@
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { RadioButton, RadioButtonProps } from '.';
+
+const CLASSNAME = RadioButton.className as string;
+
+type SetupProps = Partial<RadioButtonProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: any = { id: 'fixedId', ...propsOverride };
+    render(<RadioButton {...props} />, { wrapper });
+
+    const radioButton = getByClassName(document.body, CLASSNAME);
+    const helper = queryByClassName(radioButton, `${CLASSNAME}__helper`);
+    const label = queryByClassName(radioButton, `${CLASSNAME}__label`);
+    const input = getByTagName(radioButton, 'input');
+    return { radioButton, helper, label, input, props };
+};
+
+describe(`<${RadioButton.displayName}>`, () => {
+    describe('Props', () => {
+        it('should render correctly', () => {
+            const { radioButton, input, label, helper } = setup();
+            expect(radioButton).toBeInTheDocument();
+            expect(radioButton).toHaveClass(CLASSNAME);
+            expect(radioButton).not.toHaveClass('lumx-radio-button--is-disabled');
+            expect(radioButton).toHaveClass('lumx-radio-button--is-unchecked');
+
+            expect(label).not.toBeInTheDocument();
+            expect(helper).not.toBeInTheDocument();
+
+            expect(input).toBeInTheDocument();
+            expect(input).not.toBeChecked();
+            expect(input).not.toBeDisabled();
+        });
+
+        it('should render disabled and checked', () => {
+            const { radioButton, input } = setup({
+                isDisabled: true,
+                isChecked: true,
+            });
+            expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
+            expect(radioButton).toHaveClass('lumx-radio-button--is-checked');
+
+            expect(input).toBeChecked();
+            expect(input).toBeDisabled();
+        });
+
+        it('should render helper and label', () => {
+            const id = 'radioButton1';
+            const { props, helper, label, input } = setup({
+                id,
+                helper: 'Test helper',
+                label: 'Test label',
+            });
+
+            expect(helper).toBeInTheDocument();
+            expect(helper).toHaveTextContent(props.helper);
+            expect(helper).toHaveAttribute('id');
+
+            expect(label).toBeInTheDocument();
+            expect(label).toHaveTextContent(props.label);
+            expect(label).toHaveAttribute('for', id);
+
+            expect(input).toHaveAttribute('id', id);
+            expect(input).toHaveAttribute('aria-describedby', helper?.id);
+        });
+
+        it('should forward input props', () => {
+            const { props, input } = setup({
+                inputProps: {
+                    'aria-labelledby': 'labelledby-id',
+                },
+            });
+
+            expect(input).toHaveAttribute('aria-labelledby', props.inputProps['aria-labelledby']);
+        });
+    });
+
+    describe('Events', () => {
+        const onChange = vi.fn();
+
+        it('should trigger `onChange` when radioButton is clicked', async () => {
+            const value = 'value';
+            const name = 'name';
+            const { input } = setup({ checked: false, onChange, value, name });
+            expect(input).not.toBeChecked();
+
+            await userEvent.click(input);
+
+            expect(onChange).toHaveBeenCalledWith(value, name, expect.any(Object));
+        });
+    });
+
+    describe('Disabled state', () => {
+        it('should be disabled with isDisabled', async () => {
+            const onChange = vi.fn();
+            const { radioButton, input } = setup({ isDisabled: true, onChange });
+
+            expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
+            expect(input).toBeDisabled();
+            expect(input).toHaveAttribute('readOnly');
+
+            // Should not trigger onChange.
+            await userEvent.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('should be disabled with aria-disabled', async () => {
+            const onChange = vi.fn();
+            const { radioButton, input } = setup({ 'aria-disabled': true, onChange });
+
+            expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
+            // Note: input is not disabled (so it can be focused) but it's readOnly.
+            expect(input).not.toBeDisabled();
+            expect(input).toHaveAttribute('aria-disabled', 'true');
+            expect(input).toHaveAttribute('readOnly');
+
+            // Should not trigger onChange.
+            await userEvent.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'radioButton',
+        forwardAttributes: 'radioButton',
+        applyTheme: {
+            affects: [{ element: 'radioButton' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});

package/src/components/radio-button/RadioButton.tsx

@@ -0,0 +1,143 @@
+import { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
+
+import classNames from 'classnames';
+
+import { InputHelper, InputLabel, Theme } from '@lumx/react';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+
+/**
+ * Defines the props of the component.
+ */
+export interface RadioButtonProps extends GenericProps, HasTheme, HasAriaDisabled {
+    /** Helper text. */
+    helper?: string;
+    /** Native input id property. */
+    id?: string;
+    /** Native input ref. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Whether it is checked or not. */
+    isChecked?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Label content. */
+    label?: ReactNode;
+    /** Native input name property. */
+    name?: string;
+    /** Native input value property. */
+    value?: string;
+    /** On change callback. */
+    onChange?(value?: string, name?: string, event?: SyntheticEvent): void;
+    /** optional props for input */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'RadioButton';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<RadioButtonProps> = {};
+
+/**
+ * RadioButton component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        checked,
+        className,
+        helper,
+        id,
+        inputRef,
+        isChecked = checked,
+        label,
+        name,
+        onChange,
+        theme = defaultTheme,
+        value,
+        inputProps,
+        ...forwardedProps
+    } = otherProps;
+    const generatedInputId = useId();
+    const inputId = id || generatedInputId;
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(value, name, event);
+        }
+    };
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    isChecked,
+                    isDisabled: isAnyDisabled,
+                    isUnchecked: !isChecked,
+                    prefix: CLASSNAME,
+                    theme,
+                }),
+            )}
+        >
+            <div className={`${CLASSNAME}__input-wrapper`}>
+                <input
+                    ref={inputRef}
+                    className={`${CLASSNAME}__input-native`}
+                    {...disabledStateProps}
+                    id={inputId}
+                    type="radio"
+                    name={name}
+                    value={value}
+                    checked={isChecked}
+                    onChange={handleChange}
+                    readOnly={inputProps?.readOnly || isAnyDisabled}
+                    aria-describedby={helper ? `${inputId}-helper` : undefined}
+                    {...inputProps}
+                />
+
+                <div className={`${CLASSNAME}__input-placeholder`}>
+                    <div className={`${CLASSNAME}__input-background`} />
+                    <div className={`${CLASSNAME}__input-indicator`} />
+                </div>
+            </div>
+
+            <div className={`${CLASSNAME}__content`}>
+                {label && (
+                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
+                        {label}
+                    </InputLabel>
+                )}
+                {helper && (
+                    <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
+                        {helper}
+                    </InputHelper>
+                )}
+            </div>
+        </div>
+    );
+});
+RadioButton.displayName = COMPONENT_NAME;
+RadioButton.className = CLASSNAME;
+RadioButton.defaultProps = DEFAULT_PROPS;

package/src/components/radio-button/RadioGroup.stories.tsx

@@ -0,0 +1,39 @@
+import { RadioButton, RadioGroup } from '@lumx/react';
+import { useState } from 'react';
+
+export default { title: 'LumX components/radio-button/Radio Group' };
+
+export const Simple = () => {
+    const [value, onChange] = useState('lorem');
+
+    return (
+        <RadioGroup>
+            <RadioButton
+                isChecked={value === 'lorem'}
+                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
+                label="Radio button with help 1"
+                name="test2"
+                value="lorem"
+                onChange={onChange as any}
+            />
+
+            <RadioButton
+                isDisabled
+                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
+                label="Radio button with help 2"
+                name="test2"
+                value="ipsum"
+                onChange={onChange as any}
+            />
+
+            <RadioButton
+                isChecked={value === 'dolor'}
+                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
+                label="Radio button with help 3"
+                name="test2"
+                value="dolor"
+                onChange={onChange as any}
+            />
+        </RadioGroup>
+    );
+};

package/src/components/radio-button/RadioGroup.test.tsx

@@ -0,0 +1,29 @@
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { RadioGroup, RadioGroupProps } from './RadioGroup';
+
+const CLASSNAME = RadioGroup.className as string;
+
+type SetupProps = Partial<RadioGroupProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}) => {
+    const props: any = { ...propsOverride };
+    render(<RadioGroup {...props} />);
+
+    const radioGroup = queryByClassName(document.body, CLASSNAME);
+    return { props, radioGroup };
+};
+
+describe(`<${RadioGroup.displayName}>`, () => {
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'radioGroup',
+        forwardAttributes: 'radioGroup',
+    });
+});

package/src/components/radio-button/RadioGroup.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+/**
+ * Defines the props of the component.
+ */
+export interface RadioGroupProps extends GenericProps {
+    /** RadioButton elements */
+    children: ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'RadioGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * RadioGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, ref) => {
+    const { children, className, ...forwardedProps } = props;
+
+    return (
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
+            {children}
+        </div>
+    );
+});
+RadioGroup.displayName = COMPONENT_NAME;
+RadioGroup.className = CLASSNAME;

package/src/components/radio-button/index.ts

@@ -0,0 +1,2 @@
+export * from './RadioButton';
+export * from './RadioGroup';