@westpac/ui 0.4.0 → 0.6.0

package/src/components/selector/selector.stories.tsx

@@ -0,0 +1,621 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+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: Meta<typeof Selector> = {
+  title: 'Example/Selector',
+  component: Selector,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory = () => {
+  return (
+    <Selector type="checkbox">
+      {[
+        { key: 'A', disabled: false },
+        { key: 'B', disabled: false },
+        { key: 'C', disabled: false },
+        { key: 'D', disabled: true },
+      ].map(({ key, disabled }) => (
+        <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
+          <Selector.Label>Something {key}</Selector.Label>
+        </Selector.Checkbox>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > Radio usage example
+ */
+export const RadioStory = () => {
+  return (
+    <Selector type="radio">
+      {[
+        { key: 'A', disabled: false },
+        { key: 'B', disabled: false },
+        { key: 'C', disabled: false },
+        { key: 'D', disabled: true },
+      ].map(({ key, disabled }) => (
+        <Selector.Radio key={key} body value={key} isDisabled={disabled}>
+          <Selector.Label>Something {key}</Selector.Label>
+        </Selector.Radio>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > Radio usage example
+ */
+export const CheckWithArrowStory = () => {
+  return (
+    <Selector type="radio">
+      {[
+        { key: 'A', disabled: false },
+        { key: 'B', disabled: false },
+        { key: 'C', disabled: false },
+        { key: 'D', disabled: true },
+      ].map(({ key, disabled }) => (
+        <Selector.Radio key={key} body value={key} isDisabled={disabled} checkIcon="arrow">
+          <Selector.Label>Something {key}</Selector.Label>
+        </Selector.Radio>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > Radio with state usage example
+ */
+export const RadioWithStateStory = () => {
+  const [selectedOption, setSelectedOption] = useState<string>();
+  return (
+    <>
+      {selectedOption}
+      <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 }) => (
+          <Selector.Radio key={key} body value={key} isDisabled={disabled}>
+            <Selector.Label>Something {key}</Selector.Label>
+          </Selector.Radio>
+        ))}
+      </Selector>
+    </>
+  );
+};
+
+/**
+ * > Check options with state usage example
+ */
+export const CheckboxWithStateStory = () => {
+  const [selectedOptions, setSelectedOptions] = useState<string[]>();
+  return (
+    <>
+      {selectedOptions?.join(',')}
+      <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 }) => (
+          <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
+            <Selector.Label>Something {key}</Selector.Label>
+          </Selector.Checkbox>
+        ))}
+      </Selector>
+    </>
+  );
+};
+
+/**
+ * > Default usage example
+ */
+export const LongTextStory = () => {
+  return (
+    <Selector type="checkbox">
+      {[
+        { key: 'A', disabled: false },
+        { key: 'B', disabled: false },
+        { key: 'C', disabled: false },
+        { key: 'D', disabled: true },
+      ].map(({ key, disabled }) => (
+        <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
+          <Selector.Label>
+            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}
+          </Selector.Label>
+        </Selector.Checkbox>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > With hint text usage example
+ */
+export const WithHintTextStory = () => {
+  return (
+    <Selector type="checkbox">
+      {[
+        {
+          label: HERE_IS_A_LABEL_A,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'A',
+          disabled: false,
+        },
+        {
+          label: HERE_IS_A_LABEL_B,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'B',
+          disabled: false,
+        },
+        { label: HERE_IS_A_LABEL_C, hint: '', key: 'C', disabled: false },
+      ].map(({ key, disabled, hint, label }) => (
+        <Selector.Checkbox key={key} body value={key} isDisabled={disabled}>
+          <Selector.Label>{label}</Selector.Label>
+          {hint && <Selector.Hint>{hint}</Selector.Hint>}
+        </Selector.Checkbox>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > With pictogram usage example
+ */
+export const WithPictogramStory = () => {
+  return (
+    <Selector type="checkbox">
+      {[
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PizzaPictogram className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_A,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'A',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <ChatPictogram className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_B,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'B',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <BusPictogram className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_C,
+          hint: '',
+          key: 'C',
+          disabled: false,
+        },
+      ].map(({ key, disabled, hint, label, before }) => (
+        <Selector.Checkbox before={before} key={key} body value={key} isDisabled={disabled}>
+          <Selector.Label>{label}</Selector.Label>
+          {hint && <Selector.Hint>{hint}</Selector.Hint>}
+        </Selector.Checkbox>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > With pictogram with different sizes usage example
+ */
+export const WithPictogramDifferentSizesStory = () => {
+  return (
+    <Selector type="checkbox">
+      {[
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PizzaPictogram className="h-15 w-15" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_A,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'A',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <ChatPictogram className="h-10 w-10" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_B,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'B',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <BusPictogram className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_C,
+          hint: '',
+          key: 'C',
+          disabled: false,
+        },
+      ].map(({ key, disabled, hint, label, before }) => (
+        <Selector.Checkbox before={before} key={key} body value={key} isDisabled={disabled}>
+          <Selector.Label>{label}</Selector.Label>
+          {hint && <Selector.Hint>{hint}</Selector.Hint>}
+        </Selector.Checkbox>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > With icon and different size
+ */
+export const WithIconsDifferentSizesStory = () => {
+  return (
+    <Selector type="checkbox">
+      {[
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-15 w-15" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_A,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'A',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-10 w-10" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_B,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'B',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_C,
+          hint: '',
+          key: 'C',
+          disabled: false,
+        },
+      ].map(({ key, disabled, hint, label, before }) => (
+        <Selector.Checkbox before={before} key={key} body value={key} isDisabled={disabled}>
+          <Selector.Label>{label}</Selector.Label>
+          {hint && <Selector.Hint>{hint}</Selector.Hint>}
+        </Selector.Checkbox>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > With icon and secondary label
+ */
+export const WithIconsAndSecondaryLabelStory = () => {
+  return (
+    <Selector type="checkbox">
+      {[
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_A,
+          after: <Selector.Label>$200,000.00</Selector.Label>,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'A',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_B,
+          after: <Selector.Label>$200,000.00</Selector.Label>,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'B',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_C,
+          after: (
+            <Selector.Adornment align="center">
+              <span>$200,000.00</span>
+            </Selector.Adornment>
+          ),
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 7643123
+            </>
+          ),
+          key: 'C',
+          disabled: false,
+        },
+      ].map(({ key, disabled, hint, label, before, after }) => (
+        <Selector.Checkbox before={before} after={after} key={key} body value={key} isDisabled={disabled}>
+          <Selector.Label>{label}</Selector.Label>
+          {hint && <Selector.Hint>{hint}</Selector.Hint>}
+        </Selector.Checkbox>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > Radio example with icons and secondary text
+ */
+export const RadioWithIconsAndSecondaryLabelStory = () => {
+  return (
+    <Selector type="radio">
+      {[
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_A,
+          after: <Selector.Label>$200,000.00</Selector.Label>,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'A',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_B,
+          after: <Selector.Label>$200,000.00</Selector.Label>,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'B',
+          disabled: false,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_C,
+          after: (
+            <Selector.Adornment align="center">
+              <span>$200,000.00</span>
+            </Selector.Adornment>
+          ),
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 7643123
+            </>
+          ),
+          key: 'C',
+          disabled: false,
+        },
+      ].map(({ key, disabled, hint, label, before, after }) => (
+        <Selector.Radio
+          before={before}
+          after={after}
+          key={key}
+          body
+          value={key}
+          checkIcon="arrow"
+          isDisabled={disabled}
+        >
+          <Selector.Label>{label}</Selector.Label>
+          {hint && <Selector.Hint>{hint}</Selector.Hint>}
+        </Selector.Radio>
+      ))}
+    </Selector>
+  );
+};
+
+/**
+ * > Disable state style example
+ */
+export const DisableStateStory = () => {
+  return (
+    <Selector type="radio" value="A">
+      {[
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_A,
+          after: <Selector.Label>$200,000.00</Selector.Label>,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'A',
+          disabled: true,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_B,
+          after: <Selector.Label>$200,000.00</Selector.Label>,
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 123456
+            </>
+          ),
+          key: 'B',
+          disabled: true,
+        },
+        {
+          before: (
+            <Selector.Adornment align="top">
+              <PersonIcon className="h-5 w-5" />
+            </Selector.Adornment>
+          ),
+          label: HERE_IS_A_LABEL_C,
+          after: (
+            <Selector.Adornment align="center">
+              <span>$200,000.00</span>
+            </Selector.Adornment>
+          ),
+          hint: (
+            <>
+              <VisuallyHidden>Bank Account</VisuallyHidden>
+              123-456 7643123
+            </>
+          ),
+          key: 'C',
+          disabled: true,
+        },
+      ].map(({ key, disabled, hint, label, before, after }) => (
+        <Selector.Radio
+          before={before}
+          after={after}
+          key={key}
+          body
+          value={key}
+          checkIcon="arrow"
+          isDisabled={disabled}
+        >
+          <Selector.Label>{label}</Selector.Label>
+          {hint && <Selector.Hint>{hint}</Selector.Hint>}
+        </Selector.Radio>
+      ))}
+    </Selector>
+  );
+};

package/src/components/selector/selector.types.ts

@@ -0,0 +1,24 @@
+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/src/components/switch/switch.component.tsx

@@ -1,18 +1,30 @@
 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';
 import { type SwitchProps } from './switch.types.js';
 
-export function Switch({ className, label, size = 'medium', block = false, isDisabled, ...props }: SwitchProps) {
-  const state = useToggleState(props);
+export function Switch({
+  className,
+  label,
+  size = 'medium',
+  block = false,
+  checked = false,
+  isDisabled,
+  ...props
+}: SwitchProps) {
+  const state = useToggleState({ ...props, defaultSelected: checked });
   const labelId = useId();
   const ref = useRef(null);
-  const { inputProps } = useCheckbox({ isDisabled, 'aria-labelledby': labelId, ...props }, state, ref);
   const { isSelected } = state;
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = switchStyles({ block, isFocusVisible, isSelected, isDisabled, size });
+  const { inputProps } = useCheckbox(
+    { isDisabled, 'aria-labelledby': labelId, defaultSelected: checked, ...props },
+    state,
+    ref,
+  );
+  const { isFocused, focusProps } = useFocusRing();
+  const styles = switchStyles({ block, isFocused, isSelected, isDisabled, size });
 
   return (
     <label className={styles.base({ className })}>
@@ -20,7 +32,7 @@ export function Switch({ className, label, size = 'medium', block = false, isDis
         {label}
       </span>
       <VisuallyHidden>
-        <input {...inputProps} {...focusProps} ref={ref} />
+        <input {...mergeProps(inputProps, focusProps)} ref={ref} />
       </VisuallyHidden>
       <div className={styles.switchDiv()} />
     </label>

package/src/components/switch/switch.stories.tsx

@@ -39,7 +39,7 @@ export const DefaultStory: Story = {
 export const SelectedSwitch: Story = {
   args: {
     label: 'eStatements',
-    isSelected: true,
+    checked: true,
   },
 };