diff options
Diffstat (limited to 'src/components/molecules/forms')
31 files changed, 108 insertions, 125 deletions
diff --git a/src/components/molecules/forms/ackee-toggle.stories.tsx b/src/components/molecules/forms/ackee-toggle.stories.tsx index 3f3f11e..779f49d 100644 --- a/src/components/molecules/forms/ackee-toggle.stories.tsx +++ b/src/components/molecules/forms/ackee-toggle.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import AckeeToggleComponent from './ackee-toggle'; +import { AckeeToggle } from './ackee-toggle'; import { storageKey } from './ackee-toggle.fixture'; /** @@ -7,7 +7,7 @@ import { storageKey } from './ackee-toggle.fixture'; */ export default { title: 'Molecules/Forms/Toggle', - component: AckeeToggleComponent, + component: AckeeToggle, argTypes: { bodyClassName: { control: { @@ -109,10 +109,10 @@ export default { }, }, }, -} as ComponentMeta<typeof AckeeToggleComponent>; +} as ComponentMeta<typeof AckeeToggle>; -const Template: ComponentStory<typeof AckeeToggleComponent> = (args) => ( - <AckeeToggleComponent {...args} /> +const Template: ComponentStory<typeof AckeeToggle> = (args) => ( + <AckeeToggle {...args} /> ); /** diff --git a/src/components/molecules/forms/ackee-toggle.test.tsx b/src/components/molecules/forms/ackee-toggle.test.tsx index a4d36b3..97ebbe5 100644 --- a/src/components/molecules/forms/ackee-toggle.test.tsx +++ b/src/components/molecules/forms/ackee-toggle.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import AckeeToggle from './ackee-toggle'; +import { AckeeToggle } from './ackee-toggle'; import { storageKey } from './ackee-toggle.fixture'; describe('AckeeToggle', () => { diff --git a/src/components/molecules/forms/ackee-toggle.tsx b/src/components/molecules/forms/ackee-toggle.tsx index ba77c10..32949b2 100644 --- a/src/components/molecules/forms/ackee-toggle.tsx +++ b/src/components/molecules/forms/ackee-toggle.tsx @@ -1,16 +1,18 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import useLocalStorage from '../../../utils/hooks/use-local-storage'; -import useUpdateAckeeOptions, { +import { type AckeeOptions, -} from '../../../utils/hooks/use-update-ackee-options'; -import RadioGroup, { + useLocalStorage, + useUpdateAckeeOptions, +} from '../../../utils/hooks'; +import { + RadioGroup, type RadioGroupCallback, type RadioGroupCallbackProps, type RadioGroupOption, type RadioGroupProps, } from './radio-group'; -import Tooltip, { type TooltipProps } from '../modals/tooltip'; +import { Tooltip, type TooltipProps } from '../modals/tooltip'; export type AckeeToggleProps = Pick< RadioGroupProps, @@ -43,7 +45,7 @@ export type AckeeToggleProps = Pick< * * Render a Toggle component to set reduce motion. */ -const AckeeToggle: FC<AckeeToggleProps> = ({ +export const AckeeToggle: FC<AckeeToggleProps> = ({ defaultValue, storageKey, tooltipClassName, @@ -126,8 +128,9 @@ const AckeeToggle: FC<AckeeToggleProps> = ({ return ( <RadioGroup - initialChoice={value} + {...props} kind="toggle" + initialChoice={value} legend={ackeeLabel} onChange={handleChange} options={options} @@ -139,9 +142,6 @@ const AckeeToggle: FC<AckeeToggleProps> = ({ className={tooltipClassName} /> } - {...props} /> ); }; - -export default AckeeToggle; diff --git a/src/components/molecules/forms/fieldset.stories.tsx b/src/components/molecules/forms/fieldset.stories.tsx index 85aeb7f..d53a21a 100644 --- a/src/components/molecules/forms/fieldset.stories.tsx +++ b/src/components/molecules/forms/fieldset.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import FieldsetComponent from './fieldset'; +import { Fieldset as FieldsetComponent } from './fieldset'; import { body, legend, Tooltip } from './fieldset.fixture'; /** diff --git a/src/components/molecules/forms/fieldset.test.tsx b/src/components/molecules/forms/fieldset.test.tsx index aec7a51..f397bcd 100644 --- a/src/components/molecules/forms/fieldset.test.tsx +++ b/src/components/molecules/forms/fieldset.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Fieldset from './fieldset'; +import { Fieldset } from './fieldset'; import { body, legend, Tooltip } from './fieldset.fixture'; describe('Fieldset', () => { diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx index 4cbf71d..7564d14 100644 --- a/src/components/molecules/forms/fieldset.tsx +++ b/src/components/molecules/forms/fieldset.tsx @@ -6,9 +6,9 @@ import { useRef, useState, } from 'react'; -import useOnClickOutside from '../../../utils/hooks/use-on-click-outside'; -import HelpButton from '../buttons/help-button'; -import Tooltip from '../modals/tooltip'; +import { useOnClickOutside } from '../../../utils/hooks'; +import { HelpButton } from '../buttons'; +import { Tooltip } from '../modals'; import styles from './fieldset.module.scss'; export type FieldsetProps = { @@ -59,7 +59,7 @@ export type FieldsetProps = { * * Render a fieldset with a legend. */ -const Fieldset: FC<FieldsetProps> = ({ +export const Fieldset: FC<FieldsetProps> = ({ bodyClassName = '', buttonClassName = '', children, @@ -92,17 +92,12 @@ const Fieldset: FC<FieldsetProps> = ({ }; const tooltipRef = useOnClickOutside<HTMLDivElement>(closeTooltip); + const fieldsetClass = `${styles.wrapper} ${styles[wrapperModifier]} ${className}`; + const legendClass = `${styles.legend} ${styles[legendModifier]} ${legendClassName}`; return ( - <fieldset - className={`${styles.wrapper} ${styles[wrapperModifier]} ${className}`} - {...props} - > - <legend - className={`${styles.legend} ${styles[legendModifier]} ${legendClassName}`} - > - {legend} - </legend> + <fieldset {...props} className={fieldsetClass}> + <legend className={legendClass}>{legend}</legend> {TooltipComponent && ( <> <HelpButton @@ -121,5 +116,3 @@ const Fieldset: FC<FieldsetProps> = ({ </fieldset> ); }; - -export default Fieldset; diff --git a/src/components/molecules/forms/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label.stories.tsx index 9391fd2..7dad3cb 100644 --- a/src/components/molecules/forms/flipping-label.stories.tsx +++ b/src/components/molecules/forms/flipping-label.stories.tsx @@ -1,7 +1,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import MagnifyingGlass from '../../atoms/icons/magnifying-glass'; -import FlippingLabel from './flipping-label'; +import { MagnifyingGlass } from '../../atoms'; +import { FlippingLabel } from './flipping-label'; export default { title: 'Organisms/Forms/FlippingLabel', diff --git a/src/components/molecules/forms/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label.test.tsx index 61864fd..0f5dd30 100644 --- a/src/components/molecules/forms/flipping-label.test.tsx +++ b/src/components/molecules/forms/flipping-label.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import FlippingLabel from './flipping-label'; +import { FlippingLabel } from './flipping-label'; describe('FlippingLabel', () => { it('renders a label', () => { diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label.tsx index ca83c6d..c85642b 100644 --- a/src/components/molecules/forms/flipping-label.tsx +++ b/src/components/molecules/forms/flipping-label.tsx @@ -1,6 +1,5 @@ import { FC } from 'react'; -import Label, { LabelProps } from '../../atoms/forms/label'; -import Close from '../../atoms/icons/close'; +import { Close, Label, type LabelProps } from '../../atoms'; import styles from './flipping-label.module.scss'; export type FlippingLabelProps = Pick< @@ -17,7 +16,7 @@ export type FlippingLabelProps = Pick< isActive: boolean; }; -const FlippingLabel: FC<FlippingLabelProps> = ({ +export const FlippingLabel: FC<FlippingLabelProps> = ({ children, className = '', isActive, @@ -26,7 +25,7 @@ const FlippingLabel: FC<FlippingLabelProps> = ({ const wrapperModifier = isActive ? 'wrapper--active' : 'wrapper--inactive'; return ( - <Label className={`${styles.label} ${className}`} {...props}> + <Label {...props} className={`${styles.label} ${className}`}> <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}> <span className={styles.front}>{children}</span> <span className={styles.back}> @@ -36,5 +35,3 @@ const FlippingLabel: FC<FlippingLabelProps> = ({ </Label> ); }; - -export default FlippingLabel; diff --git a/src/components/molecules/forms/index.ts b/src/components/molecules/forms/index.ts new file mode 100644 index 0000000..4d0497d --- /dev/null +++ b/src/components/molecules/forms/index.ts @@ -0,0 +1,10 @@ +export * from './ackee-toggle'; +export * from './fieldset'; +export * from './flipping-label'; +export * from './labelled-boolean-field'; +export * from './labelled-field'; +export * from './labelled-select'; +export * from './motion-toggle'; +export * from './prism-theme-toggle'; +export * from './radio-group'; +export * from './theme-toggle'; diff --git a/src/components/molecules/forms/labelled-boolean-field.stories.tsx b/src/components/molecules/forms/labelled-boolean-field.stories.tsx index 6098b51..b1f8194 100644 --- a/src/components/molecules/forms/labelled-boolean-field.stories.tsx +++ b/src/components/molecules/forms/labelled-boolean-field.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledBooleanField from './labelled-boolean-field'; +import { LabelledBooleanField } from './labelled-boolean-field'; import { label } from './labelled-boolean-field.fixture'; /** diff --git a/src/components/molecules/forms/labelled-boolean-field.test.tsx b/src/components/molecules/forms/labelled-boolean-field.test.tsx index 4e7728c..6916f95 100644 --- a/src/components/molecules/forms/labelled-boolean-field.test.tsx +++ b/src/components/molecules/forms/labelled-boolean-field.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import LabelledBooleanField from './labelled-boolean-field'; +import { LabelledBooleanField } from './labelled-boolean-field'; import { label } from './labelled-boolean-field.fixture'; describe('LabelledBooleanField', () => { diff --git a/src/components/molecules/forms/labelled-boolean-field.tsx b/src/components/molecules/forms/labelled-boolean-field.tsx index 661e549..d110d45 100644 --- a/src/components/molecules/forms/labelled-boolean-field.tsx +++ b/src/components/molecules/forms/labelled-boolean-field.tsx @@ -1,8 +1,10 @@ import { FC } from 'react'; -import BooleanField, { +import { + BooleanField, type BooleanFieldProps, -} from '../../atoms/forms/boolean-field'; -import Label, { type LabelProps } from '../../atoms/forms/label'; + Label, + type LabelProps, +} from '../../atoms'; import styles from './labelled-boolean-field.module.scss'; export type LabelledBooleanFieldProps = Omit< @@ -40,7 +42,7 @@ export type LabelledBooleanFieldProps = Omit< * * Render a checkbox or radio button with a label. */ -const LabelledBooleanField: FC<LabelledBooleanFieldProps> = ({ +export const LabelledBooleanField: FC<LabelledBooleanFieldProps> = ({ className = '', fieldClassName, hidden, @@ -53,40 +55,31 @@ const LabelledBooleanField: FC<LabelledBooleanFieldProps> = ({ }) => { const labelHiddenModifier = hidden ? 'label--hidden' : 'label--visible'; const labelPositionModifier = `label--${labelPosition}`; + const labelClass = `${styles[labelPositionModifier]} ${styles[labelHiddenModifier]} ${labelClassName}`; return labelPosition === 'left' ? ( <span className={`${styles.wrapper} ${className}`}> - <Label - className={`${styles[labelPositionModifier]} ${styles[labelHiddenModifier]} ${labelClassName}`} - htmlFor={id} - size={labelSize} - > + <Label className={labelClass} htmlFor={id} size={labelSize}> {label} </Label> <BooleanField + {...props} className={fieldClassName} hidden={hidden} id={id} - {...props} /> </span> ) : ( <span className={`${styles.wrapper} ${className}`}> <BooleanField + {...props} className={fieldClassName} hidden={hidden} id={id} - {...props} /> - <Label - className={`${styles[labelPositionModifier]} ${styles[labelHiddenModifier]} ${labelClassName}`} - htmlFor={id} - size={labelSize} - > + <Label className={labelClass} htmlFor={id} size={labelSize}> {label} </Label> </span> ); }; - -export default LabelledBooleanField; diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx index 795e785..840421b 100644 --- a/src/components/molecules/forms/labelled-field.stories.tsx +++ b/src/components/molecules/forms/labelled-field.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledField from './labelled-field'; +import { LabelledField } from './labelled-field'; /** * LabelledField - Storybook Meta diff --git a/src/components/molecules/forms/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field.test.tsx index 97681dc..e16c129 100644 --- a/src/components/molecules/forms/labelled-field.test.tsx +++ b/src/components/molecules/forms/labelled-field.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import LabelledField from './labelled-field'; +import { LabelledField } from './labelled-field'; describe('LabelledField', () => { it('renders a labelled field', () => { diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx index 63c91fe..fca1c54 100644 --- a/src/components/molecules/forms/labelled-field.tsx +++ b/src/components/molecules/forms/labelled-field.tsx @@ -1,6 +1,5 @@ import { forwardRef, ForwardRefRenderFunction } from 'react'; -import Field, { type FieldProps } from '../../atoms/forms/field'; -import Label from '../../atoms/forms/label'; +import { Field, type FieldProps, Label } from '../../atoms'; import styles from './labelled-field.module.scss'; export type LabelledFieldProps = FieldProps & { @@ -18,12 +17,7 @@ export type LabelledFieldProps = FieldProps & { labelPosition?: 'left' | 'top'; }; -/** - * LabelledField component - * - * Render a field tied to a label. - */ -const LabelledField: ForwardRefRenderFunction< +const LabelledFieldWithRef: ForwardRefRenderFunction< HTMLInputElement, LabelledFieldProps > = ( @@ -47,4 +41,9 @@ const LabelledField: ForwardRefRenderFunction< ); }; -export default forwardRef(LabelledField); +/** + * LabelledField component + * + * Render a field tied to a label. + */ +export const LabelledField = forwardRef(LabelledFieldWithRef); diff --git a/src/components/molecules/forms/labelled-select.stories.tsx b/src/components/molecules/forms/labelled-select.stories.tsx index d02732c..d6029a5 100644 --- a/src/components/molecules/forms/labelled-select.stories.tsx +++ b/src/components/molecules/forms/labelled-select.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledSelect from './labelled-select'; +import { LabelledSelect } from './labelled-select'; const selectOptions = [ { id: 'option1', name: 'Option 1', value: 'option1' }, diff --git a/src/components/molecules/forms/labelled-select.test.tsx b/src/components/molecules/forms/labelled-select.test.tsx index 3823117..1ef4a25 100644 --- a/src/components/molecules/forms/labelled-select.test.tsx +++ b/src/components/molecules/forms/labelled-select.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import LabelledSelect from './labelled-select'; +import { LabelledSelect } from './labelled-select'; const selectOptions = [ { id: 'option1', name: 'Option 1', value: 'option1' }, diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx index a12956c..300ae8a 100644 --- a/src/components/molecules/forms/labelled-select.tsx +++ b/src/components/molecules/forms/labelled-select.tsx @@ -1,6 +1,5 @@ import { FC } from 'react'; -import Label, { type LabelProps } from '../../atoms/forms/label'; -import Select, { type SelectProps } from '../../atoms/forms/select'; +import { Label, type LabelProps, Select, type SelectProps } from '../../atoms'; import styles from './labelled-select.module.scss'; export type LabelledSelectProps = Omit< @@ -34,7 +33,7 @@ export type LabelledSelectProps = Omit< * * Render a select with a label. */ -const LabelledSelect: FC<LabelledSelectProps> = ({ +export const LabelledSelect: FC<LabelledSelectProps> = ({ id, label, labelClassName = '', @@ -49,21 +48,19 @@ const LabelledSelect: FC<LabelledSelectProps> = ({ return ( <> <Label + className={`${styles[positionModifier]} ${labelClassName}`} htmlFor={id} required={required} size={labelSize} - className={`${styles[positionModifier]} ${labelClassName}`} > {label} </Label> <Select - id={id} - required={required} {...props} className={selectClassName} + id={id} + required={required} /> </> ); }; - -export default LabelledSelect; diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx index 541ca8e..bb51e26 100644 --- a/src/components/molecules/forms/motion-toggle.stories.tsx +++ b/src/components/molecules/forms/motion-toggle.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import MotionToggleComponent from './motion-toggle'; +import { MotionToggle } from './motion-toggle'; import { storageKey } from './motion-toggle.fixture'; /** @@ -7,7 +7,7 @@ import { storageKey } from './motion-toggle.fixture'; */ export default { title: 'Molecules/Forms/Toggle', - component: MotionToggleComponent, + component: MotionToggle, argTypes: { bodyClassName: { control: { @@ -70,10 +70,10 @@ export default { }, }, }, -} as ComponentMeta<typeof MotionToggleComponent>; +} as ComponentMeta<typeof MotionToggle>; -const Template: ComponentStory<typeof MotionToggleComponent> = (args) => ( - <MotionToggleComponent {...args} /> +const Template: ComponentStory<typeof MotionToggle> = (args) => ( + <MotionToggle {...args} /> ); /** diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx index f6cf3ac..93df3a0 100644 --- a/src/components/molecules/forms/motion-toggle.test.tsx +++ b/src/components/molecules/forms/motion-toggle.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import MotionToggle from './motion-toggle'; +import { MotionToggle } from './motion-toggle'; import { storageKey } from './motion-toggle.fixture'; describe('MotionToggle', () => { diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx index 7e150ca..c1a55f0 100644 --- a/src/components/molecules/forms/motion-toggle.tsx +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -1,8 +1,8 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import useAttributes from '../../../utils/hooks/use-attributes'; -import useLocalStorage from '../../../utils/hooks/use-local-storage'; -import RadioGroup, { +import { useAttributes, useLocalStorage } from '../../../utils/hooks'; +import { + RadioGroup, type RadioGroupCallback, type RadioGroupCallbackProps, type RadioGroupOption, @@ -30,7 +30,7 @@ export type MotionToggleProps = Pick< * * Render a Toggle component to set reduce motion. */ -const MotionToggle: FC<MotionToggleProps> = ({ +export const MotionToggle: FC<MotionToggleProps> = ({ defaultValue, storageKey, ...props @@ -107,14 +107,12 @@ const MotionToggle: FC<MotionToggleProps> = ({ return ( <RadioGroup + {...props} initialChoice={defaultValue} kind="toggle" legend={reduceMotionLabel} onChange={handleChange} options={options} - {...props} /> ); }; - -export default MotionToggle; diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx index 86f9773..bf0f2df 100644 --- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import PrismThemeToggle from './prism-theme-toggle'; +import { PrismThemeToggle } from './prism-theme-toggle'; /** * PrismThemeToggle - Storybook Meta diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx index a488720..bd63762 100644 --- a/src/components/molecules/forms/prism-theme-toggle.test.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import PrismThemeToggle from './prism-theme-toggle'; +import { PrismThemeToggle } from './prism-theme-toggle'; describe('PrismThemeToggle', () => { it('renders a toggle component', () => { diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx index b058230..5427fec 100644 --- a/src/components/molecules/forms/prism-theme-toggle.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.tsx @@ -4,9 +4,9 @@ import { type PrismTheme, usePrismTheme, } from '../../../utils/providers/prism-theme'; -import Moon from '../../atoms/icons/moon'; -import Sun from '../../atoms/icons/sun'; -import RadioGroup, { +import { Moon, Sun } from '../../atoms'; +import { + RadioGroup, type RadioGroupCallback, type RadioGroupCallbackProps, type RadioGroupOption, @@ -23,7 +23,7 @@ export type PrismThemeToggleProps = Pick< * * Render a Toggle component to set code blocks theme. */ -const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => { +export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => { const intl = useIntl(); const { theme, setTheme, resolvedTheme } = usePrismTheme(); @@ -107,14 +107,12 @@ const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => { return ( <RadioGroup + {...props} initialChoice={isDarkTheme(theme) ? 'dark' : 'light'} kind="toggle" legend={themeLabel} onChange={handleChange} options={options} - {...props} /> ); }; - -export default PrismThemeToggle; diff --git a/src/components/molecules/forms/radio-group.stories.tsx b/src/components/molecules/forms/radio-group.stories.tsx index de5da7c..b727e28 100644 --- a/src/components/molecules/forms/radio-group.stories.tsx +++ b/src/components/molecules/forms/radio-group.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import RadioGroup from './radio-group'; +import { RadioGroup } from './radio-group'; import { getOptions, initialChoice, legend } from './radio-group.fixture'; /** diff --git a/src/components/molecules/forms/radio-group.test.tsx b/src/components/molecules/forms/radio-group.test.tsx index 9fb4249..c4a01e4 100644 --- a/src/components/molecules/forms/radio-group.test.tsx +++ b/src/components/molecules/forms/radio-group.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import RadioGroup from './radio-group'; +import { RadioGroup } from './radio-group'; import { getOptions, initialChoice, legend } from './radio-group.fixture'; describe('RadioGroup', () => { diff --git a/src/components/molecules/forms/radio-group.tsx b/src/components/molecules/forms/radio-group.tsx index 7f47673..a747395 100644 --- a/src/components/molecules/forms/radio-group.tsx +++ b/src/components/molecules/forms/radio-group.tsx @@ -1,7 +1,8 @@ import { ChangeEvent, FC, MouseEvent, SetStateAction } from 'react'; -import useStateChange from '../../../utils/hooks/use-state-change'; -import Fieldset, { type FieldsetProps } from '../forms/fieldset'; -import LabelledBooleanField, { +import { useStateChange } from '../../../utils/hooks'; +import { Fieldset, type FieldsetProps } from './fieldset'; +import { + LabelledBooleanField, type LabelledBooleanFieldProps, } from './labelled-boolean-field'; import styles from './radio-group.module.scss'; @@ -74,7 +75,7 @@ export type RadioGroupProps = Pick< * * Render a group of labelled radio buttons. */ -const RadioGroup: FC<RadioGroupProps> = ({ +export const RadioGroup: FC<RadioGroupProps> = ({ className, groupClassName = '', initialChoice, @@ -93,6 +94,7 @@ const RadioGroup: FC<RadioGroupProps> = ({ const isToggle = kind === 'toggle'; const alignmentModifier = `wrapper--${legendPosition}`; const toggleModifier = isToggle ? 'wrapper--toggle' : 'wrapper--regular'; + const fieldsetClass = `${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`; /** * Update the selected choice on click or change event. @@ -119,6 +121,7 @@ const RadioGroup: FC<RadioGroupProps> = ({ const getOptions = (): JSX.Element[] => { return options.map((option) => ( <LabelledBooleanField + {...option} key={option.id} checked={selectedChoice === option.value} className={`${styles.option} ${optionClassName}`} @@ -130,18 +133,17 @@ const RadioGroup: FC<RadioGroupProps> = ({ onChange={updateChoice} onClick={updateChoice} type="radio" - {...option} /> )); }; return ( <Fieldset - className={`${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`} + {...props} + className={fieldsetClass} legendClassName={`${styles.legend} ${legendClassName}`} legendPosition={legendPosition} role="radiogroup" - {...props} > {isToggle ? ( <span className={`${styles.toggle} ${groupClassName}`}> @@ -153,5 +155,3 @@ const RadioGroup: FC<RadioGroupProps> = ({ </Fieldset> ); }; - -export default RadioGroup; diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx index ff1034d..40f4d8c 100644 --- a/src/components/molecules/forms/theme-toggle.stories.tsx +++ b/src/components/molecules/forms/theme-toggle.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ThemeToggle from './theme-toggle'; +import { ThemeToggle } from './theme-toggle'; /** * ThemeToggle - Storybook Meta diff --git a/src/components/molecules/forms/theme-toggle.test.tsx b/src/components/molecules/forms/theme-toggle.test.tsx index d379423..aae627a 100644 --- a/src/components/molecules/forms/theme-toggle.test.tsx +++ b/src/components/molecules/forms/theme-toggle.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import ThemeToggle from './theme-toggle'; +import { ThemeToggle } from './theme-toggle'; describe('ThemeToggle', () => { it('renders a toggle component', () => { diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx index e0a6683..25e2a39 100644 --- a/src/components/molecules/forms/theme-toggle.tsx +++ b/src/components/molecules/forms/theme-toggle.tsx @@ -1,9 +1,9 @@ import { useTheme } from 'next-themes'; import { FC } from 'react'; import { useIntl } from 'react-intl'; -import Moon from '../../atoms/icons/moon'; -import Sun from '../../atoms/icons/sun'; -import RadioGroup, { +import { Moon, Sun } from '../../atoms'; +import { + RadioGroup, type RadioGroupCallback, type RadioGroupCallbackProps, type RadioGroupOption, @@ -20,7 +20,7 @@ export type ThemeToggleProps = Pick< * * Render a Toggle component to set theme. */ -const ThemeToggle: FC<ThemeToggleProps> = (props) => { +export const ThemeToggle: FC<ThemeToggleProps> = (props) => { const intl = useIntl(); const { resolvedTheme, setTheme } = useTheme(); const isDarkTheme = resolvedTheme === 'dark'; @@ -95,14 +95,12 @@ const ThemeToggle: FC<ThemeToggleProps> = (props) => { return ( <RadioGroup + {...props} initialChoice={isDarkTheme ? 'dark' : 'light'} kind="toggle" legend={themeLabel} onChange={handleChange} options={options} - {...props} /> ); }; - -export default ThemeToggle; |