Fix hint ,validation ,text,error message

IFRCGo · Jun 6, 2024 · 3ad5ec8 · 3ad5ec8
1 parent 197da03
commit 3ad5ec8
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 29 deletions.
diff --git a/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx b/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx
@@ -6,7 +6,9 @@ import type {
 
 import InputContainer from './InputContainer';
 
-const meta = {
+type Story = StoryObj<typeof InputContainer>;
+
+const meta :Meta<typeof InputContainer> = {
     title: 'Components/InputContainer',
     component: InputContainer,
     parameters: {
@@ -19,57 +21,85 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {},
-} satisfies Meta<typeof InputContainer>;
+};
 
 export default meta;
-type Story = StoryObj<typeof InputContainer>;
 
 export const Default: Story = {
     args: {
         label: 'Start After',
         input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
     },
 };
+
 export const Disabled: Story = {
     args: {
         label: 'Start After',
         input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
         disabled: true,
-
     },
 };
+
 export const WithError: Story = {
     args: {
         label: 'Start After',
         input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
-        error: <p>This is an error message</p>,
+        error: <p>Invalid Date </p>,
     },
 };
 
 export const ReadOnly: Story = {
     args: {
         label: 'Start After',
         input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
         readOnly: true,
     },
 };
+
 export const WithHint: Story = {
     args: {
         label: 'Start After',
         input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
-        hint: 'Please get this Hint',
+        hint: 'Enter a date in the format mm/dd/yy that the event should start after.',
     },
 };
+
 export const WithAsterisk: Story = {
     args: {
         label: 'Start After',
         input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
         withAsterisk: true,
     },
 };
+
+export const ErrorOnTooltip: Story = {
+    args: {
+        label: 'Start After',
+        input: <div>mm/dd/yy</div>,
+        errorOnTooltip: true,
+    },
+};
+
+export const Variant: Story = {
+    args: {
+        label: 'Start After',
+        input: <div>mm/dd/yy</div>,
+        variant: 'form',
+    },
+};
+
+export const Required: Story = {
+    args: {
+        label: 'Start After',
+        input: <div>mm/dd/yy</div>,
+        required: true,
+    },
+};
+
+export const WithIcon: Story = {
+    args: {
+        label: 'Start After',
+        input: <div>mm/dd/yy</div>,
+        icons: <CalendarLineIcon />,
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/InputError.stories.tsx b/packages/go-ui-storybook/src/stories/InputError.stories.tsx
@@ -23,15 +23,15 @@ const meta: Meta<typeof InputError> = {
 };
 
 export default meta;
-
 export const Default: Story = {
     args: {
-        children: 'This is an error',
+        children: 'An error occurred. Please try again.',
     },
 };
+
 export const Disabled: Story = {
     args: {
-        children: 'This is an error ',
+        children: 'An error occurred. Please try again.',
         disabled: true,
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/InputHint.stories.ts b/packages/go-ui-storybook/src/stories/InputHint.stories.ts
@@ -25,12 +25,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        children: 'This is a Hint',
-    },
-};
-export const WithClassName: Story = {
-    args: {
-        className: 'custom-class',
-        children: 'This is a Hint with a Class',
+        children: 'Enter your information in the provided field.',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/InputLabel.stories.ts b/packages/go-ui-storybook/src/stories/InputLabel.stories.ts
@@ -24,20 +24,20 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        children: 'This is a   Default Input-label',
+        children: 'User Name',
     },
 };
 
 export const Disabled :Story = {
     args: {
-        children: 'This is a disabled label',
+        children: 'User Name',
         disabled: true,
     },
 };
 
 export const Required : Story = {
     args: {
-        children: 'This is a required label',
+        children: 'User Name',
         required: true,
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/LegendItem.stories.tsx b/packages/go-ui-storybook/src/stories/LegendItem.stories.tsx
@@ -39,14 +39,14 @@ export default meta;
 
 export const Default: Story = {
     args: {
-        label: 'Test',
+        label: 'Early Action Protocol Activation',
         color: 'red',
     },
 };
 
 export const Color: Story = {
     args: {
-        label: 'Test',
-        color: 'green',
+        label: 'Multiple types',
+        color: 'orange',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/Message.stories.tsx b/packages/go-ui-storybook/src/stories/Message.stories.tsx
@@ -40,6 +40,7 @@ export default meta;
 export const Default: Story = {
     args: {
         title: 'IFRC supported Operation',
+        errored: false,
     },
 };
 
@@ -58,10 +59,19 @@ export const Info :Story = {
 
     },
 };
+export const Pending :Story = {
+    args: {
+        title: 'Fetching data...',
+        pending: true,
+
+    },
+};
 
 export const Error :Story = {
     args: {
-        title: 'Page not found',
+        title: 'IFRC supported Operation',
         variant: 'error',
+        erroredTitle: 'Page Not Found',
+        errored: true,
     },
 };