@westpac/ui 0.12.0 → 0.14.0

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

@@ -1,10 +1,14 @@
 import React, { useMemo } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 
 import { Circle } from '../../../index.js';
 
 import { styles as progressRopeStyles } from './progress-rope-step.styles.js';
 import { type ProgressRopeStepProps } from './progress-rope-step.types.js';
 
+/**
+ * @private
+ */
 export function ProgressRopeStep({
   className,
   current,
@@ -14,9 +18,22 @@ export function ProgressRopeStep({
   size = 'medium',
   children,
   firstItem,
+  lastItemInGroup,
+  lastItemInRope,
+  furthest,
+  previousStepGroup,
   ...props
 }: ProgressRopeStepProps) {
   const state = useMemo(() => {
+    if (lastItemInRope && visited && current) {
+      return 'last-current';
+    }
+    if (lastItemInRope && visited) {
+      return 'last-visited';
+    }
+    if (current && visited) {
+      return 'current-visited';
+    }
     if (current) {
       return 'current';
     }
@@ -25,11 +42,28 @@ export function ProgressRopeStep({
     }
     return 'non-visited';
   }, [current, visited]);
+  const { isFocusVisible, focusProps } = useFocusRing();
 
-  const styles = progressRopeStyles({ className, state, size, firstItem });
+  const styles = progressRopeStyles({
+    className,
+    state,
+    size,
+    firstItem,
+    lastItemInGroup,
+    lastItemInRope: lastItemInRope && !previousStepGroup,
+    lastItemInRopeGrouped: lastItemInRope && previousStepGroup,
+    furthestVisited: !current && furthest,
+    previousStepGroup: furthest && previousStepGroup,
+    isFocusVisible,
+  });
 
   return (
-    <Tag className={styles.base({})} aria-current={current} disabled={state === 'non-visited'} {...props}>
+    <Tag
+      className={styles.base({})}
+      aria-current={current}
+      disabled={state === 'non-visited'}
+      {...mergeProps(props, focusProps)}
+    >
       <Circle className={styles.circle()} aria-hidden="true" />
       {children}
     </Tag>

package/src/components/progress-rope/components/progress-rope-step/progress-rope-step.styles.ts

@@ -3,30 +3,60 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 relative flex h-7 cursor-pointer items-center gap-2 transition-colors before:absolute before:inset-y-0 before:left-[6px] before:block before:-translate-y-1/2 before:border-l-2 before:border-dotted before:transition-colors',
+      base: 'typography-body-10 relative flex w-full cursor-pointer items-center gap-2 pb-[0.875rem] pt-[0.5rem] leading-[1.428571429] transition-colors',
       circle: 'relative z-10 bg-white transition-colors',
     },
     variants: {
       state: {
         current: {
-          base: 'font-bold text-primary before:border-solid',
+          base: 'font-bold text-primary',
           circle: 'border-[3px] border-primary bg-white',
         },
         visited: {
-          base: 'text-text before:border-solid before:border-primary',
+          base: 'text-text before:absolute before:inset-y-0 before:left-1 before:z-10 before:block before:translate-y-[1.25rem] before:border-l-2 before:border-primary before:transition-colors',
+          // Can't use a const without getting tailwind errors, compound slots/variants don't work correctly for this
+          // eslint-disable-next-line sonarjs/no-duplicate-string
           circle: 'border-[3px] border-primary bg-primary',
         },
         'non-visited': {
-          base: 'text-muted-90 before:border-borderDark',
+          base: 'text-muted-90',
           circle: 'border-2 border-borderDark bg-white',
         },
+        'current-visited': {
+          base: 'font-bold text-primary before:absolute before:inset-y-0 before:left-1 before:z-10 before:block before:translate-y-[1.25rem] before:border-l-2 before:border-primary before:transition-colors',
+          circle: 'border-[3px] border-primary bg-primary',
+        },
+        'last-visited': {
+          base: 'text-text after:absolute after:inset-y-[0.875rem] after:left-1 after:z-[1] after:block after:translate-y-[-0.875rem] after:border-l-2 after:border-primary after:transition-colors',
+          circle: 'border-[3px] border-primary bg-primary',
+        },
+        'last-current': {
+          base: 'font-bold text-primary ',
+          circle: 'border-[3px] border-primary bg-primary',
+        },
       },
       firstItem: {
         true: {
-          base: 'before:first:hidden',
+          base: '',
         },
         false: {},
       },
+      lastItemInGroup: {
+        true: { base: 'pb-[2.75rem]' },
+        false: {},
+      },
+      lastItemInRope: {
+        true: { base: 'pt-[0.625rem]' },
+        false: {},
+      },
+      lastItemInRopeGrouped: {
+        true: { base: 'pt-[0.875rem]' },
+        false: {},
+      },
+      furthestVisited: {
+        true: { base: 'text-text', circle: 'border-[3px] border-primary bg-white' },
+        false: {},
+      },
       size: {
         medium: {
           circle: 'h-[0.875rem] w-[0.875rem]',
@@ -36,6 +66,15 @@ export const styles = tv(
           base: 'gap-4',
         },
       },
+      previousStepGroup: {
+        true: {
+          base: 'after:absolute after:inset-y-[0.875rem] after:left-1 after:z-[1] after:block after:translate-y-[-0.875rem] after:border-l-2 after:border-primary after:transition-colors',
+        },
+        false: {},
+      },
+      isFocusVisible: {
+        true: { base: 'focus-outline' },
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

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

@@ -16,6 +16,22 @@ export type ProgressRopeStepProps = {
    * Whether step is first item
    */
   firstItem?: Variants['firstItem'];
+  /**
+   * Whether step is furthest visited
+   */
+  furthest?: boolean;
+  /**
+   * Whether step is last item in a group
+   */
+  lastItemInGroup?: Variants['lastItemInGroup'];
+  /**
+   * Whether step is last item in the rope e.g. Review and Submit
+   */
+  lastItemInRope?: Variants['lastItemInGroup'];
+  /**
+   * Whether previous step was part of group
+   */
+  previousStepGroup?: boolean;
   /**
    * Size of step
    */

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

@@ -71,13 +71,14 @@ export function ProgressRope({
 
   return (
     <Tag className={className} role={role} aria-label={ariaLabel} {...props}>
-      <ul className={styles({})}>
+      <ol className={styles({})}>
         {mappedData?.map((item, index) => {
           return (
             <li key={index}>
               {item.type === 'group' ? (
                 <ProgressRopeGroupStep
                   firstItem={index === 0}
+                  lastItem={index === mappedData.length - 1}
                   furthestVisitedStep={furthestVisitedStep}
                   currentKey={current}
                   steps={item.steps}
@@ -91,8 +92,11 @@ export function ProgressRope({
                   firstItem={index === 0}
                   type={item.type}
                   onClick={furthestVisitedStep >= item.index ? item.onClick : undefined}
-                  visited={furthestVisitedStep >= item.index}
+                  visited={furthestVisitedStep > item.index}
+                  furthest={furthestVisitedStep === item.index}
                   current={current === item.index}
+                  previousStepGroup={mappedData[index - 1]?.type === 'group'}
+                  lastItemInRope={item === mappedData.slice(-1)[0]}
                 >
                   {item.text}
                 </ProgressRopeStep>
@@ -100,7 +104,7 @@ export function ProgressRope({
             </li>
           );
         })}
-      </ul>
+      </ol>
     </Tag>
   );
 }

package/src/components/progress-rope/progress-rope.styles.ts

@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'relative flex flex-col',
+  base: 'relative after:absolute after:bottom-[1.5rem] after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-[2px] after:border-dotted after:border-borderDark',
 });

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

@@ -17,6 +17,7 @@ export type ProgressRopeStepWithIndex =
 export type ProgressRopeProps = {
   /**
    * Current active step (zero-indexed)
+   * @default 0
    */
   current?: number;
   /**
@@ -32,6 +33,7 @@ export type ProgressRopeProps = {
   )[];
   /**
    * Tag to render
+   * @default nav
    */
   tag?: keyof JSX.IntrinsicElements;
 } & HTMLAttributes<Element>;

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

@@ -0,0 +1,2 @@
+export { RadioGroupRadio } from './radio-group-radio.component.js';
+export { type RadioGroupRadioProps } from './radio-group-radio.types.js';

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

@@ -0,0 +1,34 @@
+'use client';
+
+import React, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
+
+import { RadioGroupContext } from '../../radio-group.component.js';
+
+import { styles as radioStyles } from './radio-group-radio.styles.js';
+import { type RadioGroupRadioProps } from './radio-group-radio.types.js';
+
+function BaseRadioGroupRadio({ className, hint, children, ...props }: RadioGroupRadioProps, ref: any) {
+  const state = useContext(RadioGroupContext);
+  const { size, orientation } = state;
+  const localRef = useRef(null);
+  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, localRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = radioStyles({ isDisabled, isSelected, isFocusVisible, size, orientation });
+
+  return (
+    <label className={styles.base({ className })} ref={ref}>
+      <VisuallyHidden>
+        <input {...inputProps} {...focusProps} ref={localRef} />
+      </VisuallyHidden>
+      <div className={styles.selector()} />
+      <div className={styles.textWrapper()}>
+        <span className={styles.labelText()}>{children}</span>
+        {hint && <span className={styles.hintText()}>{hint}</span>}
+      </div>
+    </label>
+  );
+}
+
+export const RadioGroupRadio = forwardRef(BaseRadioGroupRadio);
+RadioGroupRadio.displayName = 'RadioGroupRadio';

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

@@ -0,0 +1,51 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'flex',
+      textWrapper: 'flex flex-col justify-center',
+      labelText: 'typography-body-10 py-[2px] pl-1',
+      hintText: 'typography-body-10 pl-1 text-muted',
+      selector: 'flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-hero',
+    },
+    variants: {
+      isDisabled: {
+        true: {
+          labelText: 'text-muted',
+          selector: 'border-border bg-border-20 before:bg-border',
+        },
+        false: {
+          base: 'hover:cursor-pointer',
+        },
+      },
+      isSelected: {
+        true: {
+          selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero',
+        },
+      },
+      isFocusVisible: {
+        true: { selector: 'focus-outline' },
+      },
+      orientation: {
+        horizontal: {
+          base: 'mr-3',
+        },
+        vertical: {
+          base: '',
+        },
+      },
+      size: {
+        large: {
+          selector: 'h-5 w-5',
+          base: 'mb-2',
+        },
+        medium: {
+          selector: 'h-4 w-4',
+          base: 'mb-1',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { type AriaRadioProps } from 'react-aria';
+
+export type RadioGroupRadioProps = {
+  /**
+   * `string` for overriding base style
+   */
+  className?: string;
+  /**
+   * Renders hint under radio, most likely a `string` but could be something else
+   */
+  hint?: ReactNode;
+} & AriaRadioProps;

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

@@ -1,2 +1,3 @@
+export { RadioGroupRadio } from './components/radio-group-radio/index.js';
 export { RadioGroup } from './radio-group.component.js';
 export { type RadioGroupProps } from './radio-group.types.js';

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

@@ -6,9 +6,8 @@ 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 { ErrorMessage, Hint, Label } from '../index.js';
 
-import { Radio } from './components/radio/radio.component.js';
 import { styles as radioGroupStyles } from './radio-group.styles.js';
 import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
 
@@ -67,8 +66,8 @@ export function RadioGroup({
 
   return (
     <div className={styles.base({ className })} {...radioGroupProps}>
-      <FormLabel {...labelProps}>{label}</FormLabel>
-      {hintMessage && <FormHint {...descriptionProps}>{hintMessage}</FormHint>}
+      <Label {...labelProps}>{label}</Label>
+      {hintMessage && <Hint {...descriptionProps}>{hintMessage}</Hint>}
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
@@ -93,4 +92,3 @@ export function RadioGroup({
     </div>
   );
 }
-RadioGroup.Radio = Radio;

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

@@ -9,7 +9,10 @@ export const styles = tv(
       buttonText: 'typography-body-10',
     },
     variants: {
-      orientation: { horizontal: { radioWrapper: 'flex flex-wrap' }, vertical: { radioWrapper: 'flex flex-col' } },
+      orientation: {
+        horizontal: { radioWrapper: 'flex flex-wrap' },
+        vertical: { radioWrapper: 'flex flex-col items-start' },
+      },
       isFocusVisible: { true: { revealButton: 'focus-outline' } },
     },
   },

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
 
-import { FormHintProps } from '../index.js';
+import { HintProps } from '../index.js';
 
 export type RadioGroupProps = {
   /**
@@ -20,7 +20,7 @@ export type RadioGroupProps = {
   /**
    * hint message
    */
-  hintMessage?: FormHintProps['children'];
+  hintMessage?: HintProps['children'];
   /**
    * Amount of Radios to display, remainder will be hidden behind reveal button
    */

package/src/components/repeater/repeater.styles.ts

@@ -19,7 +19,7 @@ export const styles = tv(
         },
         true: {
           item: 'border-t-2 border-neutral pt-[0.625rem]',
-          content: 'px-3 pb-7 pt-0',
+          content: 'px-0 pb-7 pt-0 md:px-6',
           removeBtn: 'relative mb-5 ml-3',
           footer: 'border-t-2 border-neutral',
         },

package/src/components/select/select.component.tsx

@@ -7,12 +7,16 @@ import { styles } from './select.styles.js';
 import { type SelectProps } from './select.types.js';
 
 function BaseSelect(
-  { className, size = 'medium', invalid = false, children, ...props }: SelectProps,
+  { className, size = 'medium', invalid = false, width = 'auto', children, ...props }: SelectProps,
   ref: ForwardedRef<HTMLSelectElement>,
 ) {
-  const { isFocused, focusProps } = useFocusRing();
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
   return (
-    <select ref={ref} className={styles({ className, size, invalid, isFocused })} {...mergeProps(props, focusProps)}>
+    <select
+      ref={ref}
+      className={styles({ className, size, invalid, isFocused, isFocusVisible, width })}
+      {...mergeProps(props, focusProps)}
+    >
       {children}
     </select>
   );

package/src/components/select/select.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled group-[.add-on-after]:!rounded-r group-[.add-on-after]:rounded-l-none group-[.add-on-before]:!rounded-l group-[.add-on-before]:rounded-r-none group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.add-on-after]:!border-x group-[.add-on-before]:!border-x group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
     variants: {
       size: {
         small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
@@ -14,10 +14,27 @@ export const styles = tv(
         true: 'border-danger',
         false: 'border-borderDark',
       },
+      isFocusVisible: {
+        true: 'focus-outline',
+      },
       isFocused: {
-        true: {
-          base: 'focus-outline',
-        },
+        true: 'outline-none',
+      },
+      width: {
+        auto: 'flex-1',
+        full: 'w-full flex-1',
+        1: 'box-content w-[1.81ex]',
+        2: 'box-content w-[3.62ex]',
+        3: 'box-content w-[5.43ex]',
+        4: 'box-content w-[7.24ex]',
+        5: 'box-content w-[9.05ex]',
+        6: 'box-content w-[10.86ex]',
+        7: 'box-content w-[12.67ex]',
+        8: 'box-content w-[14.48ex]',
+        9: 'box-content w-[16.29ex]',
+        10: 'box-content w-[18.1ex]',
+        20: 'box-content w-[36.2ex]',
+        30: 'box-content w-[54.3ex]',
       },
     },
   },

package/src/components/select/select.types.ts

@@ -8,10 +8,17 @@ type Variants = VariantProps<typeof styles>;
 export type SelectProps = {
   /**
    * Whether select is invalid
+   * @default false
    */
   invalid?: Variants['invalid'];
   /**
    * Size of select
+   * @default medium
    */
   size?: Variants['size'];
+  /**
+   * Width of select
+   * @default auto
+   */
+  width?: Variants['width'];
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>;

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

@@ -1,2 +1,4 @@
 export * from './selector-checkbox-group/index.js';
 export * from './selector-radio-group/index.js';
+export * from './selector-button-group/index.js';
+export * from './selector-link-group/index.js';

package/src/components/selector/components/selector-button-group/components/index.ts

@@ -0,0 +1 @@
+export * from './selector-button-group-option/index.js';

package/src/components/selector/components/selector-button-group/components/selector-button-group-option/index.ts

@@ -0,0 +1,2 @@
+export { SelectorButtonGroupOption } from './selector-button-group-option.component.js';
+export { type SelectorButtonGroupOptionProps } from './selector-button-group-option.types.js';

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

@@ -0,0 +1,70 @@
+import React, { MouseEventHandler, forwardRef, useCallback, useContext } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
+
+import { FlexiCell } from '../../../../../../index.js';
+import { ArrowRightIcon } from '../../../../../icon/index.js';
+import { SelectorButtonContext } from '../../selector-button-group.component.js';
+
+import { styles as SelectorButtonGroupOptionStyles } from './selector-button-group-option.styles.js';
+import { type SelectorButtonGroupOptionProps } from './selector-button-group-option.types.js';
+
+function BaseSelectorButtonGroupOption(
+  {
+    className,
+    children,
+    withBorder = true,
+    withArrow,
+    after,
+    before,
+    isDisabled = false,
+    onClick = () => undefined,
+    id,
+    ...props
+  }: SelectorButtonGroupOptionProps,
+  ref: any,
+) {
+  const state = useContext(SelectorButtonContext);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = SelectorButtonGroupOptionStyles({
+    className,
+    isFocusVisible,
+    isDisabled: state.isDisabled ? state.isDisabled : isDisabled,
+    isSelected: state.value === id,
+  });
+  const handleClick: MouseEventHandler<Element> = useCallback(
+    event => {
+      onClick(event);
+      state.onClick(id);
+    },
+    [onClick, state.onClick],
+  );
+  return (
+    <FlexiCell
+      {...mergeProps(props, focusProps)}
+      after={
+        <div className="flex gap-2">
+          {after}
+          <ArrowRightIcon aria-hidden="true" className={styles.icon({})} />
+        </div>
+      }
+      before={before}
+      withBorder={withBorder}
+      withArrow={withArrow}
+      tag="button"
+      ref={ref}
+      className={styles.base({})}
+      disabled={isDisabled}
+      id={id}
+      onClick={event => handleClick(event as React.MouseEvent)}
+      aria-pressed={state.value === id}
+      aria-disabled={state.isDisabled ? state.isDisabled : isDisabled}
+    >
+      {children}
+    </FlexiCell>
+  );
+}
+
+export const SelectorButtonGroupOption = forwardRef(BaseSelectorButtonGroupOption) as React.ForwardRefExoticComponent<
+  SelectorButtonGroupOptionProps & React.RefAttributes<unknown>
+>;
+SelectorButtonGroupOption.displayName = 'SelectorButton';

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

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'group/radio-option text-left max-sm:mb-0 max-sm:gap-2 max-sm:p-2 sm:mb-0 sm:gap-3 sm:p-3',
+      icon: 'mr-[-6px] text-primary transition-transform',
+    },
+    variants: {
+      isFocusVisible: {
+        true: {
+          base: 'focus-outline',
+        },
+        false: {},
+      },
+      isSelected: {
+        true: {
+          base: 'border-hero shadow-[0_0_0_2px_inset]',
+        },
+        false: {},
+      },
+      isDisabled: {
+        true: {
+          base: 'pointer-events-none opacity-50',
+        },
+        false: {
+          base: 'cursor-pointer hover:border-hero',
+          icon: 'max-sm:group-hover/radio-option:translate-x-0.5 sm:group-hover/radio-option:translate-x-1',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import { type FlexiCellProps } from '../../../../../flexi-cell/index.js';
+
+export type SelectorButtonGroupOptionProps = {
+  /**
+   * Unique ID used for toggling button
+   */
+  id: string;
+  /**
+   * Whether option isDisabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & ButtonHTMLAttributes<Element> &
+  Omit<FlexiCellProps, 'dualAction' | 'href'>;

package/src/components/selector/components/selector-button-group/index.ts

@@ -0,0 +1,2 @@
+export { SelectorButtonGroup } from './selector-button-group.component.js';
+export { type SelectorButtonGroupProps } from './selector-button-group.types.js';