Fix hint ,validation ,text,error message

IFRCGo · Jun 7, 2024 · 6911e93 · 6911e93
1 parent f2f0e48
commit 6911e93
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 46 deletions.
diff --git a/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx b/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx
@@ -4,9 +4,11 @@ import type {
     StoryObj,
 } from '@storybook/react';
 
-import InputContainer from './InputContainer';
+import InputContainer, { InputContainerProps } from './InputContainer';
 
-const meta = {
+type Story = StoryObj<InputContainerProps>;
+
+const meta: Meta<InputContainerProps> = {
     title: 'Components/InputContainer',
     component: InputContainer,
     parameters: {
@@ -17,59 +19,103 @@ const meta = {
             allowFullscreen: true,
         },
     },
+    argTypes: {
+        spacing: {
+            options: ['none', 'condensed', 'compact', 'cozy', 'default', 'comfortable', 'relaxed', 'loose'],
+            control: { type: 'select' },
+        },
+    },
+    args: {},
     tags: ['autodocs'],
-    argTypes: {},
-} satisfies Meta<typeof InputContainer>;
+};
 
 export default meta;
-type Story = StoryObj<typeof InputContainer>;
 
 export const Default: Story = {
     args: {
-        label: 'Start After',
+        label: 'Select a date',
         input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
+        actions: <CalendarLineIcon />,
+        icons: undefined,
+        disabled: false,
+        error: undefined,
+        actionsContainerClassName: '',
+        errorContainerClassName: '',
+        hintContainerClassName: '',
+        iconsContainerClassName: '',
+        errorOnTooltip: false,
+        hint: '',
+        inputSectionClassName: '',
+        labelClassName: '',
+        readOnly: false,
+        required: false,
+        variant: 'form',
+        withAsterisk: false,
+        className: '',
+        containerRef: undefined,
+        inputSectionRef: undefined,
     },
 };
+
 export const Disabled: Story = {
     args: {
-        label: 'Start After',
-        input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
+        ...Default.args,
         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>,
+        ...Default.args,
+        error: <p>Invalid Date</p>,
     },
 };
 
 export const ReadOnly: Story = {
     args: {
-        label: 'Start After',
-        input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
+        ...Default.args,
         readOnly: true,
     },
 };
+
 export const WithHint: Story = {
     args: {
-        label: 'Start After',
-        input: <div>mm/dd/yy</div>,
-        icons: <CalendarLineIcon />,
-        hint: 'Please get this Hint',
+        ...Default.args,
+        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 />,
+        ...Default.args,
         withAsterisk: true,
     },
 };
+
+export const ErrorOnTooltip: Story = {
+    args: {
+        ...Default.args,
+        errorOnTooltip: true,
+    },
+};
+
+export const Variant: Story = {
+    args: {
+        ...Default.args,
+        variant: 'form',
+    },
+};
+
+export const Required: Story = {
+    args: {
+        ...Default.args,
+        required: true,
+    },
+};
+
+export const WithIcon: Story = {
+    args: {
+        ...Default.args,
+        icons: <CalendarLineIcon />,
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/InputContainer.tsx b/packages/go-ui-storybook/src/stories/InputContainer.tsx
@@ -3,12 +3,11 @@ import {
     InputContainerProps as PureInputContainerProps,
 } from '@ifrc-go/ui';
 
-interface InputContainerProps extends PureInputContainerProps {}
-
-function WrappedInputContainer(props: InputContainerProps) {
+export type InputContainerProps = PureInputContainerProps;
+function InputContainer(props: InputContainerProps) {
     return (
         <PureInputContainer {...props} />// eslint-disable-line react/jsx-props-no-spreading
     );
 }
 
-export default WrappedInputContainer;
+export default InputContainer;
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,
     },
 };