@westpac/ui 0.6.0 → 0.7.0

package/src/components/progress-bar/progress-bar.stories.tsx

@@ -6,19 +6,10 @@ import { Button } from '../button/index.js';
 import { ProgressBar } from './progress-bar.component.js';
 
 const meta: Meta<typeof ProgressBar> = {
-  title: 'Example/ProgressBar',
+  title: 'Components/ProgressBar',
   component: ProgressBar,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -27,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     value: 50,
     look: 'default',
@@ -37,7 +28,7 @@ export const DefaultStory: Story = {
 /**
  * > Skinny example
  */
-export const ProgressBarSkinny: Story = {
+export const Skinny: Story = {
   args: {
     value: 50,
     look: 'skinny',
@@ -47,7 +38,7 @@ export const ProgressBarSkinny: Story = {
 /**
  * > No label example
  */
-export const ProgressBarNoLabel: Story = {
+export const NoLabel: Story = {
   args: {
     value: 50,
     look: 'default',
@@ -58,7 +49,7 @@ export const ProgressBarNoLabel: Story = {
 /**
  * Example of Progress Bar controlled by buttons
  */
-export const ProgressBarControlled = () => {
+export const Controlled = () => {
   const [barValue, setBarValue] = useState(0);
   const handleProgress = useCallback(
     (calc: number) => {

package/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.tsx

@@ -49,8 +49,6 @@ export function ProgressRopeGroupStep({
     return 'non-visited';
   }, [current, visited]);
 
-  console.log('state', state);
-
   const styles = progressRopeGroupStyles({ firstItem, state });
   return (
     <>

package/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.ts

@@ -25,7 +25,7 @@ export type ProgressRopeGroupStepProps = {
   /**
    * Trigger when the user try to open/close the group
    */
-  onToggle?: () => any;
+  onToggle?: () => unknown;
   /**
    * Boolean to tell if group is expanded
    */

package/src/components/progress-rope/progress-rope.stories.tsx

@@ -7,13 +7,10 @@ import { ProgressRope } from './progress-rope.component.js';
 import { ProgressRopeProps } from './progress-rope.types.js';
 
 const meta: Meta<typeof ProgressRope> = {
-  title: 'Example/ProgressRope',
+  title: 'Components/ProgressRope',
   component: ProgressRope,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -22,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
   render: () => {
     const [activeIndex, setActiveIndex] = useState(0);
@@ -58,7 +55,7 @@ export const DefaultStory: Story = {
 /**
  * > Grouping steps story usage example
  */
-export const GroupingStepsStory: Story = {
+export const GroupingSteps: Story = {
   args: {},
   render: () => {
     const [activeIndex, setActiveIndex] = useState(0);

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

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

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

@@ -7,7 +7,7 @@ export const styles = tv(
       textWrapper: 'flex flex-col justify-center',
       labelText: 'typography-body-10 py-[2px] pl-1',
       hintText: 'typography-body-10 text-muted pl-1',
-      selector: 'border-hero flex h-4 w-4 items-center justify-center rounded-full border',
+      selector: 'border-hero flex shrink-0 h-4 w-4 items-center justify-center rounded-full border',
     },
     variants: {
       isDisabled: {
@@ -21,7 +21,7 @@ export const styles = tv(
       },
       isSelected: {
         true: {
-          selector: 'before:bg-hero before:block before:h-2 before:w-2 before:rounded-full',
+          selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero',
         },
       },
       isFocused: {

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

@@ -4,6 +4,7 @@ import { useRadioGroupState } from 'react-stately';
 
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 
 import { Radio } from './components/radio/radio.component.js';
 import { styles as radioGroupStyles } from './radio-group.styles.js';
@@ -31,10 +32,15 @@ export function RadioGroup({
   orientation = 'vertical',
   showAmount = 0,
   size = 'medium',
+  errorMessage,
+  hintMessage,
   ...props
 }: RadioGroupProps) {
   const state = useRadioGroupState({ ...props, label, orientation });
-  const { radioGroupProps, labelProps } = useRadioGroup({ ...props, label, orientation }, state);
+  const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(
+    { ...props, label, orientation },
+    state,
+  );
   const { isFocusVisible, focusProps } = useFocusRing();
   const [hiddenOptions, setHiddenOptions] = useState<boolean>(showAmount > 0);
   const firstNewRadioRef = useRef<HTMLDivElement>(null);
@@ -59,7 +65,11 @@ export function RadioGroup({
 
   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.radioWrapper()}>
         <RadioGroupContext.Provider value={{ ...state, orientation, size }}>
           {childrenToRender}

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

@@ -3,19 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { RadioGroup } from './radio-group.component.js';
 
 const meta: Meta<typeof RadioGroup> = {
-  title: 'Example/RadioGroup',
+  title: 'Components/RadioGroup',
   component: RadioGroup,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="flex p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
   args: {
     label: <h2>Test</h2>,
   },
@@ -42,7 +33,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultRadio: Story = {
+export const Default: Story = {
   args: {
     children: [
       <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
@@ -52,10 +43,27 @@ export const DefaultRadio: Story = {
   },
 };
 
+/**
+ * > Default with long content
+ */
+export const LongLines: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio 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.
+      </RadioGroup.Radio>,
+    ],
+  },
+};
+
 /**
  * > RadioGroup with default value
  */
-export const RadioWithDefaultValue: Story = {
+export const DefaultValue: Story = {
   args: {
     children: [
       <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
@@ -69,7 +77,7 @@ export const RadioWithDefaultValue: Story = {
 /**
  * > RadioGroup with radios aligned horizontally
  */
-export const RadioHorizontal: Story = {
+export const Inline: Story = {
   args: {
     children: [
       <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
@@ -80,10 +88,28 @@ export const RadioHorizontal: Story = {
   },
 };
 
+/**
+ * > RadioGroup with radios aligned horizontally with long content
+ */
+export const InlineLongLines: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio 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.
+      </RadioGroup.Radio>,
+    ],
+    orientation: 'horizontal',
+  },
+};
+
 /**
  * > RadioGroup that is disabled
  */
-export const RadioDisabled: Story = {
+export const Disabled: Story = {
   args: {
     children: [
       <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
@@ -97,7 +123,7 @@ export const RadioDisabled: Story = {
 /**
  * > RadioGroup with large radios
  */
-export const RadioLarge: Story = {
+export const Large: Story = {
   args: {
     children: [
       <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
@@ -111,7 +137,7 @@ export const RadioLarge: Story = {
 /**
  * > RadioGroup that has hidden radios that will be revealed on clicking on button
  */
-export const RadioWithHiddenOptions: Story = {
+export const HiddenOptions: Story = {
   args: {
     children: [
       <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
@@ -121,3 +147,53 @@ export const RadioWithHiddenOptions: Story = {
     showAmount: 1,
   },
 };
+
+/**
+ * > Example with hint text
+ */
+export const HintText: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1" hint="This is a hint">
+        Option 1
+      </RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2" hint="This is a hint">
+        Option 2
+      </RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3" hint="This is a hint">
+        Option 3
+      </RadioGroup.Radio>,
+    ],
+  },
+};
+
+/**
+ * > On change (check console log)
+ */
+export const OnChange: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
+    ],
+    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: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
+    ],
+  },
+};

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

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
 
+import { FormHintProps } from '../index.js';
+
 export type RadioGroupProps = {
   /**
    * The `Radio` components to render
@@ -11,6 +13,14 @@ export type RadioGroupProps = {
    * String to override base style
    */
   className?: string;
+  /**
+   * error message
+   */
+  errorMessage?: string | string[];
+  /**
+   * hint message
+   */
+  hintMessage?: FormHintProps['children'];
   /**
    * Amount of Radios to display, remainder will be hidden behind reveal button
    */

package/src/components/repeater/repeater.stories.tsx

@@ -5,26 +5,17 @@ import { Form, Input } from '../index.js';
 import { Repeater } from './repeater.component.js';
 
 const meta: Meta<typeof Repeater> = {
-  title: 'Example/Repeater',
+  title: 'Components/Repeater',
   component: Repeater,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-5">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
   args: {
     children: (
       <Form>
         <Form.Group>
           <Form.Label htmlFor={`test`}>Primary</Form.Label>
           <Form.Hint>Primary title text</Form.Hint>
-          <Input name={`test`} onChange={(e: any) => console.log(e)} />
+          <Input name="test" onChange={e => console.log(e)} />
         </Form.Group>
       </Form>
     ),
@@ -37,13 +28,13 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
 };
 
 /**
  * > Example using the separator prop
  */
-export const SeparatedRepeater: Story = {
+export const Separator: Story = {
   args: { separator: true },
 };

package/src/components/select/select.stories.tsx

@@ -1,21 +1,14 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
+import { Field } from '../field/index.js';
+
 import { Select } from './select.component.js';
 
 const meta: Meta<typeof Select> = {
-  title: 'Example/Select',
+  title: 'Components/Select',
   component: Select,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="flex items-center justify-center p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -24,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: (
       <>
@@ -40,7 +33,7 @@ export const DefaultStory: Story = {
 /**
  * > Invalid usage example
  */
-export const InvalidStory: Story = {
+export const Invalid: Story = {
   args: {
     invalid: true,
     children: (
@@ -57,7 +50,7 @@ export const InvalidStory: Story = {
 /**
  * > Disabled usage example
  */
-export const DisabledStory: Story = {
+export const Disabled: Story = {
   args: {
     disabled: true,
     children: (
@@ -70,3 +63,26 @@ export const DisabledStory: Story = {
     ),
   },
 };
+
+/**
+ * > Form field example
+ */
+export const FormField: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Field
+        label="Are you an existing customer?"
+        hintMessage="Hint: choose from one of the following options"
+        errorMessage="This is an inline error message"
+      >
+        <Select invalid>
+          <option value="option-1">option 1</option>
+          <option value="option-2">option 2</option>
+          <option value="option-3">option 3</option>
+          <option value="option-4">option 4</option>
+        </Select>
+      </Field>
+    );
+  },
+};

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

@@ -2,6 +2,8 @@ import React, { createContext } from 'react';
 import { useCheckboxGroup } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
+import { ErrorMessage, FormHint, FormLabel } from '../../../index.js';
+
 import { SelectorCheckboxGroupOption } from './components/index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 import {
@@ -28,18 +30,12 @@ export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {
 
   return (
     <div {...groupProps} className={styles({ className: groupProps.className })}>
-      <span {...labelProps}>{label}</span>
-      <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
-      {description && (
-        <div {...descriptionProps} style={{ fontSize: 12 }}>
-          {description}
-        </div>
-      )}
+      <FormLabel {...labelProps}>{label}</FormLabel>
+      {description && <FormHint {...descriptionProps}>{description}</FormHint>}
       {errorMessage && state.validationState === 'invalid' && (
-        <div {...errorMessageProps} className="typography-body-10 text-danger">
-          {errorMessage}
-        </div>
+        <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
+      <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
     </div>
   );
 }

package/src/components/selector/components/selector-label/index.ts

@@ -0,0 +1 @@
+export { SelectorLabel } from './selector-label.component.js';

package/src/components/selector/components/selector-label/selector-label.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { FlexiCellLabel, FlexiCellLabelProps } from '../../../../components/flexi-cell/index.js';
+
+import { styles } from './selector-label.styles.js';
+
+export function SelectorLabel({ className, ...props }: FlexiCellLabelProps) {
+  return <FlexiCellLabel {...props} className={styles({ className })} />;
+}

package/src/components/selector/components/selector-label/selector-label.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'font-medium',
+});

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.styles.ts

@@ -15,7 +15,7 @@ export const styles = tv(
       },
       isSelected: {
         true: {
-          base: 'border-hero shadow-hero shadow-[0_0_0_2px_inset]',
+          base: 'border-hero shadow-[0_0_0_2px_inset] shadow-hero',
         },
         false: {},
       },

package/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx

@@ -2,6 +2,8 @@ import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
+import { ErrorMessage, FormHint, FormLabel } from '../../../index.js';
+
 import { SelectorRadioGroupOption } from './components/index.js';
 import { styles } from './selector-radio-group.styles.js';
 import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
@@ -26,22 +28,25 @@ export function SelectorRadioGroup({
   label,
   orientation = 'vertical',
   errorMessage,
+  description,
   ...props
 }: SelectorRadioGroupProps) {
   const state = useRadioGroupState({ ...props, errorMessage, label, orientation });
-  const { radioGroupProps, labelProps, errorMessageProps } = useRadioGroup({ ...props, label, orientation }, state);
+  const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(
+    { ...props, label, orientation },
+    state,
+  );
 
   return (
     <div className={styles({ className, orientation })} {...radioGroupProps}>
-      <span {...labelProps}>{label}</span>
+      <FormLabel {...labelProps}>{label}</FormLabel>
+      {description && <FormHint {...descriptionProps}>{description}</FormHint>}
+      {errorMessage && state.validationState === 'invalid' && (
+        <ErrorMessage {...errorMessageProps} message={errorMessage} />
+      )}
       <SelectorRadioGroupContext.Provider value={{ ...state, orientation }}>
         {children}
       </SelectorRadioGroupContext.Provider>
-      {errorMessage && state.validationState === 'invalid' && (
-        <div {...errorMessageProps} className="typography-body-10 text-danger">
-          {errorMessage}
-        </div>
-      )}
     </div>
   );
 }

package/src/components/selector/selector.component.tsx

@@ -7,11 +7,11 @@ import {
   FlexiCellCircle,
   FlexiCellFooter,
   FlexiCellHint,
-  FlexiCellLabel,
 } from '../flexi-cell/components/index.js';
 
 import { SelectorCheckboxGroup, SelectorRadioGroup } from './components/index.js';
 import { SelectorCheckboxGroupOption } from './components/selector-checkbox-group/components/index.js';
+import { SelectorLabel } from './components/selector-label/index.js';
 import { SelectorRadioGroupOption } from './components/selector-radio-group/components/index.js';
 import { type SelectorProps } from './selector.types.js';
 
@@ -29,6 +29,6 @@ Selector.Body = FlexiCellBody;
 Selector.Footer = FlexiCellFooter;
 Selector.Adornment = FlexiCellAdornment;
 Selector.Hint = FlexiCellHint;
-Selector.Label = FlexiCellLabel;
+Selector.Label = SelectorLabel;
 Selector.Button = FlexiCellButton;
 Selector.Circle = FlexiCellCircle;