Add Missing stories and audit storybook

IFRCGo · Sep 13, 2024 · f5ba758 · f5ba758
1 parent 55d401d
commit f5ba758
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 2 deletions.
diff --git a/packages/go-ui-storybook/src/stories/Alert.stories.tsx b/packages/go-ui-storybook/src/stories/Alert.stories.tsx
@@ -32,6 +32,7 @@ export const Info: Story = {
         name: 'info',
         title: 'Information',
         type: 'info',
+        nonDismissable: true,
         description: 'This alert provides informative details to the user.',
     },
     parameters: {
@@ -48,6 +49,7 @@ export const Success: Story = {
         name: 'success',
         title: 'Success',
         type: 'success',
+        nonDismissable: true,
         description: 'This alert indicates a successful operation or task.',
     },
     parameters: {
@@ -64,6 +66,7 @@ export const Warning : Story = {
         name: 'warning',
         title: 'Warning',
         type: 'warning',
+        nonDismissable: true,
         description: 'This alert warns the user about potential issues or risks.',
     },
 };
@@ -73,6 +76,7 @@ export const Danger : Story = {
         name: 'danger',
         title: 'Danger',
         type: 'danger',
+        nonDismissable: true,
         description: 'This alert indicates a dangerous or potentially harmful situation.',
     },
     parameters: {

diff --git a/packages/go-ui-storybook/src/stories/Button.stories.ts b/packages/go-ui-storybook/src/stories/Button.stories.ts
@@ -21,7 +21,6 @@ const meta = {
         onClick: fn(),
     },
     tags: ['autodocs'],
-    argTypes: {},
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -42,6 +41,22 @@ export const Primary: Story = {
     },
 };
 
+export const PrimaryButtonWithIcon: Story = {
+    args: {
+        name: 'button',
+        variant: 'primary',
+        children: 'Primary Button',
+        // icons: <DownloadTwoFillIcon /> ,
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189962&mode=design&t=H77btqXhNDop8ZRl-4',
+            allowFullscreen: false,
+        },
+    },
+};
+
 export const Secondary: Story = {
     args: {
         name: 'button',
@@ -57,6 +72,22 @@ export const Secondary: Story = {
     },
 };
 
+export const SecondaryButtonWithIcon: Story = {
+    args: {
+        name: 'button',
+        variant: 'primary',
+        children: 'Primary Button',
+        // icons: <DownloadTwoFillIcon /> ,
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189950&mode=design&t=H77btqXhNDop8ZRl-4',
+            allowFullscreen: false,
+        },
+    },
+};
+
 export const Tertiary: Story = {
     args: {
         name: 'button',
@@ -72,6 +103,21 @@ export const Tertiary: Story = {
     },
 };
 
+export const TertiaryButtonWithIcon: Story = {
+    args: {
+        name: 'button',
+        variant: 'primary',
+        children: 'Primary Button',
+        // icons: <DownloadTwoFillIcon /> ,
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189955&mode=design&t=H77btqXhNDop8ZRl-4',
+            allowFullscreen: false,
+        },
+    },
+};
 export const TertiaryOnDark: Story = {
     args: {
         name: 'button',

diff --git a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx
@@ -36,6 +36,23 @@ export const Default: Story = {
         variant: 'primary',
     },
 };
+
+export const Secondary: Story = {
+    args: {
+        title: 'Add Item',
+        children: <AddFillIcon />,
+        variant: 'secondary',
+    },
+};
+
+export const Tertiary: Story = {
+    args: {
+        title: 'Add Item',
+        children: <AddFillIcon />,
+        variant: 'tertiary',
+    },
+};
+
 export const Disabled: Story = {
     args: {
         title: 'Download',

diff --git a/packages/go-ui-storybook/src/stories/LegendItem.stories.tsx b/packages/go-ui-storybook/src/stories/LegendItem.stories.tsx
@@ -1,3 +1,4 @@
+import { AlertInformationLineIcon } from '@ifrc-go/icons';
 import { LegendItemProps } from '@ifrc-go/ui';
 import type {
     Meta,
@@ -36,3 +37,10 @@ export const WithDifferentColor: Story = {
         color: 'orange',
     },
 };
+export const WithIcon: Story = {
+    args: {
+        label: 'Emergency appeal',
+        color: 'green',
+        icons: <AlertInformationLineIcon />,
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx b/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx
@@ -1,3 +1,4 @@
+import { UploadTwoLineIcon } from '@ifrc-go/icons';
 import { RawFileInputProps } from '@ifrc-go/ui';
 import type {
     Meta,
@@ -50,6 +51,7 @@ export const WithAccept: Story = {
         name: 'RawFileInput',
         accept: 'image/png,image/jpeg',
         children: 'Upload Image',
+        variant: 'secondary',
         multiple: false,
         onChange: fn(),
     },
@@ -59,6 +61,7 @@ export const Disabled: Story = {
     args: {
         name: 'RawFileInput',
         children: 'Export',
+        variant: 'secondary',
         multiple: false,
         onChange: fn(),
         disabled: true,
@@ -69,8 +72,19 @@ export const ReadOnly: Story = {
     args: {
         name: 'RawFileInput',
         children: 'Export',
+        variant: 'secondary',
         readOnly: true,
         multiple: false,
         onChange: fn(),
     },
 };
+export const WithIcon: Story = {
+    args: {
+        name: 'RawFileInput',
+        children: 'Export',
+        variant: 'secondary',
+        icons: <UploadTwoLineIcon />,
+        multiple: false,
+        onChange: fn(),
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/Tooltip.stories.tsx b/packages/go-ui-storybook/src/stories/Tooltip.stories.tsx
@@ -43,3 +43,11 @@ export const Default: Story = {
         preferredWidth: 20,
     },
 };
+
+export const WithoutTitle: Story = {
+    render: Template,
+    args: {
+        description: 'Click here to access our help documentation and support resources.',
+        preferredWidth: 20,
+    },
+};
diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx
@@ -14,14 +14,16 @@ import useBasicLayout from '#hooks/useBasicLayout';
 import styles from './styles.module.css';
 
 // NOTE: Adding a 'tertiary-on-dark' to use 'tertiary' button on darker backgrounds
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-on-dark' | 'dropdown-item';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tertiary-on-dark' | 'dropdown-item' | 'process' | 'grey-tertiary';
 
 const buttonVariantToClassNameMap: Record<ButtonVariant, string> = {
     primary: styles.primary,
     secondary: styles.secondary,
     tertiary: styles.tertiary,
     'tertiary-on-dark': styles.tertiaryOnDark,
     'dropdown-item': styles.dropdownItem,
+    process: styles.process,
+    'grey-tertiary': styles.greyTertiary,
 };
 
 const spacingTypeToClassNameMap: Record<SpacingType, string> = {

diff --git a/packages/ui/src/components/LegendItem/index.tsx b/packages/ui/src/components/LegendItem/index.tsx
@@ -6,6 +6,7 @@ export interface Props {
     className?: string;
     colorClassName?: string;
     label?: React.ReactNode;
+    icons?:React.ReactNode
     iconSrc?: string;
     color?: string;
     iconClassName?: string;
@@ -18,6 +19,7 @@ function LegendItem(props: Props) {
         iconClassName,
         color,
         label,
+        icons,
         iconSrc,
     } = props;
 
@@ -42,6 +44,11 @@ function LegendItem(props: Props) {
                     className={_cs(styles.color, colorClassName)}
                 />
             )}
+            {icons && (
+                <div>
+                    {icons}
+                </div>
+            )}
             <div className={styles.label}>
                 {label}
             </div>

diff --git a/packages/ui/src/components/Tooltip/index.tsx b/packages/ui/src/components/Tooltip/index.tsx
@@ -89,6 +89,7 @@ function Tooltip(props: Props) {
                     <Container
                         heading={title}
                         withInternalPadding
+                        withHeaderBorder
                         contentViewType="vertical"
                     >
                         {description}