@westpac/ui 0.3.0 → 0.5.0

package/dist/components/popover/components/panel/panel.component.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FocusScope } from 'react-aria';
+import { Button } from '../../../button/index.js';
+import { CloseIcon } from '../../../icon/index.js';
+import { styles as panelStyles } from './panel.styles.js';
+export function Panel({ state , heading , headingTag: Tag = 'h1' , content , placement ='top' , id  }) {
+    const styles = panelStyles({
+        placement
+    });
+    return React.createElement(FocusScope, {
+        restoreFocus: true
+    }, React.createElement("div", {
+        className: styles.popover(),
+        id: id
+    }, React.createElement("div", {
+        className: styles.content()
+    }, React.createElement(Tag, {
+        className: styles.heading()
+    }, heading), React.createElement("div", {
+        className: styles.body()
+    }, content), React.createElement(Button, {
+        look: "link",
+        onClick: state.close,
+        className: styles.closeBtn(),
+        iconAfter: ()=>React.createElement(CloseIcon, {
+                color: "muted",
+                size: "small",
+                "aria-hidden": true
+            }),
+        "aria-label": "Close popover"
+    })), React.createElement("div", {
+        "aria-hidden": true,
+        className: styles.arrow()
+    })));
+}

package/dist/components/popover/components/panel/panel.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    placement: {
+        top: {
+            popover: string;
+            arrow: string;
+        };
+        bottom: {
+            popover: string;
+            arrow: string;
+        };
+    };
+}, {
+    base: string;
+    popover: string;
+    arrow: string;
+    closeBtn: string;
+    content: string;
+    heading: string;
+    body: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    placement: {
+        top: {
+            popover: string;
+            arrow: string;
+        };
+        bottom: {
+            popover: string;
+            arrow: string;
+        };
+    };
+}, {
+    base: string;
+    popover: string;
+    arrow: string;
+    closeBtn: string;
+    content: string;
+    heading: string;
+    body: string;
+}>;

package/dist/components/popover/components/panel/panel.styles.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+        arrow: 'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+        closeBtn: 'focus:focus-outline absolute right-1 top-1 m-1 p-0 hover:opacity-80',
+        content: 'w-[17.625rem] py-4 pl-3 pr-5',
+        heading: 'typography-body-9 mb-2 font-bold',
+        body: 'typography-body-10'
+    },
+    variants: {
+        placement: {
+            top: {
+                popover: 'bottom-full left-1/2 mb-[0.9375rem] -translate-x-1/2',
+                arrow: 'left-1/2 top-full -translate-x-1/2 after:top-[-12px] after:translate-x-[-7px]'
+            },
+            bottom: {
+                popover: 'left-1/2 top-full mt-[0.9375rem] -translate-x-1/2',
+                arrow: 'bottom-full left-1/2 -translate-x-1/2 rotate-180 after:bottom-[1px] after:translate-x-[-7px]'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/popover/components/panel/panel.types.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+export type PanelProps = {
+    /**
+     * Content of popover
+     */
+    content: string;
+    /**
+     * Heading for popover box
+     */
+    heading?: string;
+    /**
+     * Tag to render
+     */
+    headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+    /**
+     * Overlay trigger state
+     */
+    placement?: 'top' | 'bottom';
+    /**
+     * Overlay trigger state
+     */
+    state: OverlayTriggerState;
+} & HTMLAttributes<Element>;

package/dist/components/popover/components/panel/panel.types.js

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

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

@@ -0,0 +1,2 @@
+export { Popover } from './popover.component.js';
+export { type PopoverProps } from './popover.types.js';

package/dist/components/popover/index.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PopoverProps } from './popover.types.js';
+export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, open, icon, }: PopoverProps): JSX.Element;

package/dist/components/popover/popover.component.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useId } from 'react';
+import { useOverlayTriggerState } from 'react-stately';
+import { Button } from '../button/index.js';
+import { Panel } from './components/panel/panel.component.js';
+import { styles as popoverStyles } from './popover.styles.js';
+export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , open =false , icon  }) {
+    const state = useOverlayTriggerState({
+        defaultOpen: open
+    });
+    const panelId = useId();
+    const styles = popoverStyles({});
+    const handleClick = useCallback(()=>{
+        onClick();
+        state.toggle();
+    }, [
+        onClick,
+        state.isOpen
+    ]);
+    const keyHandler = useCallback((event)=>{
+        if (state.isOpen && event.key === 'Escape') state.close();
+    }, [
+        state.isOpen
+    ]);
+    useEffect(()=>{
+        window.document.addEventListener('keydown', keyHandler);
+        return ()=>{
+            window.document.removeEventListener('keydown', keyHandler);
+        };
+    }, [
+        state.isOpen
+    ]);
+    return React.createElement("div", {
+        className: styles.base({
+            className
+        })
+    }, React.createElement(Button, {
+        look: icon && !children ? 'link' : look,
+        iconAfter: icon,
+        className: styles.button(),
+        "aria-expanded": state.isOpen,
+        "aria-controls": panelId,
+        onClick: handleClick
+    }, children), state.isOpen && React.createElement(Panel, {
+        placement: placement,
+        heading: heading ? heading : '',
+        headingTag: headingTag,
+        content: content,
+        state: state,
+        id: panelId
+    }));
+}

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

@@ -0,0 +1,26 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Popover } from './popover.component.js';
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Using icon as trigger
+ */
+export declare const PopoverIconTrigger: Story;
+/**
+ * > Default open
+ */
+export declare const DefaultOpenPopover: Story;
+/**
+ * > No heading
+ */
+export declare const PopoverNoHeading: Story;
+/**
+ * > Top and bottom popover
+ */
+export declare const PopoverPlacement: () => JSX.Element;

package/dist/components/popover/popover.stories.js

@@ -0,0 +1,60 @@
+import { HelpIcon } from '../icon/index.js';
+import { Popover } from './popover.component.js';
+const popoverContent = 'Small overlays of content for housing secondary information. These are often used to provide explanatory information for complex ideas.';
+const meta = {
+    title: 'Example/Popover',
+    component: Popover,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-[200px]"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    },
+    args: {
+        content: popoverContent,
+        heading: 'Test Heading'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: 'Click Me'
+    }
+};
+export const PopoverIconTrigger = {
+    args: {
+        icon: ()=>React.createElement(HelpIcon, {
+                color: "hero"
+            })
+    }
+};
+export const DefaultOpenPopover = {
+    args: {
+        children: 'Click Me',
+        open: true
+    }
+};
+export const PopoverNoHeading = {
+    args: {
+        children: 'Click Me',
+        open: true,
+        heading: undefined
+    }
+};
+export const PopoverPlacement = ()=>React.createElement("div", null, React.createElement(Popover, {
+        className: "mr-3",
+        heading: "Heading",
+        placement: "top",
+        content: popoverContent,
+        open: true
+    }, "Top Popover"), React.createElement(Popover, {
+        placement: "bottom",
+        heading: "Heading",
+        content: popoverContent,
+        open: true
+    }, "Bottom Popover"));

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

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

package/dist/components/popover/popover.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'relative inline-block',
+        button: 'focus:focus-outline'
+    },
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,37 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonProps } from '../button/index.js';
+import { IconProps } from '../icon/icon.types.js';
+export type PopoverProps = {
+    /**
+     * Button text
+     */
+    children?: ReactNode;
+    /**
+     * Content of popover
+     */
+    content: string;
+    /**
+     * Heading for popover box
+     */
+    heading?: string;
+    /**
+     * Tag to render
+     */
+    headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+    /**
+     * Use an icon as the button
+     */
+    icon?: (props: IconProps) => JSX.Element;
+    /**
+     * A function for the onClick event
+     */
+    onClick?: () => void;
+    /**
+     * Whether popover is open by default
+     */
+    open?: boolean;
+    /**
+     * Placement of popover
+     */
+    placement?: 'top' | 'bottom';
+} & HTMLAttributes<Element> & Pick<ButtonProps, 'look'>;

package/dist/components/popover/popover.types.js

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

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

@@ -13,7 +13,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     }
 };
 export default meta;

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

@@ -1,8 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'border-border box-border w-full overflow-hidden border bg-white p-[0.0625rem]',
-        innerBar: 'bg-hero box-border h-full text-right leading-tight transition-[width] duration-[.6s]',
+        base: 'box-border w-full overflow-hidden border border-border bg-white p-[0.0625rem]',
+        innerBar: 'box-border h-full bg-hero text-right leading-tight transition-[width] duration-[.6s]',
         label: 'typography-body-10 mx-[0.75rem] my-0 block font-bold text-white'
     },
     variants: {

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

@@ -0,0 +1,2 @@
+export * from './progress-rope-step/index.js';
+export * from './progress-rope-group-step/index.js';

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

@@ -0,0 +1,2 @@
+export * from './progress-rope-step/index.js';
+export * from './progress-rope-group-step/index.js';

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

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

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ProgressRopeGroupStepProps } from './progress-rope-group-step.types.js';
+export declare function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, }: ProgressRopeGroupStepProps): JSX.Element;

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

@@ -0,0 +1,92 @@
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useId, useMemo } from 'react';
+import { Circle, VisuallyHidden } from '../../../index.js';
+import { ProgressRopeStep } from '../index.js';
+import { styles as progressRopeGroupStyles } from './progress-rope-group-step.styles.js';
+const loadAnimations = ()=>import('./progress-rope-group-step.utils.js').then((res)=>res.default);
+export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep , children , firstItem , opened , onToggle  }) {
+    const id = useId();
+    const stepsContainerID = `progress-rope-group-steps-container-${id}`;
+    const current = useMemo(()=>{
+        return !!steps.find((step)=>step.index === currentKey);
+    }, [
+        steps,
+        currentKey
+    ]);
+    const visited = useMemo(()=>{
+        return !!steps.find((step)=>(furthestVisitedStep || 0) >= step.index);
+    }, [
+        steps,
+        furthestVisitedStep
+    ]);
+    const visuallyHiddenMessage = useMemo(()=>{
+        if (steps.slice(-1)[0].index < (furthestVisitedStep || 0)) {
+            return 'completed';
+        }
+        if (current) {
+            return 'in progress';
+        }
+        return 'not started';
+    }, [
+        steps,
+        furthestVisitedStep
+    ]);
+    const state = useMemo(()=>{
+        if (current) {
+            return 'current';
+        }
+        if (visited) {
+            return 'visited';
+        }
+        return 'non-visited';
+    }, [
+        current,
+        visited
+    ]);
+    console.log('state', state);
+    const styles = progressRopeGroupStyles({
+        firstItem,
+        state
+    });
+    return React.createElement(React.Fragment, null, React.createElement("button", {
+        "aria-expanded": opened,
+        className: styles.circleWrapper({}),
+        onClick: onToggle,
+        "aria-controls": stepsContainerID
+    }, React.createElement(Circle, {
+        className: styles.circle(),
+        "aria-hidden": "true"
+    }), children, React.createElement(VisuallyHidden, null, ", ", visuallyHiddenMessage)), React.createElement(LazyMotion, {
+        features: loadAnimations
+    }, React.createElement(AnimatePresence, {
+        initial: false
+    }, opened && React.createElement(m.div, {
+        initial: {
+            height: 0,
+            overflow: 'hidden'
+        },
+        animate: {
+            height: 'auto'
+        },
+        exit: {
+            height: 0,
+            overflow: 'hidden'
+        },
+        transition: {
+            duration: 0.2,
+            ease: 'easeInOut'
+        }
+    }, React.createElement("ul", {
+        className: styles.stepsWrapper({}),
+        id: stepsContainerID,
+        "aria-hidden": !opened
+    }, steps.map((step, index)=>React.createElement("li", {
+            key: step.index
+        }, React.createElement(ProgressRopeStep, {
+            firstItem: index === 0,
+            size: "small",
+            onClick: (furthestVisitedStep || 0) >= step.index ? step.onClick : undefined,
+            current: step.index === currentKey,
+            visited: (furthestVisitedStep || 0) >= step.index
+        }, step.text))))))));
+}

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;