@westpac/ui 0.4.0 → 0.6.0

package/dist/components/selector/selector.stories.js

@@ -0,0 +1,515 @@
+import { useState } from 'react';
+import { PersonIcon } from '../icon/index.js';
+import { VisuallyHidden } from '../index.js';
+import { BusPictogram, ChatPictogram, PizzaPictogram } from '../pictogram/index.js';
+import { Selector } from './selector.component.js';
+const HERE_IS_A_LABEL_A = 'Here is a label A';
+const HERE_IS_A_LABEL_B = 'Here is a label B';
+const HERE_IS_A_LABEL_C = 'Here is a label C';
+const meta = {
+    title: 'Example/Selector',
+    component: Selector,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'padded'
+    }
+};
+export default meta;
+export const DefaultStory = ()=>{
+    return React.createElement(Selector, {
+        type: "checkbox"
+    }, [
+        {
+            key: 'A',
+            disabled: false
+        },
+        {
+            key: 'B',
+            disabled: false
+        },
+        {
+            key: 'C',
+            disabled: false
+        },
+        {
+            key: 'D',
+            disabled: true
+        }
+    ].map(({ key , disabled  })=>React.createElement(Selector.Checkbox, {
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, "Something ", key))));
+};
+export const RadioStory = ()=>{
+    return React.createElement(Selector, {
+        type: "radio"
+    }, [
+        {
+            key: 'A',
+            disabled: false
+        },
+        {
+            key: 'B',
+            disabled: false
+        },
+        {
+            key: 'C',
+            disabled: false
+        },
+        {
+            key: 'D',
+            disabled: true
+        }
+    ].map(({ key , disabled  })=>React.createElement(Selector.Radio, {
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, "Something ", key))));
+};
+export const CheckWithArrowStory = ()=>{
+    return React.createElement(Selector, {
+        type: "radio"
+    }, [
+        {
+            key: 'A',
+            disabled: false
+        },
+        {
+            key: 'B',
+            disabled: false
+        },
+        {
+            key: 'C',
+            disabled: false
+        },
+        {
+            key: 'D',
+            disabled: true
+        }
+    ].map(({ key , disabled  })=>React.createElement(Selector.Radio, {
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled,
+            checkIcon: "arrow"
+        }, React.createElement(Selector.Label, null, "Something ", key))));
+};
+export const RadioWithStateStory = ()=>{
+    const [selectedOption, setSelectedOption] = useState();
+    return React.createElement(React.Fragment, null, selectedOption, React.createElement(Selector, {
+        type: "radio",
+        value: selectedOption,
+        onChange: (value)=>{
+            setSelectedOption(value);
+        }
+    }, [
+        {
+            key: 'A',
+            disabled: false
+        },
+        {
+            key: 'B',
+            disabled: false
+        },
+        {
+            key: 'C',
+            disabled: false
+        },
+        {
+            key: 'D',
+            disabled: true
+        }
+    ].map(({ key , disabled  })=>React.createElement(Selector.Radio, {
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, "Something ", key)))));
+};
+export const CheckboxWithStateStory = ()=>{
+    const [selectedOptions, setSelectedOptions] = useState();
+    return React.createElement(React.Fragment, null, selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.join(','), React.createElement(Selector, {
+        type: "checkbox",
+        value: selectedOptions,
+        onChange: (value)=>{
+            setSelectedOptions(value);
+        }
+    }, [
+        {
+            key: 'A',
+            disabled: false
+        },
+        {
+            key: 'B',
+            disabled: false
+        },
+        {
+            key: 'C',
+            disabled: false
+        },
+        {
+            key: 'D',
+            disabled: true
+        }
+    ].map(({ key , disabled  })=>React.createElement(Selector.Checkbox, {
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, "Something ", key)))));
+};
+export const LongTextStory = ()=>{
+    return React.createElement(Selector, {
+        type: "checkbox"
+    }, [
+        {
+            key: 'A',
+            disabled: false
+        },
+        {
+            key: 'B',
+            disabled: false
+        },
+        {
+            key: 'C',
+            disabled: false
+        },
+        {
+            key: 'D',
+            disabled: true
+        }
+    ].map(({ key , disabled  })=>React.createElement(Selector.Checkbox, {
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores architecto eum aperiam consectetur quibusdam. Laboriosam saepe, explicabo odio quis doloribus consequuntur quae et necessitatibus quasi similique. Debitis non quo recusandae. ", key))));
+};
+export const WithHintTextStory = ()=>{
+    return React.createElement(Selector, {
+        type: "checkbox"
+    }, [
+        {
+            label: HERE_IS_A_LABEL_A,
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'A',
+            disabled: false
+        },
+        {
+            label: HERE_IS_A_LABEL_B,
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'B',
+            disabled: false
+        },
+        {
+            label: HERE_IS_A_LABEL_C,
+            hint: '',
+            key: 'C',
+            disabled: false
+        }
+    ].map(({ key , disabled , hint , label  })=>React.createElement(Selector.Checkbox, {
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
+};
+export const WithPictogramStory = ()=>{
+    return React.createElement(Selector, {
+        type: "checkbox"
+    }, [
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PizzaPictogram, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_A,
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'A',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(ChatPictogram, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_B,
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'B',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(BusPictogram, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_C,
+            hint: '',
+            key: 'C',
+            disabled: false
+        }
+    ].map(({ key , disabled , hint , label , before  })=>React.createElement(Selector.Checkbox, {
+            before: before,
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
+};
+export const WithPictogramDifferentSizesStory = ()=>{
+    return React.createElement(Selector, {
+        type: "checkbox"
+    }, [
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PizzaPictogram, {
+                className: "h-15 w-15"
+            })),
+            label: HERE_IS_A_LABEL_A,
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'A',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(ChatPictogram, {
+                className: "h-10 w-10"
+            })),
+            label: HERE_IS_A_LABEL_B,
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'B',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(BusPictogram, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_C,
+            hint: '',
+            key: 'C',
+            disabled: false
+        }
+    ].map(({ key , disabled , hint , label , before  })=>React.createElement(Selector.Checkbox, {
+            before: before,
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
+};
+export const WithIconsDifferentSizesStory = ()=>{
+    return React.createElement(Selector, {
+        type: "checkbox"
+    }, [
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-15 w-15"
+            })),
+            label: HERE_IS_A_LABEL_A,
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'A',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-10 w-10"
+            })),
+            label: HERE_IS_A_LABEL_B,
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'B',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_C,
+            hint: '',
+            key: 'C',
+            disabled: false
+        }
+    ].map(({ key , disabled , hint , label , before  })=>React.createElement(Selector.Checkbox, {
+            before: before,
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
+};
+export const WithIconsAndSecondaryLabelStory = ()=>{
+    return React.createElement(Selector, {
+        type: "checkbox"
+    }, [
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_A,
+            after: React.createElement(Selector.Label, null, "$200,000.00"),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'A',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_B,
+            after: React.createElement(Selector.Label, null, "$200,000.00"),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'B',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_C,
+            after: React.createElement(Selector.Adornment, {
+                align: "center"
+            }, React.createElement("span", null, "$200,000.00")),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 7643123"),
+            key: 'C',
+            disabled: false
+        }
+    ].map(({ key , disabled , hint , label , before , after  })=>React.createElement(Selector.Checkbox, {
+            before: before,
+            after: after,
+            key: key,
+            body: true,
+            value: key,
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
+};
+export const RadioWithIconsAndSecondaryLabelStory = ()=>{
+    return React.createElement(Selector, {
+        type: "radio"
+    }, [
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_A,
+            after: React.createElement(Selector.Label, null, "$200,000.00"),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'A',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_B,
+            after: React.createElement(Selector.Label, null, "$200,000.00"),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'B',
+            disabled: false
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_C,
+            after: React.createElement(Selector.Adornment, {
+                align: "center"
+            }, React.createElement("span", null, "$200,000.00")),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 7643123"),
+            key: 'C',
+            disabled: false
+        }
+    ].map(({ key , disabled , hint , label , before , after  })=>React.createElement(Selector.Radio, {
+            before: before,
+            after: after,
+            key: key,
+            body: true,
+            value: key,
+            checkIcon: "arrow",
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
+};
+export const DisableStateStory = ()=>{
+    return React.createElement(Selector, {
+        type: "radio",
+        value: "A"
+    }, [
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_A,
+            after: React.createElement(Selector.Label, null, "$200,000.00"),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'A',
+            disabled: true
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_B,
+            after: React.createElement(Selector.Label, null, "$200,000.00"),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 123456"),
+            key: 'B',
+            disabled: true
+        },
+        {
+            before: React.createElement(Selector.Adornment, {
+                align: "top"
+            }, React.createElement(PersonIcon, {
+                className: "h-5 w-5"
+            })),
+            label: HERE_IS_A_LABEL_C,
+            after: React.createElement(Selector.Adornment, {
+                align: "center"
+            }, React.createElement("span", null, "$200,000.00")),
+            hint: React.createElement(React.Fragment, null, React.createElement(VisuallyHidden, null, "Bank Account"), "123-456 7643123"),
+            key: 'C',
+            disabled: true
+        }
+    ].map(({ key , disabled , hint , label , before , after  })=>React.createElement(Selector.Radio, {
+            before: before,
+            after: after,
+            key: key,
+            body: true,
+            value: key,
+            checkIcon: "arrow",
+            isDisabled: disabled
+        }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
+};

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { type SelectorCheckboxGroupProps, type SelectorRadioGroupProps } from './components/index.js';
+export type SelectorPropsPerType = {
+    checkbox: {
+        children: ReactNode;
+        /**
+         * Type checkbox
+         */
+        type: 'checkbox';
+    } & SelectorCheckboxGroupProps;
+    radio: {
+        children: ReactNode;
+        /**
+         * Type Radio
+         */
+        type: 'radio';
+    } & SelectorRadioGroupProps;
+};
+export type SelectorPropsType = keyof SelectorPropsPerType;
+export type SelectorProps<K extends SelectorPropsType = SelectorPropsType> = SelectorPropsPerType[K];

package/dist/components/selector/selector.types.js

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

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

@@ -1,3 +1,3 @@
 /// <reference types="react" resolution-mode="require"/>
 import { type SwitchProps } from './switch.types.js';
-export declare function Switch({ className, label, size, block, isDisabled, ...props }: SwitchProps): JSX.Element;
+export declare function Switch({ className, label, size, block, checked, isDisabled, ...props }: SwitchProps): JSX.Element;

package/dist/components/switch/switch.component.js

@@ -13,23 +13,27 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useId, useRef } from 'react';
-import { VisuallyHidden, useCheckbox, useFocusRing } from 'react-aria';
+import { VisuallyHidden, mergeProps, useCheckbox, useFocusRing } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { styles as switchStyles } from './switch.styles.js';
-export function Switch({ className , label , size ='medium' , block =false , isDisabled , ...props }) {
-    const state = useToggleState(props);
+export function Switch({ className , label , size ='medium' , block =false , checked =false , isDisabled , ...props }) {
+    const state = useToggleState({
+        ...props,
+        defaultSelected: checked
+    });
     const labelId = useId();
     const ref = useRef(null);
+    const { isSelected  } = state;
     const { inputProps  } = useCheckbox({
         isDisabled,
         'aria-labelledby': labelId,
+        defaultSelected: checked,
         ...props
     }, state, ref);
-    const { isSelected  } = state;
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocused , focusProps  } = useFocusRing();
     const styles = switchStyles({
         block,
-        isFocusVisible,
+        isFocused,
         isSelected,
         isDisabled,
         size
@@ -41,7 +45,7 @@ export function Switch({ className , label , size ='medium' , block =false , isD
     }, React.createElement("span", {
         className: styles.label(),
         id: labelId
-    }, label), React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+    }, label), React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
         ref: ref
     }))), React.createElement("div", {
         className: styles.switchDiv()

package/dist/components/switch/switch.stories.js

@@ -30,7 +30,7 @@ export const DefaultStory = {
 export const SelectedSwitch = {
     args: {
         label: 'eStatements',
-        isSelected: true
+        checked: true
     }
 };
 export const SwitchSizes = ()=>React.createElement("div", null, SIZES.map((size)=>React.createElement("div", {

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

@@ -13,7 +13,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             switchDiv: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             switchDiv: string;
         };
@@ -60,7 +60,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             switchDiv: string;
         };
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             switchDiv: string;
         };

package/dist/components/switch/switch.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'mb-1 inline-flex items-center hover:cursor-pointer',
-        switchDiv: 'relative box-content overflow-hidden border border-borderDark transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-[50%] after:bg-white after:shadow-switch after:transition-all after:duration-[.3s]',
+        switchDiv: 'border-borderDark after:shadow-switch relative box-content overflow-hidden border transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-[50%] after:bg-white after:transition-all after:duration-[.3s]',
         label: 'pr-1'
     },
     variants: {
@@ -20,7 +20,7 @@ export const styles = tv({
                 switchDiv: 'h-[2.875rem] w-14 rounded-[2.875rem] after:h-[2.875rem] after:w-[2.875rem]'
             }
         },
-        isFocusVisible: {
+        isFocused: {
             true: {
                 switchDiv: 'focus-outline'
             }

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

@@ -6,6 +6,10 @@ export type SwitchProps = {
      * Whether to display switch as block
      */
     block?: boolean;
+    /**
+     * Default checked
+     */
+    checked?: boolean;
     /**
      * Classname for overriding base style
      */
@@ -14,4 +18,4 @@ export type SwitchProps = {
      * Label for the switch
      */
     label: string;
-} & Omit<AriaCheckboxProps, 'children'> & Pick<VariantProps<typeof styles>, 'size'>;
+} & Omit<AriaCheckboxProps, 'children' | 'isSelected'> & Pick<VariantProps<typeof styles>, 'size'>;

package/dist/components/tabs/components/tab/tab.component.js

@@ -13,20 +13,22 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useRef } from 'react';
-import { useTab } from 'react-aria';
+import { mergeProps, useFocusRing, useTab } from 'react-aria';
 import { styles } from './tab.styles.js';
 export function Tab({ item: { key , rendered  } , state , orientation , justify , color , look  }) {
     const ref = useRef(null);
     const { tabProps  } = useTab({
         key
     }, state, ref);
-    return React.createElement("div", _extends({}, tabProps, {
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    return React.createElement("div", _extends({}, mergeProps(tabProps, focusProps), {
         className: styles({
             selected: key === state.selectedKey,
             orientation,
             justify,
             color,
-            look
+            look,
+            isFocusVisible
         }),
         ref: ref
     }), rendered);