diff options
Diffstat (limited to 'src/components/atoms/forms/fields/text-area')
4 files changed, 226 insertions, 0 deletions
diff --git a/src/components/atoms/forms/fields/text-area/index.ts b/src/components/atoms/forms/fields/text-area/index.ts new file mode 100644 index 0000000..e18b325 --- /dev/null +++ b/src/components/atoms/forms/fields/text-area/index.ts @@ -0,0 +1 @@ +export * from './text-area'; 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 new file mode 100644 index 0000000..2e77cb7 --- /dev/null +++ b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx @@ -0,0 +1,136 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { ChangeEvent, useCallback, useState } from 'react'; +import { TextArea as TextAreaComponent } from './text-area'; + +/** + * TextArea - Storybook Meta + */ +export default { + title: 'Atoms/Forms/Fields', + component: TextAreaComponent, + args: { + isDisabled: false, + isRequired: false, + }, + argTypes: { + 'aria-labelledby': { + control: { + type: 'text', + }, + description: 'One or more ids that refers to the field name.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Add classnames to the field.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + id: { + control: { + type: 'text', + }, + description: 'TextArea id.', + type: { + name: 'string', + required: true, + }, + }, + isDisabled: { + control: { + type: 'boolean', + }, + description: 'TextArea state: either enabled or disabled.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + isRequired: { + control: { + type: 'boolean', + }, + description: 'Determine if the field is required.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + name: { + control: { + type: 'text', + }, + description: 'TextArea name.', + type: { + name: 'string', + required: true, + }, + }, + placeholder: { + control: { + type: 'text', + }, + description: 'A placeholder value.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + value: { + control: { + type: null, + }, + description: 'TextArea value.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof TextAreaComponent>; + +const Template: ComponentStory<typeof TextAreaComponent> = ({ + value: initialValue, + onChange: _onChange, + ...args +}) => { + const [value, setValue] = useState(initialValue); + const updateValue = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => { + setValue(e.target.value); + }, []); + + return <TextAreaComponent value={value} onChange={updateValue} {...args} />; +}; + +/** + * TextArea Story - TextArea + */ +export const TextArea = Template.bind({}); +TextArea.args = { + id: 'field-storybook', + name: 'field-storybook', +}; 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 new file mode 100644 index 0000000..37a1d1c --- /dev/null +++ b/src/components/atoms/forms/fields/text-area/text-area.test.tsx @@ -0,0 +1,20 @@ +import { render, screen } from '../../../../../../tests/utils'; +import { TextArea } from './text-area'; + +const doNothing = () => { + // do nothing +}; + +describe('TextArea', () => { + it('renders a textarea', () => { + render( + <TextArea + id="textarea-field" + name="textarea-field" + onChange={doNothing} + value="" + /> + ); + expect(screen.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 new file mode 100644 index 0000000..bd99d7d --- /dev/null +++ b/src/components/atoms/forms/fields/text-area/text-area.tsx @@ -0,0 +1,69 @@ +import { + type ForwardedRef, + forwardRef, + type TextareaHTMLAttributes, +} from 'react'; +import styles from '../fields.module.scss'; + +type AllowedTextAreaProps = Omit< + TextareaHTMLAttributes<HTMLTextAreaElement>, + 'disabled' | 'readOnly' | 'required' +> & + Required<Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'name'>>; + +export type TextAreaProps = AllowedTextAreaProps & { + /** + * Should the field be disabled? + * + * @default false + */ + isDisabled?: boolean; + /** + * Should the field be hidden? + * + * @default false + */ + isHidden?: boolean; + /** + * Should the field be readonly? + * + * @default false + */ + isReadOnly?: boolean; + /** + * Should the field be required? + * + * @default false + */ + isRequired?: boolean; +}; + +const TextAreaWithRef = ( + { + className = '', + isDisabled = false, + isHidden = false, + isReadOnly = false, + isRequired = false, + ...props + }: TextAreaProps, + ref: ForwardedRef<HTMLTextAreaElement> +) => { + const fieldClassName = `${styles.field} ${styles['field--textarea']} ${className}`; + + return ( + <textarea + {...props} + className={fieldClassName} + disabled={isDisabled} + readOnly={isReadOnly} + ref={ref} + required={isRequired} + /> + ); +}; + +/** + * TextArea component. + */ +export const TextArea = forwardRef(TextAreaWithRef); |