@westpac/ui 0.3.0 → 0.5.0

package/src/components/circle/circle.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/circle/circle.types.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './circle.styles.js';
+
+export type CircleProps = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/circle/index.ts

@@ -0,0 +1,2 @@
+export { Circle } from './circle.component.js';
+export { type CircleProps } from './circle.types.js';

package/src/components/collapsible/collapsible.component.tsx

@@ -0,0 +1,67 @@
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useCallback, useId, useState } from 'react';
+
+import { Button } from '../button/index.js';
+import { ExpandLessIcon, ExpandMoreIcon, IconProps } from '../icon/index.js';
+
+import { styles as collapsibleStyles } from './collapsible.styles.js';
+import { type CollapsibleProps } from './collapsible.types.js';
+
+const loadAnimations = () => import('./collapsible.utils.js').then(res => res.default);
+
+export function Collapsible({
+  className,
+  children,
+  open = false,
+  text,
+  size = 'medium',
+  onClick = () => undefined,
+}: CollapsibleProps) {
+  const [contentOpen, setContentOpen] = useState(open);
+  const contentId = useId();
+
+  const ButtonIcon = (props: IconProps) => {
+    if (!contentOpen) return <ExpandMoreIcon color="link" {...props} />;
+    return <ExpandLessIcon color="link" {...props} />;
+  };
+
+  const handleClick = useCallback(() => {
+    onClick();
+    setContentOpen(contentOpen => !contentOpen);
+  }, [contentOpen]);
+
+  const styles = collapsibleStyles({ open: contentOpen });
+
+  return (
+    <>
+      <Button
+        className={styles.base({ className })}
+        look="link"
+        iconAfter={ButtonIcon}
+        onClick={handleClick}
+        size={size}
+        aria-expanded={contentOpen}
+        aria-controls={contentId}
+      >
+        {text}
+      </Button>
+      <LazyMotion features={loadAnimations}>
+        <AnimatePresence>
+          {contentOpen && (
+            <m.div
+              key="content"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.15 }}
+              className={styles.content()}
+              id={contentId}
+              aria-hidden={!contentOpen}
+            >
+              {children}
+            </m.div>
+          )}
+        </AnimatePresence>
+      </LazyMotion>
+    </>
+  );
+}

package/src/components/collapsible/collapsible.stories.tsx

@@ -0,0 +1,103 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Collapsible } from './collapsible.component.js';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'Example/Collapsible',
+  component: Collapsible,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="typography-body-10 p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SIZES = ['small', 'medium', 'large', 'xlarge'];
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    text: 'Toggle collapsible',
+    children:
+      'Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta nobis modi officia incidunt eos dolores atque, unde error delectus officiis.',
+  },
+};
+
+/**
+ * > Examples of sizes of collapsible button
+ */
+export const CollapsibleSizes = () => (
+  <div className="typography-body-10 p-3">
+    {SIZES.map((size: any) => (
+      <div className="mb-2" key={size}>
+        <h2 className="typography-body-8 mb-1 font-bold">{size}</h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit,
+          praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora
+          deleniti deserunt!
+        </p>
+
+        <Collapsible text="Toggle collapsible" size={size}>
+          <p>
+            Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
+            adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
+            praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
+            consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
+            nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
+          </p>
+        </Collapsible>
+
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit,
+          praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora
+          deleniti deserunt!
+        </p>
+      </div>
+    ))}
+  </div>
+);
+
+/**
+ * > Setting the default of collapsible to open
+ */
+export const CollapsibleOpen = () => (
+  <div className="typography-body-10 p-3">
+    {SIZES.map((size: any) => (
+      <div className="mb-2" key={size}>
+        <h2 className="typography-body-8 mb-1 font-bold">{size}</h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit,
+          praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora
+          deleniti deserunt!
+        </p>
+
+        <Collapsible text="Toggle collapsible" size={size} open>
+          <p>
+            Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
+            adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
+            praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
+            consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
+            nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
+          </p>
+        </Collapsible>
+
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum quidem neque quod impedit,
+          praesentium maiores unde perspiciatis accusantium non, quae debitis ut aliquid numquam ipsa hic tempora
+          deleniti deserunt!
+        </p>
+      </div>
+    ))}
+  </div>
+);

package/src/components/collapsible/collapsible.styles.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'px-0 text-text no-underline hover:underline focus:focus-outline',
+      content: 'typography-body-10 mb-2 block',
+    },
+    variants: {
+      open: {
+        true: { base: 'block' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/collapsible/collapsible.types.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+
+import { ButtonProps } from '../button/index.js';
+
+export type CollapsibleProps = {
+  /**
+   * A function for the onClick event
+   */
+  onClick?: () => void;
+  /**
+   * State of whether the Collapsible is open
+   */
+  open?: boolean;
+  /**
+   * Button text
+   */
+  text: string;
+} & Pick<ButtonProps, 'size'> &
+  HTMLAttributes<Element>;

package/src/components/collapsible/collapsible.utils.ts

@@ -0,0 +1,3 @@
+import { domAnimation } from 'framer-motion';
+
+export default domAnimation;

package/src/components/collapsible/index.ts

@@ -0,0 +1,2 @@
+export { Collapsible } from './collapsible.component.js';
+export { type CollapsibleProps } from './collapsible.types.js';

package/src/components/compacta/compacta.component.tsx

@@ -0,0 +1,218 @@
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+
+import { generateID } from '../../utils/index.js';
+import { Button } from '../button/index.js';
+import { AddCircleIcon, ExpandLessIcon, ExpandMoreIcon, IconProps, RemoveCircleIcon } from '../icon/index.js';
+import { VisuallyHidden } from '../index.js';
+
+import { styles as compactaStyles } from './compacta.styles.js';
+import { type CompactaProps } from './compacta.types.js';
+
+interface Action {
+  id?: string;
+  index: number;
+  type: string;
+}
+
+const loadAnimations = () => import('./compacta.utils.js').then(res => res.default);
+
+export function Compacta({
+  className,
+  children,
+  titleTag: Tag = 'h3',
+  addText = 'Add another',
+  ...props
+}: CompactaProps) {
+  const [initial, setInitial] = useState(true);
+  const id = useId();
+  const [items, setItems] = useState([
+    { id, open: true, delay: false, title: { primary: '', secondary: '', tertiary: '' } },
+  ]);
+  const [action, setAction] = useState<Action>({ type: '', index: 0 });
+  const [status, setStatus] = useState('');
+  const headingRefs = useRef<HTMLElement[]>([]);
+  const toggleRefs = useRef<HTMLElement[]>([]);
+
+  const handleAdd = useCallback(() => {
+    let delay = false;
+    const newItems = items.map((item, index) => {
+      if (index === items.length - 1) {
+        if (item.open) {
+          delay = true;
+        }
+        return {
+          ...item,
+          open: false,
+          delay: false,
+        };
+      }
+      return item;
+    });
+
+    setItems([
+      ...newItems,
+      {
+        id: `${id}-${generateID()}`,
+        open: true,
+        delay,
+        title: { primary: '', secondary: '', tertiary: '' },
+      },
+    ]);
+
+    setAction({ type: 'add', index: newItems.length });
+  }, [id, items]);
+
+  const handleRemove = useCallback((id: string, index: number) => {
+    setItems(items => items.filter(item => item.id !== id));
+    setAction({ type: 'remove', index, id });
+  }, []);
+
+  const handleToggle = useCallback(
+    (id: string, index: number) => {
+      if (initial) setInitial(false);
+      setItems(items => items.map(item => (item.id === id ? { ...item, delay: false, open: !item.open } : item)));
+      setAction({ type: 'toggle', index });
+    },
+    [initial],
+  );
+
+  const setTitle = useCallback((id: string, titleType: string, title: string) => {
+    setItems(items =>
+      items.map(item => {
+        if (item.id === id) {
+          return {
+            ...item,
+            title: { ...item.title, [titleType]: title },
+          };
+        } else {
+          return item;
+        }
+      }),
+    );
+  }, []);
+
+  useEffect(() => {
+    if (action.type) {
+      if (action.type === 'add') {
+        setTimeout(() => {
+          headingRefs?.current[action.index]?.focus();
+        }, 1);
+        setStatus(`Item added`);
+      }
+
+      if (action.type === 'remove') {
+        headingRefs.current.splice(action.index, 1);
+        const focusIndex = action.index === 0 ? 0 : action.index - 1;
+        setTimeout(() => {
+          headingRefs?.current[focusIndex]?.focus();
+        }, 1);
+        setStatus(`Item ${action.index + 1} removed`);
+      }
+
+      if (action.type === 'toggle') {
+        toggleRefs?.current[action.index]?.focus();
+      }
+    }
+  }, [items.length, action]);
+
+  const styles = compactaStyles({});
+
+  return (
+    <div className={styles.base({ className })} {...props}>
+      {items.map((item, index) => {
+        return (
+          <div className={styles.item()} key={item.id}>
+            <div className={styles.header()}>
+              <div className={styles.headerTitle()}>
+                <Tag
+                  className={styles.primaryHeading()}
+                  ref={(el: HTMLDivElement) => {
+                    headingRefs.current[index] = el;
+                  }}
+                  id={`gel-compacta-title-${item.id}`}
+                  tabIndex={-1}
+                >
+                  <div className={styles.itemIndex()}>{index + 1}.</div>
+                  {!item.open && item.title.primary && (
+                    <div className={styles.titlePrimary()}>{item.title.primary}</div>
+                  )}
+                </Tag>
+                <Button
+                  className={styles.toggleBtn()}
+                  iconAfter={item.open ? ExpandLessIcon : ExpandMoreIcon}
+                  look="link"
+                  size="large"
+                  onClick={() => handleToggle(item.id, index)}
+                  ref={(el: HTMLElement) => {
+                    toggleRefs.current[index] = el;
+                  }}
+                  aria-labelledby={`gel-compacta-title-${item.id}`}
+                  aria-expanded={item.open}
+                  aria-controls={`gel-compacta-content-${item.id}`}
+                />
+              </div>
+              {!item.open && (
+                <div className={styles.secondaryHeading()}>
+                  {item.title.secondary && <div className={styles.titleSecondary()}>{item.title.secondary}</div>}
+                  {item.title.tertiary && <div className={styles.titleTertiary()}>{item.title.tertiary}</div>}
+                </div>
+              )}
+            </div>
+            <LazyMotion features={loadAnimations}>
+              <AnimatePresence>
+                {item.open && (
+                  <m.div
+                    className={styles.collapsible()}
+                    key="content"
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0], delay: item.delay ? 0.3 : 0 }}
+                    id={`gel-compacta-collapsible-${item.id}`}
+                    aria-hidden={!item.open}
+                  >
+                    <div className={styles.content()} id={`gel-compacta-content-${item.id}`}>
+                      {children({
+                        id: item.id,
+                        setPrimaryTitle: (title: string) => setTitle(item.id, 'primary', title),
+                        setSecondaryTitle: (title: string) => setTitle(item.id, 'secondary', title),
+                        setTertiaryTitle: (title: string) => setTitle(item.id, 'tertiary', title),
+                      })}
+                      <Button
+                        className={styles.removeBtn()}
+                        aria-label={`remove item ${index + 1}`}
+                        iconBefore={(props: IconProps) => (
+                          <RemoveCircleIcon {...props} aria-hidden look="outlined" size="xsmall" />
+                        )}
+                        look="link"
+                        size="small"
+                        soft
+                        onClick={() => handleRemove(item.id, index)}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  </m.div>
+                )}
+              </AnimatePresence>
+            </LazyMotion>
+          </div>
+        );
+      })}
+      <div className={styles.footer()}>
+        <Button
+          className={styles.addBtn()}
+          iconBefore={(props: IconProps) => <AddCircleIcon {...props} aria-hidden look="outlined" />}
+          look="link"
+          size="small"
+          soft
+          onClick={() => handleAdd()}
+        >
+          {addText}
+        </Button>
+      </div>
+      <VisuallyHidden role="status">{status}</VisuallyHidden>
+    </div>
+  );
+}

package/src/components/compacta/compacta.stories.tsx

@@ -0,0 +1,81 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { ChangeEvent, ReactNode, useState } from 'react';
+
+import { Form, Input } from '../index.js';
+
+import { Compacta } from './compacta.component.js';
+
+const meta: Meta<typeof Compacta> = {
+  title: 'Example/Compacta',
+  component: Compacta,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-5">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const StoryDefault = () => {
+  const [inputs, setInputs] = useState({});
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputs((prev: object) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+  return (
+    <Compacta>
+      {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
+        <Form>
+          <Form.Group>
+            <Form.Label htmlFor={`primary-${id}`}>Primary</Form.Label>
+            <Form.Hint>Primary title text</Form.Hint>
+            <Input
+              name={`primary-${id}`}
+              value={inputs[`primary-${id}` as keyof typeof inputs] || ''}
+              onChange={e => {
+                handleChange(e);
+                setPrimaryTitle(e.target.value);
+              }}
+            />
+          </Form.Group>
+          <Form.Group>
+            <Form.Label htmlFor={`secondary-${id}`}>Secondary</Form.Label>
+            <Form.Hint>Secondary title text</Form.Hint>
+            <Input
+              name={`secondary-${id}`}
+              value={inputs[`secondary-${id}` as keyof typeof inputs] || ''}
+              onChange={e => {
+                handleChange(e);
+                setSecondaryTitle(e.target.value);
+              }}
+            />
+          </Form.Group>
+          <Form.Group>
+            <Form.Label htmlFor={`tertiary-${id}`}>Tertiary</Form.Label>
+            <Form.Hint>Tertiary title text</Form.Hint>
+            <Input
+              name={`tertiary-${id}`}
+              value={inputs[`tertiary-${id}` as keyof typeof inputs] || ''}
+              onChange={e => {
+                handleChange(e);
+                setTertiaryTitle(e.target.value);
+              }}
+            />
+          </Form.Group>
+        </Form>
+      )}
+    </Compacta>
+  );
+};

package/src/components/compacta/compacta.styles.ts

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      item: 'border-borderDark mb-2 overflow-hidden rounded-[0.1875rem] border',
+      header: 'text-text bg-white p-[0.8125rem_1.125rem]',
+      headerTitle: 'flex min-w-0 flex-1 items-center',
+      primaryHeading: 'my-[16px] flex',
+      secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-[2.25rem]',
+      itemIndex: 'mr-2 w-4 flex-none font-bold',
+      removeBtn: 'mt-[0.875rem] h-auto p-0 no-underline hover:underline',
+      addBtn: 'h-auto p-0 no-underline hover:underline',
+      toggleBtn: 'focus:outline-focus ml-auto p-0',
+      collapsible: '',
+      content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
+      footer: 'pt-[0.5rem]',
+      titlePrimary: 'font-bold',
+      titleSecondary: 'mt-[0.125rem]',
+      titleTertiary: 'mt-[0.125rem]',
+    },
+    variants: {},
+    compoundSlots: [
+      {
+        slots: ['titlePrimary', 'titleSecondary', 'titleTertiary'],
+        class: ['mr-2', 'truncate', 'flex-1'],
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/compacta/compacta.types.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type CompactaProps = {
+  /**
+   * Text for add button
+   */
+  addText?: string;
+  /**
+   * Component to repeat
+   */
+  children: (...props: ContentProps[]) => ReactNode;
+  /**
+   * Tag for primary title
+   */
+  titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & Omit<HTMLAttributes<Element>, 'children'>;
+
+type ContentProps = {
+  id: string;
+  setPrimaryTitle: (title: string) => unknown;
+  setSecondaryTitle: (title: string) => unknown;
+  setTertiaryTitle: (title: string) => unknown;
+};

package/src/components/compacta/compacta.utils.ts

@@ -0,0 +1,10 @@
+import { domAnimation } from 'framer-motion';
+
+export default domAnimation;
+
+export const generateID = () => {
+  const url = URL.createObjectURL(new Blob());
+  const [id] = url.toString().split('/').reverse();
+  URL.revokeObjectURL(url);
+  return id.replace('blob:nodedata:', '');
+};

package/src/components/compacta/index.ts

@@ -0,0 +1,2 @@
+export { Compacta } from './compacta.component.js';
+export { type CompactaProps } from './compacta.types.js';