@westpac/ui 0.7.0 → 0.8.0

package/dist/components/input-field/input-field.type.stories.js

@@ -1,186 +0,0 @@
-import { SearchIcon, VisibilityIcon } from '../icon/index.js';
-import { Button, Input, Select, Textarea } from '../index.js';
-import { InputField } from './input-field.component.js';
-const meta = {
-    title: 'Components/InputField/Types',
-    component: InputField,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const TextBeforeStory = {
-    args: {},
-    render: ()=>{
-        return React.createElement(InputField, {
-            label: "Text before",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            before: "$AUD"
-        }, React.createElement(Input, null));
-    }
-};
-export const TextAfter = {
-    args: {},
-    render: ()=>{
-        return React.createElement(InputField, {
-            label: "Text after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: "Text"
-        }, React.createElement(Input, null));
-    }
-};
-export const TextAfterAndBefore = {
-    args: {},
-    render: ()=>{
-        return React.createElement(InputField, {
-            label: "Text after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            before: "$AUD",
-            after: "Text"
-        }, React.createElement(Input, null));
-    }
-};
-export const IconAddOn = {
-    args: {},
-    render: ()=>{
-        return React.createElement(React.Fragment, null, React.createElement(InputField, {
-            label: "Icon before",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            before: {
-                icon: SearchIcon
-            }
-        }, React.createElement(Input, null)), React.createElement(InputField, {
-            label: "Icon after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: {
-                icon: SearchIcon
-            }
-        }, React.createElement(Input, null)), React.createElement(InputField, {
-            label: "Icon after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: {
-                icon: SearchIcon
-            },
-            before: {
-                icon: SearchIcon
-            }
-        }, React.createElement(Input, null)));
-    }
-};
-export const IconInButtonsOn = {
-    args: {},
-    render: ()=>{
-        return React.createElement(React.Fragment, null, React.createElement(InputField, {
-            label: "Icon button before",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            before: {
-                inset: true,
-                element: React.createElement(Button, {
-                    look: "link",
-                    iconAfter: VisibilityIcon,
-                    iconColor: "muted"
-                })
-            }
-        }, React.createElement(Input, null)), React.createElement(InputField, {
-            label: "Icon button after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: {
-                inset: true,
-                element: React.createElement(Button, {
-                    look: "link",
-                    iconAfter: VisibilityIcon,
-                    iconColor: "muted"
-                })
-            }
-        }, React.createElement(Input, null)), React.createElement(InputField, {
-            label: "Icon button before and after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: {
-                inset: true,
-                element: React.createElement(Button, {
-                    look: "link",
-                    iconAfter: VisibilityIcon,
-                    iconColor: "muted"
-                })
-            },
-            before: {
-                inset: true,
-                element: React.createElement(Button, {
-                    look: "link",
-                    iconAfter: VisibilityIcon,
-                    iconColor: "muted"
-                })
-            }
-        }, React.createElement(Input, null)));
-    }
-};
-export const ButtonAddOn = {
-    args: {},
-    render: ()=>{
-        return React.createElement(React.Fragment, null, React.createElement(InputField, {
-            label: "Button before",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            before: React.createElement(Button, null, "Check")
-        }, React.createElement(Input, null)), React.createElement(InputField, {
-            label: "Button after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: React.createElement(Button, null, "Check")
-        }, React.createElement(Input, null)), React.createElement(InputField, {
-            label: "Button before and after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: React.createElement(Button, null, "Check"),
-            before: React.createElement(Button, null, "Check")
-        }, React.createElement(Input, null)), React.createElement(InputField, {
-            label: "Primary button after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: React.createElement(Button, {
-                look: "primary"
-            }, "Check")
-        }, React.createElement(Input, null)), React.createElement(InputField, {
-            label: "Faint button after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            after: React.createElement(Button, {
-                look: "faint"
-            }, "Check")
-        }, React.createElement(Input, null)));
-    }
-};
-export const SelectAddOn = {
-    args: {},
-    render: ()=>{
-        return React.createElement(InputField, {
-            label: "Select",
-            hint: "I am a hint",
-            supportingText: "I am supporting text",
-            before: React.createElement(Select, null, React.createElement("option", null, "Select")),
-            after: React.createElement(Select, null, React.createElement("option", null, "Select"))
-        }, React.createElement(Input, null));
-    }
-};
-export const TextArea = {
-    args: {},
-    render: ()=>{
-        return React.createElement(InputField, {
-            label: "Text after",
-            hint: "I am a hint",
-            supportingText: "I am supporting text"
-        }, React.createElement(Textarea, null));
-    }
-};

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

@@ -1,93 +0,0 @@
-import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
-import { Link } from './link.component.js';
-const meta = {
-    title: 'Components/Link',
-    component: Link,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        children: "Look, I'm a default link",
-        href: '#'
-    }
-};
-const SIZES = [
-    'xsmall',
-    'small',
-    'medium',
-    'large',
-    'xlarge'
-];
-export const Standalone = ()=>React.createElement("div", {
-        className: "space-y-1"
-    }, React.createElement("h1", {
-        className: "font-bold"
-    }, "Default"), React.createElement(Link, {
-        href: "#"
-    }, "Look I'm a standalone link"), React.createElement("h1", {
-        className: "font-bold"
-    }, "Icon Before override"), React.createElement(Link, {
-        href: "#",
-        iconBefore: PdfFileIcon
-    }, "Look I'm a standalone link"), React.createElement("h1", {
-        className: "font-bold"
-    }, "Icon Before override"), React.createElement(Link, {
-        href: "#",
-        iconAfter: ArrowRightIcon
-    }, "Look I'm a standalone link"));
-export const Inline = ()=>React.createElement("div", {
-        className: "space-y-1"
-    }, React.createElement("p", {
-        className: "typography-body-10"
-    }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
-        href: "#",
-        type: "inline"
-    }, "look, I'm an inline 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?"), React.createElement("p", {
-        className: "typography-body-10"
-    }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
-        href: "#",
-        type: "inline",
-        underline: false
-    }, "look, I'm an inline link with no underline"), ' ', "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?"), React.createElement("p", {
-        className: "typography-body-10"
-    }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
-        href: "#",
-        type: "inline",
-        iconBefore: PdfFileIcon
-    }, "look, I'm an inline 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?"), React.createElement("p", {
-        className: "typography-body-10"
-    }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
-        href: "#",
-        type: "inline",
-        iconAfter: PdfFileIcon
-    }, "look, I'm an inline 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?"), React.createElement(Link, {
-        href: "#",
-        type: "inline",
-        iconBefore: PdfFileIcon
-    }, "look, I'm an inline link"));
-export const IconSizes = ()=>React.createElement("div", {
-        className: "space-y-1"
-    }, SIZES.map((size)=>React.createElement("div", {
-            key: size
-        }, React.createElement("h1", {
-            className: "font-bold"
-        }, size), React.createElement(Link, {
-            href: "#",
-            iconSize: size,
-            iconBefore: PdfFileIcon,
-            iconAfter: PdfFileIcon
-        }, "Look I'm a standalone link"), React.createElement("p", {
-            className: "typography-body-10"
-        }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
-            href: "#",
-            type: "inline",
-            iconSize: size,
-            iconBefore: PdfFileIcon,
-            iconAfter: PdfFileIcon
-        }, "look, I'm an inline 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?"))));

package/dist/components/list/list.stories.js

@@ -1,86 +0,0 @@
-import { AndroidIcon } from '../icon/index.js';
-import { List } from './list.component.js';
-const meta = {
-    title: 'Components/List',
-    component: List,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-const LOOKS = [
-    'primary',
-    'hero',
-    'neutral',
-    'success',
-    'danger',
-    'link'
-];
-const TYPES = [
-    'bullet',
-    'link',
-    'tick',
-    'cross',
-    'unstyled',
-    'icon',
-    'ordered'
-];
-export const Default = {
-    args: {
-        children: [
-            React.createElement(List.Item, null, "Styled list"),
-            React.createElement(List.Item, null, "Styled list"),
-            React.createElement(List.Item, null, "Styled list")
-        ]
-    }
-};
-export const Types = ()=>TYPES.map((type)=>React.createElement("div", {
-            className: "mb-2",
-            key: type
-        }, React.createElement("h1", {
-            className: "typography-body-8"
-        }, type), React.createElement(List, {
-            type: type,
-            icon: type === 'icon' ? AndroidIcon : undefined
-        }, React.createElement(List.Item, {
-            href: type === 'link' ? '#' : undefined
-        }, "Styled ", type, " list"), React.createElement(List.Item, {
-            href: type === 'link' ? '#' : undefined
-        }, "Styled ", type, " list"), React.createElement(List.Item, {
-            href: type === 'link' ? '#' : undefined
-        }, "Styled ", type, " list"), React.createElement(List, {
-            icon: type === 'link' ? AndroidIcon : undefined
-        }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list")), React.createElement(List.Item, null, "Styled ", type, " list"))));
-export const Looks = ()=>LOOKS.map((look)=>React.createElement("div", {
-            className: "mb-2",
-            key: look
-        }, React.createElement("h1", {
-            className: "typography-body-8"
-        }, look), React.createElement(List, {
-            look: look,
-            type: "bullet"
-        }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List, {
-            icon: look === 'link' ? AndroidIcon : undefined
-        }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list")), React.createElement(List.Item, null, "Styled ", look, " list"))));
-export const Nested = ()=>React.createElement("div", null, React.createElement(List, {
-        type: "bullet",
-        assistiveText: "test"
-    }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, {
-        nested: 0
-    }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"))))));
-export const Spacing = ()=>React.createElement("div", null, React.createElement("h1", {
-        className: "typography-body-10 mb-2"
-    }, "Medium"), React.createElement(List, {
-        type: "bullet",
-        className: "mb-4",
-        spacing: "medium"
-    }, React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list")), React.createElement("h1", {
-        className: "typography-body-10 mb-2"
-    }, "Large"), React.createElement(List, {
-        type: "bullet",
-        className: "mb-4",
-        spacing: "large"
-    }, React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list")));

package/dist/components/modal/modal.stories.js

@@ -1,129 +0,0 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
-import { Fragment, useMemo } from 'react';
-import { useOverlayTriggerState } from 'react-stately';
-import { Button } from '../index.js';
-import { Modal } from './modal.component.js';
-const meta = {
-    title: 'Components/Modal',
-    component: Modal,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        children: `
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
-    `,
-        title: 'Title',
-        isDismissable: true
-    },
-    render: ({ children , ...props })=>{
-        const state = useOverlayTriggerState({});
-        return React.createElement(React.Fragment, null, React.createElement(Modal, _extends({}, props, {
-            state: state,
-            "aria-label": "Modal title",
-            body: true
-        }), children), React.createElement(Button, {
-            onClick: state.open
-        }, "Open Modal"));
-    }
-};
-export const WithFooter = {
-    args: {
-        children: `I'm children`,
-        title: 'Title',
-        isDismissable: true
-    },
-    render: ({ children , ...props })=>{
-        const state = useOverlayTriggerState({});
-        return React.createElement(React.Fragment, null, React.createElement(Modal, _extends({}, props, {
-            state: state,
-            "aria-label": "Modal title"
-        }), React.createElement(Modal.Body, null, children), React.createElement(Modal.Footer, null, React.createElement("p", null, "Lorem, ipsum dolor"))), React.createElement(Button, {
-            onClick: state.open
-        }, "Open Modal"));
-    }
-};
-export const Sizes = {
-    args: {
-        children: `I'm children`,
-        title: 'Title',
-        isDismissable: true
-    },
-    render: ({ children , ...props })=>{
-        const stateSM = useOverlayTriggerState({});
-        const stateMD = useOverlayTriggerState({});
-        const stateLG = useOverlayTriggerState({});
-        const states = useMemo(()=>{
-            return {
-                sm: stateSM,
-                md: stateMD,
-                lg: stateLG
-            };
-        }, [
-            stateSM,
-            stateMD,
-            stateLG
-        ]);
-        return React.createElement("div", {
-            className: "flex gap-2"
-        }, [
-            'sm',
-            'md',
-            'lg'
-        ].map((size)=>React.createElement(Fragment, {
-                key: size
-            }, React.createElement(Modal, _extends({}, props, {
-                size: size,
-                state: states[size],
-                title: `Modal ${size}`
-            }), React.createElement(Modal.Body, null, children), React.createElement(Modal.Footer, null, React.createElement("p", null, "Lorem, ipsum dolor"))), React.createElement(Button, {
-                onClick: states[size].open
-            }, "Open Modal ", size))));
-    }
-};
-export const NotDismissible = {
-    args: {
-        children: `I'm children`,
-        title: 'Title',
-        isDismissable: false
-    },
-    render: ({ children , ...props })=>{
-        const state = useOverlayTriggerState({});
-        return React.createElement(React.Fragment, null, React.createElement(Modal, _extends({}, props, {
-            state: state,
-            "aria-label": "Modal title"
-        }), React.createElement(Modal.Body, null, children), React.createElement(Modal.Footer, {
-            className: "flex justify-end gap-2"
-        }, React.createElement(Button, {
-            look: "faint",
-            onClick: state.close
-        }, "Close"), React.createElement(Button, {
-            look: "primary"
-        }, "Submit"))), React.createElement(Button, {
-            onClick: state.open
-        }, "Open Modal"));
-    }
-};

package/dist/components/pagination/pagination.stories.js

@@ -1,199 +0,0 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
-import { action } from '@storybook/addon-actions';
-import { useEffect, useState } from 'react';
-import { ArrowLeftIcon, ArrowRightIcon } from '../icon/index.js';
-import { Button } from '../index.js';
-import { Pagination } from './pagination.component.js';
-import { usePagination } from './pagination.hooks.js';
-const meta = {
-    title: 'Components/Pagination',
-    component: Pagination,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        current: 1,
-        onChange: action('onChange'),
-        pages: [
-            {
-                text: '1'
-            },
-            {
-                text: '2'
-            },
-            {
-                text: '3'
-            }
-        ]
-    },
-    render: (props)=>{
-        const [current, setCurrent] = useState(props.current);
-        useEffect(()=>{
-            setCurrent(props.current);
-        }, [
-            props.current
-        ]);
-        return React.createElement(Pagination, _extends({}, props, {
-            onChange: (value)=>{
-                var _props_onChange;
-                setCurrent(value);
-                (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, value);
-            },
-            current: current
-        }));
-    }
-};
-export const AsLink = {
-    args: {
-        current: 1,
-        onChange: undefined,
-        pages: [
-            {
-                text: '1',
-                href: '#page-1'
-            },
-            {
-                text: '2',
-                href: '#page-2'
-            },
-            {
-                text: '3',
-                href: '#page-3'
-            }
-        ]
-    }
-};
-export const State = ()=>{
-    const [page, setPage] = useState(1);
-    return React.createElement(Pagination, {
-        current: page,
-        onChange: (changedPage)=>{
-            setPage(changedPage);
-        },
-        pages: [
-            {
-                text: '1'
-            },
-            {
-                text: '2'
-            },
-            {
-                text: '3'
-            }
-        ]
-    });
-};
-export const InfiniteState = ()=>{
-    const [page, setPage] = useState(1);
-    return React.createElement(Pagination, {
-        current: page,
-        infinite: true,
-        onChange: (changedPage)=>{
-            setPage(changedPage);
-        },
-        pages: [
-            {
-                text: '1'
-            },
-            {
-                text: '2'
-            },
-            {
-                text: '3'
-            }
-        ]
-    });
-};
-export const CustomBackAndNextLabel = ()=>{
-    const [page, setPage] = useState(1);
-    return React.createElement(Pagination, {
-        current: page,
-        backLabel: "Custom back",
-        nextLabel: "Custom next",
-        onChange: (changedPage)=>{
-            setPage(changedPage);
-        },
-        pages: [
-            {
-                text: '1'
-            },
-            {
-                text: '2'
-            },
-            {
-                text: '3'
-            }
-        ]
-    });
-};
-export const UsePagination = ()=>{
-    const { pages , currentPage , setCurrentPage  } = usePagination({
-        pages: [
-            {
-                text: '1'
-            },
-            {
-                text: '2'
-            },
-            {
-                text: '3'
-            }
-        ]
-    });
-    return React.createElement(Pagination, {
-        current: currentPage,
-        backLabel: "Custom back",
-        nextLabel: "Custom next",
-        infinite: true,
-        onChange: (changedPage)=>{
-            setCurrentPage(changedPage);
-        },
-        pages: pages
-    });
-};
-export const UsePaginationDifferentComponents = ()=>{
-    const { next , previous , selectedPage  } = usePagination({
-        pages: [
-            {
-                text: 'Page 1'
-            },
-            {
-                text: 'Page 2'
-            },
-            {
-                text: 'Page 3'
-            }
-        ],
-        infinite: true
-    });
-    return React.createElement("div", {
-        className: "flex items-center"
-    }, React.createElement(Button, {
-        look: "link",
-        iconAfter: ArrowLeftIcon,
-        onClick: previous
-    }), React.createElement("h4", null, selectedPage.text), React.createElement(Button, {
-        look: "link",
-        iconAfter: ArrowRightIcon,
-        onClick: next
-    }));
-};