@westpac/ui 0.7.1 → 0.8.0

package/src/components/popover/popover.stories.tsx

@@ -1,81 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { HelpIcon } from '../icon/index.js';
-
-import { Popover } from './popover.component.js';
-
-const popoverContent =
-  'Small overlays of content for housing secondary information. These are often used to provide explanatory information for complex ideas.';
-
-const meta: Meta<typeof Popover> = {
-  title: 'Components/Popover',
-  component: Popover,
-  tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-29">
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    content: popoverContent,
-    heading: 'Test Heading',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: 'Click Me',
-  },
-};
-
-/**
- * > Using icon as trigger
- */
-export const IconTrigger: Story = {
-  args: {
-    icon: () => <HelpIcon color="hero" />,
-  },
-};
-
-/**
- * > Default open
- */
-export const DefaultOpen: Story = {
-  args: {
-    children: 'Click Me',
-    open: true,
-  },
-};
-
-/**
- * > No heading
- */
-export const NoHeading: Story = {
-  args: {
-    children: 'Click Me',
-    open: true,
-    heading: undefined,
-  },
-};
-
-/**
- * > Top and bottom popover
- */
-export const PopoverPlacement = () => (
-  <div>
-    <Popover className="mr-3" heading="Heading" placement="top" content={popoverContent} open>
-      Top Popover
-    </Popover>
-    <Popover placement="bottom" heading="Heading" content={popoverContent} open>
-      Bottom Popover
-    </Popover>
-  </div>
-);

package/src/components/progress-bar/progress-bar.stories.tsx

@@ -1,85 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { useCallback, useState } from 'react';
-
-import { Button } from '../button/index.js';
-
-import { ProgressBar } from './progress-bar.component.js';
-
-const meta: Meta<typeof ProgressBar> = {
-  title: 'Components/ProgressBar',
-  component: ProgressBar,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    value: 50,
-    look: 'default',
-  },
-};
-
-/**
- * > Skinny example
- */
-export const Skinny: Story = {
-  args: {
-    value: 50,
-    look: 'skinny',
-  },
-};
-
-/**
- * > No label example
- */
-export const NoLabel: Story = {
-  args: {
-    value: 50,
-    look: 'default',
-    noLabel: true,
-  },
-};
-
-/**
- * Example of Progress Bar controlled by buttons
- */
-export const Controlled = () => {
-  const [barValue, setBarValue] = useState(0);
-  const handleProgress = useCallback(
-    (calc: number) => {
-      const progress = barValue + calc;
-      if (progress > 100) return setBarValue(100);
-      if (progress < 0) return setBarValue(0);
-      return setBarValue(progress);
-    },
-    [barValue],
-  );
-  return (
-    <>
-      <h2 className="typography-body-9 mb-1 font-bold">Default</h2>
-      <ProgressBar value={barValue} className="mb-2" />
-      <h2 className="typography-body-9 mb-1 font-bold">Skinny</h2>
-      <ProgressBar look="skinny" value={barValue} className="mb-2" />
-      <div className="flex space-x-2">
-        <Button soft onClick={() => handleProgress(-1)}>
-          -1%
-        </Button>
-        <Button soft onClick={() => handleProgress(-10)}>
-          -10%
-        </Button>
-        <Button soft onClick={() => handleProgress(+1)}>
-          +1%
-        </Button>
-        <Button soft onClick={() => handleProgress(+10)}>
-          +10%
-        </Button>
-      </div>
-    </>
-  );
-};

package/src/components/progress-rope/progress-rope.stories.tsx

@@ -1,109 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { useCallback, useState } from 'react';
-
-import { Button } from '../index.js';
-
-import { ProgressRope } from './progress-rope.component.js';
-import { ProgressRopeProps } from './progress-rope.types.js';
-
-const meta: Meta<typeof ProgressRope> = {
-  title: 'Components/ProgressRope',
-  component: ProgressRope,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {},
-  render: () => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const handleClick = useCallback(
-      (index: number) => () => {
-        setActiveIndex(index);
-      },
-      [],
-    );
-    const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
-      { text: <h3>Step 1</h3>, onClick: handleClick(0) },
-      { text: <h3>Step 2</h3>, onClick: handleClick(1) },
-      { text: <h3>Step 3</h3>, onClick: handleClick(2) },
-      { text: <h3>Step 4</h3>, onClick: handleClick(3) },
-      { text: <h3>Step 5</h3>, onClick: handleClick(4) },
-      { text: <h3>Review and Submit</h3>, onClick: handleClick(5) },
-    ];
-
-    return (
-      <div>
-        <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
-        <div>
-          <h3>Helper Controls</h3>
-          <h4>Current: {activeIndex}</h4>
-          <Button onClick={() => setActiveIndex(state => --state)}>prev</Button>{' '}
-          <Button onClick={() => setActiveIndex(state => ++state)}>next</Button>
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * > Grouping steps story usage example
- */
-export const GroupingSteps: Story = {
-  args: {},
-  render: () => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const handleClick = useCallback(
-      (index: number) => () => {
-        setActiveIndex(index);
-      },
-      [],
-    );
-    const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
-      {
-        type: 'group',
-        text: 'Group 1',
-        steps: [
-          { text: 'Step 1', onClick: handleClick(0) },
-          { text: 'Step 2', onClick: handleClick(1) },
-        ],
-      },
-      {
-        type: 'group',
-        text: 'Group 2',
-        steps: [
-          { text: 'Step 3', onClick: handleClick(2) },
-          { text: 'Step 4', onClick: handleClick(3) },
-        ],
-      },
-      {
-        type: 'group',
-        text: 'Group 3',
-        steps: [
-          { text: 'Step 5', onClick: handleClick(4) },
-          { text: 'Step 6', onClick: handleClick(5) },
-          { text: 'Step 7', onClick: handleClick(6) },
-        ],
-      },
-      { text: 'Review and Submit', onClick: handleClick(7) },
-    ];
-
-    return (
-      <div>
-        <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
-        <div>
-          <h3>Helper Controls</h3>
-          <h4>Current: {activeIndex}</h4>
-          <Button onClick={() => setActiveIndex(state => --state)}>prev</Button>{' '}
-          <Button onClick={() => setActiveIndex(state => ++state)}>next</Button>
-        </div>
-      </div>
-    );
-  },
-};

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

@@ -1,40 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Radio } from './radio.component.js';
-
-const meta: Meta<typeof Radio> = {
-  title: 'Components/RadioGroup/Radio',
-  component: Radio,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  argTypes: {
-    isDisabled: {
-      description: 'Controls whether individual radio options are disabled or not',
-      type: { name: 'boolean' },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Base radio, unchecked as that is handled by RadioGroup
- */
-export const Default: Story = {
-  args: { children: 'Option 1', value: 'Option 1' },
-};
-
-/**
- * > Radio with hint example
- */
-export const Hint: Story = {
-  args: { children: 'Option 1', value: 'Option 1', hint: 'Test hint' },
-};
-
-/**
- * > Disabled Radio example
- */
-export const Disabled: Story = {
-  args: { children: 'Option 1', value: 'Option 1', isDisabled: true },
-};

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

@@ -1,199 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { RadioGroup } from './radio-group.component.js';
-
-const meta: Meta<typeof RadioGroup> = {
-  title: 'Components/RadioGroup',
-  component: RadioGroup,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  args: {
-    label: <h2>Test</h2>,
-  },
-  argTypes: {
-    orientation: {
-      description:
-        "Controls orientation of `Radio` components, can't be applied directly on `Radio` \n\n `'horizontal'` `'vertical'`",
-      type: { name: 'enum', value: ['horizontal', 'vertical'] },
-    },
-    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.',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
-    ],
-  },
-};
-
-/**
- * > Default with long content
- */
-export const LongLines: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt
-        consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci
-        repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.
-      </RadioGroup.Radio>,
-    ],
-  },
-};
-
-/**
- * > RadioGroup with default value
- */
-export const DefaultValue: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
-    ],
-    defaultValue: 'Option 1',
-  },
-};
-
-/**
- * > RadioGroup with radios aligned horizontally
- */
-export const Inline: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
-    ],
-    orientation: 'horizontal',
-  },
-};
-
-/**
- * > RadioGroup with radios aligned horizontally with long content
- */
-export const InlineLongLines: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt
-        consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci
-        repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.
-      </RadioGroup.Radio>,
-    ],
-    orientation: 'horizontal',
-  },
-};
-
-/**
- * > RadioGroup that is disabled
- */
-export const Disabled: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
-    ],
-    isDisabled: true,
-  },
-};
-
-/**
- * > RadioGroup with large radios
- */
-export const Large: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
-    ],
-    size: 'large',
-  },
-};
-
-/**
- * > RadioGroup that has hidden radios that will be revealed on clicking on button
- */
-export const HiddenOptions: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
-    ],
-    showAmount: 1,
-  },
-};
-
-/**
- * > Example with hint text
- */
-export const HintText: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1" hint="This is a hint">
-        Option 1
-      </RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2" hint="This is a hint">
-        Option 2
-      </RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3" hint="This is a hint">
-        Option 3
-      </RadioGroup.Radio>,
-    ],
-  },
-};
-
-/**
- * > On change (check console log)
- */
-export const OnChange: Story = {
-  args: {
-    children: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
-    ],
-    onChange: e => console.log(e),
-  },
-};
-
-/**
- * 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: [
-      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
-      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
-    ],
-  },
-};

package/src/components/repeater/repeater.stories.tsx

@@ -1,40 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Form, Input } from '../index.js';
-
-import { Repeater } from './repeater.component.js';
-
-const meta: Meta<typeof Repeater> = {
-  title: 'Components/Repeater',
-  component: Repeater,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  args: {
-    children: (
-      <Form>
-        <Form.Group>
-          <Form.Label htmlFor={`test`}>Primary</Form.Label>
-          <Form.Hint>Primary title text</Form.Hint>
-          <Input name="test" onChange={e => console.log(e)} />
-        </Form.Group>
-      </Form>
-    ),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {},
-};
-
-/**
- * > Example using the separator prop
- */
-export const Separator: Story = {
-  args: { separator: true },
-};

package/src/components/select/select.stories.tsx

@@ -1,88 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Field } from '../field/index.js';
-
-import { Select } from './select.component.js';
-
-const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
-  component: Select,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <option value="option-1">option 1</option>
-        <option value="option-2">option 2</option>
-        <option value="option-3">option 3</option>
-        <option value="option-4">option 4</option>
-      </>
-    ),
-  },
-};
-
-/**
- * > Invalid usage example
- */
-export const Invalid: Story = {
-  args: {
-    invalid: true,
-    children: (
-      <>
-        <option value="option-1">option 1</option>
-        <option value="option-2">option 2</option>
-        <option value="option-3">option 3</option>
-        <option value="option-4">option 4</option>
-      </>
-    ),
-  },
-};
-
-/**
- * > Disabled usage example
- */
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    children: (
-      <>
-        <option value="option-1">option 1</option>
-        <option value="option-2">option 2</option>
-        <option value="option-3">option 3</option>
-        <option value="option-4">option 4</option>
-      </>
-    ),
-  },
-};
-
-/**
- * > Form field example
- */
-export const FormField: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Field
-        label="Are you an existing customer?"
-        hintMessage="Hint: choose from one of the following options"
-        errorMessage="This is an inline error message"
-      >
-        <Select invalid>
-          <option value="option-1">option 1</option>
-          <option value="option-2">option 2</option>
-          <option value="option-3">option 3</option>
-          <option value="option-4">option 4</option>
-        </Select>
-      </Field>
-    );
-  },
-};