@westpac/ui 0.2.1 → 0.4.0

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

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

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

@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        circle: 'relative z-10 h-[14px] w-[14px] border-2 bg-white transition-colors',
+        circleWrapper: '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 after:absolute after:inset-y-0 after:left-[6px] after:z-[1] after:block after:translate-y-1/2 after:border-l-2 after:transition-colors',
+        stepsWrapper: 'relative overflow-hidden transition-all'
+    },
+    variants: {
+        firstItem: {
+            true: {
+                circleWrapper: 'before:hidden'
+            },
+            false: {}
+        },
+        state: {
+            current: {
+                base: 'font-bold text-primary',
+                circle: 'border-primary bg-white',
+                circleWrapper: 'before:border-solid before:border-primary after:border-solid after:border-primary'
+            },
+            visited: {
+                base: 'before:border-solid before:border-primary',
+                circle: 'border-[3px] border-primary bg-primary',
+                circleWrapper: 'text-text before:border-solid before:border-primary after:border-solid after:border-primary'
+            },
+            'non-visited': {
+                base: 'before:border-borderDark',
+                circleWrapper: 'text-muted-90 after:border-dotted after:border-borderDark',
+                circle: 'border-borderDark bg-white'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { ProgressRopeStepItem } from '../../progress-rope.types.js';
+import { styles } from './progress-rope-group-step.styles.js';
+export type ProgressRopeGroupStepProps = {
+    /**
+     * Children
+     */
+    children: ReactNode;
+    /**
+     * currentKey
+     */
+    currentKey?: number;
+    /**
+     * Boolean to tell if it is the first item of the rope
+     */
+    firstItem?: boolean;
+    /**
+     * Furtherst visited step
+     */
+    furthestVisitedStep?: number;
+    /**
+     * Trigger when the user try to open/close the group
+     */
+    onToggle?: () => any;
+    /**
+     * Boolean to tell if group is expanded
+     */
+    opened?: boolean;
+    /**
+     * Steps to render
+     */
+    steps: (ProgressRopeStepItem & {
+        index: number;
+    })[];
+} & VariantProps<typeof styles>;

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

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

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.utils.d.ts

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

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.utils.js

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ProgressRopeStepProps } from './progress-rope-step.types.js';
+export declare function ProgressRopeStep({ className, current, visited, tag: Tag, type, size, children, firstItem, ...props }: ProgressRopeStepProps): JSX.Element;

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/components/radio/radio.styles.js

@@ -11,7 +11,7 @@ export const styles = tv({
         isDisabled: {
             true: {
                 labelText: 'text-muted',
-                selector: 'bg-border-20 border-border before:bg-border'
+                selector: 'border-border bg-border-20 before:bg-border'
             },
             false: {
                 base: 'hover:cursor-pointer'