@westpac/ui 0.3.0 → 0.5.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/skip-link/skip-link.stories.js

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

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

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

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: '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]',
+        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]',
         label: 'pr-1'
     },
     variants: {
@@ -27,7 +27,7 @@ export const styles = tv({
         },
         isSelected: {
             true: {
-                switchDiv: 'bg-hero border-hero after:left-full after:-translate-x-full'
+                switchDiv: 'border-hero bg-hero after:left-full after:-translate-x-full'
             }
         },
         isDisabled: {

package/dist/components/table/components/caption/caption.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "typography-body-8 mb-2 text-left font-light", {
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "typography-body-8 mb-2 text-left font-light group-first/panel:px-4 group-first/panel:pt-4 max-xsl:group-first/panel:px-2 max-xsl:group-first/panel:pt-2", {
     responsiveVariants: string[];
 }, {}, undefined>;

package/dist/components/table/components/caption/caption.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-8 mb-2 text-left font-light',
+    base: 'typography-body-8 mb-2 text-left font-light group-first/panel:px-4 group-first/panel:pt-4 max-xsl:group-first/panel:px-2 max-xsl:group-first/panel:pt-2',
     variants: {}
 }, {
     responsiveVariants: [

package/dist/components/table/components/cell/cell.styles.js

@@ -1,22 +1,22 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 border-border border border-x-0 border-b-[1px] border-t-0 p-2 text-left align-bottom'
+        base: 'typography-body-10 border border-x-0 border-b-[1px] border-t-0 border-border p-2 text-left align-bottom'
     },
     variants: {
         bordered: {
             true: {
-                base: 'border-x-1'
+                base: 'border-x'
             }
         },
         highlighted: {
             true: {
-                base: 'border-b-primary border border-b-[3px]'
+                base: 'border border-b-[3px] border-b-primary'
             }
         },
         highlightStart: {
             true: {
-                base: 'border-l-primary border border-b-[3px] border-l-[6px]'
+                base: 'border border-b-[3px] border-l-[6px] border-l-primary'
             }
         }
     }

package/dist/components/table/components/footer/footer.styles.js

@@ -1,12 +1,12 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'text-muted typography-body-10 p-2 text-left font-light'
+        base: 'typography-body-10 p-2 text-left font-light text-muted'
     },
     variants: {
         bordered: {
             true: {
-                base: 'border-border border'
+                base: 'border border-border'
             }
         }
     }

package/dist/components/table/components/header-cell/header-cell.styles.js

@@ -1,12 +1,12 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'text-text typography-body-10 border-hero border border-x-0 border-b-[3px] border-t-0 p-2 text-left align-bottom'
+        base: 'typography-body-10 border border-x-0 border-b-[3px] border-t-0 border-hero p-2 text-left align-bottom text-text'
     },
     variants: {
         bordered: {
             true: {
-                base: 'border-x-1 border-t-1 border-x-border border-t-border'
+                base: 'border-x border-t border-x-border border-t-border'
             }
         }
     }

package/dist/components/table/components/row/row.styles.js

@@ -6,12 +6,12 @@ export const styles = tv({
     variants: {
         striped: {
             true: {
-                base: 'even:bg-background hover:bg-default'
+                base: 'hover:bg-default even:bg-background'
             }
         },
         highlightedRow: {
             true: {
-                base: 'border-primary border border-b-[3px] border-l-[6px] border-r-0'
+                base: 'border border-b-[3px] border-l-[6px] border-r-0 border-primary'
             }
         }
     }

package/dist/components/table/table.stories.js

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

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

@@ -3,7 +3,7 @@ export const styles = tv({
     base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white focus:focus-outline',
     variants: {
         look: {
-            default: 'border border-border',
+            default: 'border border-border bg-white',
             material: ''
         },
         selected: {