@westpac/ui 0.7.0 → 0.8.0

package/dist/components/select/select.stories.js

@@ -1,74 +0,0 @@
-import { Field } from '../field/index.js';
-import { Select } from './select.component.js';
-const meta = {
-    title: 'Components/Select',
-    component: Select,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        children: React.createElement(React.Fragment, null, React.createElement("option", {
-            value: "option-1"
-        }, "option 1"), React.createElement("option", {
-            value: "option-2"
-        }, "option 2"), React.createElement("option", {
-            value: "option-3"
-        }, "option 3"), React.createElement("option", {
-            value: "option-4"
-        }, "option 4"))
-    }
-};
-export const Invalid = {
-    args: {
-        invalid: true,
-        children: React.createElement(React.Fragment, null, React.createElement("option", {
-            value: "option-1"
-        }, "option 1"), React.createElement("option", {
-            value: "option-2"
-        }, "option 2"), React.createElement("option", {
-            value: "option-3"
-        }, "option 3"), React.createElement("option", {
-            value: "option-4"
-        }, "option 4"))
-    }
-};
-export const Disabled = {
-    args: {
-        disabled: true,
-        children: React.createElement(React.Fragment, null, React.createElement("option", {
-            value: "option-1"
-        }, "option 1"), React.createElement("option", {
-            value: "option-2"
-        }, "option 2"), React.createElement("option", {
-            value: "option-3"
-        }, "option 3"), React.createElement("option", {
-            value: "option-4"
-        }, "option 4"))
-    }
-};
-export const FormField = {
-    args: {},
-    render: ()=>{
-        return React.createElement(Field, {
-            label: "Are you an existing customer?",
-            hintMessage: "Hint: choose from one of the following options",
-            errorMessage: "This is an inline error message"
-        }, React.createElement(Select, {
-            invalid: true
-        }, React.createElement("option", {
-            value: "option-1"
-        }, "option 1"), React.createElement("option", {
-            value: "option-2"
-        }, "option 2"), React.createElement("option", {
-            value: "option-3"
-        }, "option 3"), React.createElement("option", {
-            value: "option-4"
-        }, "option 4")));
-    }
-};

package/dist/components/selector/selector.stories.js

@@ -1,512 +0,0 @@
-import { useState } from 'react';
-import { PersonIcon } from '../icon/index.js';
-import { VisuallyHidden } from '../index.js';
-import { BusPictogram, ChatPictogram, PizzaPictogram } from '../pictogram/index.js';
-import { Selector } from './selector.component.js';
-const HERE_IS_A_LABEL_A = 'Here is a label A';
-const HERE_IS_A_LABEL_B = 'Here is a label B';
-const HERE_IS_A_LABEL_C = 'Here is a label C';
-const meta = {
-    title: 'Components/Selector',
-    component: Selector,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = ()=>{
-    return React.createElement(Selector, {
-        type: "checkbox"
-    }, [
-        {
-            key: 'A',
-            disabled: false
-        },
-        {
-            key: 'B',
-            disabled: false
-        },
-        {
-            key: 'C',
-            disabled: false
-        },
-        {
-            key: 'D',
-            disabled: true
-        }
-    ].map(({ key , disabled  })=>React.createElement(Selector.Checkbox, {
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, "Something ", key))));
-};
-export const Radio = ()=>{
-    return React.createElement(Selector, {
-        type: "radio"
-    }, [
-        {
-            key: 'A',
-            disabled: false
-        },
-        {
-            key: 'B',
-            disabled: false
-        },
-        {
-            key: 'C',
-            disabled: false
-        },
-        {
-            key: 'D',
-            disabled: true
-        }
-    ].map(({ key , disabled  })=>React.createElement(Selector.Radio, {
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, "Something ", key))));
-};
-export const CheckWithArrow = ()=>{
-    return React.createElement(Selector, {
-        type: "radio"
-    }, [
-        {
-            key: 'A',
-            disabled: false
-        },
-        {
-            key: 'B',
-            disabled: false
-        },
-        {
-            key: 'C',
-            disabled: false
-        },
-        {
-            key: 'D',
-            disabled: true
-        }
-    ].map(({ key , disabled  })=>React.createElement(Selector.Radio, {
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled,
-            checkIcon: "arrow"
-        }, React.createElement(Selector.Label, null, "Something ", key))));
-};
-export const RadioWithState = ()=>{
-    const [selectedOption, setSelectedOption] = useState();
-    return React.createElement(React.Fragment, null, selectedOption, React.createElement(Selector, {
-        type: "radio",
-        value: selectedOption,
-        onChange: (value)=>{
-            setSelectedOption(value);
-        }
-    }, [
-        {
-            key: 'A',
-            disabled: false
-        },
-        {
-            key: 'B',
-            disabled: false
-        },
-        {
-            key: 'C',
-            disabled: false
-        },
-        {
-            key: 'D',
-            disabled: true
-        }
-    ].map(({ key , disabled  })=>React.createElement(Selector.Radio, {
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, "Something ", key)))));
-};
-export const CheckboxWithState = ()=>{
-    const [selectedOptions, setSelectedOptions] = useState();
-    return React.createElement(React.Fragment, null, selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.join(','), React.createElement(Selector, {
-        type: "checkbox",
-        value: selectedOptions,
-        onChange: (value)=>{
-            setSelectedOptions(value);
-        }
-    }, [
-        {
-            key: 'A',
-            disabled: false
-        },
-        {
-            key: 'B',
-            disabled: false
-        },
-        {
-            key: 'C',
-            disabled: false
-        },
-        {
-            key: 'D',
-            disabled: true
-        }
-    ].map(({ key , disabled  })=>React.createElement(Selector.Checkbox, {
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, "Something ", key)))));
-};
-export const LongText = ()=>{
-    return React.createElement(Selector, {
-        type: "checkbox"
-    }, [
-        {
-            key: 'A',
-            disabled: false
-        },
-        {
-            key: 'B',
-            disabled: false
-        },
-        {
-            key: 'C',
-            disabled: false
-        },
-        {
-            key: 'D',
-            disabled: true
-        }
-    ].map(({ key , disabled  })=>React.createElement(Selector.Checkbox, {
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores architecto eum aperiam consectetur quibusdam. Laboriosam saepe, explicabo odio quis doloribus consequuntur quae et necessitatibus quasi similique. Debitis non quo recusandae. ", key))));
-};
-export const HintText = ()=>{
-    return React.createElement(Selector, {
-        type: "checkbox"
-    }, [
-        {
-            label: HERE_IS_A_LABEL_A,
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'A',
-            disabled: false
-        },
-        {
-            label: HERE_IS_A_LABEL_B,
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'B',
-            disabled: false
-        },
-        {
-            label: HERE_IS_A_LABEL_C,
-            hint: '',
-            key: 'C',
-            disabled: false
-        }
-    ].map(({ key , disabled , hint , label  })=>React.createElement(Selector.Checkbox, {
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
-};
-export const Pictogram = ()=>{
-    return React.createElement(Selector, {
-        type: "checkbox"
-    }, [
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PizzaPictogram, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_A,
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'A',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(ChatPictogram, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_B,
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'B',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(BusPictogram, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_C,
-            hint: '',
-            key: 'C',
-            disabled: false
-        }
-    ].map(({ key , disabled , hint , label , before  })=>React.createElement(Selector.Checkbox, {
-            before: before,
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
-};
-export const PictogramSizes = ()=>{
-    return React.createElement(Selector, {
-        type: "checkbox"
-    }, [
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PizzaPictogram, {
-                className: "h-15 w-15"
-            })),
-            label: HERE_IS_A_LABEL_A,
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'A',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(ChatPictogram, {
-                className: "h-10 w-10"
-            })),
-            label: HERE_IS_A_LABEL_B,
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'B',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(BusPictogram, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_C,
-            hint: '',
-            key: 'C',
-            disabled: false
-        }
-    ].map(({ key , disabled , hint , label , before  })=>React.createElement(Selector.Checkbox, {
-            before: before,
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
-};
-export const IconsSizes = ()=>{
-    return React.createElement(Selector, {
-        type: "checkbox"
-    }, [
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-15 w-15"
-            })),
-            label: HERE_IS_A_LABEL_A,
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'A',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-10 w-10"
-            })),
-            label: HERE_IS_A_LABEL_B,
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'B',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_C,
-            hint: '',
-            key: 'C',
-            disabled: false
-        }
-    ].map(({ key , disabled , hint , label , before  })=>React.createElement(Selector.Checkbox, {
-            before: before,
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
-};
-export const IconsAndSecondaryLabel = ()=>{
-    return React.createElement(Selector, {
-        type: "checkbox"
-    }, [
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_A,
-            after: React.createElement(Selector.Label, null, "$200,000.00"),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'A',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_B,
-            after: React.createElement(Selector.Label, null, "$200,000.00"),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'B',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_C,
-            after: React.createElement(Selector.Adornment, {
-                align: "center"
-            }, React.createElement("span", null, "$200,000.00")),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 7643123"),
-            key: 'C',
-            disabled: false
-        }
-    ].map(({ key , disabled , hint , label , before , after  })=>React.createElement(Selector.Checkbox, {
-            before: before,
-            after: after,
-            key: key,
-            body: true,
-            value: key,
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
-};
-export const RadioWithIconsAndSecondaryLabel = ()=>{
-    return React.createElement(Selector, {
-        type: "radio"
-    }, [
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_A,
-            after: React.createElement(Selector.Label, null, "$200,000.00"),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'A',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_B,
-            after: React.createElement(Selector.Label, null, "$200,000.00"),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'B',
-            disabled: false
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_C,
-            after: React.createElement(Selector.Adornment, {
-                align: "center"
-            }, React.createElement("span", null, "$200,000.00")),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 7643123"),
-            key: 'C',
-            disabled: false
-        }
-    ].map(({ key , disabled , hint , label , before , after  })=>React.createElement(Selector.Radio, {
-            before: before,
-            after: after,
-            key: key,
-            body: true,
-            value: key,
-            checkIcon: "arrow",
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
-};
-export const Disabled = ()=>{
-    return React.createElement(Selector, {
-        type: "radio",
-        value: "A"
-    }, [
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_A,
-            after: React.createElement(Selector.Label, null, "$200,000.00"),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'A',
-            disabled: true
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_B,
-            after: React.createElement(Selector.Label, null, "$200,000.00"),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
-            key: 'B',
-            disabled: true
-        },
-        {
-            before: React.createElement(Selector.Adornment, {
-                align: "top"
-            }, React.createElement(PersonIcon, {
-                className: "h-5 w-5"
-            })),
-            label: HERE_IS_A_LABEL_C,
-            after: React.createElement(Selector.Adornment, {
-                align: "center"
-            }, React.createElement("span", null, "$200,000.00")),
-            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 7643123"),
-            key: 'C',
-            disabled: true
-        }
-    ].map(({ key , disabled , hint , label , before , after  })=>React.createElement(Selector.Radio, {
-            before: before,
-            after: after,
-            key: key,
-            body: true,
-            value: key,
-            checkIcon: "arrow",
-            isDisabled: disabled
-        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
-};

package/dist/components/skip-link/skip-link.stories.js

@@ -1,29 +0,0 @@
-import { useRef } from 'react';
-import { Button } from '../index.js';
-import { SkipLink } from './skip-link.component.js';
-const meta = {
-    title: 'Components/SkipLink',
-    component: SkipLink,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = ()=>{
-    const skipLinkRef = useRef();
-    return React.createElement(React.Fragment, null, React.createElement(SkipLink, {
-        href: "#skiptohere",
-        ref: skipLinkRef
-    }, "Skip to lower contents", ' '), React.createElement("div", null, "‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought!’", ' ', React.createElement("h3", {
-        id: "skiptohere",
-        className: "typography-body-7 p-2 font-bold"
-    }, "Will skip to here"), ' ', "‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought!’ ‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought!’ ‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought!’"), React.createElement(Button, {
-        onClick: ()=>{
-            var _skipLinkRef_current;
-            return (_skipLinkRef_current = skipLinkRef.current) === null || _skipLinkRef_current === void 0 ? void 0 : _skipLinkRef_current.focus();
-        }
-    }, "Open content skipper"));
-};

package/dist/components/switch/switch.stories.js

@@ -1,67 +0,0 @@
-import { Switch } from './switch.component.js';
-const meta = {
-    title: 'Components/Switch',
-    component: Switch,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-const SIZES = [
-    'small',
-    'medium',
-    'large',
-    'xlarge'
-];
-export const Default = {
-    args: {
-        size: 'medium',
-        label: 'eStatements'
-    }
-};
-export const Selected = {
-    args: {
-        label: 'eStatements',
-        checked: true
-    }
-};
-export const Sizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement("div", {
-            key: size
-        }, React.createElement("h3", {
-            className: "font-bold"
-        }, size), React.createElement("div", {
-            className: "mb-2"
-        }, React.createElement(Switch, {
-            size: size,
-            label: "eStatements"
-        })))));
-export const Disabled = {
-    args: {
-        label: 'eStatements',
-        isDisabled: true
-    }
-};
-export const Block = ()=>React.createElement("div", null, React.createElement(React.Fragment, null, React.createElement("div", {
-        className: "mb-2"
-    }, React.createElement(Switch, {
-        block: true,
-        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?"
-    })), React.createElement("div", {
-        className: "mb-2"
-    }, React.createElement(Switch, {
-        block: true,
-        label: "eStatements"
-    }))));
-export const ResponsiveSize = {
-    args: {
-        label: 'eStatements',
-        size: {
-            initial: 'small',
-            md: 'large',
-            lg: 'xlarge'
-        }
-    }
-};