@westpac/ui 0.6.0 → 0.7.1

package/src/components/button-dropdown/button-dropdown.stories.tsx

@@ -1,36 +1,27 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
-import { AndroidIcon, AppleIcon } from '../icon/index.js';
+import { AndroidIcon } from '../icon/index.js';
 
 import { ButtonDropdown } from './button-dropdown.component.js';
 
 const meta: Meta<typeof ButtonDropdown> = {
-  title: 'Example/ButtonDropdown',
+  title: 'Components/ButtonDropdown',
   component: ButtonDropdown,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const LOOKS = ['primary', 'hero', 'faint'];
-const SIZES = ['small', 'medium', 'large', 'xlarge'];
-const DROPDOWNSIZE = ['small', 'medium', 'large'];
+const LOOKS = ['primary', 'hero', 'faint'] as const;
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
+const DROPDOWNSIZE = ['small', 'medium', 'large'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     text: 'Default Dropdown',
     children: (
@@ -50,7 +41,7 @@ export const DefaultStory: Story = {
  */
 export const StandardLooks = () => (
   <div className="flex gap-2">
-    {LOOKS.map((look: any) => (
+    {LOOKS.map(look => (
       <ButtonDropdown look={look} text={look}>
         <p>
           Example dropdown
@@ -69,7 +60,7 @@ export const StandardLooks = () => (
  */
 export const SoftLooks = () => (
   <div className="flex gap-2">
-    {LOOKS.map((look: any) => (
+    {LOOKS.map(look => (
       <ButtonDropdown look={look} soft text={look}>
         <p>
           Example dropdown
@@ -88,7 +79,7 @@ export const SoftLooks = () => (
  */
 export const ButtonSizes = () => (
   <div>
-    {SIZES.map((size: any) => (
+    {SIZES.map(size => (
       <>
         <h3 className="font-bold">{size}</h3>
         <ButtonDropdown size={size} text={size}>
@@ -102,6 +93,23 @@ export const ButtonSizes = () => (
         </ButtonDropdown>
       </>
     ))}
+    <h3 className="font-bold">Responsive</h3>
+    <ButtonDropdown
+      size={{
+        initial: 'small',
+        md: 'large',
+        lg: 'xlarge',
+      }}
+      text="responsive"
+    >
+      <p>
+        Example dropdown
+        <a href="#" className="text-[blue] underline">
+          content
+        </a>
+        ...
+      </p>
+    </ButtonDropdown>
   </div>
 );
 
@@ -110,7 +118,7 @@ export const ButtonSizes = () => (
  */
 export const DropdownSizes = () => (
   <div>
-    {DROPDOWNSIZE.map((size: any) => (
+    {DROPDOWNSIZE.map(size => (
       <>
         <h3 className="font-bold">{size}</h3>
         <ButtonDropdown dropdownSize={size} text={size}>
@@ -118,27 +126,41 @@ export const DropdownSizes = () => (
         </ButtonDropdown>
       </>
     ))}
+    <h3 className="font-bold">Responsive</h3>
+    <ButtonDropdown
+      dropdownSize={{
+        initial: 'large',
+        md: 'small',
+        lg: 'medium',
+      }}
+      text="Responsive"
+    >
+      Responive
+    </ButtonDropdown>
   </div>
 );
 
 /**
  * > Block usage example
  */
-export const BlockDropdownButton: Story = {
-  args: {
-    block: true,
-    text: 'Block Dropdown',
-    children: (
-      <p>
-        Example dropdown
-        <a href="#" className="text-[blue] underline">
-          content
-        </a>
-        ...
-      </p>
-    ),
-  },
-};
+export const BlockDropdownButton = () => (
+  <div>
+    <h3 className="font-bold">Block</h3>
+    <ButtonDropdown block={true} text="Block">
+      Block
+    </ButtonDropdown>
+    <h3 className="font-bold">Responsive Block</h3>
+    <ButtonDropdown
+      block={{
+        initial: false,
+        lg: true,
+      }}
+      text="Responsive Block"
+    >
+      Responive Block
+    </ButtonDropdown>
+  </div>
+);
 
 /**
  * > Icon usage example
@@ -176,3 +198,23 @@ export const DropdownWithHeadings: Story = {
     ),
   },
 };
+
+/**
+ * > Open by default
+ * NOTE: This element has a visual bug on the Storybook Docs page when page loaded but doesn't in dev docs/canvas view
+ */
+export const Open: Story = {
+  args: {
+    open: true,
+    text: 'Default Dropdown',
+    children: (
+      <p>
+        Example dropdown
+        <a href="#" className="text-[blue] underline">
+          content
+        </a>
+        ...
+      </p>
+    ),
+  },
+};

package/src/components/button-dropdown/button-dropdown.styles.ts

@@ -21,6 +21,7 @@ export const styles = tv(
       block: {
         true: {
           panel: '',
+          base: 'justify-between',
         },
       },
     },

package/src/components/button-dropdown/button-dropdown.types.ts

@@ -5,7 +5,13 @@ import { ButtonProps } from '../button/index.js';
 
 import { styles } from './button-dropdown.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type ButtonDropdownProps = {
+  /**
+   * Size of the the dropdown panel
+   */
+  dropdownSize?: Variants['dropdownSize'];
   /**
    * Look for button
    */
@@ -23,5 +29,4 @@ export type ButtonDropdownProps = {
    */
   text: string;
 } & ButtonHTMLAttributes<Element> &
-  Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> &
-  VariantProps<typeof styles>;
+  Pick<ButtonProps, 'size' | 'iconBefore' | 'block'>;

package/src/components/button-dropdown/components/heading/heading.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 text-hero bg-background -mx-1 mb-3 mt-4 p-[0.4375rem] font-medium first-of-type:-mt-1',
+      base: 'typography-body-10 -mx-1 mb-3 mt-4 bg-background p-[0.4375rem] font-medium text-hero first-of-type:-mt-1',
     },
     variants: {},
   },

package/src/components/button-dropdown/components/panel/panel.component.tsx

@@ -1,13 +1,15 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { DismissButton, Overlay, mergeProps, useFocusRing, useOverlay, usePopover } from 'react-aria';
+import { DismissButton, Overlay, mergeProps, useFocusRing, usePopover } from 'react-aria';
 
 import { styles as panelStyles } from './panel.styles.js';
 import { type PanelProps } from './panel.types.js';
 
+/**
+ * @private
+ */
 export function Panel({ className, children, state, block, id, ...props }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
-  const { overlayProps } = useOverlay({ shouldCloseOnBlur: true, onClose: state.close }, popoverRef);
-  const { popoverProps } = usePopover({ popoverRef, shouldFlip: false, ...props }, state);
+  const { popoverProps } = usePopover({ popoverRef, shouldFlip: false, isNonModal: true, ...props }, state);
   const { isFocused, focusProps } = useFocusRing();
   const styles = panelStyles({ isFocused });
   const width = props.triggerRef.current?.getBoundingClientRect().width;
@@ -15,6 +17,21 @@ export function Panel({ className, children, state, block, id, ...props }: Panel
   // Added this based on accessibility features seen https://gel.westpacgroup.com.au/design-system/components/button-dropdowns?b=WBC&tab=accessibility and React Aria doesn't do this
   const focusHandler = useCallback(
     (event: globalThis.FocusEvent) => {
+      if (
+        event.target &&
+        popoverRef.current &&
+        event.target !== props.triggerRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        state.isOpen
+      )
+        state.close();
+    },
+    [state.isOpen],
+  );
+
+  // React Aria does not handle click as we need when isNonModal is true so this is needed
+  const clickHandler = useCallback(
+    (event: globalThis.MouseEvent) => {
       if (event.target && popoverRef.current && !popoverRef.current.contains(event.target as Node) && state.isOpen)
         state.close();
     },
@@ -23,15 +40,17 @@ export function Panel({ className, children, state, block, id, ...props }: Panel
 
   useEffect(() => {
     window.document.addEventListener('focusin', focusHandler);
+    window.document.addEventListener('click', clickHandler);
     return () => {
       window.document.removeEventListener('focusin', focusHandler);
+      window.document.removeEventListener('click', clickHandler);
     };
   }, []);
 
   return (
     <Overlay>
       <div
-        {...mergeProps(popoverProps, overlayProps, focusProps)}
+        {...mergeProps(popoverProps, focusProps)}
         id={id}
         data-testid="panel-dialog"
         style={{ ...popoverProps.style, width: block && width ? `${width}px` : undefined }}

package/src/components/button-dropdown/components/panel/panel.styles.ts

@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'border-border mt-[0.1875rem] rounded-[3px] border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+      base: 'mt-[0.1875rem] rounded-[3px] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
       dialog: '',
     },
     variants: {

package/src/components/button-group/button-group.component.tsx

@@ -1,7 +1,11 @@
+'use client';
+
 import React, { ReactElement, cloneElement, createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
+
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
 import { Button } from './components/button/button.component.js';
@@ -29,10 +33,20 @@ export function ButtonGroup({
   look = 'hero',
   size = 'medium',
   block = false,
+  errorMessage,
+  hintMessage,
   ...props
 }: ButtonGroupProps) {
   const state = useRadioGroupState({ ...props, label, orientation: 'horizontal' });
-  const { radioGroupProps, labelProps } = useRadioGroup({ ...props, label, orientation: 'horizontal' }, state);
+  const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(
+    {
+      ...props,
+      'aria-errormessage': Array.isArray(errorMessage) ? errorMessage.join(', ') : errorMessage,
+      label,
+      orientation: 'horizontal',
+    },
+    state,
+  );
   const styles = buttonGroupStyles({});
   const childrenToRender = children.map((child, index) => {
     return cloneElement(child as ReactElement, {
@@ -43,7 +57,11 @@ export function ButtonGroup({
 
   return (
     <div className={styles.base({ className })} {...radioGroupProps}>
-      <span {...labelProps}>{label}</span>
+      <FormLabel {...labelProps}>{label}</FormLabel>
+      {hintMessage && <FormHint {...descriptionProps}>{hintMessage}</FormHint>}
+      {errorMessage && state.validationState === 'invalid' && (
+        <ErrorMessage {...errorMessageProps} message={errorMessage} />
+      )}
       <div className={styles.buttonWrapper()}>
         <ButtonGroupContext.Provider value={{ ...state, size, look, block }}>
           {childrenToRender}

package/src/components/button-group/button-group.stories.tsx

@@ -3,19 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { ButtonGroup } from './button-group.component.js';
 
 const meta: Meta<typeof ButtonGroup> = {
-  title: 'Example/ButtonGroup',
+  title: 'Components/ButtonGroup',
   component: ButtonGroup,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
   argTypes: {
     isDisabled: {
       description: 'Controls whether all radio options are disabled or not',
@@ -39,13 +30,13 @@ const meta: Meta<typeof ButtonGroup> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const LOOKS = ['primary', 'hero'];
-const SIZES = ['small', 'medium', 'large', 'xlarge'];
+const LOOKS = ['primary', 'hero'] as const;
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: [
       <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
@@ -58,9 +49,9 @@ export const DefaultStory: Story = {
 /**
  * Button group looks
  */
-export const ButtonGroupColors = () => (
+export const Colors = () => (
   <div className="flex flex-col gap-2">
-    {LOOKS.map((look: any) => (
+    {LOOKS.map(look => (
       <ButtonGroup label={<h3 className="font-bold">{look}</h3>} look={look}>
         <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
         <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
@@ -73,9 +64,9 @@ export const ButtonGroupColors = () => (
 /**
  * Button group sizes
  */
-export const ButtonGroupSizes = () => (
+export const Sizes = () => (
   <div className="flex flex-col gap-2">
-    {SIZES.map((size: any) => (
+    {SIZES.map(size => (
       <ButtonGroup label={<h3 className="font-bold">{size}</h3>} size={size}>
         <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
         <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
@@ -88,7 +79,7 @@ export const ButtonGroupSizes = () => (
 /**
  * Button group responsive sizing
  */
-export const ButtonGroupResponsiveSize: Story = {
+export const ResponsiveSize: Story = {
   args: {
     children: [
       <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
@@ -106,9 +97,9 @@ export const ButtonGroupResponsiveSize: Story = {
 /**
  * Button group block
  */
-export const ButtonGroupBlock = () => (
+export const Block = () => (
   <div className="flex flex-col gap-2">
-    {SIZES.map((size: any) => (
+    {SIZES.map(size => (
       <ButtonGroup block label={<h3 className="font-bold">{size}</h3>} size={size}>
         <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
         <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
@@ -121,7 +112,7 @@ export const ButtonGroupBlock = () => (
 /**
  * Disabled button group
  */
-export const DisabledButtonGroup: Story = {
+export const Disabled: Story = {
   args: {
     children: [
       <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
@@ -131,3 +122,20 @@ export const DisabledButtonGroup: Story = {
     isDisabled: true,
   },
 };
+
+/**
+ * Error message and label
+ */
+export const ErrorMessageAndLabel: Story = {
+  args: {
+    label: 'Are you an existing customer?',
+    errorMessage: 'This is an inline error message',
+    validationState: 'invalid',
+    hintMessage: 'Hint: choose from one of the following options',
+    children: [
+      <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
+      <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>,
+      <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>,
+    ],
+  },
+};

package/src/components/button-group/button-group.types.ts

@@ -17,6 +17,14 @@ export type ButtonGroupProps = {
    * String to override base style
    */
   className?: string;
+  /**
+   * error message
+   */
+  errorMessage?: string;
+  /**
+   * hint message
+   */
+  hintMessage?: string;
   /**
    * Controls look of `Button` components, can't be applied directly to `Button`
    */

package/src/components/button-group/components/button/button.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: '',
       button:
-        'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0',
+        'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden',
     },
     variants: {
       isDisabled: {

package/src/components/checkbox-group/checkbox-group.component.tsx

@@ -1,9 +1,12 @@
+'use client';
+
 import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 
 import { styles as checkboxStyles } from './checkbox-group.styles.js';
 import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js';
@@ -22,7 +25,6 @@ export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
   toggleValue: () => null,
   validationState: 'valid',
 });
-
 export function CheckboxGroup({
   className,
   children,
@@ -30,10 +32,12 @@ export function CheckboxGroup({
   orientation = 'vertical',
   showAmount = 0,
   size = 'medium',
+  errorMessage,
+  hintMessage,
   ...props
 }: CheckboxGroupProps) {
   const state = useCheckboxGroupState({ ...props, label });
-  const { groupProps, labelProps } = useCheckboxGroup({ ...props, label }, state);
+  const { groupProps, labelProps, errorMessageProps, descriptionProps } = useCheckboxGroup({ ...props, label }, state);
   const { isFocusVisible, focusProps } = useFocusRing();
   const [hiddenOptions, setHiddenOptions] = useState<boolean>(showAmount > 0);
   const firstNewCheckboxRef = useRef<HTMLDivElement>(null);
@@ -58,7 +62,11 @@ export function CheckboxGroup({
 
   return (
     <div className={styles.base({ className })} {...groupProps}>
-      <span {...labelProps}>{label}</span>
+      <FormLabel {...labelProps}>{label}</FormLabel>
+      {hintMessage && <FormHint {...descriptionProps}>{hintMessage}</FormHint>}
+      {errorMessage && state.validationState === 'invalid' && (
+        <ErrorMessage {...errorMessageProps} message={errorMessage} />
+      )}
       <div className={styles.itemWrapper()}>
         <CheckboxGroupContext.Provider value={{ ...state, orientation, size }}>
           {childrenToRender}