@westpac/ui 0.6.0 → 0.7.0

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

@@ -2,6 +2,8 @@ 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 +31,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 +55,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

@@ -4,6 +4,7 @@ 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 +23,6 @@ export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
   toggleValue: () => null,
   validationState: 'valid',
 });
-
 export function CheckboxGroup({
   className,
   children,
@@ -30,10 +30,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 +60,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}

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

@@ -3,19 +3,16 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { CheckboxGroup } from './checkbox-group.component.js';
 
 const meta: Meta<typeof CheckboxGroup> = {
-  title: 'Example/CheckboxGroup',
+  title: 'Components/CheckboxGroup',
   component: CheckboxGroup,
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => (
-      <div className="flex p-3">
+      <div className="flex">
         <Story />
       </div>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
   args: {
     label: <h2>Test</h2>,
   },
@@ -42,7 +39,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: [
       <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
@@ -52,10 +49,27 @@ export const DefaultStory: Story = {
   },
 };
 
+/**
+ * > Default usage example
+ */
+export const LongLines: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt
+        consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci
+        repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.
+      </CheckboxGroup.Checkbox>,
+    ],
+  },
+};
+
 /**
  * > CheckboxGroup with default value
  */
-export const CheckboxGroupWithDefaultValue: Story = {
+export const DefaultValue: Story = {
   args: {
     children: [
       <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
@@ -69,7 +83,7 @@ export const CheckboxGroupWithDefaultValue: Story = {
 /**
  * > CheckboxGroup with checkboxes aligned horizontally
  */
-export const CheckboxGroupHorizontal: Story = {
+export const Inline: Story = {
   args: {
     children: [
       <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
@@ -80,10 +94,28 @@ export const CheckboxGroupHorizontal: Story = {
   },
 };
 
+/**
+ * > Horizontal long lines
+ */
+export const InlineLongLines: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt
+        consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci
+        repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.
+      </CheckboxGroup.Checkbox>,
+    ],
+    orientation: 'horizontal',
+  },
+};
+
 /**
  * > CheckboxGroup that is disabled
  */
-export const CheckboxGroupDisabled: Story = {
+export const Disabled: Story = {
   args: {
     children: [
       <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
@@ -98,7 +130,7 @@ export const CheckboxGroupDisabled: Story = {
 /**
  * > CheckboxGroup with large checkboxes
  */
-export const CheckboxGroupLarge: Story = {
+export const Large: Story = {
   args: {
     children: [
       <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
@@ -112,7 +144,7 @@ export const CheckboxGroupLarge: Story = {
 /**
  * > CheckboxGroup that has hidden checkboxes that will be revealed on clicking on button
  */
-export const CheckboxGroupWithHiddenItems: Story = {
+export const HiddenItems: Story = {
   args: {
     children: [
       <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
@@ -122,3 +154,59 @@ export const CheckboxGroupWithHiddenItems: Story = {
     showAmount: 1,
   },
 };
+
+/**
+ * > Hint text
+ */
+export const HintText: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1" hint="This is hint text">
+        Option 1
+      </CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2" hint="This is hint text">
+        Option 2
+      </CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3" hint="This is hint text">
+        Option 3
+      </CheckboxGroup.Checkbox>,
+    ],
+  },
+};
+
+/**
+ * > On change (check console log)
+ */
+export const OnChange: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1" hint="This is hint text">
+        Option 1
+      </CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2" hint="This is hint text">
+        Option 2
+      </CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3" hint="This is hint text">
+        Option 3
+      </CheckboxGroup.Checkbox>,
+    ],
+    onChange: e => console.log(e),
+  },
+};
+
+/**
+ * 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: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>,
+    ],
+  },
+};

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

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
 
+import { FormHintProps } from '../index.js';
+
 export type CheckboxGroupProps = {
   /**
    * The `CheckboxItem` components to render
@@ -11,6 +13,14 @@ export type CheckboxGroupProps = {
    * String to override base style
    */
   className?: string;
+  /**
+   * error message
+   */
+  errorMessage?: string | string[];
+  /**
+   * hint message
+   */
+  hintMessage?: FormHintProps['children'];
   /**
    * Orientation of checkbox items
    */

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

@@ -3,19 +3,16 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Checkbox } from './checkbox.component.js';
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Example/CheckboxGroup/Checkbox',
+  title: 'Components/CheckboxGroup/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => (
-      <div className="flex justify-center p-3">
+      <div className="flex">
         <Story />{' '}
       </div>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
   argTypes: {
     isDisabled: {
       description: 'Controls whether individual checkbox items are disabled or not',
@@ -30,20 +27,20 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Base Checkbox Item, unchecked as that is handled by Checkbox
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: { children: 'Option 1', value: 'Option 1' },
 };
 
 /**
  * > Checkbox Item with hint example
  */
-export const CheckboxItemWithHint: Story = {
+export const HintText: Story = {
   args: { children: 'Option 1', value: 'Option 1', hint: 'Test hint' },
 };
 
 /**
  * > Disabled Checkbox Item example
  */
-export const CheckboxItemDisabled: Story = {
+export const Disabled: Story = {
   args: { children: 'Option 1', value: 'Option 1', isDisabled: true },
 };

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

@@ -7,8 +7,8 @@ export const styles = tv(
       checkIcon: 'overflow-visible',
       textWrapper: 'flex flex-col justify-center',
       labelText: 'typography-body-10 py-[2px] pl-1',
-      hintText: 'typography-body-10 text-muted pl-1',
-      checkbox: 'border-hero flex h-4 w-4 items-center justify-center rounded border',
+      hintText: 'typography-body-10 pl-1 text-muted',
+      checkbox: 'flex shrink-0 items-center justify-center rounded border border-hero',
     },
     variants: {
       isDisabled: {

package/src/components/circle/circle.stories.tsx

@@ -3,13 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Circle } from './circle.component.js';
 
 const meta: Meta<typeof Circle> = {
-  title: 'Example/Circle',
+  title: 'Components/Circle',
   component: Circle,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -18,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: 'GK',
   },

package/src/components/collapsible/collapsible.component.tsx

@@ -37,6 +37,7 @@ export function Collapsible({
       <Button
         className={styles.base({ className })}
         look="link"
+        iconColor="primary"
         iconAfter={ButtonIcon}
         onClick={handleClick}
         size={size}

package/src/components/collapsible/collapsible.stories.tsx

@@ -3,30 +3,21 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Collapsible } from './collapsible.component.js';
 
 const meta: Meta<typeof Collapsible> = {
-  title: 'Example/Collapsible',
+  title: 'Components/Collapsible',
   component: Collapsible,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="typography-body-10 p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const SIZES = ['small', 'medium', 'large', 'xlarge'];
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     text: 'Toggle collapsible',
     children:
@@ -37,9 +28,9 @@ export const DefaultStory: Story = {
 /**
  * > Examples of sizes of collapsible button
  */
-export const CollapsibleSizes = () => (
-  <div className="typography-body-10 p-3">
-    {SIZES.map((size: any) => (
+export const Sizes = () => (
+  <div>
+    {SIZES.map(size => (
       <div className="mb-2" key={size}>
         <h2 className="typography-body-8 mb-1 font-bold">{size}</h2>
         <p>
@@ -71,9 +62,9 @@ export const CollapsibleSizes = () => (
 /**
  * > Setting the default of collapsible to open
  */
-export const CollapsibleOpen = () => (
-  <div className="typography-body-10 p-3">
-    {SIZES.map((size: any) => (
+export const Open = () => (
+  <div>
+    {SIZES.map(size => (
       <div className="mb-2" key={size}>
         <h2 className="typography-body-8 mb-1 font-bold">{size}</h2>
         <p>

package/src/components/compacta/compacta.stories.tsx

@@ -1,34 +1,24 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { ChangeEvent, ReactNode, useState } from 'react';
+import { type Meta, StoryFn } from '@storybook/react';
+import { ChangeEvent, useState } from 'react';
 
 import { Form, Input } from '../index.js';
 
 import { Compacta } from './compacta.component.js';
 
 const meta: Meta<typeof Compacta> = {
-  title: 'Example/Compacta',
+  title: 'Components/Compacta',
   component: Compacta,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-5">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
   args: {},
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 /**
  * > Default usage example
  */
-export const StoryDefault = () => {
+export const Default = () => {
   const [inputs, setInputs] = useState({});
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {