@westpac/ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 0.5.0
+
+### Minor Changes
+
+- 473c0d6: added selector and repeater components
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/components/alert/alert.component.js

@@ -71,7 +71,8 @@ export function Alert({ look ='info' , mode ='box' , heading , headingTag: Headi
         size: {
             initial: 'small',
             xsl: 'medium'
-        }
+        },
+        look: "outlined"
     })), React.createElement("div", {
         className: styles.body()
     }, !!heading && React.createElement(HeadingTag, {

package/dist/components/alert/alert.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 relative mb-4 p-3 xsl:flex',
+        base: 'typography-body-10 relative mb-4 xsl:flex',
         icon: 'float-left mr-1 flex-none xsl:mr-2',
         body: 'relative flex-1 xsl:top-[0.125rem] [&_a]:underline',
         heading: 'typography-body-9 mb-2 font-bold',
@@ -27,7 +27,7 @@ export const styles = tv({
         },
         mode: {
             box: {
-                base: 'border-y'
+                base: 'border-y p-3'
             },
             text: {
                 base: 'bg-[transparent]'

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

@@ -14,10 +14,11 @@ function _extends() {
 }
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { generateID } from '../../utils/index.js';
+import { Button } from '../button/index.js';
 import { AddCircleIcon, ExpandLessIcon, ExpandMoreIcon, RemoveCircleIcon } from '../icon/index.js';
-import { Button, VisuallyHidden } from '../index.js';
+import { 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);
@@ -121,7 +122,7 @@ export function Compacta({ className , children , titleTag: Tag = 'h3' , addText
                     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`);
+                setStatus(`Item added`);
             }
             if (action.type === 'remove') {
                 headingRefs.current.splice(action.index, 1);

package/dist/components/flexi-cell/flexi-cell.component.js

@@ -16,11 +16,11 @@ import React, { forwardRef } from 'react';
 import { ArrowRightIcon } from '../icon/index.js';
 import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from './components/index.js';
 import { styles as flexiCellStyles } from './flexi-cell.styles.js';
-function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , before , body , after , withArrow , withBorder =false , href , ...props }, ref) {
+function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , before , body , after , withArrow , withBorder =false , href , withHoverEffect =false , ...props }, ref) {
     const styles = flexiCellStyles({
         className,
         withBorder,
-        isLink: !!href
+        isLink: !!href || withHoverEffect
     });
     return React.createElement(Tag, _extends({}, {
         ref

package/dist/components/flexi-cell/flexi-cell.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative flex gap-2 bg-white px-2 py-3 transition-colors focus:focus-outline',
+        base: 'relative flex gap-2 bg-white p-2 transition-colors focus:focus-outline md:p-3',
         bodyWrapper: 'flex flex-1 flex-col',
         badge: 'absolute right-0 top-0'
     },

package/dist/components/flexi-cell/flexi-cell.types.d.ts

@@ -42,6 +42,10 @@ type BaseFlexiCellProps = {
      * Adds a border radius and a border
      */
     withBorder?: boolean;
+    /**
+     * With hover style
+     */
+    withHoverEffect?: boolean;
 } & HTMLAttributes<HTMLOrSVGElement>;
 type FlexiCellAsLinkProps = {
     /**

package/dist/components/flexi-cell/index.d.ts

@@ -1,2 +1,3 @@
+export * from './components/index.js';
 export { FlexiCell } from './flexi-cell.component.js';
 export { type FlexiCellProps } from './flexi-cell.types.js';

package/dist/components/flexi-cell/index.js

@@ -1 +1,2 @@
+export * from './components/index.js';
 export { FlexiCell } from './flexi-cell.component.js';

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

@@ -232,4 +232,5 @@ export { RAMSLogoIcon } from './components/rams-logo-icon.js';
 export { STGLogoIcon } from './components/stg-logo-icon.js';
 export { WBCLogoIcon } from './components/wbc-logo-icon.js';
 export { WBGLogoIcon } from './components/wbg-logo-icon.js';
+export { Icon } from './icon.component.js';
 export { type IconProps } from './icon.types.js';

package/dist/components/icon/index.js

@@ -232,3 +232,4 @@ export { RAMSLogoIcon } from './components/rams-logo-icon.js';
 export { STGLogoIcon } from './components/stg-logo-icon.js';
 export { WBCLogoIcon } from './components/wbc-logo-icon.js';
 export { WBGLogoIcon } from './components/wbg-logo-icon.js';
+export { Icon } from './icon.component.js';

package/dist/components/index.d.ts

@@ -23,7 +23,7 @@ export * from './panel/index.js';
 export * from './collapsible/index.js';
 export * from './list/index.js';
 export * from './circle/index.js';
-export * from './flexi-cell/index.js';
+export { FlexiCell, type FlexiCellProps } from './flexi-cell/index.js';
 export * from './autocomplete/index.js';
 export * from './button-dropdown/index.js';
 export * from './form/index.js';
@@ -32,4 +32,6 @@ export * from './modal/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
 export * from './progress-rope/index.js';
+export * from './selector/index.js';
 export * from './compacta/index.js';
+export * from './repeater/index.js';

package/dist/components/index.js

@@ -23,7 +23,7 @@ export * from './panel/index.js';
 export * from './collapsible/index.js';
 export * from './list/index.js';
 export * from './circle/index.js';
-export * from './flexi-cell/index.js';
+export { FlexiCell } from './flexi-cell/index.js';
 export * from './autocomplete/index.js';
 export * from './button-dropdown/index.js';
 export * from './form/index.js';
@@ -32,4 +32,6 @@ export * from './modal/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
 export * from './progress-rope/index.js';
+export * from './selector/index.js';
 export * from './compacta/index.js';
+export * from './repeater/index.js';

package/dist/components/list/components/item/item.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 pl-[1.1875rem]',
+        base: 'pl-[1.1875rem]',
         bullet: 'absolute block border',
         link: 'text-text hover:cursor-pointer hover:underline focus:focus-outline',
         wrapper: 'relative'

package/dist/components/list/list.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'list-none'
+        base: 'typography-body-10 list-none'
     },
     variants: {
         type: {

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;

package/dist/components/repeater/repeater.stories.js

@@ -0,0 +1,34 @@
+import { Form, Input } from '../index.js';
+import { Repeater } from './repeater.component.js';
+const meta = {
+    title: 'Example/Repeater',
+    component: Repeater,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-5"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    },
+    args: {
+        children: React.createElement(Form, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: `test`
+        }, "Primary"), React.createElement(Form.Hint, null, "Primary title text"), React.createElement(Input, {
+            name: `test`,
+            onChange: (e)=>console.log(e)
+        })))
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {}
+};
+export const SeparatedRepeater = {
+    args: {
+        separator: true
+    }
+};

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

@@ -0,0 +1,39 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    separator: {
+        true: {
+            item: string;
+            content: string;
+            removeBtn: string;
+            footer: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    itemIndex: string;
+    content: string;
+    removeBtn: string;
+    footer: string;
+    addBtn: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    separator: {
+        true: {
+            item: string;
+            content: string;
+            removeBtn: string;
+            footer: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    itemIndex: string;
+    content: string;
+    removeBtn: string;
+    footer: string;
+    addBtn: string;
+}>;

package/dist/components/repeater/repeater.styles.js

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        list: 'm-0 list-none pl-0',
+        item: 'relative focus:outline-none',
+        itemIndex: 'mb-[1.125rem] font-bold',
+        content: '',
+        removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
+        footer: 'flex justify-between',
+        addBtn: 'height-auto p-0 no-underline hover:underline'
+    },
+    variants: {
+        separator: {
+            true: {
+                item: 'border-neutral border-t-2 pt-[0.625rem]',
+                content: 'p-[0_1.125rem_2.625rem]',
+                removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
+                footer: 'border-neutral border-t-2 pt-[0.875rem]'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+export type RepeaterProps = {
+    /**
+     * Text for add button
+     */
+    addText?: string;
+    /**
+     * Component to repeat
+     */
+    children: React.ReactNode;
+    /**
+     * Index heading tag to use for index on separator version
+     */
+    indexTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Enable separator version
+     */
+    separator?: boolean;
+} & HTMLAttributes<Element>;

package/dist/components/repeater/repeater.types.js

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

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

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

package/dist/components/repeater/repeater.utils.js

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

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

@@ -0,0 +1,2 @@
+export * from './selector-checkbox-group/index.js';
+export * from './selector-radio-group/index.js';

package/dist/components/selector/components/index.js

@@ -0,0 +1,2 @@
+export * from './selector-checkbox-group/index.js';
+export * from './selector-radio-group/index.js';

package/dist/components/selector/components/selector-checkbox-group/components/index.d.ts

@@ -0,0 +1 @@
+export * from './selector-checkbox-group-option/index.js';

package/dist/components/selector/components/selector-checkbox-group/components/index.js

@@ -0,0 +1 @@
+export * from './selector-checkbox-group-option/index.js';

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectorCheckboxGroupOption } from './selector-checkbox-group-option.component.js';
+export { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/index.js

@@ -0,0 +1 @@
+export { SelectorCheckboxGroupOption } from './selector-checkbox-group-option.component.js';

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FlexiCell } from '../../../../../../components/index.js';
+import { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';
+export declare const SelectorCheckboxGroupOption: React.ForwardRefExoticComponent<SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
+    Adornment: typeof FlexiCell.Adornment;
+    Body: typeof FlexiCell.Body;
+    Button: typeof FlexiCell.Button;
+    Circle: typeof FlexiCell.Circle;
+    Footer: typeof FlexiCell.Footer;
+    Hint: typeof FlexiCell.Hint;
+    Label: typeof FlexiCell.Label;
+};

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.js

@@ -0,0 +1,67 @@
+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, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from '../../../../../../components/flexi-cell/index.js';
+import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
+import { FlexiCell } from '../../../../../../components/index.js';
+import { SelectorCheckboxGroupContext } from '../../selector-checkbox-group.component.js';
+import { styles as selectorCheckboxGroupOptionStyles } from './selector-checkbox-group-option.styles.js';
+function BaseSelectorCheckboxGroupOption({ className , children , value , withBorder =true , withArrow , after , badge , badgeZIndex , before , body =true , checkIcon ='checkbox' , ...props }, ref) {
+    const state = useContext(SelectorCheckboxGroupContext);
+    const localRef = useRef(null);
+    const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
+        ...props,
+        value,
+        children
+    }, state, localRef);
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const styles = selectorCheckboxGroupOptionStyles({
+        className,
+        isSelected,
+        isFocusVisible,
+        isDisabled,
+        checkIcon
+    });
+    const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
+    return React.createElement(FlexiCell, {
+        after: React.createElement("div", {
+            className: "flex gap-2"
+        }, after, React.createElement(FinalIcon, {
+            "aria-hidden": "true",
+            className: styles.icon({})
+        })),
+        badge: badge,
+        badgeZIndex: badgeZIndex,
+        before: before,
+        body: body,
+        withBorder: withBorder,
+        withArrow: withArrow,
+        tag: "label",
+        ref: ref,
+        withHoverEffect: true,
+        className: styles.base({})
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+        ref: localRef
+    }))), children);
+}
+export const SelectorCheckboxGroupOption = forwardRef(BaseSelectorCheckboxGroupOption);
+SelectorCheckboxGroupOption.Body = FlexiCellBody;
+SelectorCheckboxGroupOption.Footer = FlexiCellFooter;
+SelectorCheckboxGroupOption.Adornment = FlexiCellAdornment;
+SelectorCheckboxGroupOption.Hint = FlexiCellHint;
+SelectorCheckboxGroupOption.Label = FlexiCellLabel;
+SelectorCheckboxGroupOption.Button = FlexiCellButton;
+SelectorCheckboxGroupOption.Circle = FlexiCellCircle;

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.styles.d.ts

@@ -0,0 +1,59 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    checkIcon: {
+        arrow: {
+            icon: string;
+        };
+        checkbox: {};
+    };
+    isSelected: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    checkIcon: {
+        arrow: {
+            icon: string;
+        };
+        checkbox: {};
+    };
+    isSelected: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}>;