@westpac/ui 0.7.1 → 0.9.0

package/src/components/switch/switch.stories.tsx

@@ -1,90 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Switch } from './switch.component.js';
-
-const meta: Meta<typeof Switch> = {
-  title: 'Components/Switch',
-  component: Switch,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    size: 'medium',
-    label: 'eStatements',
-  },
-};
-
-/**
- * > Selected switch example
- */
-export const Selected: Story = {
-  args: {
-    label: 'eStatements',
-    checked: true,
-  },
-};
-
-/**
- * > Switch size example
- */
-export const Sizes = () => (
-  <div>
-    {SIZES.map(size => (
-      <div key={size}>
-        <h3 className="font-bold">{size}</h3>
-        <div className="mb-2">
-          <Switch size={size} label="eStatements" />
-        </div>
-      </div>
-    ))}
-  </div>
-);
-
-/**
- * > Disabled switch example
- */
-export const Disabled: Story = {
-  args: {
-    label: 'eStatements',
-    isDisabled: true,
-  },
-};
-
-/**
- * > Block switch example
- */
-export const Block = () => (
-  <div>
-    <>
-      <div className="mb-2">
-        <Switch
-          block
-          label="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur corporis sint, facere sequi provident eius similique ab velit, beatae aut architecto porro quidem neque necessitatibus, quis nulla itaque labore harum, in nesciunt! Molestiae, voluptatum, voluptas. Quo pariatur, voluptate ducimus nemo?"
-        />
-      </div>
-      <div className="mb-2">
-        <Switch block label="eStatements" />
-      </div>
-    </>
-  </div>
-);
-
-/**
- * > Responsive switch example
- */
-export const ResponsiveSize: Story = {
-  args: {
-    label: 'eStatements',
-    size: { initial: 'small', md: 'large', lg: 'xlarge' },
-  },
-};

package/src/components/symbol/symbol.stories.tsx

@@ -1,131 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Symbol } from './symbol.component.js';
-import { type Align } from './symbol.types.js';
-
-import { SymbolProps, WBCLogo, WBCMultibrandSmallLogo } from './index.js';
-import * as symbols from './index.js';
-
-const meta: Meta<typeof Symbol> = {
-  title: 'Foundation/Symbols',
-  component: WBCLogo,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {},
-};
-
-export const Offset = () => (
-  <div>
-    <p>Left</p>
-    <WBCMultibrandSmallLogo className="border border-dashed" />
-    <br />
-    <br />
-    <p>Center</p>
-    <WBCMultibrandSmallLogo align="center" className="border border-dashed" />
-    <br />
-    <br />
-    <p>Right</p>
-    <WBCMultibrandSmallLogo align="right" className="border border-dashed" />
-  </div>
-);
-
-export const AllSymbols = () => {
-  const allSymbols = Object.entries(symbols).reduce(
-    (curr, [key, symbol]) => (key.includes('Symbol') ? { ...curr, [key]: symbol } : curr),
-    {} as { [index: string]: React.FC<SymbolProps> },
-  );
-
-  return (
-    <div className="grid grid-cols-4 gap-5">
-      {Object.entries(allSymbols).map(([key, Symbol]) => (
-        <div key={key} className=" flex flex-col items-center justify-end">
-          <Symbol />
-          <p className="mt-2">{key}</p>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export const AllLogos = () => {
-  const allLogos = Object.entries(symbols).reduce(
-    (curr, [key, symbol]) => (key.includes('Logo') ? { ...curr, [key]: symbol } : curr),
-    {} as { [index: string]: React.FC<SymbolProps> },
-  );
-
-  const logos = Object.entries(allLogos).reduce(
-    (curr, [key, symbol]) => (!key.includes('Multibrand') ? { ...curr, [key]: symbol } : curr),
-    {} as { [index: string]: React.FC<SymbolProps> },
-  );
-
-  const multibrandLargeLogos = Object.entries(allLogos).reduce(
-    (curr, [key, symbol]) => (key.includes('MultibrandLarge') ? { ...curr, [key]: symbol } : curr),
-    {} as { [index: string]: React.FC<SymbolProps> },
-  );
-
-  const multibrandSmallLogos = Object.entries(allLogos).reduce(
-    (curr, [key, symbol]) => (key.includes('MultibrandSmall') ? { ...curr, [key]: symbol } : curr),
-    {} as { [index: string]: React.FC<SymbolProps> },
-  );
-
-  const align: Align[] = ['left', 'center', 'right'];
-
-  return (
-    <>
-      <h3 className="typography-body-7 mb-4 font-bold">Logos</h3>
-      <div className="grid grid-cols-4 gap-5">
-        {Object.entries(logos).map(([key, Logo]) => (
-          <div key={key} className=" flex flex-col items-center justify-end">
-            <Logo />
-            <p className="mt-2">{`<${key} />`}</p>
-          </div>
-        ))}
-      </div>
-      <h3 className="typography-body-7 mb-2 mt-6 font-bold">Multi-brand logos</h3>
-      <h4 className="typography-body-8 mb-4 font-bold">Large</h4>
-      <div className="grid grid-cols-4 gap-5">
-        {Object.entries(multibrandLargeLogos).map(([key, Logo]) => (
-          <>
-            <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-              <Logo className="border border-dashed border-border" />
-              <p className="mt-2">{`<${key} />`}</p>
-            </div>
-            {align.map(align => (
-              <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-                <Logo align={align} className="border border-dashed border-border" />
-                <p className="mt-2">{`<${key} align=${align} />`}</p>
-              </div>
-            ))}
-          </>
-        ))}
-      </div>
-      <h4 className="typography-body-8 my-4 font-bold">Small</h4>
-      <div className="grid grid-cols-4 gap-5">
-        {Object.entries(multibrandSmallLogos).map(([key, Logo]) => (
-          <>
-            <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-              <Logo className="border border-dashed border-border" />
-              <p className="mt-2">{`<${key} />`}</p>
-            </div>
-            {align.map(align => (
-              <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-                <Logo align={align} className="border border-dashed border-border" />
-                <p className="mt-2">{`<${key} align=${align} />`}</p>
-              </div>
-            ))}
-          </>
-        ))}
-      </div>
-    </>
-  );
-};

package/src/components/table/table.stories.tsx

@@ -1,244 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Table } from './table.component.js';
-
-const meta: Meta<typeof Table> = {
-  title: 'Components/Table',
-  component: Table,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <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>
-      </>
-    ),
-  },
-};
-
-/**
- * > Striped example
- */
-export const Striped: Story = {
-  args: {
-    striped: true,
-    children: (
-      <>
-        <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>
-      </>
-    ),
-  },
-};
-
-/**
- * > Bordered example
- */
-export const Bordered: Story = {
-  args: {
-    bordered: true,
-    children: (
-      <>
-        <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>
-      </>
-    ),
-  },
-};
-
-/**
- * > Bordered & Striped example
- */
-export const BorderedAndStriped: Story = {
-  args: {
-    bordered: true,
-    striped: true,
-    children: (
-      <>
-        <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>
-      </>
-    ),
-  },
-};
-
-/**
- * > Example of table with highlighted rows or cells
- */
-export const HighlightedRowCell: Story = {
-  args: {
-    children: (
-      <>
-        <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 highlighted>
-            <Table.Cell>Games</Table.Cell>
-            <Table.Cell>File folder</Table.Cell>
-            <Table.Cell>6/7/2020</Table.Cell>
-          </Table.Row>
-          <Table.Row highlighted={[0, 2]}>
-            <Table.Cell>Program Files</Table.Cell>
-            <Table.Cell>File folder</Table.Cell>
-            <Table.Cell>4/7/2021</Table.Cell>
-          </Table.Row>
-          <Table.Row highlighted={[1, 2]}>
-            <Table.Cell>bootmgr</Table.Cell>
-            <Table.Cell>System file</Table.Cell>
-            <Table.Cell>11/20/2010</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell highlightStart highlighted>
-              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>
-      </>
-    ),
-  },
-};

package/src/components/tabs/tabs.stories.tsx

@@ -1,111 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Tabs } from './tabs.component.js';
-
-const meta: Meta<typeof Tabs> = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => {
-      /**
-       * NOTE:
-       * Needed to change displayName here so subcomponent shows correct name in code view
-       * Could not change it on the component as Item from react-stately is used in three components
-       * and one displayName would overwrite the others
-       */
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      Tabs.Panel.displayName = 'Tabs.Panel';
-
-      return <Story />;
-    },
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    look: 'default',
-    color: undefined,
-    orientation: 'horizontal',
-    'aria-label': 'History of Ancient Rome',
-    children: [
-      <Tabs.Panel key="FoR" title="Founding of Rome">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </Tabs.Panel>,
-      <Tabs.Panel key="MaR" title="Monarchy and Republic">
-        Senatus Populusque Romanus.
-      </Tabs.Panel>,
-      <Tabs.Panel key="Emp" title="Empire">
-        Alea jacta est.
-      </Tabs.Panel>,
-    ],
-  },
-};
-
-/**
- * > Default usage example
- */
-export const Justify: Story = {
-  args: {
-    justify: true,
-    children: [
-      <Tabs.Panel key="FoR" title="Founding of Rome">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </Tabs.Panel>,
-      <Tabs.Panel key="MaR" title="Monarchy and Republic">
-        Senatus Populusque Romanus.
-      </Tabs.Panel>,
-      <Tabs.Panel key="Emp" title="Empire">
-        Alea jacta est.
-      </Tabs.Panel>,
-    ],
-  },
-};
-
-/**
- * > Default usage example
- */
-export const Color: Story = {
-  args: {
-    justify: true,
-    color: 'hero',
-    children: [
-      <Tabs.Panel key="FoR" title="Founding of Rome">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </Tabs.Panel>,
-      <Tabs.Panel key="MaR" title="Monarchy and Republic">
-        Senatus Populusque Romanus.
-      </Tabs.Panel>,
-      <Tabs.Panel key="Emp" title="Empire">
-        Alea jacta est.
-      </Tabs.Panel>,
-    ],
-  },
-};
-
-/**
- * > Vertical story usage example
- */
-export const Vertical: Story = {
-  args: {
-    orientation: 'vertical',
-    children: [
-      <Tabs.Panel key="FoR" title="Founding of Rome">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </Tabs.Panel>,
-      <Tabs.Panel key="MaR" title="Monarchy and Republic">
-        Senatus Populusque Romanus.
-      </Tabs.Panel>,
-      <Tabs.Panel key="Emp" title="Empire">
-        Alea jacta est.
-      </Tabs.Panel>,
-    ],
-  },
-};

package/src/components/textarea/textarea.stories.tsx

@@ -1,70 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Field } from '../field/index.js';
-
-import { Textarea } from './textarea.component.js';
-
-const meta: Meta<typeof Textarea> = {
-  title: 'Components/Textarea',
-  component: Textarea,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    placeholder: 'placeholder',
-    size: 'medium',
-  },
-};
-
-/**
- * > Invalid usage example
- */
-export const Invalid: Story = {
-  args: {
-    invalid: true,
-  },
-};
-
-/**
- * > Disabled usage example
- */
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-/**
- * > ReadOnly usage example
- */
-export const ReadOnly: Story = {
-  args: {
-    readOnly: true,
-  },
-};
-
-/**
- * > 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"
-      >
-        <Textarea />
-      </Field>
-    );
-  },
-};

package/src/components/visually-hidden/visually-hidden.stories.tsx

@@ -1,25 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { VisuallyHidden } from './visually-hidden.component.js';
-
-const meta: Meta<typeof VisuallyHidden> = {
-  title: 'Components/VisuallyHidden',
-  component: VisuallyHidden,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- *
- * Note: The examples below the following headings are visibility hidden.
- * Best you inspect what is being rendered using your browser’s DevTools.
- */
-export const Default: Story = {
-  args: {
-    children: 'Only screen reader can read this',
-  },
-};