@westpac/ui 0.3.0 → 0.5.0

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.component.js

@@ -0,0 +1,45 @@
+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 React, { useMemo } from 'react';
+import { Circle } from '../../../index.js';
+import { styles as progressRopeStyles } from './progress-rope-step.styles.js';
+export function ProgressRopeStep({ className , current , visited , tag: Tag = 'button' , type , size ='medium' , children , firstItem , ...props }) {
+    const state = useMemo(()=>{
+        if (current) {
+            return 'current';
+        }
+        if (visited) {
+            return 'visited';
+        }
+        return 'non-visited';
+    }, [
+        current,
+        visited
+    ]);
+    const styles = progressRopeStyles({
+        className,
+        state,
+        size,
+        firstItem
+    });
+    return React.createElement(Tag, _extends({
+        className: styles.base({}),
+        "aria-current": current,
+        disabled: state === 'non-visited'
+    }, props), React.createElement(Circle, {
+        className: styles.circle(),
+        "aria-hidden": "true"
+    }), children);
+}

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.styles.d.ts

@@ -0,0 +1,69 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    state: {
+        current: {
+            base: string;
+            circle: string;
+        };
+        visited: {
+            base: string;
+            circle: string;
+        };
+        'non-visited': {
+            base: string;
+            circle: string;
+        };
+    };
+    firstItem: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    size: {
+        medium: {
+            circle: string;
+        };
+        small: {
+            circle: string;
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    circle: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    state: {
+        current: {
+            base: string;
+            circle: string;
+        };
+        visited: {
+            base: string;
+            circle: string;
+        };
+        'non-visited': {
+            base: string;
+            circle: string;
+        };
+    };
+    firstItem: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    size: {
+        medium: {
+            circle: string;
+        };
+        small: {
+            circle: string;
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    circle: string;
+}>;

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.styles.js

@@ -0,0 +1,46 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'typography-body-10 relative flex h-7 cursor-pointer items-center gap-2 transition-colors before:absolute before:inset-y-0 before:left-[6px] before:block before:-translate-y-1/2 before:border-l-2 before:border-dotted before:transition-colors',
+        circle: 'relative z-10 bg-white transition-colors'
+    },
+    variants: {
+        state: {
+            current: {
+                base: 'font-bold text-primary before:border-solid',
+                circle: 'border-[3px] border-primary bg-white'
+            },
+            visited: {
+                base: 'text-text before:border-solid before:border-primary',
+                circle: 'border-[3px] border-primary bg-primary'
+            },
+            'non-visited': {
+                base: 'text-muted-90 before:border-borderDark',
+                circle: 'border-2 border-borderDark bg-white'
+            }
+        },
+        firstItem: {
+            true: {
+                base: 'before:first:hidden'
+            },
+            false: {}
+        },
+        size: {
+            medium: {
+                circle: 'h-[0.875rem] w-[0.875rem]'
+            },
+            small: {
+                circle: 'mr-[0.25rem] h-[0.625rem] w-[0.625rem] translate-x-[0.125rem]',
+                base: 'gap-4'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.types.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { ProgressRopeStepItem } from '../../progress-rope.types.js';
+import { styles } from './progress-rope-step.styles.js';
+export type ProgressRopeStepProps = {
+    /**
+     * Says it is current
+     */
+    current?: boolean;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+    /**
+     * Says it is visited
+     */
+    visited?: boolean;
+} & Omit<ProgressRopeStepItem, 'text'> & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.types.js

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

package/dist/components/progress-rope/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressRope } from './progress-rope.component.js';
+export { type ProgressRopeProps } from './progress-rope.types.js';

package/dist/components/progress-rope/index.js

@@ -0,0 +1 @@
+export { ProgressRope } from './progress-rope.component.js';

package/dist/components/progress-rope/progress-rope.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ProgressRopeProps } from './progress-rope.types.js';
+export declare function ProgressRope({ 'aria-label': ariaLabel, role, className, tag: Tag, current, data, ...props }: ProgressRopeProps): JSX.Element;

package/dist/components/progress-rope/progress-rope.component.js

@@ -0,0 +1,98 @@
+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 React, { useEffect, useMemo, useState } from 'react';
+import { ProgressRopeGroupStep, ProgressRopeStep } from './components/index.js';
+import { styles } from './progress-rope.styles.js';
+const verifyByCurrentIndexWhichGroupIsOpened = (currentIndex, mappedData)=>{
+    return mappedData.reduce((acc, step, index)=>{
+        if (step.type === 'group' && step.steps.find((subStep)=>subStep.index === currentIndex)) {
+            return index;
+        }
+        return acc;
+    }, null);
+};
+export function ProgressRope({ 'aria-label': ariaLabel = 'Form steps' , role ='navigation' , className , tag: Tag = 'nav' , current =0 , data , ...props }) {
+    const [furthestVisitedStep, setFurthestVisitedStep] = useState(current);
+    const mappedData = useMemo(()=>{
+        let autoIncrement = -1;
+        return data === null || data === void 0 ? void 0 : data.reduce((acc, current)=>{
+            if (current.type === 'group') {
+                return [
+                    ...acc,
+                    {
+                        ...current,
+                        steps: current.steps.map((step)=>{
+                            autoIncrement++;
+                            return {
+                                ...step,
+                                index: autoIncrement
+                            };
+                        })
+                    }
+                ];
+            }
+            autoIncrement++;
+            return [
+                ...acc,
+                {
+                    ...current,
+                    index: autoIncrement
+                }
+            ];
+        }, []);
+    }, [
+        data
+    ]);
+    useEffect(()=>{
+        setFurthestVisitedStep((state)=>{
+            return state > current ? state : current;
+        });
+    }, [
+        current
+    ]);
+    const [openedGroupStepIndex, setOpenedGroupStepIndex] = useState(verifyByCurrentIndexWhichGroupIsOpened(current, mappedData || []));
+    useEffect(()=>{
+        const newGroupStepIndex = verifyByCurrentIndexWhichGroupIsOpened(current, mappedData || []);
+        if (newGroupStepIndex !== openedGroupStepIndex) {
+            setOpenedGroupStepIndex(newGroupStepIndex);
+        }
+    }, [
+        current
+    ]);
+    return React.createElement(Tag, _extends({
+        className: className,
+        role: role,
+        "aria-label": ariaLabel
+    }, props), React.createElement("ul", {
+        className: styles({})
+    }, mappedData === null || mappedData === void 0 ? void 0 : mappedData.map((item, index)=>{
+        return React.createElement("li", {
+            key: index
+        }, item.type === 'group' ? React.createElement(ProgressRopeGroupStep, {
+            firstItem: index === 0,
+            furthestVisitedStep: furthestVisitedStep,
+            currentKey: current,
+            steps: item.steps,
+            opened: openedGroupStepIndex === index,
+            onToggle: ()=>setOpenedGroupStepIndex((state)=>state === index ? null : index)
+        }, item.text) : React.createElement(ProgressRopeStep, {
+            firstItem: index === 0,
+            type: item.type,
+            onClick: furthestVisitedStep >= item.index ? item.onClick : undefined,
+            visited: furthestVisitedStep >= item.index,
+            current: current === item.index
+        }, item.text));
+    })));
+}

package/dist/components/progress-rope/progress-rope.stories.d.ts

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { ProgressRope } from './progress-rope.component.js';
+declare const meta: Meta<typeof ProgressRope>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Grouping steps story usage example
+ */
+export declare const GroupingStepsStory: Story;

package/dist/components/progress-rope/progress-rope.stories.js

@@ -0,0 +1,129 @@
+import { useCallback, useState } from 'react';
+import { Button } from '../index.js';
+import { ProgressRope } from './progress-rope.component.js';
+const meta = {
+    title: 'Example/ProgressRope',
+    component: ProgressRope,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {},
+    render: ()=>{
+        const [activeIndex, setActiveIndex] = useState(0);
+        const handleClick = useCallback((index)=>()=>{
+                setActiveIndex(index);
+            }, []);
+        const PROGRESS_ROPE_DATA = [
+            {
+                text: React.createElement("h3", null, "Step 1"),
+                onClick: handleClick(0)
+            },
+            {
+                text: React.createElement("h3", null, "Step 2"),
+                onClick: handleClick(1)
+            },
+            {
+                text: React.createElement("h3", null, "Step 3"),
+                onClick: handleClick(2)
+            },
+            {
+                text: React.createElement("h3", null, "Step 4"),
+                onClick: handleClick(3)
+            },
+            {
+                text: React.createElement("h3", null, "Step 5"),
+                onClick: handleClick(4)
+            },
+            {
+                text: React.createElement("h3", null, "Review and Submit"),
+                onClick: handleClick(5)
+            }
+        ];
+        return React.createElement("div", null, React.createElement(ProgressRope, {
+            current: activeIndex,
+            data: PROGRESS_ROPE_DATA
+        }), React.createElement("div", null, React.createElement("h3", null, "Helper Controls"), React.createElement("h4", null, "Current: ", activeIndex), React.createElement(Button, {
+            onClick: ()=>setActiveIndex((state)=>--state)
+        }, "prev"), ' ', React.createElement(Button, {
+            onClick: ()=>setActiveIndex((state)=>++state)
+        }, "next")));
+    }
+};
+export const GroupingStepsStory = {
+    args: {},
+    render: ()=>{
+        const [activeIndex, setActiveIndex] = useState(0);
+        const handleClick = useCallback((index)=>()=>{
+                setActiveIndex(index);
+            }, []);
+        const PROGRESS_ROPE_DATA = [
+            {
+                type: 'group',
+                text: 'Group 1',
+                steps: [
+                    {
+                        text: 'Step 1',
+                        onClick: handleClick(0)
+                    },
+                    {
+                        text: 'Step 2',
+                        onClick: handleClick(1)
+                    }
+                ]
+            },
+            {
+                type: 'group',
+                text: 'Group 2',
+                steps: [
+                    {
+                        text: 'Step 3',
+                        onClick: handleClick(2)
+                    },
+                    {
+                        text: 'Step 4',
+                        onClick: handleClick(3)
+                    }
+                ]
+            },
+            {
+                type: 'group',
+                text: 'Group 3',
+                steps: [
+                    {
+                        text: 'Step 5',
+                        onClick: handleClick(4)
+                    },
+                    {
+                        text: 'Step 6',
+                        onClick: handleClick(5)
+                    },
+                    {
+                        text: 'Step 7',
+                        onClick: handleClick(6)
+                    }
+                ]
+            },
+            {
+                text: 'Review and Submit',
+                onClick: handleClick(7)
+            }
+        ];
+        return React.createElement("div", null, React.createElement(ProgressRope, {
+            current: activeIndex,
+            data: PROGRESS_ROPE_DATA
+        }), React.createElement("div", null, React.createElement("h3", null, "Helper Controls"), React.createElement("h4", null, "Current: ", activeIndex), React.createElement(Button, {
+            onClick: ()=>setActiveIndex((state)=>--state)
+        }, "prev"), ' ', React.createElement(Button, {
+            onClick: ()=>setActiveIndex((state)=>++state)
+        }, "next")));
+    }
+};

package/dist/components/progress-rope/progress-rope.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "relative flex flex-col"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "relative flex flex-col">;
+    } | undefined;
+} | {}, undefined, "relative flex flex-col", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "relative flex flex-col"> | {}, undefined>;

package/dist/components/progress-rope/progress-rope.styles.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'relative flex flex-col'
+});

package/dist/components/progress-rope/progress-rope.types.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './progress-rope.styles.js';
+export type ProgressRopeStepItem = {
+    onClick?: MouseEventHandler<Element>;
+    text: ReactNode;
+    type?: 'step';
+};
+export type ProgressRopeStepWithIndex = (ProgressRopeStepItem & {
+    index: number;
+}) | {
+    steps: (ProgressRopeStepItem & {
+        index: number;
+    })[];
+    text: ReactNode;
+    type: 'group';
+};
+export type ProgressRopeProps = {
+    /**
+     * Current active step (zero-indexed)
+     */
+    current?: number;
+    /**
+     * Data
+     */
+    data?: (ProgressRopeStepItem | {
+        steps: ProgressRopeStepItem[];
+        text: ReactNode;
+        type: 'group';
+    })[];
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/progress-rope/progress-rope.types.js

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

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

@@ -11,7 +11,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     },
     argTypes: {
         isDisabled: {

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

@@ -11,7 +11,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     },
     args: {
         label: React.createElement("h2", null, "Test")

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

@@ -0,0 +1,2 @@
+export { Repeater } from './repeater.component.js';
+export { type RepeaterProps } from './repeater.types.js';

package/dist/components/repeater/index.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type RepeaterProps } from './repeater.types.js';
+export declare function Repeater({ addText, indexTag: ItemIndex, children, separator, className, }: RepeaterProps): JSX.Element;

package/dist/components/repeater/repeater.component.js

@@ -0,0 +1,141 @@
+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, useRef, useState } from 'react';
+import { generateID } from '../../utils/index.js';
+import { Button } from '../button/index.js';
+import { AddCircleIcon, RemoveCircleIcon } from '../icon/index.js';
+import { VisuallyHidden } from '../index.js';
+import { styles as repeaterStyles } from './repeater.styles.js';
+const loadAnimations = ()=>import('./repeater.utils.js').then((res)=>res.default);
+export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = 'h3' , children , separator =false , className  }) {
+    const [items, setItems] = useState([
+        {
+            id: generateID()
+        }
+    ]);
+    const [action, setAction] = useState({
+        type: '',
+        index: 0
+    });
+    const [status, setStatus] = useState('');
+    const refArr = useRef([]);
+    const handleAdd = useCallback(()=>{
+        setItems([
+            ...items,
+            {
+                id: generateID()
+            }
+        ]);
+        setAction({
+            type: 'add',
+            index: items.length
+        });
+    }, [
+        items
+    ]);
+    const handleRemove = useCallback((id, index)=>{
+        const newItems = items.filter((item)=>item.id !== id);
+        setItems(newItems);
+        setAction({
+            type: 'remove',
+            index,
+            id
+        });
+    }, [
+        items
+    ]);
+    useEffect(()=>{
+        if (action.type === 'add') {
+            var _refArr_current_;
+            (_refArr_current_ = refArr.current[items.length - 1]) === null || _refArr_current_ === void 0 ? void 0 : _refArr_current_.focus();
+            setStatus(`Item added`);
+        }
+        if (action.type === 'remove') {
+            var _refArr_current_focusIndex;
+            refArr.current.splice(action.index, 1);
+            const focusIndex = action.index === 0 ? 0 : action.index - 1;
+            (_refArr_current_focusIndex = refArr.current[focusIndex]) === null || _refArr_current_focusIndex === void 0 ? void 0 : _refArr_current_focusIndex.focus();
+            setStatus(`Item ${action.index + 1} removed`);
+        }
+    }, [
+        items.length,
+        action
+    ]);
+    const Tag = separator ? 'ol' : 'ul';
+    const styles = repeaterStyles({
+        separator
+    });
+    return React.createElement("div", {
+        className: styles.base({
+            className
+        })
+    }, React.createElement(Tag, {
+        className: styles.list()
+    }, React.createElement(LazyMotion, {
+        features: loadAnimations
+    }, React.createElement(AnimatePresence, null, items.map((item, index)=>{
+        return React.createElement(m.li, {
+            initial: {
+                opacity: 1
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: {
+                duration: 0.15
+            },
+            key: index
+        }, React.createElement("div", {
+            ref: (el)=>{
+                refArr.current[index] = el;
+            },
+            tabIndex: -1,
+            className: styles.item()
+        }, separator && React.createElement(ItemIndex, {
+            className: styles.itemIndex()
+        }, index + 1, "."), React.createElement("div", {
+            className: styles.content()
+        }, children), items.length > 1 && React.createElement(Button, {
+            className: styles.removeBtn(),
+            "aria-label": `remove item ${index + 1}`,
+            iconBefore: (props)=>React.createElement(RemoveCircleIcon, _extends({}, props, {
+                    "aria-hidden": true,
+                    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/repeater/repeater.stories.d.ts

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Repeater } from './repeater.component.js';
+declare const meta: Meta<typeof Repeater>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Example using the separator prop
+ */
+export declare const SeparatedRepeater: Story;