diff options
Diffstat (limited to 'src')
54 files changed, 250 insertions, 224 deletions
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx index cb017da..60dd352 100644 --- a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx +++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useCallback, useState } from 'react'; import { BooleanField } from './boolean-field'; /** @@ -138,15 +138,12 @@ const Template: ComponentStory<typeof BooleanField> = ({ ...args }) => { const [isChecked, setIsChecked] = useState(checked); + const handleChange = useCallback(() => { + setIsChecked((prev) => !prev); + }, []); return ( - <BooleanField - isChecked={isChecked} - onChange={() => { - setIsChecked(!isChecked); - }} - {...args} - /> + <BooleanField isChecked={isChecked} onChange={handleChange} {...args} /> ); }; diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx index 1c7fe36..82c42d9 100644 --- a/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx +++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { BooleanField } from './boolean-field'; const handleChange = () => { @@ -19,7 +19,7 @@ describe('boolean field', () => { value="checkbox" /> ); - expect(screen.getByRole('checkbox')).toBeInTheDocument(); + expect(rtlScreen.getByRole('checkbox')).toBeInTheDocument(); }); it('renders a radio button', () => { @@ -32,6 +32,6 @@ describe('boolean field', () => { value="checkbox" /> ); - expect(screen.getByRole('radio')).toBeInTheDocument(); + expect(rtlScreen.getByRole('radio')).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx index 7985c0b..5476cf5 100644 --- a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx +++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx @@ -1,4 +1,4 @@ -import { FC, InputHTMLAttributes } from 'react'; +import type { FC, InputHTMLAttributes } from 'react'; import styles from './boolean-field.module.scss'; export type BooleanFieldProps = Omit< diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx index 59f9a4b..75fff77 100644 --- a/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx +++ b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Checkbox } from './checkbox'; const doNothing = () => { @@ -16,7 +16,7 @@ describe('Checkbox', () => { value="checkbox" /> ); - expect(screen.getByRole('checkbox')).not.toBeChecked(); + expect(rtlScreen.getByRole('checkbox')).not.toBeChecked(); }); it('renders a checked checkbox', () => { @@ -29,6 +29,6 @@ describe('Checkbox', () => { value="checkbox" /> ); - expect(screen.getByRole('checkbox')).toBeChecked(); + expect(rtlScreen.getByRole('checkbox')).toBeChecked(); }); }); diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.tsx index 2ac3809..9c175b7 100644 --- a/src/components/atoms/forms/fields/checkbox/checkbox.tsx +++ b/src/components/atoms/forms/fields/checkbox/checkbox.tsx @@ -1,5 +1,5 @@ -import { FC } from 'react'; -import { BooleanField, BooleanFieldProps } from '../boolean-field'; +import type { FC } from 'react'; +import { BooleanField, type BooleanFieldProps } from '../boolean-field'; export type CheckboxProps = Omit<BooleanFieldProps, 'type'>; @@ -9,5 +9,6 @@ export type CheckboxProps = Omit<BooleanFieldProps, 'type'>; * Render a checkbox input type. */ export const Checkbox: FC<CheckboxProps> = (props) => ( + // eslint-disable-next-line react/jsx-no-literals -- Type allowed <BooleanField {...props} type="checkbox" /> ); diff --git a/src/components/atoms/forms/fields/fields.module.scss b/src/components/atoms/forms/fields/fields.module.scss index f09117d..363c7ee 100644 --- a/src/components/atoms/forms/fields/fields.module.scss +++ b/src/components/atoms/forms/fields/fields.module.scss @@ -2,7 +2,6 @@ @use "../../../../styles/abstracts/mixins" as mix; .field { - width: 100%; padding: var(--spacing-2xs) var(--spacing-xs); background: var(--color-bg-tertiary); border: fun.convert-px(2) solid var(--color-border); diff --git a/src/components/atoms/forms/fields/input/input.stories.tsx b/src/components/atoms/forms/fields/input/input.stories.tsx index 35657f8..4744bc5 100644 --- a/src/components/atoms/forms/fields/input/input.stories.tsx +++ b/src/components/atoms/forms/fields/input/input.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ChangeEvent, useCallback, useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEvent, useCallback, useState } from 'react'; import { Input } from './input'; /** @@ -187,50 +187,50 @@ const Template: ComponentStory<typeof Input> = ({ }; /** - * Input Story - DateTime + * Input Story - DateTimeField */ -export const DateTime = Template.bind({}); -DateTime.args = { +export const DateTimeField = Template.bind({}); +DateTimeField.args = { id: 'field-storybook', name: 'field-storybook', type: 'datetime-local', }; /** - * Input Story - Email + * Input Story - EmailField */ -export const Email = Template.bind({}); -Email.args = { +export const EmailField = Template.bind({}); +EmailField.args = { id: 'field-storybook', name: 'field-storybook', type: 'email', }; /** - * Input Story - Numeric + * Input Story - NumericField */ -export const Numeric = Template.bind({}); -Numeric.args = { +export const NumericField = Template.bind({}); +NumericField.args = { id: 'field-storybook', name: 'field-storybook', type: 'number', }; /** - * Input Story - Text + * Input Story - TextField */ -export const Text = Template.bind({}); -Text.args = { +export const TextField = Template.bind({}); +TextField.args = { id: 'field-storybook', name: 'field-storybook', type: 'text', }; /** - * Input Story - Time + * Input Story - TimeField */ -export const Time = Template.bind({}); -Time.args = { +export const TimeField = Template.bind({}); +TimeField.args = { id: 'field-storybook', name: 'field-storybook', type: 'time', diff --git a/src/components/atoms/forms/fields/input/input.test.tsx b/src/components/atoms/forms/fields/input/input.test.tsx index a5c4898..e97237d 100644 --- a/src/components/atoms/forms/fields/input/input.test.tsx +++ b/src/components/atoms/forms/fields/input/input.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Input } from './input'; const doNothing = () => { @@ -17,7 +17,7 @@ describe('Input', () => { value="" /> ); - expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text'); + expect(rtlScreen.getByRole('textbox')).toHaveAttribute('type', 'text'); }); it('renders a search input', () => { @@ -30,6 +30,6 @@ describe('Input', () => { value="" /> ); - expect(screen.getByRole('searchbox')).toHaveAttribute('type', 'search'); + expect(rtlScreen.getByRole('searchbox')).toHaveAttribute('type', 'search'); }); }); diff --git a/src/components/atoms/forms/fields/input/input.tsx b/src/components/atoms/forms/fields/input/input.tsx index 0f0736c..c47534f 100644 --- a/src/components/atoms/forms/fields/input/input.tsx +++ b/src/components/atoms/forms/fields/input/input.tsx @@ -8,7 +8,7 @@ import styles from '../fields.module.scss'; export type InputProps = Omit< InputHTMLAttributes<HTMLInputElement>, - 'disabled' | 'hidden' | 'readonly' | 'required' | 'type' + 'disabled' | 'readonly' | 'required' | 'type' > & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'>> & { /** @@ -18,12 +18,6 @@ export type InputProps = Omit< */ isDisabled?: boolean; /** - * Should the field be hidden? - * - * @default false - */ - isHidden?: boolean; - /** * Should the field be readonly? * * @default false @@ -45,7 +39,6 @@ const InputWithRef = ( { className = '', isDisabled = false, - isHidden = false, isReadOnly = false, isRequired = false, ...props diff --git a/src/components/atoms/forms/fields/radio/radio.test.tsx b/src/components/atoms/forms/fields/radio/radio.test.tsx index ba8d68f..55eda9d 100644 --- a/src/components/atoms/forms/fields/radio/radio.test.tsx +++ b/src/components/atoms/forms/fields/radio/radio.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Radio } from './radio'; const doNothing = () => { @@ -11,7 +11,7 @@ describe('Radio', () => { render( <Radio id="radio" name="radio" onChange={doNothing} value="radio" /> ); - expect(screen.getByRole('radio')).not.toBeChecked(); + expect(rtlScreen.getByRole('radio')).not.toBeChecked(); }); it('renders a checked radio', () => { @@ -24,6 +24,6 @@ describe('Radio', () => { value="radio" /> ); - expect(screen.getByRole('radio')).toBeChecked(); + expect(rtlScreen.getByRole('radio')).toBeChecked(); }); }); diff --git a/src/components/atoms/forms/fields/radio/radio.tsx b/src/components/atoms/forms/fields/radio/radio.tsx index 6430b4a..5a518c7 100644 --- a/src/components/atoms/forms/fields/radio/radio.tsx +++ b/src/components/atoms/forms/fields/radio/radio.tsx @@ -1,5 +1,5 @@ -import { FC } from 'react'; -import { BooleanField, BooleanFieldProps } from '../boolean-field'; +import type { FC } from 'react'; +import { BooleanField, type BooleanFieldProps } from '../boolean-field'; export type RadioProps = Omit<BooleanFieldProps, 'type'>; @@ -9,5 +9,6 @@ export type RadioProps = Omit<BooleanFieldProps, 'type'>; * Render a radio input type. */ export const Radio: FC<RadioProps> = (props) => ( + // eslint-disable-next-line react/jsx-no-literals -- Type allowed <BooleanField {...props} type="radio" /> ); diff --git a/src/components/atoms/forms/fields/select/select.stories.tsx b/src/components/atoms/forms/fields/select/select.stories.tsx index c9e02d2..fddf354 100644 --- a/src/components/atoms/forms/fields/select/select.stories.tsx +++ b/src/components/atoms/forms/fields/select/select.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ChangeEvent, useCallback, useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEvent, useCallback, useState } from 'react'; import { Select as SelectComponent } from './select'; const selectOptions = [ diff --git a/src/components/atoms/forms/fields/select/select.test.tsx b/src/components/atoms/forms/fields/select/select.test.tsx index ae76c45..821a9aa 100644 --- a/src/components/atoms/forms/fields/select/select.test.tsx +++ b/src/components/atoms/forms/fields/select/select.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Select } from './select'; const doNothing = () => { @@ -25,7 +25,7 @@ describe('Select', () => { /> ); - expect(screen.getByRole('combobox')).toHaveValue(selected.value); + expect(rtlScreen.getByRole('combobox')).toHaveValue(selected.value); }); it('renders the select options', () => { @@ -39,6 +39,6 @@ describe('Select', () => { /> ); - expect(screen.getAllByRole('option')).toHaveLength(selectOptions.length); + expect(rtlScreen.getAllByRole('option')).toHaveLength(selectOptions.length); }); }); diff --git a/src/components/atoms/forms/fields/select/select.tsx b/src/components/atoms/forms/fields/select/select.tsx index 887dacc..7399727 100644 --- a/src/components/atoms/forms/fields/select/select.tsx +++ b/src/components/atoms/forms/fields/select/select.tsx @@ -1,4 +1,4 @@ -import { FC, SelectHTMLAttributes } from 'react'; +import type { FC, SelectHTMLAttributes } from 'react'; import styles from '../fields.module.scss'; export type SelectOptions = { @@ -18,7 +18,7 @@ export type SelectOptions = { export type SelectProps = Omit< SelectHTMLAttributes<HTMLSelectElement>, - 'disabled' | 'hidden' | 'required' + 'disabled' | 'required' > & { /** * Should the select field be disabled? @@ -27,12 +27,6 @@ export type SelectProps = Omit< */ isDisabled?: boolean; /** - * Should the select field be hidden? - * - * @default false - */ - isHidden?: boolean; - /** * Is the select field required? * * @default false @@ -52,7 +46,6 @@ export type SelectProps = Omit< export const Select: FC<SelectProps> = ({ className = '', isDisabled = false, - isHidden = false, isRequired = false, options, ...props diff --git a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx index 2e77cb7..21214bd 100644 --- a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx +++ b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ChangeEvent, useCallback, useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEvent, useCallback, useState } from 'react'; import { TextArea as TextAreaComponent } from './text-area'; /** diff --git a/src/components/atoms/forms/fields/text-area/text-area.test.tsx b/src/components/atoms/forms/fields/text-area/text-area.test.tsx index 0079440..923f494 100644 --- a/src/components/atoms/forms/fields/text-area/text-area.test.tsx +++ b/src/components/atoms/forms/fields/text-area/text-area.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { TextArea } from './text-area'; const doNothing = () => { @@ -16,6 +16,6 @@ describe('TextArea', () => { value="" /> ); - expect(screen.getByRole('textbox')).toBeInTheDocument(); + expect(rtlScreen.getByRole('textbox')).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/forms/fields/text-area/text-area.tsx b/src/components/atoms/forms/fields/text-area/text-area.tsx index bd99d7d..adb12eb 100644 --- a/src/components/atoms/forms/fields/text-area/text-area.tsx +++ b/src/components/atoms/forms/fields/text-area/text-area.tsx @@ -19,12 +19,6 @@ export type TextAreaProps = AllowedTextAreaProps & { */ isDisabled?: boolean; /** - * Should the field be hidden? - * - * @default false - */ - isHidden?: boolean; - /** * Should the field be readonly? * * @default false @@ -42,7 +36,6 @@ const TextAreaWithRef = ( { className = '', isDisabled = false, - isHidden = false, isReadOnly = false, isRequired = false, ...props diff --git a/src/components/atoms/forms/fieldset/fieldset.stories.tsx b/src/components/atoms/forms/fieldset/fieldset.stories.tsx index faf355f..a7d665d 100644 --- a/src/components/atoms/forms/fieldset/fieldset.stories.tsx +++ b/src/components/atoms/forms/fieldset/fieldset.stories.tsx @@ -1,7 +1,7 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Fieldset as FieldsetComponent } from './fieldset'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Input } from '../fields'; import { Legend } from '../legend'; +import { Fieldset as FieldsetComponent } from './fieldset'; /** * Fieldset - Storybook Meta @@ -31,28 +31,26 @@ export default { }, } as ComponentMeta<typeof FieldsetComponent>; -const Template: ComponentStory<typeof FieldsetComponent> = (args) => { - return ( - <FieldsetComponent {...args}> - <div> - <Input - aria-label="A field example" - id="field1" - name="field1" - type="text" - /> - </div> - <div> - <Input - aria-label="Another field example" - id="field2" - name="field2" - type="text" - /> - </div> - </FieldsetComponent> - ); -}; +const Template: ComponentStory<typeof FieldsetComponent> = (args) => ( + <FieldsetComponent {...args}> + <div> + <Input + aria-label="A field example" + id="field1" + name="field1" + type="text" + /> + </div> + <div> + <Input + aria-label="Another field example" + id="field2" + name="field2" + type="text" + /> + </div> + </FieldsetComponent> +); /** * Fieldset Story diff --git a/src/components/atoms/forms/fieldset/fieldset.test.tsx b/src/components/atoms/forms/fieldset/fieldset.test.tsx index 2554d59..86acc8b 100644 --- a/src/components/atoms/forms/fieldset/fieldset.test.tsx +++ b/src/components/atoms/forms/fieldset/fieldset.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Input } from '../fields'; import { Fieldset } from './fieldset'; @@ -15,8 +15,8 @@ describe('fieldset', () => { /> </Fieldset> ); - expect(screen.getByRole('group')).toBeInTheDocument(); - expect(screen.getByRole('textbox')).not.toBeDisabled(); + expect(rtlScreen.getByRole('group')).toBeInTheDocument(); + expect(rtlScreen.getByRole('textbox')).not.toBeDisabled(); }); it('renders a disabled fieldset', () => { @@ -30,7 +30,7 @@ describe('fieldset', () => { /> </Fieldset> ); - expect(screen.getByRole('group')).toBeInTheDocument(); - expect(screen.getByRole('textbox')).toBeDisabled(); + expect(rtlScreen.getByRole('group')).toBeInTheDocument(); + expect(rtlScreen.getByRole('textbox')).toBeDisabled(); }); }); diff --git a/src/components/atoms/forms/fieldset/fieldset.tsx b/src/components/atoms/forms/fieldset/fieldset.tsx index eb42961..85e7b3f 100644 --- a/src/components/atoms/forms/fieldset/fieldset.tsx +++ b/src/components/atoms/forms/fieldset/fieldset.tsx @@ -1,11 +1,11 @@ import { forwardRef, type FieldsetHTMLAttributes, - ForwardRefRenderFunction, - ReactElement, + type ForwardRefRenderFunction, + type ReactElement, } from 'react'; +import type { LegendProps } from '../legend'; import styles from './fieldset.module.scss'; -import { LegendProps } from '../legend'; export type FieldsetProps = Omit< FieldsetHTMLAttributes<HTMLFieldSetElement>, diff --git a/src/components/atoms/forms/form/form.test.tsx b/src/components/atoms/forms/form/form.test.tsx index 217b7f6..90cac5f 100644 --- a/src/components/atoms/forms/form/form.test.tsx +++ b/src/components/atoms/forms/form/form.test.tsx @@ -1,14 +1,18 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Form } from './form'; +const doNothing = () => { + // Do nothing +}; + describe('Form', () => { it('renders a form', () => { render( - <Form aria-label="A form name" onSubmit={() => null}> + <Form aria-label="A form name" onSubmit={doNothing}> Fields </Form> ); - expect(screen.getByRole('form')).toBeInTheDocument(); + expect(rtlScreen.getByRole('form')).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/forms/label/label.stories.tsx b/src/components/atoms/forms/label/label.stories.tsx index 8460c45..195be97 100644 --- a/src/components/atoms/forms/label/label.stories.tsx +++ b/src/components/atoms/forms/label/label.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Label as LabelComponent } from './label'; /** diff --git a/src/components/atoms/forms/label/label.test.tsx b/src/components/atoms/forms/label/label.test.tsx index 710c80c..0c25379 100644 --- a/src/components/atoms/forms/label/label.test.tsx +++ b/src/components/atoms/forms/label/label.test.tsx @@ -1,10 +1,10 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Label } from './label'; describe('Label', () => { it('renders a field label', () => { render(<Label>A label</Label>); - expect(screen.getByText('A label')).toBeInTheDocument(); + expect(rtlScreen.getByText('A label')).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/forms/label/label.tsx b/src/components/atoms/forms/label/label.tsx index 5087325..6692205 100644 --- a/src/components/atoms/forms/label/label.tsx +++ b/src/components/atoms/forms/label/label.tsx @@ -1,4 +1,4 @@ -import { FC, LabelHTMLAttributes, ReactNode } from 'react'; +import type { FC, LabelHTMLAttributes, ReactNode } from 'react'; import styles from './label.module.scss'; export type LabelSize = 'md' | 'sm'; diff --git a/src/components/atoms/forms/legend/legend.stories.tsx b/src/components/atoms/forms/legend/legend.stories.tsx index cda7f09..b23d889 100644 --- a/src/components/atoms/forms/legend/legend.stories.tsx +++ b/src/components/atoms/forms/legend/legend.stories.tsx @@ -1,6 +1,6 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Legend as LegendComponent } from './legend'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Fieldset } from '../fieldset'; +import { Legend as LegendComponent } from './legend'; /** * Legend - Storybook Meta diff --git a/src/components/atoms/forms/legend/legend.test.tsx b/src/components/atoms/forms/legend/legend.test.tsx index fc759f7..088e8ad 100644 --- a/src/components/atoms/forms/legend/legend.test.tsx +++ b/src/components/atoms/forms/legend/legend.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Fieldset } from '../fieldset'; import { Legend } from './legend'; @@ -13,6 +13,6 @@ describe('legend', () => { </Fieldset> ); - expect(screen.getByRole('group')).toHaveTextContent(body); + expect(rtlScreen.getByRole('group')).toHaveTextContent(body); }); }); diff --git a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx index 1f29830..1d1af70 100644 --- a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx +++ b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ChangeEvent, useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEvent, useState, useCallback } from 'react'; import { Input, Label } from '../../../atoms'; import { LabelledField } from './labelled-field'; @@ -77,9 +77,9 @@ export default { const Template: ComponentStory<typeof LabelledField> = ({ ...args }) => { const id = 'sunt'; const [value, setValue] = useState<string>(''); - const updateValue = (e: ChangeEvent<HTMLInputElement>) => { + const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => { setValue(e.target.value); - }; + }, []); return ( <LabelledField diff --git a/src/components/molecules/forms/labelled-field/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field/labelled-field.test.tsx index 8bc7c39..0a91ccd 100644 --- a/src/components/molecules/forms/labelled-field/labelled-field.test.tsx +++ b/src/components/molecules/forms/labelled-field/labelled-field.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Input, Label } from '../../../atoms'; import { LabelledField } from './labelled-field'; @@ -27,7 +27,7 @@ describe('LabelledField', () => { label={<Label htmlFor={id}>{label}</Label>} /> ); - expect(screen.getByLabelText(label)).toBeInTheDocument(); - expect(screen.getByRole('textbox')).toHaveValue(value); + expect(rtlScreen.getByLabelText(label)).toBeInTheDocument(); + expect(rtlScreen.getByRole('textbox')).toHaveValue(value); }); }); diff --git a/src/components/molecules/forms/labelled-field/labelled-field.tsx b/src/components/molecules/forms/labelled-field/labelled-field.tsx index af492b3..ea0bd67 100644 --- a/src/components/molecules/forms/labelled-field/labelled-field.tsx +++ b/src/components/molecules/forms/labelled-field/labelled-field.tsx @@ -1,5 +1,10 @@ -import { FC, HTMLAttributes, ReactElement } from 'react'; import { + forwardRef, + type HTMLAttributes, + type ReactElement, + type ForwardRefRenderFunction, +} from 'react'; +import type { CheckboxProps, InputProps, LabelProps, @@ -37,27 +42,35 @@ export type LabelledFieldProps = Omit< label: ReactElement<LabelProps>; }; -/** - * LabelledField component - * - * Render a field tied to a label. - */ -export const LabelledField: FC<LabelledFieldProps> = ({ - className = '', - field, - isInline = false, - isReversedOrder = false, - label, - ...props -}) => { +const LabelledFieldWithRef: ForwardRefRenderFunction< + HTMLDivElement, + LabelledFieldProps +> = ( + { + className = '', + field, + isInline = false, + isReversedOrder = false, + label, + ...props + }, + ref +) => { const layoutClass = isInline ? 'wrapper--inline' : 'wrapper--stack'; const orderClass = isReversedOrder ? 'wrapper--reverse' : ''; const wrapperClass = `${styles.wrapper} ${styles[layoutClass]} ${styles[orderClass]} ${className}`; return ( - <div {...props} className={wrapperClass}> + <div {...props} className={wrapperClass} ref={ref}> {label} {field} </div> ); }; + +/** + * LabelledField component + * + * Render a field tied to a label. + */ +export const LabelledField = forwardRef(LabelledFieldWithRef); diff --git a/src/components/molecules/forms/radio-group/radio-group.fixture.tsx b/src/components/molecules/forms/radio-group/radio-group.fixture.ts index f1cbc05..618cde7 100644 --- a/src/components/molecules/forms/radio-group/radio-group.fixture.tsx +++ b/src/components/molecules/forms/radio-group/radio-group.fixture.ts @@ -1,6 +1,6 @@ -import { RadioGroupItem } from './radio-group'; +import type { RadioGroupItem } from './radio-group'; -export const getOptions = (name: string = 'group1') => { +export const getOptions = (name = 'group1') => { const value1 = 'option1'; const value2 = 'option2'; const value3 = 'option3'; diff --git a/src/components/molecules/forms/radio-group/radio-group.stories.tsx b/src/components/molecules/forms/radio-group/radio-group.stories.tsx index 8e77c6e..4b92c34 100644 --- a/src/components/molecules/forms/radio-group/radio-group.stories.tsx +++ b/src/components/molecules/forms/radio-group/radio-group.stories.tsx @@ -1,8 +1,8 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEventHandler, useCallback, useState } from 'react'; import { Legend } from '../../../atoms'; import { RadioGroup as RadioGroupComponent } from './radio-group'; import { getOptions, initialChoice } from './radio-group.fixture'; -import { ChangeEventHandler, useCallback, useState } from 'react'; /** * RadioGroup - Storybook Meta diff --git a/src/components/molecules/forms/radio-group/radio-group.test.tsx b/src/components/molecules/forms/radio-group/radio-group.test.tsx index ba68925..61f4af6 100644 --- a/src/components/molecules/forms/radio-group/radio-group.test.tsx +++ b/src/components/molecules/forms/radio-group/radio-group.test.tsx @@ -1,5 +1,5 @@ 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 { RadioGroup } from './radio-group'; import { getOptions, initialChoice } from './radio-group.fixture'; @@ -23,7 +23,7 @@ describe('RadioGroup', () => { ); expect( - screen.getByRole('radiogroup', { name: legend }) + rtlScreen.getByRole('radiogroup', { name: legend }) ).toBeInTheDocument(); }); @@ -39,7 +39,7 @@ describe('RadioGroup', () => { /> ); - expect(screen.getAllByRole('radio')).toHaveLength(options.length); + expect(rtlScreen.getAllByRole('radio')).toHaveLength(options.length); }); it('can render an inlined radio group', () => { @@ -55,6 +55,6 @@ describe('RadioGroup', () => { /> ); - expect(screen.getByRole('radiogroup')).toHaveClass('group--inline'); + expect(rtlScreen.getByRole('radiogroup')).toHaveClass('group--inline'); }); }); diff --git a/src/components/molecules/forms/radio-group/radio-group.tsx b/src/components/molecules/forms/radio-group/radio-group.tsx index 0ca4dac..29b719c 100644 --- a/src/components/molecules/forms/radio-group/radio-group.tsx +++ b/src/components/molecules/forms/radio-group/radio-group.tsx @@ -1,11 +1,11 @@ -import { ForwardRefRenderFunction, forwardRef } from 'react'; +import { type ForwardRefRenderFunction, forwardRef } from 'react'; import { Fieldset, - FieldsetProps, + type FieldsetProps, Label, - LabelProps, + type LabelProps, Radio, - RadioProps, + type RadioProps, } from '../../../atoms'; import { LabelledField } from '../labelled-field'; import styles from './radio-group.module.scss'; @@ -78,6 +78,7 @@ const RadioGroupWithRef: ForwardRefRenderFunction< className={groupClass} isInline={isInline} ref={ref} + // eslint-disable-next-line react/jsx-no-literals -- Role allowed role="radiogroup" > {options.map((option) => ( 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); diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts index 04602f2..04602f2 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx index b5f8ef8..4122ed2 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { AckeeToggle } from './ackee-toggle'; import { storageKey } from './ackee-toggle.fixture'; diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx index f7400f3..f7f5edf 100644 --- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx +++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { AckeeToggle } from './ackee-toggle'; import { storageKey } from './ackee-toggle.fixture'; @@ -8,7 +8,7 @@ describe('AckeeToggle', () => { it('renders a toggle component', () => { render(<AckeeToggle storageKey={storageKey} defaultValue="full" />); expect( - screen.getByRole('radiogroup', { + rtlScreen.getByRole('radiogroup', { name: /Tracking:/i, }) ).toBeInTheDocument(); diff --git a/src/components/organisms/forms/comment-form/comment-form.stories.tsx b/src/components/organisms/forms/comment-form/comment-form.stories.tsx index a6069e6..a521bf7 100644 --- a/src/components/organisms/forms/comment-form/comment-form.stories.tsx +++ b/src/components/organisms/forms/comment-form/comment-form.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { CommentForm } from './comment-form'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { CommentForm as CommentFormComponent } from './comment-form'; const saveComment = async () => { /** Do nothing. */ @@ -10,7 +10,7 @@ const saveComment = async () => { */ export default { title: 'Organisms/Forms', - component: CommentForm, + component: CommentFormComponent, args: { saveComment, titleAlignment: 'left', @@ -111,13 +111,13 @@ export default { }, }, }, -} as ComponentMeta<typeof CommentForm>; +} as ComponentMeta<typeof CommentFormComponent>; -const Template: ComponentStory<typeof CommentForm> = (args) => ( - <CommentForm {...args} /> +const Template: ComponentStory<typeof CommentFormComponent> = (args) => ( + <CommentFormComponent {...args} /> ); /** - * Forms Stories - Comment + * Forms Stories - Comment form */ -export const Comment = Template.bind({}); +export const CommentForm = Template.bind({}); diff --git a/src/components/organisms/forms/comment-form/comment-form.test.tsx b/src/components/organisms/forms/comment-form/comment-form.test.tsx index ca02edc..88a7de9 100644 --- a/src/components/organisms/forms/comment-form/comment-form.test.tsx +++ b/src/components/organisms/forms/comment-form/comment-form.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { CommentForm } from './comment-form'; const saveComment = async () => { @@ -10,7 +10,7 @@ const title = 'Cum voluptas voluptatibus'; describe('CommentForm', () => { it('renders a form', () => { render(<CommentForm saveComment={saveComment} />); - expect(screen.getByRole('form')).toBeInTheDocument(); + expect(rtlScreen.getByRole('form')).toBeInTheDocument(); }); it('renders an optional title', () => { @@ -18,7 +18,7 @@ describe('CommentForm', () => { <CommentForm saveComment={saveComment} title={title} titleLevel={2} /> ); expect( - screen.getByRole('heading', { level: 2, name: title }) + rtlScreen.getByRole('heading', { level: 2, name: title }) ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/forms/contact-form/contact-form.stories.tsx b/src/components/organisms/forms/contact-form/contact-form.stories.tsx index 4df3db0..962bfda 100644 --- a/src/components/organisms/forms/contact-form/contact-form.stories.tsx +++ b/src/components/organisms/forms/contact-form/contact-form.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { ContactForm } from './contact-form'; /** @@ -59,7 +59,8 @@ const Template: ComponentStory<typeof ContactForm> = (args) => ( */ export const Contact = Template.bind({}); Contact.args = { - sendMail: async (_data, reset: () => void) => { - reset(); - }, + sendMail: async (_data, reset: () => void) => + new Promise(() => { + reset(); + }), }; diff --git a/src/components/organisms/forms/contact-form/contact-form.test.tsx b/src/components/organisms/forms/contact-form/contact-form.test.tsx index d788e09..0e2685e 100644 --- a/src/components/organisms/forms/contact-form/contact-form.test.tsx +++ b/src/components/organisms/forms/contact-form/contact-form.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { ContactForm } from './contact-form'; const props = { @@ -12,38 +12,42 @@ describe('ContactForm', () => { it('renders a contact form', () => { render(<ContactForm {...props} />); expect( - screen.getByRole('form', { name: 'Contact form' }) + rtlScreen.getByRole('form', { name: 'Contact form' }) ).toBeInTheDocument(); }); it('renders a name field', () => { render(<ContactForm {...props} />); - expect(screen.getByRole('textbox', { name: /^Name:/ })).toBeInTheDocument(); + expect( + rtlScreen.getByRole('textbox', { name: /^Name:/ }) + ).toBeInTheDocument(); }); it('renders an email field', () => { render(<ContactForm {...props} />); expect( - screen.getByRole('textbox', { name: /^Email:/ }) + rtlScreen.getByRole('textbox', { name: /^Email:/ }) ).toBeInTheDocument(); }); it('renders an object field', () => { render(<ContactForm {...props} />); expect( - screen.getByRole('textbox', { name: /^Object:/ }) + rtlScreen.getByRole('textbox', { name: /^Object:/ }) ).toBeInTheDocument(); }); it('renders a message field', () => { render(<ContactForm {...props} />); expect( - screen.getByRole('textbox', { name: /^Message:/ }) + rtlScreen.getByRole('textbox', { name: /^Message:/ }) ).toBeInTheDocument(); }); it('renders a submit button', () => { render(<ContactForm {...props} />); - expect(screen.getByRole('button', { name: /^Send/ })).toBeInTheDocument(); + expect( + rtlScreen.getByRole('button', { name: /^Send/ }) + ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts index f13658a..f13658a 100644 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx +++ b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx index 7e541db..811830b 100644 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx +++ b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { MotionToggle } from './motion-toggle'; import { storageKey } from './motion-toggle.fixture'; diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx index abae299..6952f46 100644 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx +++ b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { MotionToggle } from './motion-toggle'; import { storageKey } from './motion-toggle.fixture'; @@ -8,7 +8,7 @@ describe('MotionToggle', () => { it('renders a toggle component', () => { render(<MotionToggle storageKey={storageKey} defaultValue="on" />); expect( - screen.getByRole('radiogroup', { + rtlScreen.getByRole('radiogroup', { name: /Animations:/i, }) ).toBeInTheDocument(); diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx index a8ca7ce..c141bf0 100644 --- a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx +++ b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx @@ -1,8 +1,12 @@ -import { ChangeEvent, FC } from 'react'; +import { useCallback, type FC } from 'react'; import { useIntl } from 'react-intl'; import { useAttributes, useLocalStorage } from '../../../../utils/hooks'; import { Legend } from '../../../atoms'; -import { Switch, SwitchOption, SwitchProps } from '../../../molecules'; +import { + Switch, + type SwitchOption, + type SwitchProps, +} from '../../../molecules'; export type MotionToggleValue = 'on' | 'off'; @@ -37,7 +41,7 @@ export const MotionToggle: FC<MotionToggleProps> = ({ ); useAttributes({ element: - typeof window !== 'undefined' ? document.documentElement : undefined, + typeof window === 'undefined' ? undefined : document.documentElement, attribute: 'reduced-motion', value: `${isReduced}`, }); @@ -71,9 +75,9 @@ export const MotionToggle: FC<MotionToggleProps> = ({ }, ]; - const updateSetting = (e: ChangeEvent<HTMLInputElement>) => { + const updateSetting = useCallback(() => { setIsReduced((prev) => !prev); - }; + }, [setIsReduced]); return ( <Switch diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx index 3c8eaba..3aeb78b 100644 --- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx +++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { PrismThemeToggle } from './prism-theme-toggle'; /** diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx index 7c72797..ad8658d 100644 --- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx +++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx @@ -1,12 +1,12 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { PrismThemeToggle } from './prism-theme-toggle'; describe('PrismThemeToggle', () => { it('renders a toggle component', () => { render(<PrismThemeToggle />); expect( - screen.getByRole('radiogroup', { + rtlScreen.getByRole('radiogroup', { name: /Code blocks:/i, }) ).toBeInTheDocument(); diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss index e485380..1315fde 100644 --- a/src/components/organisms/forms/search-form/search-form.module.scss +++ b/src/components/organisms/forms/search-form/search-form.module.scss @@ -49,6 +49,9 @@ } .field { + min-width: 0; + width: 100%; + &:focus-within ~ .btn { background: var(--color-bg); border-color: var(--color-primary); diff --git a/src/components/organisms/forms/search-form/search-form.stories.tsx b/src/components/organisms/forms/search-form/search-form.stories.tsx index c5fbeb9..971a8ee 100644 --- a/src/components/organisms/forms/search-form/search-form.stories.tsx +++ b/src/components/organisms/forms/search-form/search-form.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { SearchForm } from './search-form'; /** diff --git a/src/components/organisms/forms/search-form/search-form.test.tsx b/src/components/organisms/forms/search-form/search-form.test.tsx index 1af0a47..908a8eb 100644 --- a/src/components/organisms/forms/search-form/search-form.test.tsx +++ b/src/components/organisms/forms/search-form/search-form.test.tsx @@ -1,17 +1,19 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { SearchForm } from './search-form'; describe('SearchForm', () => { it('renders a search input', () => { render(<SearchForm searchPage="#" />); expect( - screen.getByRole('searchbox', { name: 'Search for:' }) + rtlScreen.getByRole('searchbox', { name: 'Search for:' }) ).toBeInTheDocument(); }); it('renders a submit button', () => { render(<SearchForm searchPage="#" />); - expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument(); + expect( + rtlScreen.getByRole('button', { name: 'Search' }) + ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx index ac228b4..bfec65e 100644 --- a/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx +++ b/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { ThemeToggle } from './theme-toggle'; /** diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx index 9f8e4e1..d735936 100644 --- a/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx +++ b/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx @@ -1,12 +1,12 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../../tests/utils'; import { ThemeToggle } from './theme-toggle'; describe('ThemeToggle', () => { it('renders a toggle component', () => { render(<ThemeToggle />); expect( - screen.getByRole('radiogroup', { + rtlScreen.getByRole('radiogroup', { name: /Theme:/i, }) ).toBeInTheDocument(); |