@westpac/ui 0.2.1 → 0.4.0

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

@@ -0,0 +1,85 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'typography-body-10 pl-[1.1875rem]',
+      bullet: 'absolute block border',
+      link: 'text-text hover:cursor-pointer hover:underline focus:focus-outline',
+      wrapper: 'relative',
+    },
+    variants: {
+      icon: {
+        true: {},
+      },
+      spacing: {
+        medium: {
+          base: 'my-1',
+        },
+        large: {
+          base: 'my-2',
+        },
+      },
+      look: {
+        primary: {
+          bullet: 'border-primary bg-primary after:border-primary',
+        },
+        hero: {
+          bullet: 'border-hero bg-hero after:border-hero',
+        },
+        neutral: {
+          bullet: 'border-neutral bg-neutral after:border-neutral',
+        },
+        success: {
+          bullet: 'border-success bg-success after:border-success',
+        },
+        danger: {
+          bullet: 'border-danger bg-danger after:border-danger',
+        },
+        link: {
+          bullet: 'border-link bg-link after:border-link',
+        },
+      },
+      type: {
+        bullet: {
+          bullet: 'left-[0.25rem] top-[0.375rem] h-[0.5rem] w-[0.5rem] rounded-full',
+        },
+        link: {
+          bullet:
+            'left-[0.125rem] top-[0.375rem] h-[0.5rem] w-[0.5rem] rotate-45 border-b-0 border-l-0 border-r-[0.125rem] border-t-[0.125rem] bg-[transparent]',
+        },
+        tick: {
+          bullet:
+            ' left-[0.125rem] top-[0.3125rem] h-[0.375rem] w-[0.75rem] rotate-[-44deg] border-b-[0.125rem] border-l-[0.125rem] border-r-0 border-t-0 bg-[transparent]',
+        },
+        cross: {
+          bullet:
+            'left-[0.375rem] top-[0.25rem] h-[0.75rem] w-0 -rotate-45 border-y-0 border-l-[0.125rem] border-r-0 bg-[transparent] after:absolute after:left-[-0.125rem] after:block after:h-[0.75rem] after:w-0 after:rotate-90 after:border-y-0 after:border-l-[0.125rem] after:border-r-0',
+        },
+        unstyled: {
+          base: 'pl-0',
+          bullet: 'pl-[1.1875rem] ',
+        },
+        icon: {
+          base: '',
+          bullet: 'border-none bg-[transparent]',
+        },
+        ordered: {
+          base: 'pl-0',
+        },
+      },
+      nested: {
+        true: { bullet: 'bg-[transparent]' },
+      },
+    },
+    compoundSlots: [
+      {
+        slots: ['bullet'],
+        type: 'link',
+        icon: true,
+        className: 'left-0 top-0 h-3 w-3 rotate-0 border-none bg-[transparent]',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+
+import { IconProps } from '../../../icon/index.js';
+
+export type ItemProps = {
+  /**
+   * Renders `<a>` link element around the item content
+   */
+  href?: string;
+  /**
+   * The icon for list item
+   */
+  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 list style
+   */
+  type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
+} & HTMLAttributes<Element>;

package/src/components/list/index.ts

@@ -0,0 +1,2 @@
+export { List } from './list.component.js';
+export { type ListProps } from './list.types.js';

package/src/components/list/list.component.tsx

@@ -0,0 +1,35 @@
+import React, { Children, ReactElement, cloneElement, createContext, useContext } from 'react';
+
+import { Item } from './components/item/index.js';
+import { styles as listStyles } from './list.styles.js';
+import { ListContextState, type ListProps } from './list.types.js';
+import { getStateValues } from './list.utils.js';
+
+export const ListContext = createContext<ListContextState>({});
+
+export function List({ assistiveText, className, children, look, nested, icon, type, spacing, ...props }: ListProps) {
+  const state = useContext(ListContext);
+  const Tag = type === 'ordered' ? 'ol' : 'ul';
+  const stateValues = getStateValues({ look, type, spacing, state, icon });
+
+  if (typeof nested !== 'number') {
+    nested = (typeof state.nested === 'number' && state.nested + 1) || 0;
+  }
+
+  assistiveText =
+    (type === 'tick' || type === 'cross') && nested === 0
+      ? assistiveText || `The following items are ${type === 'tick' ? 'ticked' : 'crossed'}`
+      : undefined;
+
+  const styles = listStyles({ type: stateValues.type, nested: typeof state.nested === 'number' });
+
+  return (
+    <ListContext.Provider value={{ nested, ...stateValues }}>
+      <Tag className={styles.base({ className })} {...props} role="list" aria-label={assistiveText}>
+        {Children.map(children, (child, index) => cloneElement(child as ReactElement, { key: index }))}
+      </Tag>
+    </ListContext.Provider>
+  );
+}
+
+List.Item = Item;

package/src/components/list/list.stories.tsx

@@ -0,0 +1,130 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { AndroidIcon } from '../icon/index.js';
+
+import { List } from './list.component.js';
+
+const meta: Meta<typeof List> = {
+  title: 'Example/List',
+  component: List,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-2">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LOOKS = ['primary', 'hero', 'neutral', 'success', 'danger', 'link'];
+const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'];
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: [
+      <List.Item>Styled list</List.Item>,
+      <List.Item>Styled list</List.Item>,
+      <List.Item>Styled list</List.Item>,
+    ],
+  },
+};
+
+/**
+ * > Type of list
+ */
+export const ListTypes = () =>
+  TYPES.map((type: any) => (
+    <div className="mb-2" key={type}>
+      <h1 className="typography-body-8">{type}</h1>
+      <List type={type} icon={type === 'icon' ? AndroidIcon : undefined}>
+        <List.Item>Styled {type} list</List.Item>
+        <List.Item>Styled {type} list</List.Item>
+        <List.Item>Styled {type} list</List.Item>
+        <List icon={type === 'link' ? AndroidIcon : undefined}>
+          <List.Item>Styled {type} list</List.Item>
+          <List.Item>Styled {type} list</List.Item>
+          <List.Item>Styled {type} list</List.Item>
+        </List>
+        <List.Item>Styled {type} list</List.Item>
+      </List>
+    </div>
+  ));
+
+/**
+ * > Type of list
+ */
+export const ListLooks = () =>
+  LOOKS.map((look: any) => (
+    <div className="mb-2" key={look}>
+      <h1 className="typography-body-8">{look}</h1>
+      <List look={look} type="bullet">
+        <List.Item>Styled {look} list</List.Item>
+        <List.Item>Styled {look} list</List.Item>
+        <List.Item>Styled {look} list</List.Item>
+        <List icon={look === 'link' ? AndroidIcon : undefined}>
+          <List.Item>Styled {look} list</List.Item>
+          <List.Item>Styled {look} list</List.Item>
+          <List.Item>Styled {look} list</List.Item>
+        </List>
+        <List.Item>Styled {look} list</List.Item>
+      </List>
+    </div>
+  ));
+
+/**
+ * Nested list
+ */
+export const NestedList = () => (
+  <div>
+    <List type="bullet" assistiveText="test">
+      <List.Item>Styled list</List.Item>
+      <List.Item>Styled list</List.Item>
+      <List.Item>Styled list</List.Item>
+      <List>
+        <List.Item>Styled list</List.Item>
+        <List.Item>Styled list</List.Item>
+        <List.Item>Styled list</List.Item>
+        <List nested={0}>
+          <List.Item>Styled list</List.Item>
+          <List.Item>Styled list</List.Item>
+          <List.Item>Styled list</List.Item>
+          <List>
+            <List.Item>Styled list</List.Item>
+            <List.Item>Styled list</List.Item>
+            <List.Item>Styled list</List.Item>
+          </List>
+        </List>
+      </List>
+    </List>
+  </div>
+);
+
+/**
+ * List spacing
+ */
+export const ListSpacing = () => (
+  <div>
+    <h1 className="typography-body-10 mb-2">Medium</h1>
+    <List type="bullet" className="mb-4" spacing="medium">
+      <List.Item>Styled bullet list</List.Item>
+      <List.Item>Styled bullet list</List.Item>
+      <List.Item>Styled bullet list</List.Item>
+    </List>
+    <h1 className="typography-body-10 mb-2">Large</h1>
+    <List type="bullet" className="mb-4" spacing="large">
+      <List.Item>Styled bullet list</List.Item>
+      <List.Item>Styled bullet list</List.Item>
+      <List.Item>Styled bullet list</List.Item>
+    </List>
+  </div>
+);

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

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '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';