@westpac/ui 0.13.0 → 0.14.0

package/src/components/pass-code-view/pass-code-view.types.ts

@@ -0,0 +1,58 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { PassCodeProps } from '../pass-code/pass-code.types.js';
+
+import { styles } from './pass-code-view.styles.js';
+
+export type PassCodeViewProps = {
+  /**
+   * description text
+   */
+  description?: ReactNode;
+  /**
+   * error message
+   */
+  errorMessage?: ReactNode;
+  /**
+   * header text
+   */
+  header?: ReactNode;
+  /**
+   * icon on the header
+   */
+  headerIcon?: React.ElementType;
+  /**
+   * boolean to show skeleton
+   */
+  loading?: boolean;
+  /**
+   * callback when the value is completely typed
+   */
+  onComplete?: PassCodeProps['onComplete'];
+  /**
+   * on click the resend button
+   */
+  onResend?: () => any;
+  /**
+   * on click the update button
+   */
+  onUpdate?: () => any;
+  /**
+   * length of the passcode
+   */
+  passCodeLength?: number;
+  /**
+   * label for resend button
+   */
+  resendButtonLabel?: ReactNode;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+  /**
+   * label for update button
+   */
+  updateButtonLabel?: ReactNode;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/pictogram/index.ts

@@ -93,4 +93,4 @@ export { WalletPictogram } from './components/informative/wallet-pictogram.js';
 export { WearablesPictogram } from './components/informative/wearables-pictogram.js';
 
 export { WBCBankCardPictogram } from './components/decorative/wbc-bank-card-pictogram.js';
-export { type PictogramProps } from './pictogram.types.js';
+export { type PictogramProps, type PictogramMode } from './pictogram.types.js';

package/src/components/pictogram/pictogram.component.tsx

@@ -17,20 +17,18 @@ export function Pictogram({
   ...props
 }: PictogramProps) {
   return (
-    <span className={styles({ className })}>
-      <svg
-        xmlns={xmlns}
-        role={role}
-        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
-        focusable={focusable}
-        className="block"
-        {...props}
-      >
-        {copyrightYear && (
-          <metadata>{`Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`}</metadata>
-        )}
-        {children}
-      </svg>
-    </span>
+    <svg
+      xmlns={xmlns}
+      role={role}
+      viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+      focusable={focusable}
+      className={styles({ className })}
+      {...props}
+    >
+      {copyrightYear && (
+        <metadata>{`Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`}</metadata>
+      )}
+      {children}
+    </svg>
   );
 }

package/src/components/pictogram/pictogram.types.ts

@@ -1,5 +1,7 @@
 import { type SVGAttributes } from 'react';
 
+export type PictogramMode = 'dark' | 'light' | 'duo';
+
 export type PictogramProps = SVGAttributes<SVGElement> & {
   /**
    * SVG copyright year
@@ -8,7 +10,7 @@ export type PictogramProps = SVGAttributes<SVGElement> & {
   /**
    * Pictogram mode
    */
-  mode?: 'dark' | 'light' | 'duo';
+  mode?: PictogramMode;
   /**
    * Tag to render
    */

package/src/components/popover/components/panel/panel.component.tsx

@@ -8,6 +8,9 @@ import { usePopoverPosition } from '../../popover.hooks.js';
 import { styles as panelStyles } from './panel.styles.js';
 import { type PanelProps, Position } from './panel.types.js';
 
+/**
+ * @private
+ */
 export function Panel({ state, heading, headingTag: Tag = 'h1', content, placement, id, triggerRef }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
@@ -59,3 +62,4 @@ export function Panel({ state, heading, headingTag: Tag = 'h1', content, placeme
     </FocusScope>
   );
 }
+Panel.displayName = 'Popover.Panel';

package/src/components/popover/popover.component.tsx

@@ -23,6 +23,7 @@ export function Popover({
   onClick = () => undefined,
   placement,
   look,
+  soft = false,
   open = false,
   icon,
 }: PopoverProps) {
@@ -58,6 +59,7 @@ export function Popover({
       <Button
         look={icon && !children ? 'link' : look}
         iconAfter={icon}
+        soft={soft}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
         onClick={handleClick}

package/src/components/popover/popover.types.ts

@@ -18,6 +18,7 @@ export type PopoverProps = {
   heading?: string;
   /**
    * Tag to render
+   * @default h1
    */
   headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
   /**
@@ -34,7 +35,8 @@ export type PopoverProps = {
   open?: boolean;
   /**
    * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
+   * @default top
    */
   placement?: 'top' | 'bottom';
 } & HTMLAttributes<Element> &
-  Pick<ButtonProps, 'look'>;
+  Pick<ButtonProps, 'look' | 'soft'>;

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

@@ -7,14 +7,17 @@ export type ProgressBarProps = {
   className?: string;
   /**
    * look of bar
+   * @default default
    */
   look?: 'default' | 'skinny';
   /**
    * Whether or not label shows on default bar
+   * @default false
    */
   noLabel?: boolean;
   /**
    * The progress bar value as a percentage. Decimal numbers are rounded.
+   * @default 0
    */
   value?: number;
 } & Pick<AriaProgressBarProps, 'aria-label' | 'aria-describedby' | 'aria-details' | 'aria-labelledby' | 'id'>;

package/src/components/progress-indicator/index.ts

@@ -0,0 +1,2 @@
+export { ProgressIndicator } from './progress-indicator.component.js';
+export { type ProgressIndicatorProps } from './progress-indicator.types.js';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { styles } from './progress-indicator.styles.js';
+import { type ProgressIndicatorProps } from './progress-indicator.types.js';
+
+export function ProgressIndicator({
+  className,
+  children,
+  inverted = false,
+  size = 'medium',
+  'aria-label': ariaLabel = 'Loading',
+  ...props
+}: ProgressIndicatorProps) {
+  return (
+    <div className={styles({ className, size, inverted })} aria-label={ariaLabel} {...props}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-y-[1px] border-l-[1px] border-r-0 border-t-[transparent]',
+    variants: {
+      size: {
+        xsmall: 'h-2 w-2',
+        small: 'h-3 w-3',
+        medium: 'h-4 w-4',
+        large: 'h-6 w-6',
+        xlarge: 'h-8 w-8',
+      },
+      inverted: {
+        true: 'border-b-white border-l-white',
+        false: 'border-b-hero border-l-hero',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './progress-indicator.styles.js';
+
+type Variants = VariantProps<typeof styles>;
+
+export type ProgressIndicatorProps = {
+  /**
+   * Whether indicator should be white for a dark background
+   */
+  inverted?: boolean;
+  /**
+   * Size of progress indicator
+   */
+  size?: Variants['size'];
+} & HTMLAttributes<Element>;

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

@@ -1,5 +1,6 @@
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useId, useMemo } from 'react';
+import { useFocusRing } from 'react-aria';
 
 import { Circle, VisuallyHidden } from '../../../index.js';
 import { ProgressRopeStep } from '../index.js';
@@ -9,6 +10,9 @@ import { type ProgressRopeGroupStepProps } from './progress-rope-group-step.type
 
 const loadAnimations = () => import('./progress-rope-group-step.utils.js').then(res => res.default);
 
+/**
+ * @private
+ */
 export function ProgressRopeGroupStep({
   steps,
   currentKey,
@@ -39,7 +43,12 @@ export function ProgressRopeGroupStep({
     return 'not started';
   }, [steps, furthestVisitedStep]);
 
+  const { isFocusVisible, focusProps } = useFocusRing();
+
   const state = useMemo(() => {
+    if (current && visited) {
+      return 'current-visited';
+    }
     if (current) {
       return 'current';
     }
@@ -49,7 +58,7 @@ export function ProgressRopeGroupStep({
     return 'non-visited';
   }, [current, visited]);
 
-  const styles = progressRopeGroupStyles({ firstItem, state });
+  const styles = progressRopeGroupStyles({ firstItem, state, isFocusVisible });
   return (
     <>
       <button
@@ -57,6 +66,7 @@ export function ProgressRopeGroupStep({
         className={styles.circleWrapper({})}
         onClick={onToggle}
         aria-controls={stepsContainerID}
+        {...focusProps}
       >
         <Circle className={styles.circle()} aria-hidden="true" />
         {children}
@@ -79,21 +89,23 @@ export function ProgressRopeGroupStep({
               }}
               transition={{ duration: 0.2, ease: 'easeInOut' }}
             >
-              <ul className={styles.stepsWrapper({})} id={stepsContainerID} aria-hidden={!opened}>
+              <ol className={styles.stepsWrapper({})} id={stepsContainerID} aria-hidden={!opened}>
                 {steps.map((step, index) => (
                   <li key={step.index}>
                     <ProgressRopeStep
                       firstItem={index === 0}
+                      lastItemInGroup={index === steps.length - 1}
                       size="small"
                       onClick={(furthestVisitedStep || 0) >= step.index ? step.onClick : undefined}
                       current={step.index === currentKey}
-                      visited={(furthestVisitedStep || 0) >= step.index}
+                      visited={(furthestVisitedStep || 0) > step.index}
+                      furthest={furthestVisitedStep === step.index}
                     >
                       {step.text}
                     </ProgressRopeStep>
                   </li>
                 ))}
-              </ul>
+              </ol>
             </m.div>
           )}
         </AnimatePresence>

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

@@ -6,32 +6,42 @@ export const styles = tv(
       base: '',
       circle: 'relative z-10 h-[14px] w-[14px] border-2 bg-white transition-colors',
       circleWrapper:
-        '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 after:absolute after:inset-y-0 after:left-[6px] after:z-[1] after:block after:translate-y-1/2 after:border-l-2 after:transition-colors',
-      stepsWrapper: 'relative overflow-hidden transition-all',
+        'typography-body-9 relative flex w-full cursor-pointer items-center gap-2 pb-[1.625rem] pt-1 leading-[1.428571429] transition-colors ',
+      stepsWrapper: 'relative transition-all',
     },
     variants: {
       firstItem: {
         true: {
-          circleWrapper: 'before:hidden',
+          circleWrapper: 'after:first:hidden',
         },
         false: {},
       },
       state: {
         current: {
           base: 'font-bold text-primary',
-          circle: 'border-primary bg-white',
-          circleWrapper: 'before:border-solid before:border-primary after:border-solid after:border-primary',
+          circle: 'border-primary bg-white ',
+          circleWrapper: '',
         },
         visited: {
-          base: 'before:border-solid before:border-primary',
+          base: '',
           circle: 'border-[3px] border-primary bg-primary',
-          circleWrapper: 'text-text before:border-solid before:border-primary after:border-solid after:border-primary',
+          circleWrapper:
+            'text-text before:absolute before:inset-y-0 before:left-1 before:z-[1] before:block before:translate-y-[1.25rem] before:border-l-2 before:border-primary before:transition-colors after:absolute after:inset-y-[1.25rem] after:left-1 after:z-[1] after:block after:translate-y-[-1.25rem] after:border-l-2 after:border-primary after:transition-colors',
         },
         'non-visited': {
-          base: 'before:border-borderDark',
-          circleWrapper: 'text-muted-90 after:border-dotted after:border-borderDark',
+          base: '',
+          circleWrapper: 'text-muted-90',
           circle: 'border-borderDark bg-white',
         },
+        'current-visited': {
+          base: '',
+          circleWrapper:
+            'before:absolute before:inset-y-0 before:left-1 before:z-[1] before:block before:translate-y-[1.25rem] before:border-l-2 before:border-primary before:transition-colors',
+          circle: 'border-[3px] border-primary bg-white',
+        },
+      },
+      isFocusVisible: {
+        true: { circleWrapper: 'focus-outline' },
       },
     },
   },

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { ProgressRopeStepItem, type ProgressRopeStepWithIndex } from '../../progress-rope.types.js';
+import { ProgressRopeStepItem } from '../../progress-rope.types.js';
 
 export type ProgressRopeGroupStepProps = {
   /**
@@ -19,6 +19,10 @@ export type ProgressRopeGroupStepProps = {
    * Furtherst visited step
    */
   furthestVisitedStep?: number;
+  /**
+   * Whether or not it is the last item
+   */
+  lastItem?: boolean;
   /**
    * Trigger when the user try to open/close the group
    */

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';