@westpac/ui 0.7.0 → 0.8.0

package/src/components/modal/modal.stories.tsx

@@ -1,140 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { Fragment, useMemo } from 'react';
-import { useOverlayTriggerState } from 'react-stately';
-
-import { Button } from '../index.js';
-
-import { Modal } from './modal.component.js';
-
-const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
-  component: Modal,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: `
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-    `,
-    title: 'Title',
-    isDismissable: true,
-  },
-  render: ({ children, ...props }) => {
-    const state = useOverlayTriggerState({});
-    return (
-      <>
-        <Modal {...props} state={state} aria-label="Modal title" body>
-          {children}
-        </Modal>
-        <Button onClick={state.open}>Open Modal</Button>
-      </>
-    );
-  },
-};
-
-/**
- * > WithFooter usage example
- */
-export const WithFooter: Story = {
-  args: {
-    children: `I'm children`,
-    title: 'Title',
-    isDismissable: true,
-  },
-  render: ({ children, ...props }) => {
-    const state = useOverlayTriggerState({});
-
-    return (
-      <>
-        <Modal {...props} state={state} aria-label="Modal title">
-          <Modal.Body>{children}</Modal.Body>
-          <Modal.Footer>
-            <p>Lorem, ipsum dolor</p>
-          </Modal.Footer>
-        </Modal>
-        <Button onClick={state.open}>Open Modal</Button>
-      </>
-    );
-  },
-};
-
-/**
- * > All sizes usage example
- */
-export const Sizes: Story = {
-  args: {
-    children: `I'm children`,
-    title: 'Title',
-    isDismissable: true,
-  },
-  render: ({ children, ...props }) => {
-    const stateSM = useOverlayTriggerState({});
-    const stateMD = useOverlayTriggerState({});
-    const stateLG = useOverlayTriggerState({});
-
-    const states = useMemo(() => {
-      return {
-        sm: stateSM,
-        md: stateMD,
-        lg: stateLG,
-      };
-    }, [stateSM, stateMD, stateLG]);
-
-    return (
-      <div className="flex gap-2">
-        {(['sm', 'md', 'lg'] as const).map(size => (
-          <Fragment key={size}>
-            <Modal {...props} size={size} state={states[size]} title={`Modal ${size}`}>
-              <Modal.Body>{children}</Modal.Body>
-              <Modal.Footer>
-                <p>Lorem, ipsum dolor</p>
-              </Modal.Footer>
-            </Modal>
-            <Button onClick={states[size].open}>Open Modal {size}</Button>
-          </Fragment>
-        ))}
-      </div>
-    );
-  },
-};
-
-/**
- * > Not dismissable example
- */
-export const NotDismissible: Story = {
-  args: {
-    children: `I'm children`,
-    title: 'Title',
-    isDismissable: false,
-  },
-  render: ({ children, ...props }) => {
-    const state = useOverlayTriggerState({});
-
-    return (
-      <>
-        <Modal {...props} state={state} aria-label="Modal title">
-          <Modal.Body>{children}</Modal.Body>
-          <Modal.Footer className="flex justify-end gap-2">
-            <Button look="faint" onClick={state.close}>
-              Close
-            </Button>
-            <Button look="primary">Submit</Button>
-          </Modal.Footer>
-        </Modal>
-        <Button onClick={state.open}>Open Modal</Button>
-      </>
-    );
-  },
-};

package/src/components/pagination/pagination.stories.tsx

@@ -1,174 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { useEffect, useState } from 'react';
-
-import { ArrowLeftIcon, ArrowRightIcon } from '../icon/index.js';
-import { Button, PaginationProps } from '../index.js';
-
-import { Pagination } from './pagination.component.js';
-import { usePagination } from './pagination.hooks.js';
-
-const meta: Meta<typeof Pagination> = {
-  title: 'Components/Pagination',
-  component: Pagination,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-
-/**
- * > Button usage example
- */
-export const Default: unknown = {
-  args: {
-    current: 1,
-    onChange: action('onChange'),
-    pages: [
-      {
-        text: '1',
-      },
-      {
-        text: '2',
-      },
-      {
-        text: '3',
-      },
-    ],
-  },
-  render: (props: PaginationProps) => {
-    const [current, setCurrent] = useState(props.current);
-    useEffect(() => {
-      setCurrent(props.current);
-    }, [props.current]);
-
-    return (
-      <Pagination
-        {...props}
-        onChange={value => {
-          setCurrent(value);
-          props.onChange?.(value);
-        }}
-        current={current}
-      />
-    );
-  },
-};
-
-/**
- * > Link usage example
- */
-export const AsLink: unknown = {
-  args: {
-    current: 1,
-    onChange: undefined,
-    pages: [
-      {
-        text: '1',
-        href: '#page-1',
-      },
-      {
-        text: '2',
-        href: '#page-2',
-      },
-      {
-        text: '3',
-        href: '#page-3',
-      },
-    ],
-  },
-};
-
-/**
- * > Using useState as example
- */
-export const State = () => {
-  const [page, setPage] = useState(1);
-
-  return (
-    <Pagination
-      current={page}
-      onChange={changedPage => {
-        setPage(changedPage);
-      }}
-      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
-    />
-  );
-};
-
-/**
- * > Using useState as example
- */
-export const InfiniteState = () => {
-  const [page, setPage] = useState(1);
-
-  return (
-    <Pagination
-      current={page}
-      infinite
-      onChange={changedPage => {
-        setPage(changedPage);
-      }}
-      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
-    />
-  );
-};
-
-/**
- * > Using custom back and next label
- */
-export const CustomBackAndNextLabel = () => {
-  const [page, setPage] = useState(1);
-
-  return (
-    <Pagination
-      current={page}
-      backLabel="Custom back"
-      nextLabel="Custom next"
-      onChange={changedPage => {
-        setPage(changedPage);
-      }}
-      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
-    />
-  );
-};
-
-/**
- * > Using use pagination hook
- */
-export const UsePagination = () => {
-  const { pages, currentPage, setCurrentPage } = usePagination({
-    pages: [{ text: '1' }, { text: '2' }, { text: '3' }],
-  });
-
-  return (
-    <Pagination
-      current={currentPage}
-      backLabel="Custom back"
-      nextLabel="Custom next"
-      infinite
-      onChange={changedPage => {
-        setCurrentPage(changedPage);
-      }}
-      pages={pages}
-    />
-  );
-};
-
-/**
- * > Using use pagination hook with other components
- */
-export const UsePaginationDifferentComponents = () => {
-  const { next, previous, selectedPage } = usePagination({
-    pages: [{ text: 'Page 1' }, { text: 'Page 2' }, { text: 'Page 3' }],
-    infinite: true,
-  });
-
-  return (
-    <div className="flex items-center">
-      <Button look="link" iconAfter={ArrowLeftIcon} onClick={previous} />
-      <h4>{selectedPage.text}</h4>
-      <Button look="link" iconAfter={ArrowRightIcon} onClick={next} />
-    </div>
-  );
-};

package/src/components/panel/panel.stories.tsx

@@ -1,147 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Table } from '../table/index.js';
-
-import { Panel } from './panel.component.js';
-
-const meta: Meta<typeof Panel> = {
-  title: 'Components/Panel',
-  component: Panel,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  args: {
-    heading: 'Panel title',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: [
-      <Panel.Body>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
-        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
-        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-      </Panel.Body>,
-      <Panel.Footer>Panel footer</Panel.Footer>,
-    ],
-  },
-};
-
-/**
- * > Faint look example
- */
-export const FaintLook: Story = {
-  args: {
-    look: 'faint',
-    children: [
-      <Panel.Body>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
-        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
-        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-      </Panel.Body>,
-      <Panel.Footer>Panel footer</Panel.Footer>,
-    ],
-  },
-};
-
-/**
- * > Example using a table
- */
-export const WithTable: Story = {
-  args: {
-    children: [
-      <Table>
-        <Table.Caption>
-          Caption this table width is: <em>(100%)</em>
-        </Table.Caption>
-        <Table.Header>
-          <Table.HeaderRow>
-            <Table.HeaderCell>Name</Table.HeaderCell>
-            <Table.HeaderCell>Type</Table.HeaderCell>
-            <Table.HeaderCell>Date Modified</Table.HeaderCell>
-          </Table.HeaderRow>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Games</Table.Cell>
-            <Table.Cell>File folder</Table.Cell>
-            <Table.Cell>6/7/2020</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Program Files</Table.Cell>
-            <Table.Cell>File folder</Table.Cell>
-            <Table.Cell>4/7/2021</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>bootmgr</Table.Cell>
-            <Table.Cell>System file</Table.Cell>
-            <Table.Cell>11/20/2010</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>log.txt</Table.Cell>
-            <Table.Cell>Text Document</Table.Cell>
-            <Table.Cell>1/18/2016</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
-      </Table>,
-    ],
-  },
-};
-
-/**
- * > Example using a table with a body and a panel footer
- */
-export const WithTableAndBody: Story = {
-  args: {
-    children: [
-      <Panel.Body>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
-        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
-        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-      </Panel.Body>,
-      <Table>
-        <Table.Caption>
-          Caption this table width is: <em>(100%)</em>
-        </Table.Caption>
-        <Table.Header>
-          <Table.HeaderRow>
-            <Table.HeaderCell>Name</Table.HeaderCell>
-            <Table.HeaderCell>Type</Table.HeaderCell>
-            <Table.HeaderCell>Date Modified</Table.HeaderCell>
-          </Table.HeaderRow>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Games</Table.Cell>
-            <Table.Cell>File folder</Table.Cell>
-            <Table.Cell>6/7/2020</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Program Files</Table.Cell>
-            <Table.Cell>File folder</Table.Cell>
-            <Table.Cell>4/7/2021</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>bootmgr</Table.Cell>
-            <Table.Cell>System file</Table.Cell>
-            <Table.Cell>11/20/2010</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>log.txt</Table.Cell>
-            <Table.Cell>Text Document</Table.Cell>
-            <Table.Cell>1/18/2016</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
-      </Table>,
-      <Panel.Footer>Panel footer</Panel.Footer>,
-    ],
-  },
-};

package/src/components/pictogram/pictogram.stories.tsx

@@ -1,50 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { clsx } from 'clsx';
-
-import { Pictogram } from './pictogram.component.js';
-
-import * as AllPictograms from './index.js';
-import { PictogramProps, WBCBankCardPictogram } from './index.js';
-
-const AllPictogramsExample = (props: PictogramProps) => {
-  const { mode } = props;
-  const informativePictograms = Object.entries(AllPictograms).reduce(
-    (curr, [key, symbol]) => (!key.startsWith('WBC') ? { ...curr, [key]: symbol } : curr),
-    {} as { [index: string]: React.FC<PictogramProps> },
-  );
-  return (
-    <div className={clsx('grid grid-cols-5 gap-5', mode === 'light' && 'bg-hero text-white')}>
-      {Object.entries(informativePictograms).map(([key, Pictogram]) => (
-        <div key={key} className="flex flex-col items-center justify-end">
-          <Pictogram {...props} />
-          <p className="mt-2">{key}</p>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const meta: Meta<typeof Pictogram> = {
-  title: 'Foundation/Pictograms',
-  component: AllPictogramsExample,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  argTypes: {
-    mode: {
-      description: 'mode',
-      type: { name: 'enum', value: ['duo', 'dark', 'light'] },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {},
-};
-
-export const Decorative = () => <WBCBankCardPictogram />;

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>
-    </>
-  );
-};