@westpac/ui 0.7.1 → 0.8.0

package/src/components/input-field/input-field.sizes.stories.tsx

@@ -1,102 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { VisibilityIcon } from '../icon/index.js';
-import { Button, Input, Select } from '../index.js';
-
-import { InputField } from './input-field.component.js';
-
-const meta: Meta<typeof InputField> = {
-  title: 'Components/InputField/Sizes',
-  component: InputField,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Input field with different sizes
- */
-export const InputFieldWithDifferentSizes: Story = {
-  args: {},
-  render: () => {
-    return (
-      <>
-        {(['small', 'medium', 'large', 'xlarge'] as const).map(size => (
-          <div key={size} className="border-b border-b-border py-3">
-            <h3 className="typography-body-7 mb-4 font-bold">Size: {size}</h3>
-            <InputField
-              size={size}
-              label="Text"
-              hint="I am a hint"
-              supportingText="I am supporting text"
-              before="$AUD"
-              after="Text"
-            >
-              <Input />
-            </InputField>
-
-            <InputField
-              size={size}
-              label="Icon"
-              hint="I am a hint"
-              supportingText="I am supporting text"
-              before={{ icon: VisibilityIcon, inset: true }}
-              after={{ icon: VisibilityIcon, inset: true }}
-            >
-              <Input />
-            </InputField>
-
-            <InputField
-              size={size}
-              label="Icon Button"
-              hint="I am a hint"
-              supportingText="I am supporting text"
-              before={{
-                element: <Button size={size} look="link" iconAfter={VisibilityIcon} iconColor="pop" />,
-                inset: true,
-              }}
-              after={{
-                element: <Button size={size} look="link" iconAfter={VisibilityIcon} iconColor="pop" />,
-                inset: true,
-              }}
-            >
-              <Input />
-            </InputField>
-
-            <InputField
-              size={size}
-              label="Button"
-              hint="I am a hint"
-              supportingText="I am supporting text"
-              before={<Button>Check</Button>}
-              after={<Button>Check</Button>}
-            >
-              <Input />
-            </InputField>
-
-            <InputField
-              size={size}
-              label="Select"
-              hint="I am a hint"
-              supportingText="I am supporting text"
-              before={
-                <Select>
-                  <option value="Select">Select</option>
-                </Select>
-              }
-              after={
-                <Select>
-                  <option value="Select">Select</option>
-                </Select>
-              }
-            >
-              <Input />
-            </InputField>
-          </div>
-        ))}
-      </>
-    );
-  },
-};

package/src/components/input-field/input-field.state.stories.tsx

@@ -1,148 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { SearchIcon } from '../icon/index.js';
-import { Button, Input, Select } from '../index.js';
-
-import { InputField } from './input-field.component.js';
-
-const meta: Meta<typeof InputField> = {
-  title: 'Components/InputField/State',
-  component: InputField,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Invalid with error message/s
- */
-export const InvalidWithErrorMessages: Story = {
-  args: {},
-  render: () => {
-    return (
-      <>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          errorMessage="If there is an error it can go here"
-          after={<Button>Check</Button>}
-        >
-          <Input invalid />
-        </InputField>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          errorMessage={['If there is an error it can go here', 'If there is another error it can go here']}
-          after={<Button>Check</Button>}
-          before={<Button>Check</Button>}
-        >
-          <Input invalid />
-        </InputField>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          errorMessage="If there is an error it can go here"
-          after={{ icon: SearchIcon }}
-          before={{ icon: SearchIcon }}
-        >
-          <Input invalid />
-        </InputField>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          errorMessage="If there is an error it can go here"
-          after="Text"
-          before="Text"
-        >
-          <Input invalid />
-        </InputField>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          errorMessage="If there is an error it can go here"
-          after={
-            <Select invalid>
-              <option>Select</option>
-            </Select>
-          }
-          before={
-            <Select invalid>
-              <option>Select</option>
-            </Select>
-          }
-        >
-          <Input invalid />
-        </InputField>
-      </>
-    );
-  },
-};
-
-/**
- * > Input field with disabled state
- */
-export const InputFieldWithDisabledState: Story = {
-  args: {},
-  render: () => {
-    return (
-      <>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={{ icon: SearchIcon }}
-          before={{ icon: SearchIcon }}
-        >
-          <Input disabled />
-        </InputField>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          before="$AUD"
-          after="Text"
-        >
-          <Input disabled />
-        </InputField>
-      </>
-    );
-  },
-};
-
-/**
- * > Input field with read-only state
- */
-export const InputFieldWithReadOnlyState: Story = {
-  args: {},
-  render: () => {
-    return (
-      <>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={{ icon: SearchIcon }}
-          before={{ icon: SearchIcon }}
-        >
-          <Input readOnly />
-        </InputField>
-        <InputField
-          label="Text after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          before="$AUD"
-          after="Text"
-        >
-          <Input readOnly />
-        </InputField>
-      </>
-    );
-  },
-};

package/src/components/input-field/input-field.stories.tsx

@@ -1,104 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Button, Input } from '../index.js';
-
-import { InputField } from './input-field.component.js';
-
-const meta: Meta<typeof InputField> = {
-  title: 'Components/InputField',
-  component: InputField,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField label="Label" hint="I am a hint" supportingText="I am supporting text" after={<Button>Check</Button>}>
-        <Input />
-      </InputField>
-    );
-  },
-};
-
-/**
- * > Another usage example
- */
-export const AnotherDefault: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField label="Label" hint="I am a hint" supportingText="I am supporting text">
-        <Input />
-      </InputField>
-    );
-  },
-};
-
-/**
- * > SrOnlyLabel usage example
- */
-export const SrOnlyLabel: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField
-        label="Label"
-        hideLabel
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        after={<Button>Check</Button>}
-      >
-        <Input />
-      </InputField>
-    );
-  },
-};
-
-/**
- * > Combination usage example
- */
-export const Combination: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField
-        label="Label"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        after={<Button>Check</Button>}
-        before="$AUD"
-      >
-        <Input />
-      </InputField>
-    );
-  },
-};
-
-/**
- * > Fieldset as tag
- */
-export const WithFieldset: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField
-        tag="fieldset"
-        label="Label"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        after={<Button>Check</Button>}
-        before="$AUD"
-      >
-        <Input />
-      </InputField>
-    );
-  },
-};

package/src/components/input-field/input-field.type.stories.tsx

@@ -1,236 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { SearchIcon, VisibilityIcon } from '../icon/index.js';
-import { Button, Input, Select, Textarea } from '../index.js';
-
-import { InputField } from './input-field.component.js';
-
-const meta: Meta<typeof InputField> = {
-  title: 'Components/InputField/Types',
-  component: InputField,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Text Beforoe story example
- */
-export const TextBeforeStory: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField label="Text before" hint="I am a hint" supportingText="I am supporting text" before="$AUD">
-        <Input />
-      </InputField>
-    );
-  },
-};
-
-/**
- * > Text Beforoe story example
- */
-export const TextAfter: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField label="Text after" hint="I am a hint" supportingText="I am supporting text" after="Text">
-        <Input />
-      </InputField>
-    );
-  },
-};
-
-/**
- * > Text After and Beforoe story example
- */
-export const TextAfterAndBefore: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField
-        label="Text after"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        before="$AUD"
-        after="Text"
-      >
-        <Input />
-      </InputField>
-    );
-  },
-};
-
-/**
- * > Textarea
- */
-export const IconAddOn: Story = {
-  args: {},
-  render: () => {
-    return (
-      <>
-        <InputField
-          label="Icon before"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          before={{ icon: SearchIcon }}
-        >
-          <Input />
-        </InputField>
-        <InputField
-          label="Icon after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={{ icon: SearchIcon }}
-        >
-          <Input />
-        </InputField>
-        <InputField
-          label="Icon after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={{ icon: SearchIcon }}
-          before={{ icon: SearchIcon }}
-        >
-          <Input />
-        </InputField>
-      </>
-    );
-  },
-};
-
-/**
- * > Icons in buttons
- */
-export const IconInButtonsOn: Story = {
-  args: {},
-  render: () => {
-    return (
-      <>
-        <InputField
-          label="Icon button before"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          before={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
-        >
-          <Input />
-        </InputField>
-        <InputField
-          label="Icon button after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
-        >
-          <Input />
-        </InputField>
-        <InputField
-          label="Icon button before and after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
-          before={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
-        >
-          <Input />
-        </InputField>
-      </>
-    );
-  },
-};
-
-/**
- * > Button add ons
- */
-export const ButtonAddOn: Story = {
-  args: {},
-  render: () => {
-    return (
-      <>
-        <InputField
-          label="Button before"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          before={<Button>Check</Button>}
-        >
-          <Input />
-        </InputField>
-        <InputField
-          label="Button after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={<Button>Check</Button>}
-        >
-          <Input />
-        </InputField>
-        <InputField
-          label="Button before and after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={<Button>Check</Button>}
-          before={<Button>Check</Button>}
-        >
-          <Input />
-        </InputField>
-        <InputField
-          label="Primary button after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={<Button look="primary">Check</Button>}
-        >
-          <Input />
-        </InputField>
-        <InputField
-          label="Faint button after"
-          hint="I am a hint"
-          supportingText="I am supporting text"
-          after={<Button look="faint">Check</Button>}
-        >
-          <Input />
-        </InputField>
-      </>
-    );
-  },
-};
-
-/**
- * > Select add ons
- */
-export const SelectAddOn: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField
-        label="Select"
-        hint="I am a hint"
-        supportingText="I am supporting text"
-        before={
-          <Select>
-            <option>Select</option>
-          </Select>
-        }
-        after={
-          <Select>
-            <option>Select</option>
-          </Select>
-        }
-      >
-        <Input />
-      </InputField>
-    );
-  },
-};
-
-/**
- * > Textarea
- */
-export const TextArea: Story = {
-  args: {},
-  render: () => {
-    return (
-      <InputField label="Text after" hint="I am a hint" supportingText="I am supporting text">
-        <Textarea />
-      </InputField>
-    );
-  },
-};

package/src/components/link/link.stories.tsx

@@ -1,113 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
-
-import { Link } from './link.component.js';
-
-const meta: Meta<typeof Link> = {
-  title: 'Components/Link',
-  component: Link,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: "Look, I'm a default link",
-    href: '#',
-  },
-};
-
-const SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
-
-/**
- * > Standalone link with iconSizes, arrowRight is default but can be overridden.
- * > If no icon is passed it defaults to ArrowRightIcon in the iconBefore position
- */
-export const Standalone = () => (
-  <div className="space-y-1">
-    <h1 className="font-bold">Default</h1>
-    <Link href="#">Look I'm a standalone link</Link>
-    <h1 className="font-bold">Icon Before override</h1>
-    <Link href="#" iconBefore={PdfFileIcon}>
-      Look I'm a standalone link
-    </Link>
-    <h1 className="font-bold">Icon Before override</h1>
-    <Link href="#" iconAfter={ArrowRightIcon}>
-      Look I'm a standalone link
-    </Link>
-  </div>
-);
-
-/**
- * > Inline link example
- */
-export const Inline = () => (
-  <div className="space-y-1">
-    <p className="typography-body-10">
-      Lorem ipsum dolor{' '}
-      <Link href="#" type="inline">
-        look, I'm an inline link
-      </Link>{' '}
-      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-    </p>
-    <p className="typography-body-10">
-      Lorem ipsum dolor{' '}
-      <Link href="#" type="inline" underline={false}>
-        look, I'm an inline link with no underline
-      </Link>{' '}
-      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-    </p>
-    <p className="typography-body-10">
-      Lorem ipsum dolor{' '}
-      <Link href="#" type="inline" iconBefore={PdfFileIcon}>
-        look, I'm an inline link
-      </Link>{' '}
-      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-    </p>
-    <p className="typography-body-10">
-      Lorem ipsum dolor{' '}
-      <Link href="#" type="inline" iconAfter={PdfFileIcon}>
-        look, I'm an inline link
-      </Link>{' '}
-      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-    </p>
-    <Link href="#" type="inline" iconBefore={PdfFileIcon}>
-      look, I'm an inline link
-    </Link>
-  </div>
-);
-
-/**
- * > example of icon sizes
- */
-export const IconSizes = () => (
-  <div className="space-y-1">
-    {SIZES.map(size => (
-      <div key={size}>
-        <h1 className="font-bold">{size}</h1>
-        <Link href="#" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>
-          Look I'm a standalone link
-        </Link>
-        <p className="typography-body-10">
-          Lorem ipsum dolor{' '}
-          <Link href="#" type="inline" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>
-            look, I'm an inline link
-          </Link>{' '}
-          sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
-          doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
-        </p>
-      </div>
-    ))}
-  </div>
-);