@westpac/ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,57 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta } from '@storybook/react';
+import { Selector } from './selector.component.js';
+declare const meta: Meta<typeof Selector>;
+export default meta;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: () => JSX.Element;
+/**
+ * > Radio usage example
+ */
+export declare const RadioStory: () => JSX.Element;
+/**
+ * > Radio usage example
+ */
+export declare const CheckWithArrowStory: () => JSX.Element;
+/**
+ * > Radio with state usage example
+ */
+export declare const RadioWithStateStory: () => JSX.Element;
+/**
+ * > Check options with state usage example
+ */
+export declare const CheckboxWithStateStory: () => JSX.Element;
+/**
+ * > Default usage example
+ */
+export declare const LongTextStory: () => JSX.Element;
+/**
+ * > With hint text usage example
+ */
+export declare const WithHintTextStory: () => JSX.Element;
+/**
+ * > With pictogram usage example
+ */
+export declare const WithPictogramStory: () => JSX.Element;
+/**
+ * > With pictogram with different sizes usage example
+ */
+export declare const WithPictogramDifferentSizesStory: () => JSX.Element;
+/**
+ * > With icon and different size
+ */
+export declare const WithIconsDifferentSizesStory: () => JSX.Element;
+/**
+ * > With icon and secondary label
+ */
+export declare const WithIconsAndSecondaryLabelStory: () => JSX.Element;
+/**
+ * > Radio example with icons and secondary text
+ */
+export declare const RadioWithIconsAndSecondaryLabelStory: () => JSX.Element;
+/**
+ * > Disable state style example
+ */
+export declare const DisableStateStory: () => JSX.Element;

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 { };