@westpac/ui 0.7.1 → 0.8.0

package/dist/components/form/form.stories.js

@@ -1,103 +0,0 @@
-import { Input } from '../index.js';
-import { Form } from './form.component.js';
-const meta = {
-    title: 'Components/Form',
-    component: Form,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {},
-    render: ()=>{
-        return React.createElement(React.Fragment, null, React.createElement("h2", {
-            className: "typography-body-7 my-4 font-bold"
-        }, "Default size and spacing"), React.createElement(Form, null, React.createElement(Form.Section, null, React.createElement(Form.ChitChat, null, "Hello, I’m the friendly conversational text component. I live at the top of the form pod if required.")), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: "example-default-1"
-        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-            message: "This is an error message"
-        }), React.createElement(Input, {
-            name: "example-default-1"
-        })), React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: "example-default-2"
-        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-            message: "This is an error message"
-        }), React.createElement(Input, {
-            name: "example-default-2"
-        }))), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: "example-default-3"
-        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-            message: "This is an error message"
-        }), React.createElement(Input, {
-            name: "example-default-3"
-        })))), React.createElement("hr", null), React.createElement("h2", {
-            className: "typography-body-7 my-4 font-bold"
-        }, "Large size with large spacing"), React.createElement(Form, {
-            size: "large",
-            spacing: "large"
-        }, React.createElement(Form.Section, null, React.createElement(Form.ChitChat, null, "Hello, I’m the friendly conversational text component. I live at the top of the form pod if required.")), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: "example-large-1"
-        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-            message: "This is an error message"
-        }), React.createElement(Input, {
-            name: "example-large-1"
-        })), React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: "example-large-2"
-        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-            message: "This is an error message"
-        }), React.createElement(Input, {
-            name: "example-large-2"
-        }))), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
-            htmlFor: "example-large-3"
-        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-            message: "This is an error message"
-        }), React.createElement(Input, {
-            name: "example-large-3"
-        })))));
-    }
-};
-export const MultipleErrors = {
-    args: {},
-    render: ()=>{
-        return React.createElement(Form, null, React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-            message: [
-                'This is an error message',
-                'another error message'
-            ]
-        }), React.createElement(Input, null));
-    }
-};
-export const AllSizes = {
-    args: {},
-    render: ()=>{
-        return React.createElement("div", {
-            className: "flex flex-col gap-3"
-        }, [
-            'small',
-            'medium'
-        ].map((size)=>React.createElement(Form, {
-                size: size
-            }, React.createElement("h3", null, "Form with size: ", size), React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-                message: "This is an error message"
-            }), React.createElement(Input, null))));
-    }
-};
-export const AllSpacings = {
-    args: {},
-    render: ()=>{
-        return React.createElement("div", {
-            className: "flex flex-col gap-3"
-        }, [
-            'medium',
-            'large'
-        ].map((size)=>React.createElement(Form, {
-                spacing: size
-            }, React.createElement("h3", null, "Form with Spacing:", size), React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
-                message: "This is an error message"
-            }), React.createElement(Input, null))));
-    }
-};

package/dist/components/grid/grid.stories.js

@@ -1,82 +0,0 @@
-import { Container, Item } from './components/index.js';
-import { Grid } from './grid.component.js';
-const meta = {
-    title: 'Foundation/Grid',
-    component: Grid,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = ()=>{
-    const items = Array(12).fill(null);
-    return React.createElement(Grid, null, items.map((_, i)=>React.createElement(Item, {
-            key: i,
-            className: "border border-border bg-light p-2 text-center"
-        }, i + 1)));
-};
-export const DefaultContainer = ()=>{
-    const items = Array(12).fill(null);
-    return React.createElement(Container, null, React.createElement(Grid, null, items.map((_, i)=>React.createElement(Item, {
-            key: i,
-            className: "border border-border bg-light p-2 text-center"
-        }, i + 1))));
-};
-export const ResponsiveItems = ()=>{
-    return React.createElement(Container, null, React.createElement(Grid, null, React.createElement(Item, {
-        span: {
-            initial: 6,
-            lg: 2
-        },
-        className: "border border-border bg-light p-2 text-center"
-    }, "span - (xs:6, lg:3)"), React.createElement(Item, {
-        span: {
-            initial: 6,
-            lg: 10
-        },
-        className: "border border-border bg-light p-2 text-center"
-    }, "span - (xs:6, lg:10)")));
-};
-export const Positioning = ()=>{
-    return React.createElement(Container, null, React.createElement(Grid, null, React.createElement(Item, {
-        span: 4,
-        className: "border border-border bg-light p-2 text-center"
-    }, "Top Left"), React.createElement(Item, {
-        start: 9,
-        span: 4,
-        className: "border border-border bg-light p-2 text-center"
-    }, "Top Right"), React.createElement(Item, {
-        start: 5,
-        span: 4,
-        className: "border border-border bg-light p-2 text-center"
-    }, "Middle"), React.createElement(Item, {
-        start: 1,
-        span: 4,
-        className: "border border-border bg-light p-2 text-center"
-    }, "Bottom Left"), React.createElement(Item, {
-        start: 9,
-        span: 4,
-        className: "border border-border bg-light p-2 text-center"
-    }, "Bottom Right")));
-};
-export const HolyGrailLayout = ()=>{
-    return React.createElement(Container, null, React.createElement(Grid, null, React.createElement(Item, {
-        span: 12,
-        className: "h-12 border border-border bg-light p-2 text-center"
-    }, "Header"), React.createElement(Item, {
-        span: 3,
-        className: "h-10 border border-border bg-light p-2 text-center"
-    }, "Menu"), React.createElement(Item, {
-        span: 6,
-        className: "h-10 border border-border bg-light p-2 text-center"
-    }, "Content"), React.createElement(Item, {
-        span: 3,
-        className: "h-10 border border-border bg-light p-2 text-center"
-    }, "Ads"), React.createElement(Item, {
-        span: 12,
-        className: "h-12 border border-border bg-light p-2 text-center"
-    }, "Footer")));
-};

package/dist/components/icon/icon.stories.js

@@ -1,147 +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 { useCallback, useMemo, useState } from 'react';
-import * as AllIcons from './index.js';
-const AllIconsExample = (props)=>{
-    const [search, setSearch] = useState('');
-    const filteredIcons = useMemo(()=>{
-        return Object.entries(AllIcons).reduce((acc, [iconName, Icon])=>{
-            if (iconName.toUpperCase().indexOf(search.toUpperCase()) === -1) {
-                return acc;
-            }
-            return [
-                ...acc,
-                {
-                    key: iconName,
-                    Icon
-                }
-            ];
-        }, []);
-    }, [
-        search
-    ]);
-    const handleOnChange = useCallback(({ target: { value  }  })=>{
-        setSearch(value);
-    }, []);
-    const handleOnClick = useCallback(async (key)=>{
-        try {
-            await navigator.clipboard.writeText(`<${key} />`);
-            console.log('Content copied to clipboard');
-        } catch (err) {
-            console.error('Failed to copy: ', err);
-        }
-    }, [
-        props.className
-    ]);
-    return React.createElement("div", {
-        className: "flex flex-col gap-2"
-    }, React.createElement("input", {
-        className: "rounded-sm border border-border px-3 py-2",
-        onChange: handleOnChange,
-        placeholder: "e.g: Accessibiliy"
-    }), React.createElement("div", {
-        className: "flex flex-row flex-wrap justify-center gap-2"
-    }, filteredIcons.map(({ key , Icon  })=>React.createElement("button", {
-            onClick: ()=>handleOnClick(key),
-            className: "flex h-15 w-23 flex-col items-center justify-center gap-2 border border-border",
-            key: key
-        }, React.createElement(Icon, _extends({}, props)), React.createElement("span", {
-            className: "whitespace-pre-wrap text-xs"
-        }, `<${key} />`)))));
-};
-const meta = {
-    title: 'Foundation/Icons',
-    component: AllIconsExample,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ],
-    argTypes: {
-        children: {
-            description: 'Children',
-            type: {
-                name: 'string'
-            }
-        },
-        copyrightYear: {
-            description: 'CopyrightYear',
-            type: {
-                name: 'string'
-            }
-        },
-        size: {
-            description: 'size',
-            type: {
-                name: 'enum',
-                value: [
-                    'xsmall',
-                    'small',
-                    'medium',
-                    'large',
-                    'xlarge'
-                ]
-            }
-        },
-        color: {
-            description: 'color',
-            type: {
-                name: 'enum',
-                value: [
-                    'success',
-                    'info',
-                    'warning',
-                    'danger',
-                    'system',
-                    'white',
-                    'black',
-                    'background',
-                    'border',
-                    'borderDark',
-                    'focus',
-                    'heading',
-                    'hero',
-                    'light',
-                    'link',
-                    'muted',
-                    'neutral',
-                    'pop',
-                    'primary',
-                    'text'
-                ]
-            }
-        }
-    }
-};
-export default meta;
-export const Default = {
-    args: {}
-};
-export const Primary = {
-    args: {
-        color: 'primary'
-    }
-};
-export const Size = {
-    args: {
-        size: 'xlarge'
-    }
-};
-export const Outlined = {
-    args: {
-        look: 'outlined'
-    }
-};

package/dist/components/input/input.stories.js

@@ -1,56 +0,0 @@
-import { Input } from './input.component.js';
-const meta = {
-    title: 'Components/Input',
-    component: Input,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex"
-            }, React.createElement(Story, null))
-    ]
-};
-export default meta;
-const SIZES = [
-    'small',
-    'medium',
-    'large',
-    'xlarge'
-];
-const FIXED_WIDTHS = [
-    2,
-    3,
-    4,
-    5,
-    10,
-    20,
-    30
-];
-export const Default = {
-    args: {
-        placeholder: 'placeholder',
-        size: 'medium'
-    }
-};
-export const Invalid = {
-    args: {
-        invalid: true
-    }
-};
-export const Disabled = {
-    args: {
-        disabled: true
-    }
-};
-export const Sizes = ()=>React.createElement("div", {
-        className: "flex flex-col gap-2"
-    }, SIZES.map((size)=>React.createElement(Input, {
-            size: size,
-            placeholder: size
-        })));
-export const ReadOnly = {
-    args: {
-        readOnly: true
-    }
-};

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

@@ -1,149 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { ClearIcon, RefreshIcon, SearchIcon, VisibilityIcon, VisibilityOffIcon } from '../icon/index.js';
-import { Button, Input, Select, Textarea } from '../index.js';
-import { InputField } from './input-field.component.js';
-const meta = {
-    title: 'Components/InputField/Scenarios',
-    component: InputField,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const NumberStepper = {
-    args: {},
-    render: ()=>{
-        const [numberOfDependents, setNumberOfDependents] = useState(0);
-        const minusButton = useCallback(()=>setNumberOfDependents((state)=>--state), []);
-        const plusButton = useCallback(()=>setNumberOfDependents((state)=>++state), []);
-        return React.createElement(InputField, {
-            label: "Number of dependents",
-            before: React.createElement(Button, {
-                onClick: minusButton
-            }, "-"),
-            after: React.createElement(Button, {
-                onClick: plusButton
-            }, "+")
-        }, React.createElement(Input, {
-            value: numberOfDependents
-        }));
-    }
-};
-export const MaskedCharacters = {
-    args: {},
-    render: ()=>{
-        const [typeInput, setTypeInput] = useState('password');
-        const toggleType = useCallback(()=>setTypeInput((state)=>state === 'password' ? 'text' : 'password'), []);
-        return React.createElement(InputField, {
-            label: "Password",
-            after: {
-                inset: true,
-                element: React.createElement(Button, {
-                    onClick: toggleType,
-                    look: "link",
-                    iconAfter: typeInput === 'password' ? VisibilityIcon : VisibilityOffIcon,
-                    iconColor: "muted"
-                })
-            }
-        }, React.createElement(Input, {
-            type: typeInput
-        }));
-    }
-};
-export const SearchWithLeftIconAndClearButton = {
-    args: {},
-    render: ()=>{
-        const [inputValue, setInputValue] = useState('');
-        const clearInput = useCallback(()=>setInputValue(''), []);
-        return React.createElement(InputField, {
-            label: "Search",
-            before: {
-                icon: SearchIcon
-            },
-            after: {
-                inset: true,
-                element: React.createElement(Button, {
-                    onClick: clearInput,
-                    look: "link",
-                    iconAfter: ClearIcon,
-                    iconColor: "muted"
-                })
-            }
-        }, React.createElement(Input, {
-            onChange: ({ target: { value  }  })=>setInputValue(value),
-            value: inputValue
-        }));
-    }
-};
-export const InlineFieldValidationFlow = {
-    args: {},
-    render: ()=>{
-        const [inputValue, setInputValue] = useState('');
-        const [validating, setValidating] = useState(false);
-        const [error, setError] = useState();
-        const validate = useCallback(()=>{
-            setValidating(true);
-            setError(undefined);
-            setTimeout(()=>{
-                if (inputValue !== '647453') {
-                    setError('Routing number not found');
-                }
-                setValidating(false);
-            }, 1500);
-        }, [
-            inputValue
-        ]);
-        return React.createElement(InputField, {
-            label: "Enter ABA routing number",
-            hint: "For a valid response use: 647453, all other numbers will show the invalid response",
-            after: validating ? {
-                icon: RefreshIcon
-            } : React.createElement(Button, {
-                onClick: validate
-            }, "Check"),
-            errorMessage: error
-        }, React.createElement(Input, {
-            invalid: !!error,
-            onChange: ({ target: { value  }  })=>setInputValue(value),
-            value: inputValue
-        }));
-    }
-};
-export const CurrencyAndFrequency = {
-    args: {},
-    render: ()=>{
-        const [inputValue, setInputValue] = useState('');
-        return React.createElement(InputField, {
-            label: "Salary",
-            before: "$AUD",
-            after: React.createElement(Select, null, React.createElement("option", null, "Select"), React.createElement("option", null, "Per Year"), React.createElement("option", null, "Per Month"), React.createElement("option", null, "Per Week"))
-        }, React.createElement(Input, {
-            onChange: ({ target: { value  }  })=>setInputValue(value),
-            value: inputValue
-        }));
-    }
-};
-const MAX_LENGTH = 250;
-export const TextareaWithCharacterCount = {
-    args: {},
-    render: ()=>{
-        const [inputValue, setInputValue] = useState('');
-        const counterText = useMemo(()=>{
-            const lengthLeft = MAX_LENGTH - inputValue.length;
-            return `${lengthLeft} remaining`;
-        }, [
-            inputValue
-        ]);
-        return React.createElement(InputField, {
-            label: "Comments",
-            hint: "I am a hint",
-            supportingText: counterText
-        }, React.createElement(Textarea, {
-            onChange: ({ target: { value  }  })=>setInputValue(value),
-            value: inputValue
-        }));
-    }
-};

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

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