diff --git a/packages/components/textarea/index.tsx b/packages/components/textarea/index.tsx index 76e95b1fb02..ebaa81c69f7 100644 --- a/packages/components/textarea/index.tsx +++ b/packages/components/textarea/index.tsx @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import './style.scss'; -interface TextareaProps { +export interface TextareaProps { className?: string; disabled: boolean; onTextChange: ( newText: string ) => void; diff --git a/packages/components/textarea/stories/index.stories.tsx b/packages/components/textarea/stories/index.stories.tsx new file mode 100644 index 00000000000..c6c2adfe56a --- /dev/null +++ b/packages/components/textarea/stories/index.stories.tsx @@ -0,0 +1,77 @@ +/** + * External dependencies + */ +import type { Meta, StoryFn } from '@storybook/react'; +import { useArgs } from '@storybook/preview-api'; + +/** + * Internal dependencies + */ +import Textarea, { type TextareaProps } from '..'; +import '../style.scss'; + +export default { + title: 'Checkout Components/Textarea', + component: Textarea, + argTypes: { + className: { + control: 'text', + table: { + type: { + summary: 'string', + }, + }, + description: 'Additional class names to add to the textarea.', + }, + value: { + control: 'text', + table: { + type: { + summary: 'string', + }, + }, + description: 'The value in the textarea.', + }, + disabled: { + control: 'boolean', + table: { + type: { + summary: 'boolean', + }, + }, + description: 'Whether the textarea is disabled.', + }, + placeholder: { + control: 'text', + table: { + type: { + summary: 'string', + }, + }, + description: + 'The placeholder text to show when no value has been entered.', + }, + }, +} as Meta< TextareaProps >; + +const Template: StoryFn< TextareaProps > = ( args ) => { + const [ { value }, updateArgs ] = useArgs(); + return ( +