@indico-data/design-system 2.43.1 → 2.44.0

package/src/components/button/Button.stories.tsx

@@ -1,305 +1,441 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button } from '@/components';
-const exampleIcons = ['fa-check', 'fa-times']; // TODO -- get ALL icons
+import { Button, Col, Row } from '@/components';
+import { iconNames } from '@/storybook/iconNames';
 
 const meta: Meta = {
   title: 'Components/Button',
   component: Button,
   argTypes: {
-    children: {
+    // Core Props
+    type: {
       table: {
-        disable: true,
+        category: 'Core Props',
+        type: {
+          summary: 'button | submit | reset',
+        },
       },
-    },
-    variant: {
+      description: 'Sets the HTML button type attribute',
+      defaultValue: { summary: 'button' },
       control: 'select',
-      options: ['solid', 'outline', 'text'],
-      description: 'It sets the variant style for the button',
+      options: ['button', 'submit', 'reset'],
+    },
+    href: {
+      control: 'text',
       table: {
-        category: 'Props',
-        type: {
-          summary: 'solid | outline | text',
-        },
-        defaultValue: { summary: 'solid' },
+        category: 'Core Props',
       },
+      defaultValue: { summary: '' },
+      description: 'URL destination for the button when it needs to function as a link',
     },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'warning', 'error', 'success', 'info'],
-      description: 'It sets the color for the button',
+    children: {
+      control: 'text',
       table: {
-        category: 'Props',
+        category: 'Core Props',
         type: {
-          summary: 'primary | secondary | warning | error | success | info',
+          summary: 'ReactNode',
         },
-        defaultValue: { summary: 'primary' }, // replace 'default' with your actual default color
       },
+      description: 'The content of the button. Can be text, elements, or other React components',
     },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'It sets the size for the button',
-      defaultValue: { summary: 'md' },
+
+    // Accessibility
+    ariaLabel: {
+      description: 'Sets the aria-label attribute for the button.',
       table: {
-        category: 'Props',
+        category: 'Accessibility',
         type: {
-          summary: 'sm | md | lg',
+          summary: 'string',
         },
       },
+      control: 'text',
     },
-    type: {
+
+    // Icon Props
+    iconLeft: {
       table: {
-        category: 'Props',
-        type: {
-          summary: 'button | submit | reset',
-        },
+        category: 'Icon Props',
+        type: { summary: 'string' },
       },
-      description: 'It sets the type for the button.',
-      defaultValue: { summary: 'button' },
+      description: 'Sets an icon on the left side of the button content',
       control: 'select',
-      options: ['button', 'submit', 'reset'],
+      options: iconNames,
     },
-    iconPosition: {
-      description:
-        'Sets an icon to the left or right of the child element inside the button. It requires an icon to be set.',
+    iconRight: {
       table: {
-        category: 'Props',
-        defaultValue: { summary: 'left' },
-        type: {
-          summary: 'left | right',
-        },
+        category: 'Icon Props',
+        type: { summary: 'string' },
       },
+      description: 'Sets an icon on the right side of the button content',
       control: 'select',
-      options: ['left', 'right'],
+      options: iconNames,
     },
-    iconName: {
+
+    // Style Props
+    variant: {
+      control: 'select',
+      options: ['action', 'destructive', 'soft', 'link', 'outline', 'solid'],
+      description: 'Determines the visual style and emphasis level of the button',
       table: {
-        category: 'Props',
+        category: 'Style Props',
         type: {
-          summary: Object.values(exampleIcons).join(' | '),
+          summary: 'action | destructive | soft | link | outline | solid',
         },
+        defaultValue: { summary: 'solid' },
       },
-      description:
-        'Sets the icon for the button. The icons are pulled from the design system icon library. Only a couple examples are shown here.',
-      control: 'select',
-      options: Object.values(exampleIcons),
     },
-    ariaLabel: {
-      description: 'Sets the aria-label attribute for the button.',
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: "Controls the button's padding and text size",
+      defaultValue: { summary: 'md' },
       table: {
-        category: 'Props',
+        category: 'Style Props',
         type: {
-          summary: 'string',
+          summary: 'xs | sm | md | lg',
         },
       },
-      control: 'text',
-    },
-    onClick: {
-      description: 'Triggers a callback on button click',
-      table: { category: 'callbacks' },
-      action: 'clicked',
     },
-    onMouseEnter: {
-      description: 'Triggers a callback on mouse enter.',
-      table: { category: 'callbacks' },
-      action: 'mouse entered',
-    },
-    onMouseExit: {
-      description: 'Triggers a callback on mouse exit.',
-      table: { category: 'callbacks' },
-      action: 'mouse exited',
+    isPill: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'true | false' },
+        category: 'Style Props',
+      },
+      defaultValue: { summary: false },
+      description: 'Makes the button round, pill-shaped when true',
     },
-    onKeyDown: {
-      description: 'Triggers a callback on key press.',
-      table: { category: 'callbacks' },
-      action: 'key pressed',
+    className: {
+      control: 'text',
+      table: {
+        category: 'Style Props',
+        defaultValue: { summary: '' },
+      },
+      description: 'Allows the passing of classes',
     },
+
+    // State Props
     isLoading: {
       control: 'boolean',
       table: {
         type: { summary: 'true | false' },
-        category: 'Props',
+        category: 'State Props',
       },
       defaultValue: { summary: false },
       description:
-        'It disables the button and shows a load spinner on the left hand side of the button children',
+        'Disables the button and shows a load spinner on the left hand side of the button children',
     },
     isDisabled: {
       control: 'boolean',
       table: {
         type: { summary: 'true | false' },
-        category: 'Props',
+        category: 'State Props',
       },
       defaultValue: { summary: false },
-      description: 'It disables the button',
+      description: 'Disables the button',
     },
-    className: {
-      control: 'text',
-      table: {
-        category: 'Props',
-      },
-      defaultValue: { summary: '' },
-      description: 'allows the passing of classes',
+
+    // Event Handlers
+    onClick: {
+      description: 'Triggers a callback on button click',
+      table: { category: 'Event Handlers' },
+      action: 'clicked',
     },
-    href: {
-      control: 'text',
-      table: {
-        category: 'Props',
-      },
-      defaultValue: { summary: '' },
-      description: 'passes a href value to the button for creating links',
+    onMouseEnter: {
+      description: 'Triggers a callback on mouse enter.',
+      table: { category: 'Event Handlers' },
+      action: 'mouse entered',
+    },
+    onMouseExit: {
+      description: 'Triggers a callback on mouse exit.',
+      table: { category: 'Event Handlers' },
+      action: 'mouse exited',
+    },
+    onKeyDown: {
+      description: 'Triggers a callback on key press.',
+      table: { category: 'Event Handlers' },
+      action: 'key pressed',
     },
   },
 };
 
 type Story = StoryObj<typeof Button>;
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
-    type: 'submit',
+    type: 'button',
     variant: 'solid',
-    color: 'primary',
     isDisabled: false,
     isLoading: false,
-    ariaLabel: 'Primary Button',
+    isPill: false,
+    ariaLabel: 'Click Me Button',
+    size: 'md',
     onClick: () => {
-      console.log('Primary button clicked');
+      console.log('Button clicked');
     },
+    children: 'Click Me',
   },
-  render: (args) => <Button {...args}>Primary</Button>,
-};
-export const Small: Story = {
-  args: {
-    variant: 'solid',
-    color: 'primary',
-    size: 'sm',
-  },
-  render: (args) => <Button {...args}>Small</Button>,
+  render: (args) => <Button {...args} />,
 };
-export const Medium: Story = {
+
+export const Sizes: Story = {
   args: {
     variant: 'solid',
-    color: 'primary',
-    size: 'md',
   },
-  render: (args) => <Button {...args}>Medium</Button>,
+  render: () => (
+    <Row>
+      <Col xs={6} sm={3} className="mb-3">
+        <Button size="xs" ariaLabel="Extra Small Button">
+          Extra Small
+        </Button>
+      </Col>
+      <Col xs={6} sm={3} className="mb-3">
+        <Button size="sm" ariaLabel="Small Button">
+          Small
+        </Button>
+      </Col>
+      <Col xs={6} sm={3} className="mb-3">
+        <Button size="md" ariaLabel="Medium Button">
+          Medium
+        </Button>
+      </Col>
+      <Col xs={6} sm={3} className="mb-3">
+        <Button size="lg" ariaLabel="Large Button">
+          Large
+        </Button>
+      </Col>
+    </Row>
+  ),
 };
-export const Large: Story = {
+
+export const Solid: Story = {
   args: {
     variant: 'solid',
-    color: 'primary',
-    size: 'lg',
   },
-  render: (args) => <Button {...args}>Large</Button>,
+  render: (args) => <Button {...args}>Solid</Button>,
 };
-export const Secondary: Story = {
+
+export const Action: Story = {
   args: {
-    variant: 'solid',
-    color: 'secondary',
+    variant: 'action',
+    iconLeft: 'thumbs-up',
   },
-  render: (args) => <Button {...args}>Secondary</Button>,
+  render: (args) => <Button {...args} />,
 };
 
-export const PrimaryOutline: Story = {
+export const Outline: Story = {
   args: {
     variant: 'outline',
-    color: 'primary',
   },
   render: (args) => <Button {...args}>Outline</Button>,
 };
 
-export const SecondaryOutline: Story = {
+export const Link: Story = {
   args: {
-    variant: 'outline',
-    color: 'secondary',
-  },
-  render: (args) => <Button {...args}>Secondary Outline</Button>,
-};
-export const Info: Story = {
-  args: {
-    color: 'info',
+    variant: 'link',
   },
-  render: (args) => <Button {...args}>Info</Button>,
+  render: (args) => <Button {...args}>Link</Button>,
 };
-export const InfoOutline: Story = {
+
+export const Destructive: Story = {
   args: {
-    variant: 'outline',
-    color: 'info',
+    variant: 'destructive',
   },
-  render: (args) => <Button {...args}>Info Outline</Button>,
+  render: (args) => <Button {...args}>Destructive</Button>,
 };
-export const Text: Story = {
+
+export const Soft: Story = {
   args: {
-    variant: 'text',
-    color: 'secondary',
+    variant: 'soft',
   },
-  render: (args) => <Button {...args}>Text</Button>,
+  render: (args) => <Button {...args}>Soft</Button>,
 };
 
 export const IconLeft: Story = {
   args: {
-    color: 'primary',
-    iconPosition: 'left',
-    iconName: 'fa-check',
+    iconLeft: 'check',
   },
   render: (args) => <Button {...args}>Icon Left</Button>,
 };
 
 export const IconRight: Story = {
   args: {
-    color: 'primary',
-    iconName: 'fa-check',
-    iconPosition: 'right',
+    iconRight: 'check',
   },
   render: (args) => <Button {...args}>Icon Right</Button>,
 };
 
 export const IconOnly: Story = {
   args: {
-    color: 'primary',
-    iconName: 'fa-check',
+    iconLeft: 'check',
+    variant: 'action',
   },
   render: (args) => <Button {...args} />,
 };
 
-export const Error: Story = {
-  args: {
-    color: 'error',
-  },
-  render: (args) => <Button {...args}>Error</Button>,
-};
-
-export const Success: Story = {
-  args: {
-    color: 'success',
-  },
-  render: (args) => <Button {...args}>Success</Button>,
+export const Variants: Story = {
+  args: {},
+  render: (args) => (
+    <Row>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="solid">
+          Solid
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="outline">
+          Outline
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="link">
+          Link
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="soft">
+          Soft
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="destructive">
+          Destructive
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="action" iconLeft="thumbs-up" />
+      </Col>
+    </Row>
+  ),
 };
 
-export const Warning: Story = {
-  args: {
-    variant: 'solid',
-    color: 'warning',
-  },
-  render: (args) => <Button {...args}>Warning</Button>,
+export const Pill: Story = {
+  args: { isPill: true },
+  render: (args) => (
+    <Row>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="solid">
+          Solid
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="outline">
+          Outline
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="link">
+          Link
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="soft">
+          Soft
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="destructive">
+          Destructive
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="action" iconLeft="thumbs-up" />
+      </Col>
+    </Row>
+  ),
 };
 
 export const Disabled: Story = {
-  args: {
-    isDisabled: true,
-    variant: 'solid',
-    color: 'warning',
-  },
-  render: (args) => <Button {...args}>Disabled</Button>,
+  args: {},
+  render: (args) => (
+    <Row>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="solid" isDisabled>
+          Solid
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="outline" isDisabled>
+          Outline
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="link" isDisabled>
+          Link
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="soft" isDisabled>
+          Soft
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="destructive" isDisabled>
+          Destructive
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="action" iconLeft="thumbs-up" isDisabled />
+      </Col>
+    </Row>
+  ),
 };
 
 export const Loading: Story = {
-  args: {
-    isLoading: true,
-    variant: 'text',
-    color: 'warning',
-  },
-  render: (args) => <Button {...args}>Loading</Button>,
+  args: { isLoading: true },
+  render: (args) => (
+    <Row>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="solid">
+          Solid
+        </Button>
+      </Col>
+
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="outline">
+          Outline
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="link">
+          Link
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="soft">
+          Soft
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="destructive">
+          Destructive
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="action" iconLeft="thumbs-up" />
+      </Col>
+    </Row>
+  ),
+};
+
+export const Icons: Story = {
+  args: {},
+  render: (args) => (
+    <Row>
+      <Col xs={4} className="mb-3">
+        <Button {...args} iconLeft="check">
+          Left Icon
+        </Button>
+      </Col>
+      <Col xs={4} className="mb-3">
+        <Button {...args} iconRight="check">
+          Right Icon
+        </Button>
+      </Col>
+      <Col xs={4} className="mb-3">
+        <Button {...args} iconLeft="check" />
+      </Col>
+    </Row>
+  ),
 };
 
 export default meta;