@westpac/ui 0.2.1 → 0.4.0

package/dist/components/collapsible/collapsible.stories.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Collapsible } from './collapsible.component.js';
+declare const meta: Meta<typeof Collapsible>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Examples of sizes of collapsible button
+ */
+export declare const CollapsibleSizes: () => JSX.Element;
+/**
+ * > Setting the default of collapsible to open
+ */
+export declare const CollapsibleOpen: () => JSX.Element;

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

@@ -0,0 +1,52 @@
+import { Collapsible } from './collapsible.component.js';
+const meta = {
+    title: 'Example/Collapsible',
+    component: Collapsible,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "typography-body-10 p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+const SIZES = [
+    'small',
+    'medium',
+    'large',
+    'xlarge'
+];
+export const DefaultStory = {
+    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 CollapsibleSizes = ()=>React.createElement("div", {
+        className: "typography-body-10 p-3"
+    }, 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 CollapsibleOpen = ()=>React.createElement("div", {
+        className: "typography-body-10 p-3"
+    }, 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/collapsible/collapsible.styles.d.ts

@@ -0,0 +1,21 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    open: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}>;

package/dist/components/collapsible/collapsible.styles.js

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'px-0 text-text no-underline hover:underline focus:focus-outline',
+        content: 'typography-body-10 mb-2 block'
+    },
+    variants: {
+        open: {
+            true: {
+                base: 'block'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/collapsible/collapsible.types.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import { ButtonProps } from '../button/index.js';
+export type CollapsibleProps = {
+    /**
+     * A function for the onClick event
+     */
+    onClick?: () => void;
+    /**
+     * State of whether the Collapsible is open
+     */
+    open?: boolean;
+    /**
+     * Button text
+     */
+    text: string;
+} & Pick<ButtonProps, 'size'> & HTMLAttributes<Element>;

package/dist/components/collapsible/collapsible.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/collapsible/collapsible.utils.d.ts

@@ -0,0 +1,2 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;

package/dist/components/collapsible/collapsible.utils.js

@@ -0,0 +1,2 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export { Collapsible } from './collapsible.component.js';
+export { type CollapsibleProps } from './collapsible.types.js';

package/dist/components/collapsible/index.js

@@ -0,0 +1 @@
+export { Collapsible } from './collapsible.component.js';

package/dist/components/compacta/compacta.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type CompactaProps } from './compacta.types.js';
+export declare function Compacta({ className, children, titleTag: Tag, addText, ...props }: CompactaProps): JSX.Element;

package/dist/components/compacta/compacta.component.js

@@ -0,0 +1,251 @@
+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 { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { AddCircleIcon, ExpandLessIcon, ExpandMoreIcon, RemoveCircleIcon } from '../icon/index.js';
+import { Button, VisuallyHidden } from '../index.js';
+import { styles as compactaStyles } from './compacta.styles.js';
+import { generateID } from './compacta.utils.js';
+const loadAnimations = ()=>import('./compacta.utils.js').then((res)=>res.default);
+export function Compacta({ className , children , titleTag: Tag = 'h3' , addText ='Add another' , ...props }) {
+    const [initial, setInitial] = useState(true);
+    const id = useId();
+    const [items, setItems] = useState([
+        {
+            id,
+            open: true,
+            delay: false,
+            title: {
+                primary: '',
+                secondary: '',
+                tertiary: ''
+            }
+        }
+    ]);
+    const [action, setAction] = useState({
+        type: '',
+        index: 0
+    });
+    const [status, setStatus] = useState('');
+    const headingRefs = useRef([]);
+    const toggleRefs = useRef([]);
+    const handleAdd = useCallback(()=>{
+        let delay = false;
+        const newItems = items.map((item, index)=>{
+            if (index === items.length - 1) {
+                if (item.open) {
+                    delay = true;
+                }
+                return {
+                    ...item,
+                    open: false,
+                    delay: false
+                };
+            }
+            return item;
+        });
+        setItems([
+            ...newItems,
+            {
+                id: `${id}-${generateID()}`,
+                open: true,
+                delay,
+                title: {
+                    primary: '',
+                    secondary: '',
+                    tertiary: ''
+                }
+            }
+        ]);
+        setAction({
+            type: 'add',
+            index: newItems.length
+        });
+    }, [
+        id,
+        items
+    ]);
+    const handleRemove = useCallback((id, index)=>{
+        setItems((items)=>items.filter((item)=>item.id !== id));
+        setAction({
+            type: 'remove',
+            index,
+            id
+        });
+    }, []);
+    const handleToggle = useCallback((id, index)=>{
+        if (initial) setInitial(false);
+        setItems((items)=>items.map((item)=>item.id === id ? {
+                    ...item,
+                    delay: false,
+                    open: !item.open
+                } : item));
+        setAction({
+            type: 'toggle',
+            index
+        });
+    }, [
+        initial
+    ]);
+    const setTitle = useCallback((id, titleType, title)=>{
+        setItems((items)=>items.map((item)=>{
+                if (item.id === id) {
+                    return {
+                        ...item,
+                        title: {
+                            ...item.title,
+                            [titleType]: title
+                        }
+                    };
+                } else {
+                    return item;
+                }
+            }));
+    }, []);
+    useEffect(()=>{
+        if (action.type) {
+            if (action.type === 'add') {
+                setTimeout(()=>{
+                    var _headingRefs_current_action_index;
+                    (_headingRefs_current_action_index = headingRefs === null || headingRefs === void 0 ? void 0 : headingRefs.current[action.index]) === null || _headingRefs_current_action_index === void 0 ? void 0 : _headingRefs_current_action_index.focus();
+                }, 1);
+                setStatus(`Item ${action.index + 1} added`);
+            }
+            if (action.type === 'remove') {
+                headingRefs.current.splice(action.index, 1);
+                const focusIndex = action.index === 0 ? 0 : action.index - 1;
+                setTimeout(()=>{
+                    var _headingRefs_current_focusIndex;
+                    (_headingRefs_current_focusIndex = headingRefs === null || headingRefs === void 0 ? void 0 : headingRefs.current[focusIndex]) === null || _headingRefs_current_focusIndex === void 0 ? void 0 : _headingRefs_current_focusIndex.focus();
+                }, 1);
+                setStatus(`Item ${action.index + 1} removed`);
+            }
+            if (action.type === 'toggle') {
+                var _toggleRefs_current_action_index;
+                (_toggleRefs_current_action_index = toggleRefs === null || toggleRefs === void 0 ? void 0 : toggleRefs.current[action.index]) === null || _toggleRefs_current_action_index === void 0 ? void 0 : _toggleRefs_current_action_index.focus();
+            }
+        }
+    }, [
+        items.length,
+        action
+    ]);
+    const styles = compactaStyles({});
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), items.map((item, index)=>{
+        return React.createElement("div", {
+            className: styles.item(),
+            key: item.id
+        }, React.createElement("div", {
+            className: styles.header()
+        }, React.createElement("div", {
+            className: styles.headerTitle()
+        }, React.createElement(Tag, {
+            className: styles.primaryHeading(),
+            ref: (el)=>{
+                headingRefs.current[index] = el;
+            },
+            id: `gel-compacta-title-${item.id}`,
+            tabIndex: -1
+        }, React.createElement("div", {
+            className: styles.itemIndex()
+        }, index + 1, "."), !item.open && item.title.primary && React.createElement("div", {
+            className: styles.titlePrimary()
+        }, item.title.primary)), React.createElement(Button, {
+            className: styles.toggleBtn(),
+            iconAfter: item.open ? ExpandLessIcon : ExpandMoreIcon,
+            look: "link",
+            size: "large",
+            onClick: ()=>handleToggle(item.id, index),
+            ref: (el)=>{
+                toggleRefs.current[index] = el;
+            },
+            "aria-labelledby": `gel-compacta-title-${item.id}`,
+            "aria-expanded": item.open,
+            "aria-controls": `gel-compacta-content-${item.id}`
+        })), !item.open && React.createElement("div", {
+            className: styles.secondaryHeading()
+        }, item.title.secondary && React.createElement("div", {
+            className: styles.titleSecondary()
+        }, item.title.secondary), item.title.tertiary && React.createElement("div", {
+            className: styles.titleTertiary()
+        }, item.title.tertiary))), React.createElement(LazyMotion, {
+            features: loadAnimations
+        }, React.createElement(AnimatePresence, null, item.open && React.createElement(m.div, {
+            className: styles.collapsible(),
+            key: "content",
+            initial: {
+                height: 0,
+                opacity: 0
+            },
+            animate: {
+                height: 'auto',
+                opacity: 1
+            },
+            exit: {
+                height: 0,
+                opacity: 0
+            },
+            transition: {
+                duration: 0.3,
+                ease: [
+                    0.25,
+                    0.1,
+                    0.25,
+                    1.0
+                ],
+                delay: item.delay ? 0.3 : 0
+            },
+            id: `gel-compacta-collapsible-${item.id}`,
+            "aria-hidden": !item.open
+        }, React.createElement("div", {
+            className: styles.content(),
+            id: `gel-compacta-content-${item.id}`
+        }, children({
+            id: item.id,
+            setPrimaryTitle: (title)=>setTitle(item.id, 'primary', title),
+            setSecondaryTitle: (title)=>setTitle(item.id, 'secondary', title),
+            setTertiaryTitle: (title)=>setTitle(item.id, 'tertiary', title)
+        }), React.createElement(Button, {
+            className: styles.removeBtn(),
+            "aria-label": `remove item ${index + 1}`,
+            iconBefore: (props)=>React.createElement(RemoveCircleIcon, _extends({}, props, {
+                    "aria-hidden": true,
+                    look: "outlined",
+                    size: "xsmall"
+                })),
+            look: "link",
+            size: "small",
+            soft: true,
+            onClick: ()=>handleRemove(item.id, index)
+        }, "Remove"))))));
+    }), React.createElement("div", {
+        className: styles.footer()
+    }, React.createElement(Button, {
+        className: styles.addBtn(),
+        iconBefore: (props)=>React.createElement(AddCircleIcon, _extends({}, props, {
+                "aria-hidden": true,
+                look: "outlined"
+            })),
+        look: "link",
+        size: "small",
+        soft: true,
+        onClick: ()=>handleAdd()
+    }, addText)), React.createElement(VisuallyHidden, {
+        role: "status"
+    }, status));
+}

package/dist/components/compacta/compacta.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta } from '@storybook/react';
+import { Compacta } from './compacta.component.js';
+declare const meta: Meta<typeof Compacta>;
+export default meta;
+/**
+ * > Default usage example
+ */
+export declare const StoryDefault: () => JSX.Element;

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

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { Form, Input } from '../index.js';
+import { Compacta } from './compacta.component.js';
+const meta = {
+    title: 'Example/Compacta',
+    component: Compacta,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-5"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    },
+    args: {}
+};
+export default meta;
+export const StoryDefault = ()=>{
+    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);
+            }
+        }))));
+};

package/dist/components/compacta/compacta.styles.d.ts

@@ -0,0 +1,37 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    item: string;
+    header: string;
+    headerTitle: string;
+    primaryHeading: string;
+    secondaryHeading: string;
+    itemIndex: string;
+    removeBtn: string;
+    addBtn: string;
+    toggleBtn: string;
+    collapsible: string;
+    content: string;
+    footer: string;
+    titlePrimary: string;
+    titleSecondary: string;
+    titleTertiary: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {}, {
+    base: string;
+    item: string;
+    header: string;
+    headerTitle: string;
+    primaryHeading: string;
+    secondaryHeading: string;
+    itemIndex: string;
+    removeBtn: string;
+    addBtn: string;
+    toggleBtn: string;
+    collapsible: string;
+    content: string;
+    footer: string;
+    titlePrimary: string;
+    titleSecondary: string;
+    titleTertiary: string;
+}>;

package/dist/components/compacta/compacta.styles.js

@@ -0,0 +1,44 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        item: 'border-borderDark mb-2 overflow-hidden rounded-[0.1875rem] border',
+        header: 'text-text bg-white p-[0.8125rem_1.125rem]',
+        headerTitle: 'flex min-w-0 flex-1 items-center',
+        primaryHeading: 'my-[16px] flex',
+        secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-[2.25rem]',
+        itemIndex: 'mr-2 w-4 flex-none font-bold',
+        removeBtn: 'mt-[0.875rem] h-auto p-0 no-underline hover:underline',
+        addBtn: 'h-auto p-0 no-underline hover:underline',
+        toggleBtn: 'focus:outline-focus ml-auto p-0',
+        collapsible: '',
+        content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
+        footer: 'pt-[0.5rem]',
+        titlePrimary: 'font-bold',
+        titleSecondary: 'mt-[0.125rem]',
+        titleTertiary: 'mt-[0.125rem]'
+    },
+    variants: {},
+    compoundSlots: [
+        {
+            slots: [
+                'titlePrimary',
+                'titleSecondary',
+                'titleTertiary'
+            ],
+            class: [
+                'mr-2',
+                'truncate',
+                'flex-1'
+            ]
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/compacta/compacta.types.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type CompactaProps = {
+    /**
+     * Text for add button
+     */
+    addText?: string;
+    /**
+     * Component to repeat
+     */
+    children: (...props: ContentProps[]) => ReactNode;
+    /**
+     * Tag for primary title
+     */
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & Omit<HTMLAttributes<Element>, 'children'>;
+type ContentProps = {
+    id: string;
+    setPrimaryTitle: (title: string) => unknown;
+    setSecondaryTitle: (title: string) => unknown;
+    setTertiaryTitle: (title: string) => unknown;
+};
+export {};

package/dist/components/compacta/compacta.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/compacta/compacta.utils.d.ts

@@ -0,0 +1,3 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;
+export declare const generateID: () => string;

package/dist/components/compacta/compacta.utils.js

@@ -0,0 +1,8 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;
+export const generateID = ()=>{
+    const url = URL.createObjectURL(new Blob());
+    const [id] = url.toString().split('/').reverse();
+    URL.revokeObjectURL(url);
+    return id.replace('blob:nodedata:', '');
+};

package/dist/components/compacta/index.d.ts

@@ -0,0 +1,2 @@
+export { Compacta } from './compacta.component.js';
+export { type CompactaProps } from './compacta.types.js';

package/dist/components/compacta/index.js

@@ -0,0 +1 @@
+export { Compacta } from './compacta.component.js';

package/dist/components/date-picker/date-picker.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type DatePickerProps } from './date-picker.types.js';
+export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, ...props }: DatePickerProps): JSX.Element;