@westpac/ui 0.3.0 → 0.5.0

package/dist/components/button-dropdown/button-dropdown.stories.js

@@ -0,0 +1,104 @@
+import { AndroidIcon } from '../icon/index.js';
+import { ButtonDropdown } from './button-dropdown.component.js';
+const meta = {
+    title: 'Example/ButtonDropdown',
+    component: ButtonDropdown,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+const LOOKS = [
+    'primary',
+    'hero',
+    'faint'
+];
+const SIZES = [
+    'small',
+    'medium',
+    'large',
+    'xlarge'
+];
+const DROPDOWNSIZE = [
+    'small',
+    'medium',
+    'large'
+];
+export const DefaultStory = {
+    args: {
+        text: 'Default Dropdown',
+        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")
+    }
+};
+export const StandardLooks = ()=>React.createElement("div", {
+        className: "flex gap-2"
+    }, LOOKS.map((look)=>React.createElement(ButtonDropdown, {
+            look: look,
+            text: look
+        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "..."))));
+export const SoftLooks = ()=>React.createElement("div", {
+        className: "flex gap-2"
+    }, LOOKS.map((look)=>React.createElement(ButtonDropdown, {
+            look: look,
+            soft: true,
+            text: look
+        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "..."))));
+export const ButtonSizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "font-bold"
+        }, size), React.createElement(ButtonDropdown, {
+            size: size,
+            text: size
+        }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")))));
+export const DropdownSizes = ()=>React.createElement("div", null, DROPDOWNSIZE.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "font-bold"
+        }, size), React.createElement(ButtonDropdown, {
+            dropdownSize: size,
+            text: size
+        }, size))));
+export const BlockDropdownButton = {
+    args: {
+        block: true,
+        text: 'Block Dropdown',
+        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")
+    }
+};
+export const DropdownButtonWithIcons = {
+    args: {
+        iconBefore: AndroidIcon,
+        text: 'Icon Dropdown',
+        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")
+    }
+};
+export const DropdownWithHeadings = {
+    args: {
+        text: 'Heading Dropdown',
+        block: false,
+        children: React.createElement(React.Fragment, null, React.createElement(ButtonDropdown.Heading, null, "Dropdown heading #1"), "Example dropdown content...", React.createElement(ButtonDropdown.Heading, null, "Dropdown heading #2"), "Example dropdown content...")
+    }
+};

package/dist/components/button-dropdown/button-dropdown.styles.d.ts

@@ -0,0 +1,43 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    dropdownSize: {
+        small: {
+            panel: string;
+        };
+        medium: {
+            panel: string;
+        };
+        large: {
+            panel: string;
+        };
+    };
+    block: {
+        true: {
+            panel: string;
+        };
+    };
+}, {
+    base: string;
+    panel: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    dropdownSize: {
+        small: {
+            panel: string;
+        };
+        medium: {
+            panel: string;
+        };
+        large: {
+            panel: string;
+        };
+    };
+    block: {
+        true: {
+            panel: string;
+        };
+    };
+}, {
+    base: string;
+    panel: string;
+}>;

package/dist/components/button-dropdown/button-dropdown.styles.js

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'focus:focus-outline',
+        panel: 'overflow-hidden'
+    },
+    variants: {
+        dropdownSize: {
+            small: {
+                panel: 'min-w-[8.125rem]'
+            },
+            medium: {
+                panel: 'min-w-[11.875rem]'
+            },
+            large: {
+                panel: 'min-w-[15.625rem]'
+            }
+        },
+        block: {
+            true: {
+                panel: ''
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/button-dropdown/button-dropdown.types.d.ts

@@ -0,0 +1,22 @@
+import { ButtonHTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { ButtonProps } from '../button/index.js';
+import { styles } from './button-dropdown.styles.js';
+export type ButtonDropdownProps = {
+    /**
+     * Look for button
+     */
+    look?: 'primary' | 'hero' | 'faint';
+    /**
+     * State of whether the Popover is open
+     */
+    open?: boolean;
+    /**
+     * Soft look button
+     */
+    soft?: boolean;
+    /**
+     * Button text
+     */
+    text: string;
+} & ButtonHTMLAttributes<Element> & Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> & VariantProps<typeof styles>;

package/dist/components/button-dropdown/button-dropdown.types.js

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

package/dist/components/button-dropdown/components/heading/heading.component.d.ts

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

package/dist/components/button-dropdown/components/heading/heading.component.js

@@ -0,0 +1,24 @@
+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 from 'react';
+import { styles as headingStyles } from './heading.styles.js';
+export function Heading({ className , tag: Tag = 'h1' , children , ...props }) {
+    const styles = headingStyles({});
+    return React.createElement(Tag, _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

package/dist/components/button-dropdown/components/heading/heading.styles.d.ts

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

package/dist/components/button-dropdown/components/heading/heading.styles.js

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'typography-body-10 text-hero bg-background -mx-1 mb-3 mt-4 p-[0.4375rem] font-medium first-of-type:-mt-1'
+    },
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/button-dropdown/components/heading/heading.types.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export type HeadingProps = {
+    /**
+     * The tag of the heading element for semantic reasons
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & HTMLAttributes<Element>;

package/dist/components/button-dropdown/components/heading/heading.types.js

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

package/dist/components/button-dropdown/components/heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from './heading.component.js';
+export { type HeadingProps } from './heading.types.js';

package/dist/components/button-dropdown/components/heading/index.js

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

package/dist/components/button-dropdown/components/panel/index.d.ts

@@ -0,0 +1,2 @@
+export { Panel } from './panel.component.js';
+export { type PanelProps } from './panel.types.js';

package/dist/components/button-dropdown/components/panel/index.js

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

package/dist/components/button-dropdown/components/panel/panel.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PanelProps } from './panel.types.js';
+export declare function Panel({ className, children, state, block, id, ...props }: PanelProps): JSX.Element;

package/dist/components/button-dropdown/components/panel/panel.component.js

@@ -0,0 +1,61 @@
+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, { useCallback, useEffect, useRef } from 'react';
+import { DismissButton, Overlay, mergeProps, useOverlay, usePopover } from 'react-aria';
+import { styles as panelStyles } from './panel.styles.js';
+export function Panel({ className , children , state , block , id , ...props }) {
+    var _props_triggerRef_current;
+    const popoverRef = useRef(null);
+    const { overlayProps  } = useOverlay({
+        shouldCloseOnBlur: true,
+        onClose: state.close
+    }, popoverRef);
+    const { popoverProps  } = usePopover({
+        popoverRef,
+        shouldFlip: false,
+        ...props
+    }, state);
+    const styles = panelStyles({});
+    const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
+    const focusHandler = useCallback((event)=>{
+        if (event.target && popoverRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
+    }, [
+        state.isOpen
+    ]);
+    useEffect(()=>{
+        window.document.addEventListener('focusin', focusHandler);
+        return ()=>{
+            window.document.removeEventListener('focusin', focusHandler);
+        };
+    }, []);
+    return React.createElement(Overlay, null, React.createElement("div", _extends({}, mergeProps(popoverProps, overlayProps), {
+        id: id,
+        "data-testid": "panel-dialog",
+        style: {
+            ...popoverProps.style,
+            width: block && width ? `${width}px` : undefined
+        },
+        ref: popoverRef,
+        className: styles.base({
+            className
+        })
+    }), React.createElement(DismissButton, {
+        onDismiss: state.close
+    }), React.createElement("div", {
+        className: styles.dialog()
+    }, children), React.createElement(DismissButton, {
+        onDismiss: state.close
+    })));
+}

package/dist/components/button-dropdown/components/panel/panel.styles.d.ts

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

package/dist/components/button-dropdown/components/panel/panel.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'border-border mt-[0.1875rem] rounded-[3px] border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+        dialog: 'focus:outline-none'
+    },
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/button-dropdown/components/panel/panel.types.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { AriaPopoverProps } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+import { ButtonProps } from '../../../button/index.js';
+export type PanelProps = {
+    /**
+     * State for the panel
+     */
+    state: OverlayTriggerState;
+} & HTMLAttributes<Element> & Omit<AriaPopoverProps, 'popoverRef'> & Pick<ButtonProps, 'block'>;

package/dist/components/button-dropdown/components/panel/panel.types.js

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

package/dist/components/button-dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonDropdown } from './button-dropdown.component.js';
+export { type ButtonDropdownProps } from './button-dropdown.types.js';

package/dist/components/button-dropdown/index.js

@@ -0,0 +1 @@
+export { ButtonDropdown } from './button-dropdown.component.js';

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

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

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

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

package/dist/components/checkbox-group/checkbox-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/checkbox-group/components/checkbox/checkbox.stories.js

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

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

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

package/dist/components/circle/circle.component.js

@@ -0,0 +1,23 @@
+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 from 'react';
+import { styles } from './circle.styles.js';
+export function Circle({ className , tag: Tag = 'div' , children , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

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

@@ -0,0 +1,9 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Circle } from './circle.component.js';
+declare const meta: Meta<typeof Circle>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;

package/dist/components/circle/circle.stories.js

@@ -0,0 +1,20 @@
+import { Circle } from './circle.component.js';
+const meta = {
+    title: 'Example/Circle',
+    component: Circle,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: 'GK'
+    }
+};

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

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/circle/circle.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './circle.styles.js';
+export type CircleProps = {
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/circle/circle.types.js

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

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

@@ -0,0 +1,2 @@
+export { Circle } from './circle.component.js';
+export { type CircleProps } from './circle.types.js';

package/dist/components/circle/index.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type CollapsibleProps } from './collapsible.types.js';
+export declare function Collapsible({ className, children, open, text, size, onClick, }: CollapsibleProps): JSX.Element;

package/dist/components/collapsible/collapsible.component.js

@@ -0,0 +1,68 @@
+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, useId, useState } from 'react';
+import { Button } from '../button/index.js';
+import { ExpandLessIcon, ExpandMoreIcon } from '../icon/index.js';
+import { styles as collapsibleStyles } from './collapsible.styles.js';
+const loadAnimations = ()=>import('./collapsible.utils.js').then((res)=>res.default);
+export function Collapsible({ className , children , open =false , text , size ='medium' , onClick =()=>undefined  }) {
+    const [contentOpen, setContentOpen] = useState(open);
+    const contentId = useId();
+    const ButtonIcon = (props)=>{
+        if (!contentOpen) return React.createElement(ExpandMoreIcon, _extends({
+            color: "link"
+        }, props));
+        return React.createElement(ExpandLessIcon, _extends({
+            color: "link"
+        }, props));
+    };
+    const handleClick = useCallback(()=>{
+        onClick();
+        setContentOpen((contentOpen)=>!contentOpen);
+    }, [
+        contentOpen
+    ]);
+    const styles = collapsibleStyles({
+        open: contentOpen
+    });
+    return React.createElement(React.Fragment, null, React.createElement(Button, {
+        className: styles.base({
+            className
+        }),
+        look: "link",
+        iconAfter: ButtonIcon,
+        onClick: handleClick,
+        size: size,
+        "aria-expanded": contentOpen,
+        "aria-controls": contentId
+    }, text), React.createElement(LazyMotion, {
+        features: loadAnimations
+    }, React.createElement(AnimatePresence, null, contentOpen && React.createElement(m.div, {
+        key: "content",
+        initial: {
+            opacity: 0
+        },
+        animate: {
+            opacity: 1
+        },
+        transition: {
+            duration: 0.15
+        },
+        className: styles.content(),
+        id: contentId,
+        "aria-hidden": !contentOpen
+    }, children))));
+}

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;