Use Template to write story ,change error message and hints and labels

IFRCGo · Jun 10, 2024 · 7cf007d · 7cf007d
1 parent 25fdce0
commit 7cf007d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 45 deletions.
diff --git a/packages/go-ui-storybook/src/stories/Switch.stories.tsx b/packages/go-ui-storybook/src/stories/Switch.stories.tsx
@@ -55,22 +55,22 @@ export default meta;
 
 export const Default: Story = {
     args: {
-        label: 'I agree to be awesome',
+        label: 'Enable notifications',
         value: false,
     },
 };
 
 export const Disabled: Story = {
     args: {
-        label: 'I agree to be awesome',
+        label: 'Enable notifications',
         value: false,
         disabled: true,
     },
 };
 
 export const Checked: Story = {
     args: {
-        label: 'I agree to be awesome',
+        label: 'Enable notifications',
         value: true,
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/TextArea.stories.tsx b/packages/go-ui-storybook/src/stories/TextArea.stories.tsx
@@ -1,12 +1,15 @@
 import { useArgs } from '@storybook/preview-api';
 import type {
+    Args,
     Meta,
     StoryObj,
 } from '@storybook/react';
 import { fn } from '@storybook/test';
 
 import TextArea from './TextArea';
 
+type Story = StoryObj<typeof meta>;
+
 const meta: Meta<typeof TextArea> = {
     title: 'Components/TextArea',
     component: TextArea,
@@ -20,81 +23,81 @@ const meta: Meta<typeof TextArea> = {
     args: {
         onChange: fn(),
     },
-    decorators: [
-        function Component(_, ctx) {
-            const [
-                { value },
-                setArgs,
-            ] = useArgs<{ value: string | undefined }>();
-            const onChange = (val: string | undefined, name: string) => {
-                setArgs({ value: val });
-                ctx.args.onChange(val, name);
-            };
-
-            return (
-                <TextArea
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...ctx.args}
-                    onChange={onChange}
-                    value={value}
-                    name="TextArea"
-                />
-            );
-        },
-    ],
     tags: ['autodocs'],
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+
+function Template(args:Args) {
+    const [
+        { value },
+        setArgs,
+    ] = useArgs<{ value: string | undefined }>();
+    const onChange = (val: string | undefined, name: string) => {
+        setArgs({ value: val });
+        // eslint-disable-next-line react/destructuring-assignment
+        args.onChange(val, name);
+    };
+
+    return (
+        <TextArea
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+            name="Text"
+            value={value}
+            onChange={onChange}
+        />
+    );
+}
 
 export const Default: Story = {
+    render: Template,
     args: {
-        label: 'Text Area',
-        value: 'This is text area',
+        label: 'Feedback',
+        value: 'Please enter your feedback here...',
     },
 };
 export const Disabled: Story = {
     args: {
-        label: 'Text Area',
-        value: 'This is text area',
+        label: 'Feedback',
+        value: 'Please enter your feedback here...',
         disabled: true,
     },
 };
 export const Error: Story = {
     args: {
-        label: 'Text Area',
-        value: 'This is text area',
-        error: 'This is error',
+        label: 'Feedback',
+        value: 'Please enter your feedback here...',
+        error: 'Feedback is required.',
     },
 };
 export const Hint: Story = {
     args: {
-        label: 'Text Area',
-        value: 'This is text area',
-        hint: 'This is a hint',
+        label: 'Feedback',
+        value: 'Please enter your feedback here...',
+        hint: 'Your feedback helps us improve our product.',
     },
 };
 export const ReadOnly: Story = {
     args: {
-        label: 'Text Area',
-        value: 'This is text area',
+        label: 'Feedback',
+        value: 'Please enter your feedback here...',
         readOnly: true,
     },
 };
 export const WithAsterisk: Story = {
     args: {
-        label: 'Text Area',
-        value: 'This is text area',
+        label: 'Feedback',
+        value: 'Please enter your feedback here...',
         withAsterisk: true,
     },
 };
 
 export const ErrorOnTooltip: Story = {
     args: {
-        label: 'Text Area',
-        value: 'This is text area',
-        error: 'This is an error message',
+        label: 'Feedback',
+        value: 'Please enter your feedback here...',
+        error: 'Feedback is required.',
         errorOnTooltip: true,
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/TextInput.stories.tsx b/packages/go-ui-storybook/src/stories/TextInput.stories.tsx
@@ -1,3 +1,4 @@
+import { CalendarLineIcon } from '@ifrc-go/icons';
 import { TextInputProps } from '@ifrc-go/ui';
 import type {
     Meta,
@@ -31,10 +32,11 @@ export const Default: Story = {
 
     },
 };
-export const WittIcon: Story = {
+export const WithIcon: Story = {
     args: {
         label: 'Total affected population',
         value: 'affected population',
+        icons: <CalendarLineIcon />,
 
     },
 };
@@ -69,7 +71,7 @@ export const WithError: Story = {
     args: {
         label: 'Total affected population',
         value: 'affected population',
-        error: 'This is an error',
+        error: 'Invalid input. Please enter a number.',
     },
 };