@westpac/ui 0.7.0 → 0.8.0

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

@@ -1,269 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
-
-import { Button } from './button.component.js';
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const LOOKS = ['primary', 'hero', 'faint', 'link'] as const;
-const SOFT_LOOKS = ['primary', 'hero', 'faint'] as const;
-const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: 'Button text',
-  },
-};
-
-/**
- * > Button looks
- */
-export const Colors = () => (
-  <div className="flex flex-col gap-2">
-    <h3 className="font-bold">Default</h3>
-    <div className="flex gap-2">
-      {LOOKS.map(look => (
-        <Button look={look}>{look}</Button>
-      ))}
-    </div>
-    <h3 className="font-bold">Soft</h3>
-    <div className="flex gap-2">
-      {SOFT_LOOKS.map(look => (
-        <Button look={look} soft>
-          {look}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
-
-/**
- * > Button sizes
- */
-export const Sizes = () => (
-  <div className="flex flex-col gap-2">
-    {SIZES.map(size => (
-      <>
-        <h3 className="font-bold">{size}</h3>
-        <div className="flex gap-2">
-          {LOOKS.map(look => (
-            <Button look={look} size={size}>
-              {look}
-            </Button>
-          ))}
-        </div>
-        <div className="flex gap-2">
-          {SOFT_LOOKS.map(look => (
-            <Button look={look} size={size} soft>
-              {look}
-            </Button>
-          ))}
-        </div>
-      </>
-    ))}
-  </div>
-);
-
-/**
- * > Block buttons
- */
-export const Block = () => (
-  <div className="flex flex-col gap-2">
-    {SIZES.map(size => (
-      <>
-        <h3 className="font-bold">{size}</h3>
-        <div className="flex flex-col gap-2">
-          {SOFT_LOOKS.map(look => (
-            <Button look={look} size={size} block>
-              {look}
-            </Button>
-          ))}
-        </div>
-      </>
-    ))}
-  </div>
-);
-
-/**
- * > Buttons with icons
- */
-export const Icons = () => (
-  <div>
-    <div className="mb-4 flex flex-col gap-2">
-      <h2 className="typography-body-7 font-bold">Icon Before</h2>
-      <h3 className="font-bold">Colors</h3>
-      <div className="flex gap-2">
-        {LOOKS.map(look => (
-          <Button look={look} iconBefore={BurgerIcon}>
-            {look}
-          </Button>
-        ))}
-      </div>
-      <div className="flex gap-2">
-        {SOFT_LOOKS.map(look => (
-          <Button look={look} soft iconBefore={BurgerIcon}>
-            {look}
-          </Button>
-        ))}
-      </div>
-      <h3 className="font-bold">Sizes</h3>
-      <div>
-        {SIZES.map(size => (
-          <Button size={size} iconBefore={BurgerIcon} className="mr-2">
-            Button
-          </Button>
-        ))}
-      </div>
-      <div>
-        {SIZES.map(size => (
-          <Button size={size} iconBefore={BurgerIcon} soft className="mr-2">
-            Button
-          </Button>
-        ))}
-      </div>
-      <h3 className="font-bold">Block</h3>
-      <div className="flex flex-col gap-2">
-        <Button block iconBefore={ArrowLeftIcon}>
-          Button
-        </Button>
-        <Button block justify iconBefore={ArrowLeftIcon}>
-          Button
-        </Button>
-      </div>
-    </div>
-
-    <div className="mb-4 flex flex-col gap-2">
-      <h2 className="typography-body-7 font-bold">Icon After</h2>
-      <h3 className="font-bold">Colors</h3>
-      <div className="flex gap-2">
-        {LOOKS.map(look => (
-          <Button look={look} iconAfter={BurgerIcon}>
-            {look}
-          </Button>
-        ))}
-      </div>
-      <div className="flex gap-2">
-        {SOFT_LOOKS.map(look => (
-          <Button look={look} soft iconAfter={BurgerIcon}>
-            {look}
-          </Button>
-        ))}
-      </div>
-      <h3 className="font-bold">Sizes</h3>
-      <div>
-        {SIZES.map(size => (
-          <Button size={size} iconAfter={BurgerIcon} className="mr-2">
-            Button
-          </Button>
-        ))}
-      </div>
-      <div>
-        {SIZES.map(size => (
-          <Button size={size} iconAfter={BurgerIcon} soft className="mr-2">
-            Button
-          </Button>
-        ))}
-      </div>
-      <h3 className="font-bold">Block</h3>
-      <div className="flex flex-col gap-2">
-        <Button block iconAfter={ArrowRightIcon}>
-          Button
-        </Button>
-        <Button block justify iconAfter={ArrowRightIcon}>
-          Button
-        </Button>
-      </div>
-    </div>
-    <div className="mb-4 flex flex-col gap-2">
-      <h2 className="typography-body-7 font-bold">Icon Only</h2>
-      <h3 className="font-bold">Colors</h3>
-      <div className="flex gap-2">
-        {LOOKS.map(look => (
-          <Button look={look} iconAfter={BurgerIcon} />
-        ))}
-      </div>
-      <div className="flex gap-2">
-        {SOFT_LOOKS.map(look => (
-          <Button look={look} soft iconAfter={BurgerIcon} />
-        ))}
-      </div>
-      <h3 className="font-bold">Sizes</h3>
-      <div>
-        {SIZES.map(size => (
-          <Button size={size} iconAfter={BurgerIcon} className="mr-2" />
-        ))}
-      </div>
-      <div>
-        {SIZES.map(size => (
-          <Button size={size} iconAfter={BurgerIcon} soft className="mr-2" />
-        ))}
-      </div>
-      <h3 className="font-bold">Block</h3>
-      <div className="flex flex-col gap-2">
-        <Button block iconAfter={BurgerIcon} />
-      </div>
-    </div>
-  </div>
-);
-
-/**
- * > Responsive styles
- */
-export const ResponsiveSize = () => (
-  <div>
-    <div className="py-2">
-      <Button
-        size={{
-          initial: 'small',
-          md: 'large',
-          lg: 'xlarge',
-        }}
-      >
-        Responsive Button
-      </Button>
-    </div>
-    <Button
-      iconAfter={BurgerIcon}
-      size={{
-        initial: 'small',
-        md: 'large',
-        lg: 'xlarge',
-      }}
-    >
-      Responsive Button with icon
-    </Button>
-  </div>
-);
-
-/**
- * > As anchor tag
- */
-export const AsLink: Story = {
-  args: {
-    children: 'Link button',
-    tag: 'a',
-    href: '#',
-  },
-};
-
-/**
- * > Disabled look
- */
-export const Disabled: Story = {
-  args: {
-    children: 'Disabled button',
-    disabled: true,
-  },
-};

package/src/components/button-dropdown/button-dropdown.stories.tsx

@@ -1,220 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { AndroidIcon } from '../icon/index.js';
-
-import { ButtonDropdown } from './button-dropdown.component.js';
-
-const meta: Meta<typeof ButtonDropdown> = {
-  title: 'Components/ButtonDropdown',
-  component: ButtonDropdown,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const LOOKS = ['primary', 'hero', 'faint'] as const;
-const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
-const DROPDOWNSIZE = ['small', 'medium', 'large'] as const;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    text: 'Default Dropdown',
-    children: (
-      <p>
-        Example dropdown
-        <a href="#" className="text-[blue] underline">
-          content
-        </a>
-        ...
-      </p>
-    ),
-  },
-};
-
-/**
- * > Standard looks of button
- */
-export const StandardLooks = () => (
-  <div className="flex gap-2">
-    {LOOKS.map(look => (
-      <ButtonDropdown look={look} text={look}>
-        <p>
-          Example dropdown
-          <a href="#" className="text-[blue] underline">
-            content
-          </a>
-          ...
-        </p>
-      </ButtonDropdown>
-    ))}
-  </div>
-);
-
-/**
- * > Soft looks of button
- */
-export const SoftLooks = () => (
-  <div className="flex gap-2">
-    {LOOKS.map(look => (
-      <ButtonDropdown look={look} soft text={look}>
-        <p>
-          Example dropdown
-          <a href="#" className="text-[blue] underline">
-            content
-          </a>
-          ...
-        </p>
-      </ButtonDropdown>
-    ))}
-  </div>
-);
-
-/**
- * > Sizes of buttons
- */
-export const ButtonSizes = () => (
-  <div>
-    {SIZES.map(size => (
-      <>
-        <h3 className="font-bold">{size}</h3>
-        <ButtonDropdown size={size} text={size}>
-          <p>
-            Example dropdown
-            <a href="#" className="text-[blue] underline">
-              content
-            </a>
-            ...
-          </p>
-        </ButtonDropdown>
-      </>
-    ))}
-    <h3 className="font-bold">Responsive</h3>
-    <ButtonDropdown
-      size={{
-        initial: 'small',
-        md: 'large',
-        lg: 'xlarge',
-      }}
-      text="responsive"
-    >
-      <p>
-        Example dropdown
-        <a href="#" className="text-[blue] underline">
-          content
-        </a>
-        ...
-      </p>
-    </ButtonDropdown>
-  </div>
-);
-
-/**
- * > Sizes of dropdown
- */
-export const DropdownSizes = () => (
-  <div>
-    {DROPDOWNSIZE.map(size => (
-      <>
-        <h3 className="font-bold">{size}</h3>
-        <ButtonDropdown dropdownSize={size} text={size}>
-          {size}
-        </ButtonDropdown>
-      </>
-    ))}
-    <h3 className="font-bold">Responsive</h3>
-    <ButtonDropdown
-      dropdownSize={{
-        initial: 'large',
-        md: 'small',
-        lg: 'medium',
-      }}
-      text="Responsive"
-    >
-      Responive
-    </ButtonDropdown>
-  </div>
-);
-
-/**
- * > Block usage example
- */
-export const BlockDropdownButton = () => (
-  <div>
-    <h3 className="font-bold">Block</h3>
-    <ButtonDropdown block={true} text="Block">
-      Block
-    </ButtonDropdown>
-    <h3 className="font-bold">Responsive Block</h3>
-    <ButtonDropdown
-      block={{
-        initial: false,
-        lg: true,
-      }}
-      text="Responsive Block"
-    >
-      Responive Block
-    </ButtonDropdown>
-  </div>
-);
-
-/**
- * > Icon usage example
- */
-export const DropdownButtonWithIcons: Story = {
-  args: {
-    iconBefore: AndroidIcon,
-    text: 'Icon Dropdown',
-    children: (
-      <p>
-        Example dropdown
-        <a href="#" className="text-[blue] underline">
-          content
-        </a>
-        ...
-      </p>
-    ),
-  },
-};
-
-/**
- * > With headings example
- */
-export const DropdownWithHeadings: Story = {
-  args: {
-    text: 'Heading Dropdown',
-    block: false,
-    children: (
-      <>
-        <ButtonDropdown.Heading>Dropdown heading #1</ButtonDropdown.Heading>
-        Example dropdown content...
-        <ButtonDropdown.Heading>Dropdown heading #2</ButtonDropdown.Heading>
-        Example dropdown content...
-      </>
-    ),
-  },
-};
-
-/**
- * > Open by default
- * NOTE: This element has a visual bug on the Storybook Docs page when page loaded but doesn't in dev docs/canvas view
- */
-export const Open: Story = {
-  args: {
-    open: true,
-    text: 'Default Dropdown',
-    children: (
-      <p>
-        Example dropdown
-        <a href="#" className="text-[blue] underline">
-          content
-        </a>
-        ...
-      </p>
-    ),
-  },
-};

package/src/components/button-group/button-group.stories.tsx

@@ -1,141 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { ButtonGroup } from './button-group.component.js';
-
-const meta: Meta<typeof ButtonGroup> = {
-  title: 'Components/ButtonGroup',
-  component: ButtonGroup,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  argTypes: {
-    isDisabled: {
-      description: 'Controls whether all radio options are disabled or not',
-      type: { name: 'boolean' },
-    },
-    label: {
-      description:
-        'Not part of original GEL component but added for compatability with React Aria and accessibility. Styling can be done by passing tag with className as value.',
-    },
-    size: {
-      description:
-        'Controls size of buttons, can use any size the regular GEL Next Button components use or responsive sizing',
-    },
-  },
-  args: {
-    label: 'Test Label',
-    isDisabled: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const LOOKS = ['primary', 'hero'] as const;
-const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: [
-      <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
-      <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>,
-      <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>,
-    ],
-  },
-};
-
-/**
- * Button group looks
- */
-export const Colors = () => (
-  <div className="flex flex-col gap-2">
-    {LOOKS.map(look => (
-      <ButtonGroup label={<h3 className="font-bold">{look}</h3>} look={look}>
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-      </ButtonGroup>
-    ))}
-  </div>
-);
-
-/**
- * Button group sizes
- */
-export const Sizes = () => (
-  <div className="flex flex-col gap-2">
-    {SIZES.map(size => (
-      <ButtonGroup label={<h3 className="font-bold">{size}</h3>} size={size}>
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-      </ButtonGroup>
-    ))}
-  </div>
-);
-
-/**
- * Button group responsive sizing
- */
-export const ResponsiveSize: Story = {
-  args: {
-    children: [
-      <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
-      <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>,
-      <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>,
-    ],
-    size: {
-      initial: 'small',
-      md: 'large',
-      lg: 'xlarge',
-    },
-  },
-};
-
-/**
- * Button group block
- */
-export const Block = () => (
-  <div className="flex flex-col gap-2">
-    {SIZES.map(size => (
-      <ButtonGroup block label={<h3 className="font-bold">{size}</h3>} size={size}>
-        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
-        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
-      </ButtonGroup>
-    ))}
-  </div>
-);
-
-/**
- * Disabled button group
- */
-export const Disabled: Story = {
-  args: {
-    children: [
-      <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
-      <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>,
-      <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>,
-    ],
-    isDisabled: true,
-  },
-};
-
-/**
- * Error message and label
- */
-export const ErrorMessageAndLabel: Story = {
-  args: {
-    label: 'Are you an existing customer?',
-    errorMessage: 'This is an inline error message',
-    validationState: 'invalid',
-    hintMessage: 'Hint: choose from one of the following options',
-    children: [
-      <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
-      <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>,
-      <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>,
-    ],
-  },
-};