@westpac/ui 0.7.0 → 0.8.0

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

@@ -1,134 +0,0 @@
-import { AndroidIcon } from '../icon/index.js';
-import { ButtonDropdown } from './button-dropdown.component.js';
-const meta = {
-    title: 'Components/ButtonDropdown',
-    component: ButtonDropdown,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-const LOOKS = [
-    'primary',
-    'hero',
-    'faint'
-];
-const SIZES = [
-    'small',
-    'medium',
-    'large',
-    'xlarge'
-];
-const DROPDOWNSIZE = [
-    'small',
-    'medium',
-    'large'
-];
-export const Default = {
-    args: {
-        text: 'Default Dropdown',
-        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
-            href: "#",
-            className: "text-[blue] underline"
-        }, "content"), "...")
-    }
-};
-export const StandardLooks = ()=>React.createElement("div", {
-        className: "flex gap-2"
-    }, LOOKS.map((look)=>React.createElement(ButtonDropdown, {
-            look: look,
-            text: look
-        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
-            href: "#",
-            className: "text-[blue] underline"
-        }, "content"), "..."))));
-export const SoftLooks = ()=>React.createElement("div", {
-        className: "flex gap-2"
-    }, LOOKS.map((look)=>React.createElement(ButtonDropdown, {
-            look: look,
-            soft: true,
-            text: look
-        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
-            href: "#",
-            className: "text-[blue] underline"
-        }, "content"), "..."))));
-export const ButtonSizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
-            className: "font-bold"
-        }, size), React.createElement(ButtonDropdown, {
-            size: size,
-            text: size
-        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
-            href: "#",
-            className: "text-[blue] underline"
-        }, "content"), "...")))), React.createElement("h3", {
-        className: "font-bold"
-    }, "Responsive"), React.createElement(ButtonDropdown, {
-        size: {
-            initial: 'small',
-            md: 'large',
-            lg: 'xlarge'
-        },
-        text: "responsive"
-    }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
-        href: "#",
-        className: "text-[blue] underline"
-    }, "content"), "...")));
-export const DropdownSizes = ()=>React.createElement("div", null, DROPDOWNSIZE.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
-            className: "font-bold"
-        }, size), React.createElement(ButtonDropdown, {
-            dropdownSize: size,
-            text: size
-        }, size))), React.createElement("h3", {
-        className: "font-bold"
-    }, "Responsive"), React.createElement(ButtonDropdown, {
-        dropdownSize: {
-            initial: 'large',
-            md: 'small',
-            lg: 'medium'
-        },
-        text: "Responsive"
-    }, "Responive"));
-export const BlockDropdownButton = ()=>React.createElement("div", null, React.createElement("h3", {
-        className: "font-bold"
-    }, "Block"), React.createElement(ButtonDropdown, {
-        block: true,
-        text: "Block"
-    }, "Block"), React.createElement("h3", {
-        className: "font-bold"
-    }, "Responsive Block"), React.createElement(ButtonDropdown, {
-        block: {
-            initial: false,
-            lg: true
-        },
-        text: "Responsive Block"
-    }, "Responive Block"));
-export const DropdownButtonWithIcons = {
-    args: {
-        iconBefore: AndroidIcon,
-        text: 'Icon Dropdown',
-        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
-            href: "#",
-            className: "text-[blue] underline"
-        }, "content"), "...")
-    }
-};
-export const DropdownWithHeadings = {
-    args: {
-        text: 'Heading Dropdown',
-        block: false,
-        children: React.createElement(React.Fragment, null, React.createElement(ButtonDropdown.Heading, null, "Dropdown heading #1"), "Example dropdown content...", React.createElement(ButtonDropdown.Heading, null, "Dropdown heading #2"), "Example dropdown content...")
-    }
-};
-export const Open = {
-    args: {
-        open: true,
-        text: 'Default Dropdown',
-        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
-            href: "#",
-            className: "text-[blue] underline"
-        }, "content"), "...")
-    }
-};

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

@@ -1,153 +0,0 @@
-import { ButtonGroup } from './button-group.component.js';
-const meta = {
-    title: 'Components/ButtonGroup',
-    component: ButtonGroup,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ],
-    argTypes: {
-        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.'
-        },
-        size: {
-            description: 'Controls size of buttons, can use any size the regular GEL Next Button components use or responsive sizing'
-        }
-    },
-    args: {
-        label: 'Test Label',
-        isDisabled: false
-    }
-};
-export default meta;
-const LOOKS = [
-    'primary',
-    'hero'
-];
-const SIZES = [
-    'small',
-    'medium',
-    'large',
-    'xlarge'
-];
-export const Default = {
-    args: {
-        children: [
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 3"
-            }, "Option 3")
-        ]
-    }
-};
-export const Colors = ()=>React.createElement("div", {
-        className: "flex flex-col gap-2"
-    }, LOOKS.map((look)=>React.createElement(ButtonGroup, {
-            label: React.createElement("h3", {
-                className: "font-bold"
-            }, look),
-            look: look
-        }, React.createElement(ButtonGroup.Button, {
-            value: "Option 1"
-        }, "Option 1"), React.createElement(ButtonGroup.Button, {
-            value: "Option 2"
-        }, "Option 2"), React.createElement(ButtonGroup.Button, {
-            value: "Option 3"
-        }, "Option 3"))));
-export const Sizes = ()=>React.createElement("div", {
-        className: "flex flex-col gap-2"
-    }, SIZES.map((size)=>React.createElement(ButtonGroup, {
-            label: React.createElement("h3", {
-                className: "font-bold"
-            }, size),
-            size: size
-        }, React.createElement(ButtonGroup.Button, {
-            value: "Option 1"
-        }, "Option 1"), React.createElement(ButtonGroup.Button, {
-            value: "Option 2"
-        }, "Option 2"), React.createElement(ButtonGroup.Button, {
-            value: "Option 3"
-        }, "Option 3"))));
-export const ResponsiveSize = {
-    args: {
-        children: [
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 3"
-            }, "Option 3")
-        ],
-        size: {
-            initial: 'small',
-            md: 'large',
-            lg: 'xlarge'
-        }
-    }
-};
-export const Block = ()=>React.createElement("div", {
-        className: "flex flex-col gap-2"
-    }, SIZES.map((size)=>React.createElement(ButtonGroup, {
-            block: true,
-            label: React.createElement("h3", {
-                className: "font-bold"
-            }, size),
-            size: size
-        }, React.createElement(ButtonGroup.Button, {
-            value: "Option 1"
-        }, "Option 1"), React.createElement(ButtonGroup.Button, {
-            value: "Option 2"
-        }, "Option 2"), React.createElement(ButtonGroup.Button, {
-            value: "Option 3"
-        }, "Option 3"))));
-export const Disabled = {
-    args: {
-        children: [
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 3"
-            }, "Option 3")
-        ],
-        isDisabled: true
-    }
-};
-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(ButtonGroup.Button, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(ButtonGroup.Button, {
-                value: "Option 3"
-            }, "Option 3")
-        ]
-    }
-};

package/dist/components/checkbox-group/checkbox-group.stories.js

@@ -1,225 +0,0 @@
-import { CheckboxGroup } from './checkbox-group.component.js';
-const meta = {
-    title: 'Components/CheckboxGroup',
-    component: CheckboxGroup,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex"
-            }, React.createElement(Story, null))
-    ],
-    args: {
-        label: React.createElement("h2", null, "Test")
-    },
-    argTypes: {
-        orientation: {
-            description: "Controls orientation of `Checkbox` components, can't be applied directly on `Checkbox` \n\n `'horizontal'` `'vertical'`",
-            type: {
-                name: 'enum',
-                value: [
-                    'horizontal',
-                    'vertical'
-                ]
-            }
-        },
-        isDisabled: {
-            description: 'Controls whether all checkbox items 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;
-export const Default = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3"
-            }, "Option 3")
-        ]
-    }
-};
-export const LongLines = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                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.")
-        ]
-    }
-};
-export const DefaultValue = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3"
-            }, "Option 3")
-        ],
-        defaultValue: [
-            'Option 1'
-        ]
-    }
-};
-export const Inline = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3"
-            }, "Option 3")
-        ],
-        orientation: 'horizontal'
-    }
-};
-export const InlineLongLines = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                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.")
-        ],
-        orientation: 'horizontal'
-    }
-};
-export const Disabled = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3"
-            }, "Option 3")
-        ],
-        isDisabled: true,
-        defaultValue: [
-            'Option 1'
-        ]
-    }
-};
-export const Large = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3"
-            }, "Option 3")
-        ],
-        size: 'large'
-    }
-};
-export const HiddenItems = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3"
-            }, "Option 3")
-        ],
-        showAmount: 1
-    }
-};
-export const HintText = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1",
-                hint: "This is hint text"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2",
-                hint: "This is hint text"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3",
-                hint: "This is hint text"
-            }, "Option 3")
-        ]
-    }
-};
-export const OnChange = {
-    args: {
-        children: [
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 1",
-                hint: "This is hint text"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2",
-                hint: "This is hint text"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3",
-                hint: "This is hint text"
-            }, "Option 3")
-        ],
-        onChange: (e)=>console.log(e)
-    }
-};
-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(CheckboxGroup.Checkbox, {
-                value: "Option 1"
-            }, "Option 1"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 2"
-            }, "Option 2"),
-            React.createElement(CheckboxGroup.Checkbox, {
-                value: "Option 3"
-            }, "Option 3")
-        ]
-    }
-};

package/dist/components/checkbox-group/components/checkbox/checkbox.stories.js

@@ -1,42 +0,0 @@
-import { Checkbox } from './checkbox.component.js';
-const meta = {
-    title: 'Components/CheckboxGroup/Checkbox',
-    component: Checkbox,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex"
-            }, React.createElement(Story, null), ' ')
-    ],
-    argTypes: {
-        isDisabled: {
-            description: 'Controls whether individual checkbox items are disabled or not',
-            type: {
-                name: 'boolean'
-            }
-        }
-    }
-};
-export default meta;
-export const Default = {
-    args: {
-        children: 'Option 1',
-        value: 'Option 1'
-    }
-};
-export const HintText = {
-    args: {
-        children: 'Option 1',
-        value: 'Option 1',
-        hint: 'Test hint'
-    }
-};
-export const Disabled = {
-    args: {
-        children: 'Option 1',
-        value: 'Option 1',
-        isDisabled: true
-    }
-};

package/dist/components/circle/circle.stories.js

@@ -1,17 +0,0 @@
-import { Circle } from './circle.component.js';
-const meta = {
-    title: 'Components/Circle',
-    component: Circle,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        children: 'GK'
-    }
-};

package/dist/components/collapsible/collapsible.stories.js

@@ -1,43 +0,0 @@
-import { Collapsible } from './collapsible.component.js';
-const meta = {
-    title: 'Components/Collapsible',
-    component: Collapsible,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-const SIZES = [
-    'small',
-    'medium',
-    'large',
-    'xlarge'
-];
-export const Default = {
-    args: {
-        text: 'Toggle collapsible',
-        children: 'Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta nobis modi officia incidunt eos dolores atque, unde error delectus officiis.'
-    }
-};
-export const Sizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement("div", {
-            className: "mb-2",
-            key: size
-        }, React.createElement("h2", {
-            className: "typography-body-8 mb-1 font-bold"
-        }, size), React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit, praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora deleniti deserunt!"), React.createElement(Collapsible, {
-            text: "Toggle collapsible",
-            size: size
-        }, React.createElement("p", null, "Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta nobis modi officia incidunt eos dolores atque, unde error delectus officiis.")), React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit, praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora deleniti deserunt!"))));
-export const Open = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement("div", {
-            className: "mb-2",
-            key: size
-        }, React.createElement("h2", {
-            className: "typography-body-8 mb-1 font-bold"
-        }, size), React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit, praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora deleniti deserunt!"), React.createElement(Collapsible, {
-            text: "Toggle collapsible",
-            size: size,
-            open: true
-        }, React.createElement("p", null, "Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta nobis modi officia incidunt eos dolores atque, unde error delectus officiis.")), React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit, praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora deleniti deserunt!"))));

package/dist/components/compacta/compacta.stories.js

@@ -1,52 +0,0 @@
-import { useState } from 'react';
-import { Form, Input } from '../index.js';
-import { Compacta } from './compacta.component.js';
-const meta = {
-    title: 'Components/Compacta',
-    component: Compacta,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ],
-    args: {}
-};
-export default meta;
-export const Default = ()=>{
-    const [inputs, setInputs] = useState({});
-    const handleChange = (e)=>{
-        setInputs((prev)=>({
-                ...prev,
-                [e.target.name]: e.target.value
-            }));
-    };
-    return React.createElement(Compacta, null, ({ id , setPrimaryTitle , setSecondaryTitle , setTertiaryTitle  })=>React.createElement(Form, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: `primary-${id}`
-        }, "Primary"), React.createElement(Form.Hint, null, "Primary title text"), React.createElement(Input, {
-            name: `primary-${id}`,
-            value: inputs[`primary-${id}`] || '',
-            onChange: (e)=>{
-                handleChange(e);
-                setPrimaryTitle(e.target.value);
-            }
-        })), React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: `secondary-${id}`
-        }, "Secondary"), React.createElement(Form.Hint, null, "Secondary title text"), React.createElement(Input, {
-            name: `secondary-${id}`,
-            value: inputs[`secondary-${id}`] || '',
-            onChange: (e)=>{
-                handleChange(e);
-                setSecondaryTitle(e.target.value);
-            }
-        })), React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: `tertiary-${id}`
-        }, "Tertiary"), React.createElement(Form.Hint, null, "Tertiary title text"), React.createElement(Input, {
-            name: `tertiary-${id}`,
-            value: inputs[`tertiary-${id}`] || '',
-            onChange: (e)=>{
-                handleChange(e);
-                setTertiaryTitle(e.target.value);
-            }
-        }))));
-};