@westpac/ui 0.7.0 → 0.8.0

package/dist/components/autocomplete/autocomplete.stories.js

@@ -1,219 +0,0 @@
-import { useState } from 'react';
-import { Autocomplete } from './autocomplete.component.js';
-const meta = {
-    title: 'Components/Autocomplete',
-    component: Autocomplete,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>{
-            Autocomplete.Item.displayName = 'Autocomplete.Item';
-            return React.createElement("div", {
-                className: "h-30"
-            }, React.createElement(Story, null));
-        }
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        'aria-label': 'Animals',
-        children: [
-            React.createElement(Autocomplete.Item, {
-                key: "red panda"
-            }, "Red Panda"),
-            React.createElement(Autocomplete.Item, {
-                key: "cat"
-            }, "Cat"),
-            React.createElement(Autocomplete.Item, {
-                key: "dog"
-            }, "Dog"),
-            React.createElement(Autocomplete.Item, {
-                key: "aardvark"
-            }, "Aardvark"),
-            React.createElement(Autocomplete.Item, {
-                key: "kangaroo"
-            }, "Kangaroo"),
-            React.createElement(Autocomplete.Item, {
-                key: "snake"
-            }, "Snake")
-        ]
-    }
-};
-export const Controlled = {
-    args: {},
-    render: ()=>{
-        const [selectedKey, setSelectedKey] = useState();
-        const handleSelectionChange = (key)=>{
-            setSelectedKey(key);
-        };
-        return React.createElement(Autocomplete, {
-            onSelectionChange: handleSelectionChange,
-            selectedKey: selectedKey,
-            "aria-label": "Animals"
-        }, React.createElement(Autocomplete.Item, {
-            key: "red panda"
-        }, "Red Panda"), React.createElement(Autocomplete.Item, {
-            key: "cat"
-        }, "Cat"), React.createElement(Autocomplete.Item, {
-            key: "dog"
-        }, "Dog"), React.createElement(Autocomplete.Item, {
-            key: "aardvark"
-        }, "Aardvark"), React.createElement(Autocomplete.Item, {
-            key: "kangaroo"
-        }, "Kangaroo"), React.createElement(Autocomplete.Item, {
-            key: "snake"
-        }, "Snake"));
-    }
-};
-export const Disabled = {
-    args: {
-        isDisabled: true,
-        'aria-label': 'Disable example',
-        children: [
-            React.createElement(Autocomplete.Item, {
-                key: "red panda"
-            }, "Red Panda"),
-            React.createElement(Autocomplete.Item, {
-                key: "cat"
-            }, "Cat"),
-            React.createElement(Autocomplete.Item, {
-                key: "dog"
-            }, "Dog"),
-            React.createElement(Autocomplete.Item, {
-                key: "aardvark"
-            }, "Aardvark"),
-            React.createElement(Autocomplete.Item, {
-                key: "kangaroo"
-            }, "Kangaroo"),
-            React.createElement(Autocomplete.Item, {
-                key: "snake"
-            }, "Snake")
-        ]
-    }
-};
-export const Invalid = {
-    args: {
-        invalid: true,
-        'aria-label': 'Invalid example',
-        children: [
-            React.createElement(Autocomplete.Item, {
-                key: "red panda"
-            }, "Red Panda"),
-            React.createElement(Autocomplete.Item, {
-                key: "cat"
-            }, "Cat"),
-            React.createElement(Autocomplete.Item, {
-                key: "dog"
-            }, "Dog"),
-            React.createElement(Autocomplete.Item, {
-                key: "aardvark"
-            }, "Aardvark"),
-            React.createElement(Autocomplete.Item, {
-                key: "kangaroo"
-            }, "Kangaroo"),
-            React.createElement(Autocomplete.Item, {
-                key: "snake"
-            }, "Snake")
-        ]
-    }
-};
-export const Sizes = {
-    args: {},
-    render: ()=>{
-        return React.createElement(React.Fragment, null, [
-            'small',
-            'medium',
-            'large',
-            'xlarge'
-        ].map((size)=>React.createElement("div", {
-                className: "py-2",
-                key: size
-            }, React.createElement(Autocomplete, {
-                label: size,
-                size: size,
-                "aria-label": `size ${size}`
-            }, React.createElement(Autocomplete.Item, {
-                key: "red panda"
-            }, "Red Panda"), React.createElement(Autocomplete.Item, {
-                key: "cat"
-            }, "Cat"), React.createElement(Autocomplete.Item, {
-                key: "dog"
-            }, "Dog"), React.createElement(Autocomplete.Item, {
-                key: "aardvark"
-            }, "Aardvark"), React.createElement(Autocomplete.Item, {
-                key: "kangaroo"
-            }, "Kangaroo"), React.createElement(Autocomplete.Item, {
-                key: "snake"
-            }, "Snake")))));
-    }
-};
-export const Footer = {
-    args: {},
-    render: ()=>{
-        return React.createElement("div", {
-            className: "py-2"
-        }, React.createElement(Autocomplete, {
-            label: "With footer",
-            footer: React.createElement("h3", null, "Footer")
-        }, React.createElement(Autocomplete.Item, {
-            key: "red panda"
-        }, "Red Panda"), React.createElement(Autocomplete.Item, {
-            key: "cat"
-        }, "Cat"), React.createElement(Autocomplete.Item, {
-            key: "dog"
-        }, "Dog"), React.createElement(Autocomplete.Item, {
-            key: "aardvark"
-        }, "Aardvark"), React.createElement(Autocomplete.Item, {
-            key: "kangaroo"
-        }, "Kangaroo"), React.createElement(Autocomplete.Item, {
-            key: "snake"
-        }, "Snake"), React.createElement(Autocomplete.Item, {
-            key: "elephant"
-        }, "Elephant"), React.createElement(Autocomplete.Item, {
-            key: "giraffe"
-        }, "Giraffe"), React.createElement(Autocomplete.Item, {
-            key: "lion"
-        }, "Lion"), React.createElement(Autocomplete.Item, {
-            key: "tiger"
-        }, "Tiger"), React.createElement(Autocomplete.Item, {
-            key: "penguin"
-        }, "Penguin"), React.createElement(Autocomplete.Item, {
-            key: "octopus"
-        }, "Octopus"), React.createElement(Autocomplete.Item, {
-            key: "cheetah"
-        }, "Cheetah"), React.createElement(Autocomplete.Item, {
-            key: "polar bear"
-        }, "Polar Bear"), React.createElement(Autocomplete.Item, {
-            key: "koala"
-        }, "Koala"), React.createElement(Autocomplete.Item, {
-            key: "dolphin"
-        }, "Dolphin"), React.createElement(Autocomplete.Item, {
-            key: "flamingo"
-        }, "Flamingo"), React.createElement(Autocomplete.Item, {
-            key: "elephant seal"
-        }, "Elephant Seal"), React.createElement(Autocomplete.Item, {
-            key: "orca"
-        }, "Orca")));
-    }
-};
-export const ErrorMessageAndLabel = {
-    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: [
-            React.createElement(Autocomplete.Item, {
-                key: "Option 1"
-            }, "Option 1"),
-            React.createElement(Autocomplete.Item, {
-                key: "Option 2"
-            }, "Option 2"),
-            React.createElement(Autocomplete.Item, {
-                key: "Option 3"
-            }, "Option 3")
-        ]
-    }
-};

package/dist/components/badge/badge.stories.js

@@ -1,118 +0,0 @@
-import { Button } from '../index.js';
-import { Badge } from './badge.component.js';
-const COLORS = [
-    'danger',
-    'faint',
-    'hero',
-    'info',
-    'neutral',
-    'primary',
-    'success',
-    'warning'
-];
-const INVERTED_COLORS = [
-    'danger-inverted',
-    'faint-inverted',
-    'hero-inverted',
-    'info-inverted',
-    'neutral-inverted',
-    'primary-inverted',
-    'success-inverted',
-    'warning-inverted'
-];
-const meta = {
-    title: 'Components/Badge',
-    component: Badge,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex p-2"
-            }, React.createElement(Story, null))
-    ],
-    argTypes: {
-        children: {
-            description: 'Children',
-            type: {
-                name: 'string'
-            }
-        },
-        color: {
-            description: 'Color',
-            type: {
-                name: 'enum',
-                value: [
-                    ...COLORS,
-                    ...INVERTED_COLORS
-                ]
-            }
-        },
-        type: {
-            description: 'Type',
-            type: {
-                name: 'enum',
-                value: [
-                    'pill',
-                    'default'
-                ]
-            }
-        }
-    }
-};
-export default meta;
-export const Default = {
-    args: {
-        children: 'test',
-        type: 'default'
-    }
-};
-export const Pill = {
-    args: {
-        children: 'test',
-        type: 'pill'
-    }
-};
-export const Colors = ()=>React.createElement("div", {
-        className: "flex flex-col gap-2"
-    }, React.createElement("div", {
-        className: "flex gap-2"
-    }, COLORS.map((color)=>React.createElement(Badge, {
-            color: color
-        }, color))), React.createElement("div", {
-        className: "flex gap-2"
-    }, COLORS.map((color)=>React.createElement(Badge, {
-            color: color,
-            type: "pill"
-        }, color))), React.createElement("h3", {
-        className: "typography-body-9 font-bold"
-    }, "Inverted"), React.createElement("div", {
-        className: "flex flex-col gap-2 bg-muted p-2"
-    }, React.createElement("div", {
-        className: "flex flex-wrap gap-2"
-    }, INVERTED_COLORS.map((color)=>React.createElement(Badge, {
-            color: color
-        }, color))), React.createElement("div", {
-        className: "flex flex-wrap gap-2"
-    }, INVERTED_COLORS.map((color)=>React.createElement(Badge, {
-            color: color,
-            type: "pill"
-        }, color)))));
-export const Links = ()=>React.createElement("div", {
-        className: "flex flex-col gap-2"
-    }, COLORS.map((color)=>React.createElement("a", {
-            className: "text-link underline",
-            href: "#"
-        }, color, React.createElement(Badge, {
-            color: color,
-            type: "pill"
-        }, "12"))));
-export const Buttons = ()=>React.createElement("div", {
-        className: "flex flex-col gap-2"
-    }, INVERTED_COLORS.map((color)=>React.createElement(Button, {
-            look: "primary"
-        }, "Primary", React.createElement(Badge, {
-            color: color,
-            type: "pill",
-            className: "ml-1"
-        }, color))));

package/dist/components/breadcrumb/breadcrumb.stories.js

@@ -1,30 +0,0 @@
-import { Breadcrumb } from './breadcrumb.component.js';
-const meta = {
-    title: 'Components/Breadcrumb',
-    component: Breadcrumb,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        children: [
-            React.createElement(Breadcrumb.Item, {
-                tag: "button",
-                onClick: ()=>alert('Folder 1')
-            }, "About us"),
-            React.createElement(Breadcrumb.Item, {
-                tag: "a",
-                href: "#nogo"
-            }, "Innovation"),
-            React.createElement(Breadcrumb.Item, {
-                tag: "a",
-                href: "#loko"
-            }, "Principal investments")
-        ]
-    }
-};

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.stories.js

@@ -1,24 +0,0 @@
-import { BreadcrumbItem } from './breadcrumb-item.component.js';
-const meta = {
-    title: 'Components/Breadcrumb/BreadCrumbItem',
-    component: BreadcrumbItem,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        isDisabled: false,
-        children: 'Strategic partnerships'
-    }
-};
-export const IsDisabled = {
-    args: {
-        isDisabled: true,
-        children: 'Open Banking'
-    }
-};

package/dist/components/button/button.stories.js

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