@westpac/ui 0.3.0 → 0.5.0

package/src/components/list/list.styles.ts

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'typography-body-10 list-none',
+    },
+    variants: {
+      type: {
+        bullet: {},
+        link: {},
+        tick: {},
+        cross: {},
+        unstyled: {},
+        icon: {},
+        ordered: {
+          base: 'list-inside list-decimal',
+        },
+      },
+      nested: {
+        true: { base: 'pl-4' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/list/list.types.ts

@@ -0,0 +1,82 @@
+import { HTMLAttributes } from 'react';
+
+import { IconProps } from '../icon/index.js';
+
+export type ListProps = {
+  /**
+   * Visually hidden text to use for the tick or cross list.
+   *
+   * Tick list default value: "The following items are ticked"
+   */
+  assistiveText?: string;
+  /**
+   * The icon for list
+   */
+  icon?: (props: IconProps) => JSX.Element;
+  /**
+   * The look of the bullet, icon, tick and cross lists
+   */
+  look?: 'primary' | 'hero' | 'neutral' | 'success' | 'danger' | 'link';
+  /**
+   * The level of nesting
+   */
+  nested?: number;
+  /**
+   * The size of space between list elements
+   */
+  spacing?: 'medium' | 'large';
+  /**
+   * The type of the bullet
+   */
+  type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
+} & HTMLAttributes<Element>;
+
+export type ListContextState = {
+  /**
+   * The icon for list
+   */
+  icon?: (props: IconProps) => JSX.Element;
+  /**
+   * The look of the bullet, icon, tick and cross lists
+   */
+  look?: 'primary' | 'hero' | 'neutral' | 'success' | 'danger' | 'link';
+  /**
+   * The level of nesting
+   */
+  nested?: number;
+  /**
+   * The size of space between list elements
+   */
+  spacing?: 'medium' | 'large';
+  /**
+   * The type of the bullet
+   */
+  type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
+};
+
+export type GetStateValuesProps = {
+  /**
+   * The icon for list
+   */
+  icon?: (props: IconProps) => JSX.Element;
+  /**
+   * The look of the bullet, icon, tick and cross lists
+   */
+  look?: 'primary' | 'hero' | 'neutral' | 'success' | 'danger' | 'link';
+  /**
+   * The level of nesting
+   */
+  nested?: number;
+  /**
+   * The size of space between list elements
+   */
+  spacing?: 'medium' | 'large';
+  /**
+   * List State
+   */
+  state: ListContextState;
+  /**
+   * The type of the bullet
+   */
+  type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
+};

package/src/components/list/list.utils.ts

@@ -0,0 +1,13 @@
+import { GetStateValuesProps } from './list.types.js';
+
+export const getStateValues = (props: GetStateValuesProps) => {
+  const { state } = props;
+  let { type, look, spacing, icon } = props;
+
+  type = type || (state && state.type) || 'bullet';
+  look = look || (state && state.look) || (type === 'link' && 'link') || 'hero';
+  spacing = spacing || (state && state.spacing) || 'medium';
+  icon = icon || (state && state.icon);
+
+  return { type, look, spacing, icon };
+};

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

@@ -0,0 +1,29 @@
+import React, { useRef } from 'react';
+import { Overlay, useModalOverlay } from 'react-aria';
+
+import { styles as backdropStyles } from './backdrop.styles.js';
+import { type BackdropProps } from './backdrop.types.js';
+
+export function Backdrop({ zIndex = 100, portalContainer, ...props }: BackdropProps) {
+  const { children, state, className } = props;
+
+  const ref = useRef(null);
+  const styles = backdropStyles({ className });
+
+  const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
+
+  // Don't render anything if the modal is not open and we're not animating out.
+  if (!state.isOpen) {
+    return null;
+  }
+
+  return (
+    <Overlay portalContainer={portalContainer}>
+      <div style={{ zIndex }} className={styles.base()} {...underlayProps}>
+        <div {...modalProps} ref={ref} className={styles.modal()}>
+          {children}
+        </div>
+      </div>
+    </Overlay>
+  );
+}

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

@@ -0,0 +1,8 @@
+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 focus:outline-none',
+  },
+});

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

@@ -0,0 +1,29 @@
+import { type AriaModalOverlayProps } from 'react-aria';
+import { type OverlayTriggerState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './backdrop.styles.js';
+
+export type BackdropProps = {
+  /**
+   * Inner part of backdrop
+   */
+  children: React.ReactNode;
+  /**
+   * Clasname
+   */
+  className?: string;
+  /**
+   * Element where backdrop will be placed
+   */
+  portalContainer?: Element;
+  /**
+   * OverlayTriggerState props
+   */
+  state: OverlayTriggerState;
+  /**
+   * zIndex of content inside
+   */
+  zIndex?: number;
+} & VariantProps<typeof styles> &
+  AriaModalOverlayProps;

package/src/components/modal/components/backdrop/index.ts

@@ -0,0 +1,2 @@
+export { Backdrop } from './backdrop.component.js';
+export { type BackdropProps } from './backdrop.types.js';

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './dialog-body.styles.js';
+
+export type DialogBodyProps = VariantProps<typeof styles> & HTMLAttributes<HTMLElement>;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'border-t border-t-border bg-background px-3 py-2',
+});

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './dialog-footer.styles.js';
+
+export type DialogFooterProps = VariantProps<typeof styles> & HTMLAttributes<HTMLElement>;

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white focus:focus-outline',
+      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 focus:focus-outline',
+    },
+    variants: {
+      size: {
+        lg: {
+          base: 'w-[56.25rem]',
+        },
+        md: {
+          base: 'w-[37.5rem]',
+        },
+        sm: {
+          base: 'w-[18.75rem]',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,28 @@
+import { type AriaDialogProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './dialog.styles.js';
+
+export type DialogProps = {
+  /**
+   * Boolean to wrap all children into a Modal.Body
+   */
+  body?: boolean;
+  /**
+   * Inner part of Dialog
+   */
+  children: React.ReactNode;
+  /**
+   * Additional className for Dialog
+   */
+  className?: string;
+  /**
+   * onClose callback
+   */
+  onClose?: () => any;
+  /**
+   * Title for Modal
+   */
+  title?: string;
+} & VariantProps<typeof styles> &
+  AriaDialogProps;

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

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

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

@@ -0,0 +1,2 @@
+export * from './backdrop/index.js';
+export * from './dialog/index.js';

package/src/components/modal/index.ts

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

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

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

package/src/components/modal/modal.stories.tsx

@@ -0,0 +1,143 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { Fragment, useMemo } from 'react';
+import { useOverlayTriggerState } from 'react-stately';
+
+import { Button } from '../index.js';
+
+import { Modal } from './modal.component.js';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Example/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: `
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
+    `,
+    title: 'Title',
+    isDismissable: true,
+  },
+  render: ({ children, ...props }: any) => {
+    const state = useOverlayTriggerState({});
+    return (
+      <>
+        <Modal {...props} state={state} aria-label="Modal title" body>
+          {children}
+        </Modal>
+        <Button onClick={state.open}>Open Modal</Button>
+      </>
+    );
+  },
+};
+
+/**
+ * > WithFooter usage example
+ */
+export const WithFooterStory: Story = {
+  args: {
+    children: `I'm children`,
+    title: 'Title',
+    isDismissable: true,
+  },
+  render: ({ children, ...props }: any) => {
+    const state = useOverlayTriggerState({});
+
+    return (
+      <>
+        <Modal {...props} state={state} aria-label="Modal title">
+          <Modal.Body>{children}</Modal.Body>
+          <Modal.Footer>
+            <p>Lorem, ipsum dolor</p>
+          </Modal.Footer>
+        </Modal>
+        <Button onClick={state.open}>Open Modal</Button>
+      </>
+    );
+  },
+};
+
+/**
+ * > All sizes usage example
+ */
+export const AllSizesStory: Story = {
+  args: {
+    children: `I'm children`,
+    title: 'Title',
+    isDismissable: true,
+  },
+  render: ({ children, ...props }: any) => {
+    const stateSM = useOverlayTriggerState({});
+    const stateMD = useOverlayTriggerState({});
+    const stateLG = useOverlayTriggerState({});
+
+    const states = useMemo(() => {
+      return {
+        sm: stateSM,
+        md: stateMD,
+        lg: stateLG,
+      };
+    }, [stateSM, stateMD, stateLG]);
+
+    return (
+      <div className="flex gap-2">
+        {['sm', 'md', 'lg'].map((size: string) => (
+          <Fragment key={size}>
+            <Modal {...props} size={size} state={states[size as 'sm' | 'md' | 'lg']} title={`Modal ${size}`}>
+              <Modal.Body>{children}</Modal.Body>
+              <Modal.Footer>
+                <p>Lorem, ipsum dolor</p>
+              </Modal.Footer>
+            </Modal>
+            <Button onClick={states[size as 'sm' | 'md' | 'lg'].open}>Open Modal {size}</Button>
+          </Fragment>
+        ))}
+      </div>
+    );
+  },
+};
+
+/**
+ * > Not dismissable example
+ */
+export const NotDismissibleStory: Story = {
+  args: {
+    children: `I'm children`,
+    title: 'Title',
+    isDismissable: false,
+  },
+  render: ({ children, ...props }: any) => {
+    const state = useOverlayTriggerState({});
+
+    return (
+      <>
+        <Modal {...props} state={state} aria-label="Modal title">
+          <Modal.Body>{children}</Modal.Body>
+          <Modal.Footer className="flex justify-end gap-2">
+            <Button look="faint" onClick={state.close}>
+              Close
+            </Button>
+            <Button look="primary">Submit</Button>
+          </Modal.Footer>
+        </Modal>
+        <Button onClick={state.open}>Open Modal</Button>
+      </>
+    );
+  },
+};

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

@@ -0,0 +1,3 @@
+import { type BackdropProps, DialogProps } from './components/index.js';
+
+export type ModalProps = BackdropProps & DialogProps;

package/src/components/pagination/components/index.ts

@@ -0,0 +1 @@
+export * from './pagination-item/index.js';

package/src/components/pagination/components/pagination-item/index.ts

@@ -0,0 +1,2 @@
+export { PaginationItem } from './pagination-item.component.js';
+export { type PaginationItemProps } from './pagination-item.types.js';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { styles } from './pagination-item.styles.js';
+import { type PaginationItemProps } from './pagination-item.types.js';
+
+export function PaginationItem({
+  className,
+  firstItem = false,
+  tag: Tag = 'a',
+  children,
+  active,
+  disabled = false,
+  ...props
+}: PaginationItemProps) {
+  return (
+    <Tag
+      className={styles({ className, firstItem, active, disabled })}
+      {...props}
+      disabled={disabled}
+      aria-current={active ? 'page' : undefined}
+    >
+      {children}
+    </Tag>
+  );
+}

package/src/components/pagination/components/pagination-item/pagination-item.styles.ts

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'typography-body-10 block border-l border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
+    variants: {
+      firstItem: {
+        true: 'border-l-0',
+        false: '',
+      },
+      active: {
+        true: 'bg-hero text-white',
+        false: 'hover:bg-light',
+      },
+      disabled: {
+        true: 'cursor-not-allowed bg-light text-muted-90',
+        false: 'cursor-pointer',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,12 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './pagination-item.styles.js';
+
+export type PaginationItemProps = {
+  /**
+   * Link component to render
+   */
+  tag?: 'a' | 'button' | ((...args: any[]) => ReactElement | null);
+} & VariantProps<typeof styles> &
+  (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);

package/src/components/pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './pagination.component.js';
+export { type PaginationProps } from './pagination.types.js';