diff options
Diffstat (limited to 'src/components/molecules/forms/switch')
| -rw-r--r-- | src/components/molecules/forms/switch/switch.stories.tsx | 6 | ||||
| -rw-r--r-- | src/components/molecules/forms/switch/switch.test.tsx | 12 | ||||
| -rw-r--r-- | src/components/molecules/forms/switch/switch.tsx | 55 |
3 files changed, 46 insertions, 27 deletions
diff --git a/src/components/molecules/forms/switch/switch.stories.tsx b/src/components/molecules/forms/switch/switch.stories.tsx index eb169ad..a88e6ab 100644 --- a/src/components/molecules/forms/switch/switch.stories.tsx +++ b/src/components/molecules/forms/switch/switch.stories.tsx @@ -1,7 +1,7 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Switch as SwitchComponent, SwitchOption } from './switch'; -import { ChangeEventHandler, useCallback, useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEventHandler, useCallback, useState } from 'react'; import { Legend } from '../../../atoms'; +import { Switch as SwitchComponent, type SwitchOption } from './switch'; /** * Switch - Storybook Meta diff --git a/src/components/molecules/forms/switch/switch.test.tsx b/src/components/molecules/forms/switch/switch.test.tsx index 3d091cb..e2e27be 100644 --- a/src/components/molecules/forms/switch/switch.test.tsx +++ b/src/components/molecules/forms/switch/switch.test.tsx @@ -1,7 +1,7 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Legend } from '../../../atoms'; -import { Switch, SwitchOption } from './switch'; +import { Switch, type SwitchOption } from './switch'; const doNothing = () => { /* Do nothing. */ @@ -27,9 +27,9 @@ describe('Switch', () => { ); expect( - screen.getByRole('radiogroup', { name: legend }) + rtlScreen.getByRole('radiogroup', { name: legend }) ).toBeInTheDocument(); - expect(screen.getAllByRole('radio')).toHaveLength(items.length); + expect(rtlScreen.getAllByRole('radio')).toHaveLength(items.length); }); it('can render a disabled switch', () => { @@ -43,8 +43,8 @@ describe('Switch', () => { /> ); - const radios = screen.getAllByRole<HTMLInputElement>('radio'); + const radios = rtlScreen.getAllByRole<HTMLInputElement>('radio'); expect(radios.every((radio) => radio.disabled)).toBe(true); - expect(screen.getByRole('radiogroup')).toBeDisabled(); + expect(rtlScreen.getByRole('radiogroup')).toBeDisabled(); }); }); diff --git a/src/components/molecules/forms/switch/switch.tsx b/src/components/molecules/forms/switch/switch.tsx index d340a0c..df2ba0c 100644 --- a/src/components/molecules/forms/switch/switch.tsx +++ b/src/components/molecules/forms/switch/switch.tsx @@ -1,14 +1,21 @@ -import type { FC, ChangeEventHandler, ReactNode, ReactElement } from 'react'; +import { + type FC, + type ChangeEventHandler, + type ReactNode, + type ReactElement, + forwardRef, + type ForwardRefRenderFunction, +} from 'react'; import { Fieldset, type FieldsetProps, - LabelProps, - RadioProps, + type LabelProps, + type RadioProps, Label, Radio, } from '../../../atoms'; +import type { TooltipProps } from '../../tooltip'; import styles from './switch.module.scss'; -import { TooltipProps } from '../../tooltip'; type SwitchItemProps = Omit<LabelProps, 'children' | 'htmlFor' | 'isRequired'> & Pick<RadioProps, 'isDisabled' | 'name'> & { @@ -94,24 +101,31 @@ export type SwitchProps = Omit<FieldsetProps, 'children'> & { value: SwitchOption['value']; }; -/** - * Switch component. - */ -export const Switch: FC<SwitchProps> = ({ - className = '', - isDisabled = false, - items, - name, - onSwitch, - tooltip, - value, - ...props -}) => { +const SwitchWithRef: ForwardRefRenderFunction< + HTMLFieldSetElement, + SwitchProps +> = ( + { + className = '', + isDisabled = false, + items, + name, + onSwitch, + tooltip, + value, + ...props + }, + ref +) => { + const fieldsetClass = `${styles.fieldset} ${className}`; + return ( <Fieldset {...props} - className={`${styles.fieldset} ${className}`} + className={fieldsetClass} isDisabled={isDisabled} + ref={ref} + // eslint-disable-next-line react/jsx-no-literals -- Role allowed role="radiogroup" > {tooltip} @@ -130,3 +144,8 @@ export const Switch: FC<SwitchProps> = ({ </Fieldset> ); }; + +/** + * Switch component. + */ +export const Switch = forwardRef(SwitchWithRef); |
