@westpac/ui 0.13.0 → 0.14.0

package/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
+    modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown',
+  },
+  variants: {
+    fullscreen: {
+      true: {
+        modal: 'top-0 flex flex-1 flex-col',
+        base: 'flex flex-col p-0',
+      },
+    },
+  },
+});

package/src/components/modal/components/modal-backdrop/modal-backdrop.types.ts

@@ -0,0 +1,31 @@
+import { type AriaModalOverlayProps } from 'react-aria';
+import { type OverlayTriggerState } from 'react-stately';
+
+import { ModalDialogProps } from '../index.js';
+
+export type ModalBackdropProps = {
+  /**
+   * Inner part of backdrop
+   */
+  children: React.ReactNode;
+  /**
+   * Clasname
+   */
+  className?: string;
+  /**
+   * Element where backdrop will be placed
+   */
+  portalContainer?: Element;
+  /**
+   * size
+   */
+  size?: ModalDialogProps['size'];
+  /**
+   * OverlayTriggerState props
+   */
+  state: OverlayTriggerState;
+  /**
+   * zIndex of content inside
+   */
+  zIndex?: number;
+} & AriaModalOverlayProps;

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/index.ts

@@ -0,0 +1,2 @@
+export * from './modal-dialog-body.component.js';
+export * from './modal-dialog-body.types.js';

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './modal-dialog-body.styles.js';
+import { type ModalDialogBodyProps } from './modal-dialog-body.types.js';
+
+export function ModalDialogBody({ className, children, ...props }: ModalDialogBodyProps) {
+  return (
+    <div className={styles({ className })} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'flex-1 overflow-auto px-4 py-3',
+});

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type ModalDialogBodyProps = {
+  /**
+   * Dialog Body content
+   */
+  children?: ReactNode;
+} & HTMLAttributes<HTMLElement>;

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/index.ts

@@ -0,0 +1,2 @@
+export * from './modal-dialog-footer.component.js';
+export * from './modal-dialog-footer.types.js';

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './modal-dialog-footer.styles.js';
+import { type ModalDialogFooterProps } from './modal-dialog-footer.types.js';
+
+export function ModalDialogFooter({ className, children, ...props }: ModalDialogFooterProps) {
+  return (
+    <div className={styles({ className })} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type ModalDialogFooterProps = {
+  /**
+   * Footer content
+   */
+  children?: ReactNode;
+} & HTMLAttributes<HTMLElement>;

package/src/components/modal/components/modal-dialog/index.ts

@@ -0,0 +1,2 @@
+export { ModalDialog } from './modal-dialog.component.js';
+export { type ModalDialogProps } from './modal-dialog.types.js';

package/src/components/modal/components/modal-dialog/modal-dialog.component.tsx

@@ -0,0 +1,41 @@
+import React, { useRef } from 'react';
+import { useDialog, useFocusRing } from 'react-aria';
+
+import { CloseIcon } from '../../../../components/icon/index.js';
+
+import { ModalDialogBody } from './components/modal-dialog-body/index.js';
+import { ModalDialogFooter } from './components/modal-dialog-footer/index.js';
+import { styles as dialogStyles } from './modal-dialog.styles.js';
+import { type ModalDialogProps } from './modal-dialog.types.js';
+
+/**
+ * @private
+ */
+export function ModalDialog({ className, body, onClose, size = 'md', ...props }: ModalDialogProps) {
+  const { children } = props;
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = dialogStyles({ size, isFocusVisible });
+
+  const ref = useRef(null);
+
+  const { dialogProps, titleProps } = useDialog(props, ref);
+
+  return (
+    <div {...dialogProps} ref={ref} className={styles.base({ className })}>
+      {onClose && (
+        <button className={styles.close()} onClick={onClose} aria-label="Close modal" {...focusProps}>
+          <CloseIcon className="block" size="small" />
+        </button>
+      )}
+      {props.title && (
+        <h3 {...titleProps} className={styles.title()}>
+          {props.title}
+        </h3>
+      )}
+      {body ? <ModalDialogBody>{children}</ModalDialogBody> : children}
+    </div>
+  );
+}
+
+ModalDialog.Body = ModalDialogBody;
+ModalDialog.Footer = ModalDialogFooter;

package/src/components/modal/components/modal-dialog/modal-dialog.styles.ts

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white outline-none',
+      title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
+      close: 'absolute right-1 top-1 block p-1',
+    },
+    variants: {
+      size: {
+        full: {
+          base: 'max-h-screen w-full flex-1',
+        },
+        lg: {
+          base: 'w-[56.25rem]',
+        },
+        md: {
+          base: 'w-[37.5rem]',
+        },
+        sm: {
+          base: 'w-[18.75rem]',
+        },
+      },
+      isFocusVisible: {
+        true: { close: 'focus-outline' },
+        false: { close: 'outline-none' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/modal/components/modal-dialog/modal-dialog.types.ts

@@ -0,0 +1,37 @@
+import { type AriaDialogProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './modal-dialog.styles.js';
+
+type Variants = VariantProps<typeof styles>;
+
+export type ModalDialogProps = {
+  /**
+   * Boolean to wrap all children into a ModalBody
+   */
+  body?: boolean;
+  /**
+   * Inner part of Dialog
+   */
+  children: React.ReactNode;
+  /**
+   * Additional className for Dialog
+   */
+  className?: string;
+  /**
+   * Full screen
+   */
+  fullscreen?: boolean;
+  /**
+   * onClose callback
+   */
+  onClose?: () => unknown;
+  /**
+   * Size of dialog
+   */
+  size?: Variants['size'];
+  /**
+   * Title for Modal
+   */
+  title?: string;
+} & AriaDialogProps;

package/src/components/modal/index.ts

@@ -1,2 +1,5 @@
+export { ModalDialogBody as ModalBody } from './components/modal-dialog/components/modal-dialog-body/modal-dialog-body.component.js';
+export { ModalDialogFooter as ModalFooter } from './components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.js';
+
 export { Modal } from './modal.component.js';
 export { type ModalProps } from './modal.types.js';

package/src/components/modal/modal.component.tsx

@@ -2,23 +2,23 @@
 
 import React from 'react';
 
-import { Backdrop, Dialog } from './components/index.js';
+import { ModalBackdrop, ModalDialog } from './components/index.js';
 import { type ModalProps } from './modal.types.js';
 
-export function Modal({ children, title, role, body, size, ...props }: ModalProps) {
+export function Modal({ children, title, role, body, size, className, fullscreen, ...props }: ModalProps) {
   return (
-    <Backdrop {...props}>
-      <Dialog
+    <ModalBackdrop size={size} {...props}>
+      <ModalDialog
+        fullscreen={fullscreen}
         onClose={props.isDismissable ? props.state.close : undefined}
         title={title}
         role={role}
         body={body}
         size={size}
+        className={className}
       >
         {children}
-      </Dialog>
-    </Backdrop>
+      </ModalDialog>
+    </ModalBackdrop>
   );
 }
-Modal.Footer = Dialog.Footer;
-Modal.Body = Dialog.Body;

package/src/components/modal/modal.types.ts

@@ -1,3 +1,3 @@
-import { type BackdropProps, DialogProps } from './components/index.js';
+import { type ModalBackdropProps, ModalDialogProps } from './components/index.js';
 
-export type ModalProps = BackdropProps & DialogProps;
+export type ModalProps = ModalBackdropProps & ModalDialogProps & { fullscreen?: boolean };

package/src/components/pagination/components/pagination-item/pagination-item.component.tsx

@@ -3,6 +3,9 @@ import React from 'react';
 import { styles } from './pagination-item.styles.js';
 import { type PaginationItemProps } from './pagination-item.types.js';
 
+/**
+ * @private
+ */
 export function PaginationItem({
   className,
   firstItem = false,

package/src/components/pagination/pagination.types.ts

@@ -38,6 +38,7 @@ export type PaginationHookProps = {
 export type PaginationProps = {
   /**
    * Back label
+   * @default Back
    */
   backLabel?: ReactNode;
   /**
@@ -46,6 +47,7 @@ export type PaginationProps = {
   current?: number;
   /**
    * Carousel feature
+   * @default false
    */
   infinite?: boolean;
   /**
@@ -54,10 +56,12 @@ export type PaginationProps = {
   linkComponent?: PaginationItemProps['tag'];
   /**
    * Next label
+   * @default Next
    */
   nextLabel?: ReactNode;
   /**
    * Tag to render
+   * @default nav
    */
   tag?: keyof JSX.IntrinsicElements;
 } & (PaginationAsLinkProps | PaginationAsButtonProps) &

package/src/components/panel/components/index.ts

@@ -1,2 +1,2 @@
-export * from './body/index.js';
-export * from './footer/index.js';
+export * from './panel-body/index.js';
+export * from './panel-footer/index.js';

package/src/components/panel/components/panel-body/index.ts

@@ -0,0 +1,2 @@
+export { PanelBody } from './panel-body.component.js';
+export { type PanelBodyProps } from './panel-body.types.js';

package/src/components/panel/components/panel-body/panel-body.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { styles as bodyStyles } from './panel-body.styles.js';
+import { type PanelBodyProps } from './panel-body.types.js';
+
+export function PanelBody({ className, children, ...props }: PanelBodyProps) {
+  const styles = bodyStyles({});
+  return (
+    <div className={styles.base({ className })} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/panel/components/panel-body/panel-body.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type PanelBodyProps = {
+  /**
+   * body content
+   */
+  children: ReactNode;
+} & HTMLAttributes<Element>;

package/src/components/panel/components/panel-footer/index.ts

@@ -0,0 +1,2 @@
+export { PanelFooter } from './panel-footer.component.js';
+export { type PanelFooterProps } from './panel-footer.types.js';

package/src/components/panel/components/panel-footer/panel-footer.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { styles as footerStyles } from './panel-footer.styles.js';
+import { type PanelFooterProps } from './panel-footer.types.js';
+
+export function PanelFooter({ className, children, ...props }: PanelFooterProps) {
+  const styles = footerStyles();
+  return (
+    <div className={styles.base({ className })} {...props}>
+      {children}
+    </div>
+  );
+}
+
+PanelFooter.displayName = 'PanelFooter';

package/src/components/panel/components/panel-footer/panel-footer.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type PanelFooterProps = {
+  /**
+   * footer content
+   */
+  children: ReactNode;
+} & HTMLAttributes<Element>;

package/src/components/panel/index.ts

@@ -1,2 +1,3 @@
+export { PanelBody, PanelFooter } from './components/index.js';
 export { Panel } from './panel.component.js';
 export { type PanelProps } from './panel.types.js';

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

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { Body, Footer } from './components/index.js';
 import { styles as panelStyles } from './panel.styles.js';
 import { type PanelProps } from './panel.types.js';
 
@@ -13,5 +12,3 @@ export function Panel({ className, children, heading, headingTag: Tag = 'h1', lo
     </div>
   );
 }
-Panel.Body = Body;
-Panel.Footer = Footer;

package/src/components/panel/panel.types.ts

@@ -1,16 +1,22 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
 export type PanelProps = {
+  /**
+   * Panel content
+   */
+  children?: ReactNode;
   /**
    * The heading of the panel
    */
   heading: string;
   /**
    * Tag for heading defaults to h1
+   * @default h1
    */
   headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /**
    * The styling of the panel
+   * @default hero
    */
   look?: 'faint' | 'hero';
 } & HTMLAttributes<Element>;

package/src/components/pass-code/index.ts

@@ -0,0 +1,2 @@
+export { PassCode } from './pass-code.component.js';
+export { type PassCodeProps } from './pass-code.types.js';

package/src/components/pass-code/pass-code.component.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React, { ChangeEvent, ClipboardEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';
+
+import { Input } from '../index.js';
+
+import { styles as passCodeStyles } from './pass-code.styles.js';
+import { type PassCodeProps } from './pass-code.types.js';
+
+export function PassCode({ length, onComplete, className, ...props }: PassCodeProps) {
+  const [passcode, setPasscode] = useState<(string | undefined)[]>(Array.from({ length }).map(() => undefined));
+  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const styles = passCodeStyles({});
+
+  const handleChange = useCallback(
+    (index: number, event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value.slice(-1);
+
+      // Update the passcode state
+      const newPasscode = [...passcode.slice(0, index), value, ...passcode.slice(index + 1)];
+      setPasscode(newPasscode);
+
+      // Move to the next input if available
+      if (index < length - 1 && value !== '') {
+        inputRefs.current[index + 1]?.focus();
+      }
+
+      // Call onComplete when passcode is complete
+      if (newPasscode.filter(passcode => !passcode).length === 0) {
+        onComplete(newPasscode.join(''));
+      }
+    },
+    [onComplete, inputRefs, passcode],
+  );
+
+  const handlePaste = useCallback(
+    (index: number, event: ClipboardEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      const pastedData = event.clipboardData.getData('text');
+      const validData = pastedData.slice(0, length - index).split('');
+      const previousSlice = passcode.slice(0, index);
+      const afterSlice = passcode.slice(index);
+      const newPasscode = [...previousSlice, ...[...validData, ...afterSlice.slice(validData.length)]].slice(0, length);
+      setPasscode(newPasscode);
+      if (newPasscode.filter(passcode => !passcode).length === 0) {
+        onComplete(newPasscode.join(''));
+      }
+    },
+    [passcode],
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number, event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Backspace' && index > 0) {
+        event.preventDefault();
+        const newPasscode = [...passcode.slice(0, index), undefined, ...passcode.slice(index + 1)];
+        setPasscode(newPasscode);
+        const previousInput = inputRefs.current[index - 1];
+        const currentInput = inputRefs.current[index];
+        if (previousInput) {
+          previousInput.focus();
+        }
+        if (currentInput) {
+          currentInput.value = '';
+        }
+      }
+    },
+    [inputRefs],
+  );
+
+  const handleFocus = useCallback(
+    (index: number) => {
+      inputRefs.current[index]?.select();
+    },
+    [inputRefs],
+  );
+
+  return (
+    <div {...props} className={styles.base({ className })}>
+      {passcode.map((digit, index) => (
+        <Input
+          size="large"
+          key={index}
+          value={digit}
+          onChange={e => handleChange(index, e)}
+          onPaste={e => handlePaste(index, e)}
+          onKeyDown={e => handleKeyDown(index, e)}
+          onFocus={() => handleFocus(index)}
+          ref={input => (inputRefs.current[index] = input)}
+          className={styles.input({})}
+          aria-label={`Passcode digit ${index + 1}`}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/pass-code/pass-code.styles.ts

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'flex gap-2',
+    input: 'w-6 px-0 text-center',
+  },
+});

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

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './pass-code.styles.js';
+
+export type PassCodeProps = {
+  length: number;
+  onComplete: (passcode: string) => void;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

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

@@ -0,0 +1,2 @@
+export { PassCodeView } from './pass-code-view.component.js';
+export { type PassCodeViewProps } from './pass-code-view.types.js';

package/src/components/pass-code-view/pass-code-view.component.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { AlertIcon, PadlockIcon } from '../icon/index.js';
+import { Button, Link } from '../index.js';
+import { PassCode } from '../pass-code/pass-code.component.js';
+
+import { PassCodeViewLoader } from './pass-code-view.loader.js';
+import { styles as passCodeViewStyles } from './pass-code-view.styles.js';
+import { type PassCodeViewProps } from './pass-code-view.types.js';
+
+export function PassCodeView({
+  className,
+  tag: Tag = 'div',
+  headerIcon: HeaderIcon = PadlockIcon,
+  header,
+  description,
+  updateButtonLabel = 'update',
+  resendButtonLabel = 'Resend code',
+  onUpdate = () => {
+    return;
+  },
+  onResend = () => {
+    return;
+  },
+  onComplete = () => {
+    return;
+  },
+  errorMessage,
+  passCodeLength = 6,
+  loading = false,
+  ...props
+}: PassCodeViewProps) {
+  const styles = passCodeViewStyles({});
+
+  return (
+    <Tag className={styles.base({ className })} {...props}>
+      {HeaderIcon && <HeaderIcon className={styles.icon()} />}
+      {header && <h3 className={styles.heading()}>{header}</h3>}
+      {loading ? (
+        <PassCodeViewLoader length={passCodeLength} />
+      ) : (
+        <>
+          {description && (
+            <p>
+              {description}
+              <Link type="inline" className={styles.link()} onPress={onUpdate}>
+                {updateButtonLabel}
+              </Link>
+            </p>
+          )}
+          {errorMessage && (
+            <p className="mt-2 flex items-center gap-1 text-danger">
+              <AlertIcon size="small" look="outlined" color="danger" />
+              {errorMessage}
+            </p>
+          )}
+          <PassCode className={styles.passCode()} length={passCodeLength} onComplete={onComplete} />
+          {resendButtonLabel && (
+            <Button look="link" onClick={onResend}>
+              {resendButtonLabel}
+            </Button>
+          )}
+        </>
+      )}
+    </Tag>
+  );
+}

package/src/components/pass-code-view/pass-code-view.loader.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export function PassCodeViewLoader({ length }: { length: number }) {
+  return (
+    <div className="w-full px-4">
+      <div className="linear-gradient-style -mx-4 mb-2 h-4 rounded" />
+      <div className="flex justify-center gap-2">
+        {Array.from({ length }).map((_, index) => (
+          <div key={index} className="linear-gradient-style h-7 w-6 rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'flex flex-col items-center',
+      heading: 'typography-body-5 mb-3 font-bold',
+      link: 'ml-1 cursor-pointer',
+      passCode: 'my-3',
+      icon: 'mb-3',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);