@westpac/ui 0.3.0 → 0.5.0

package/src/components/panel/panel.styles.ts

@@ -0,0 +1,22 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'group/panel mb-4 overflow-hidden rounded-[0.1875rem] border border-hero',
+      header: 'px-4 py-[0.625rem] max-xsl:px-2',
+    },
+    variants: {
+      look: {
+        hero: {
+          header: 'bg-hero text-white',
+        },
+        faint: {
+          base: 'border-border',
+          header: 'border-0 border-b border-b-border bg-background text-text',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

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

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FocusScope } from 'react-aria';
+
+import { Button } from '../../../button/index.js';
+import { CloseIcon } from '../../../icon/index.js';
+
+import { styles as panelStyles } from './panel.styles.js';
+import { type PanelProps } from './panel.types.js';
+
+export function Panel({ state, heading, headingTag: Tag = 'h1', content, placement = 'top', id }: PanelProps) {
+  const styles = panelStyles({ placement });
+
+  return (
+    <FocusScope restoreFocus>
+      <div className={styles.popover()} id={id}>
+        <div className={styles.content()}>
+          <Tag className={styles.heading()}>{heading}</Tag>
+          <div className={styles.body()}>{content}</div>
+          <Button
+            look="link"
+            onClick={state.close}
+            className={styles.closeBtn()}
+            iconAfter={() => <CloseIcon color="muted" size="small" aria-hidden />}
+            aria-label="Close popover"
+          />
+        </div>
+        <div aria-hidden className={styles.arrow()} />
+      </div>
+    </FocusScope>
+  );
+}

package/src/components/popover/components/panel/panel.styles.ts

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+      arrow:
+        'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+      closeBtn: 'focus:focus-outline absolute right-1 top-1 m-1 p-0 hover:opacity-80',
+      content: 'w-[17.625rem] py-4 pl-3 pr-5',
+      heading: 'typography-body-9 mb-2 font-bold',
+      body: 'typography-body-10',
+    },
+    variants: {
+      placement: {
+        top: {
+          popover: 'bottom-full left-1/2 mb-[0.9375rem] -translate-x-1/2',
+          arrow: 'left-1/2 top-full -translate-x-1/2 after:top-[-12px] after:translate-x-[-7px]',
+        },
+        bottom: {
+          popover: 'left-1/2 top-full mt-[0.9375rem] -translate-x-1/2',
+          arrow: 'bottom-full left-1/2 -translate-x-1/2 rotate-180 after:bottom-[1px] after:translate-x-[-7px]',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+
+export type PanelProps = {
+  /**
+   * Content of popover
+   */
+  content: string;
+  /**
+   * Heading for popover box
+   */
+  heading?: string;
+  /**
+   * Tag to render
+   */
+  headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+  /**
+   * Overlay trigger state
+   */
+  placement?: 'top' | 'bottom';
+  /**
+   * Overlay trigger state
+   */
+  state: OverlayTriggerState;
+} & HTMLAttributes<Element>;

package/src/components/popover/index.ts

@@ -0,0 +1,2 @@
+export { Popover } from './popover.component.js';
+export { type PopoverProps } from './popover.types.js';

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

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useId } from 'react';
+import { useOverlayTriggerState } from 'react-stately';
+
+import { Button } from '../button/index.js';
+
+import { Panel } from './components/panel/panel.component.js';
+import { styles as popoverStyles } from './popover.styles.js';
+import { type PopoverProps } from './popover.types.js';
+
+export function Popover({
+  children,
+  className,
+  headingTag,
+  content,
+  heading,
+  onClick = () => undefined,
+  placement,
+  look,
+  open = false,
+  icon,
+}: PopoverProps) {
+  const state = useOverlayTriggerState({ defaultOpen: open });
+  const panelId = useId();
+  const styles = popoverStyles({});
+
+  const handleClick = useCallback(() => {
+    onClick();
+    state.toggle();
+  }, [onClick, state.isOpen]);
+
+  const keyHandler = useCallback(
+    (event: globalThis.KeyboardEvent) => {
+      if (state.isOpen && event.key === 'Escape') state.close();
+    },
+    [state.isOpen],
+  );
+
+  useEffect(() => {
+    window.document.addEventListener('keydown', keyHandler);
+    return () => {
+      window.document.removeEventListener('keydown', keyHandler);
+    };
+  }, [state.isOpen]);
+
+  return (
+    <div className={styles.base({ className })}>
+      <Button
+        look={icon && !children ? 'link' : look}
+        iconAfter={icon}
+        className={styles.button()}
+        aria-expanded={state.isOpen}
+        aria-controls={panelId}
+        onClick={handleClick}
+      >
+        {children}
+      </Button>
+      {state.isOpen && (
+        <Panel
+          placement={placement}
+          heading={heading ? heading : ''}
+          headingTag={headingTag}
+          content={content}
+          state={state}
+          id={panelId}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/popover/popover.stories.tsx

@@ -0,0 +1,84 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { HelpIcon } from '../icon/index.js';
+
+import { Popover } from './popover.component.js';
+
+const popoverContent =
+  'Small overlays of content for housing secondary information. These are often used to provide explanatory information for complex ideas.';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Example/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-[200px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+  args: {
+    content: popoverContent,
+    heading: 'Test Heading',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: 'Click Me',
+  },
+};
+
+/**
+ * > Using icon as trigger
+ */
+export const PopoverIconTrigger: Story = {
+  args: {
+    icon: () => <HelpIcon color="hero" />,
+  },
+};
+
+/**
+ * > Default open
+ */
+export const DefaultOpenPopover: Story = {
+  args: {
+    children: 'Click Me',
+    open: true,
+  },
+};
+
+/**
+ * > No heading
+ */
+export const PopoverNoHeading: Story = {
+  args: {
+    children: 'Click Me',
+    open: true,
+    heading: undefined,
+  },
+};
+
+/**
+ * > Top and bottom popover
+ */
+export const PopoverPlacement = () => (
+  <div>
+    <Popover className="mr-3" heading="Heading" placement="top" content={popoverContent} open>
+      Top Popover
+    </Popover>
+    <Popover placement="bottom" heading="Heading" content={popoverContent} open>
+      Bottom Popover
+    </Popover>
+  </div>
+);

package/src/components/popover/popover.styles.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'relative inline-block',
+      button: 'focus:focus-outline',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+import { ButtonProps } from '../button/index.js';
+import { IconProps } from '../icon/icon.types.js';
+
+export type PopoverProps = {
+  /**
+   * Button text
+   */
+  children?: ReactNode;
+  /**
+   * Content of popover
+   */
+  content: string;
+  /**
+   * Heading for popover box
+   */
+  heading?: string;
+  /**
+   * Tag to render
+   */
+  headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+  /**
+   * Use an icon as the button
+   */
+  icon?: (props: IconProps) => JSX.Element;
+  /**
+   * A function for the onClick event
+   */
+  onClick?: () => void;
+  /**
+   * Whether popover is open by default
+   */
+  open?: boolean;
+  /**
+   * Placement of popover
+   */
+  placement?: 'top' | 'bottom';
+} & HTMLAttributes<Element> &
+  Pick<ButtonProps, 'look'>;

package/src/components/progress-bar/progress-bar.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof ProgressBar> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

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

@@ -3,8 +3,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'border-border box-border w-full overflow-hidden border bg-white p-[0.0625rem]',
-      innerBar: 'bg-hero box-border h-full text-right leading-tight transition-[width] duration-[.6s]',
+      base: 'box-border w-full overflow-hidden border border-border bg-white p-[0.0625rem]',
+      innerBar: 'box-border h-full bg-hero text-right leading-tight transition-[width] duration-[.6s]',
       label: 'typography-body-10 mx-[0.75rem] my-0 block font-bold text-white',
     },
     variants: {

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

@@ -0,0 +1,2 @@
+export * from './progress-rope-step/index.js';
+export * from './progress-rope-group-step/index.js';

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

@@ -0,0 +1,2 @@
+export { ProgressRopeGroupStep } from './progress-rope-group-step.component.js';
+export { type ProgressRopeGroupStepProps } from './progress-rope-group-step.types.js';

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

@@ -0,0 +1,105 @@
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useId, useMemo } from 'react';
+
+import { Circle, VisuallyHidden } from '../../../index.js';
+import { ProgressRopeStep } from '../index.js';
+
+import { styles as progressRopeGroupStyles } from './progress-rope-group-step.styles.js';
+import { type ProgressRopeGroupStepProps } from './progress-rope-group-step.types.js';
+
+const loadAnimations = () => import('./progress-rope-group-step.utils.js').then(res => res.default);
+
+export function ProgressRopeGroupStep({
+  steps,
+  currentKey,
+  furthestVisitedStep,
+  children,
+  firstItem,
+  opened,
+  onToggle,
+}: ProgressRopeGroupStepProps) {
+  const id = useId();
+  const stepsContainerID = `progress-rope-group-steps-container-${id}`;
+
+  const current = useMemo(() => {
+    return !!steps.find(step => step.index === currentKey);
+  }, [steps, currentKey]);
+
+  const visited = useMemo(() => {
+    return !!steps.find(step => (furthestVisitedStep || 0) >= step.index);
+  }, [steps, furthestVisitedStep]);
+
+  const visuallyHiddenMessage = useMemo(() => {
+    if (steps.slice(-1)[0].index < (furthestVisitedStep || 0)) {
+      return 'completed';
+    }
+    if (current) {
+      return 'in progress';
+    }
+    return 'not started';
+  }, [steps, furthestVisitedStep]);
+
+  const state = useMemo(() => {
+    if (current) {
+      return 'current';
+    }
+    if (visited) {
+      return 'visited';
+    }
+    return 'non-visited';
+  }, [current, visited]);
+
+  console.log('state', state);
+
+  const styles = progressRopeGroupStyles({ firstItem, state });
+  return (
+    <>
+      <button
+        aria-expanded={opened}
+        className={styles.circleWrapper({})}
+        onClick={onToggle}
+        aria-controls={stepsContainerID}
+      >
+        <Circle className={styles.circle()} aria-hidden="true" />
+        {children}
+        <VisuallyHidden>, {visuallyHiddenMessage}</VisuallyHidden>
+      </button>
+      <LazyMotion features={loadAnimations}>
+        <AnimatePresence initial={false}>
+          {opened && (
+            <m.div
+              initial={{
+                height: 0,
+                overflow: 'hidden',
+              }}
+              animate={{
+                height: 'auto',
+              }}
+              exit={{
+                height: 0,
+                overflow: 'hidden',
+              }}
+              transition={{ duration: 0.2, ease: 'easeInOut' }}
+            >
+              <ul className={styles.stepsWrapper({})} id={stepsContainerID} aria-hidden={!opened}>
+                {steps.map((step, index) => (
+                  <li key={step.index}>
+                    <ProgressRopeStep
+                      firstItem={index === 0}
+                      size="small"
+                      onClick={(furthestVisitedStep || 0) >= step.index ? step.onClick : undefined}
+                      current={step.index === currentKey}
+                      visited={(furthestVisitedStep || 0) >= step.index}
+                    >
+                      {step.text}
+                    </ProgressRopeStep>
+                  </li>
+                ))}
+              </ul>
+            </m.div>
+          )}
+        </AnimatePresence>
+      </LazyMotion>
+    </>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      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',
+    },
+    variants: {
+      firstItem: {
+        true: {
+          circleWrapper: 'before: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',
+        },
+        visited: {
+          base: 'before:border-solid before:border-primary',
+          circle: 'border-[3px] border-primary bg-primary',
+          circleWrapper: 'text-text before:border-solid before:border-primary after:border-solid after:border-primary',
+        },
+        'non-visited': {
+          base: 'before:border-borderDark',
+          circleWrapper: 'text-muted-90 after:border-dotted after:border-borderDark',
+          circle: 'border-borderDark bg-white',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { ProgressRopeStepItem, type ProgressRopeStepWithIndex } from '../../progress-rope.types.js';
+
+import { styles } from './progress-rope-group-step.styles.js';
+
+export type ProgressRopeGroupStepProps = {
+  /**
+   * Children
+   */
+  children: ReactNode;
+  /**
+   * currentKey
+   */
+  currentKey?: number;
+  /**
+   * Boolean to tell if it is the first item of the rope
+   */
+  firstItem?: boolean;
+  /**
+   * Furtherst visited step
+   */
+  furthestVisitedStep?: number;
+  /**
+   * Trigger when the user try to open/close the group
+   */
+  onToggle?: () => any;
+  /**
+   * Boolean to tell if group is expanded
+   */
+  opened?: boolean;
+  /**
+   * Steps to render
+   */
+  steps: (ProgressRopeStepItem & { index: number })[];
+} & VariantProps<typeof styles>;

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

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

package/src/components/progress-rope/components/progress-rope-step/index.ts

@@ -0,0 +1,2 @@
+export { ProgressRopeStep } from './progress-rope-step.component.js';
+export { type ProgressRopeStepProps } from './progress-rope-step.types.js';

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

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+
+import { Circle } from '../../../index.js';
+
+import { styles as progressRopeStyles } from './progress-rope-step.styles.js';
+import { type ProgressRopeStepProps } from './progress-rope-step.types.js';
+
+export function ProgressRopeStep({
+  className,
+  current,
+  visited,
+  tag: Tag = 'button',
+  type,
+  size = 'medium',
+  children,
+  firstItem,
+  ...props
+}: ProgressRopeStepProps) {
+  const state = useMemo(() => {
+    if (current) {
+      return 'current';
+    }
+    if (visited) {
+      return 'visited';
+    }
+    return 'non-visited';
+  }, [current, visited]);
+
+  const styles = progressRopeStyles({ className, state, size, firstItem });
+
+  return (
+    <Tag className={styles.base({})} aria-current={current} disabled={state === 'non-visited'} {...props}>
+      <Circle className={styles.circle()} aria-hidden="true" />
+      {children}
+    </Tag>
+  );
+}

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

@@ -0,0 +1,42 @@
+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',
+      circle: 'relative z-10 bg-white transition-colors',
+    },
+    variants: {
+      state: {
+        current: {
+          base: 'font-bold text-primary before:border-solid',
+          circle: 'border-[3px] border-primary bg-white',
+        },
+        visited: {
+          base: 'text-text before:border-solid before:border-primary',
+          circle: 'border-[3px] border-primary bg-primary',
+        },
+        'non-visited': {
+          base: 'text-muted-90 before:border-borderDark',
+          circle: 'border-2 border-borderDark bg-white',
+        },
+      },
+      firstItem: {
+        true: {
+          base: 'before:first:hidden',
+        },
+        false: {},
+      },
+      size: {
+        medium: {
+          circle: 'h-[0.875rem] w-[0.875rem]',
+        },
+        small: {
+          circle: 'mr-[0.25rem] h-[0.625rem] w-[0.625rem] translate-x-[0.125rem]',
+          base: 'gap-4',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { ProgressRopeStepItem } from '../../progress-rope.types.js';
+
+import { styles } from './progress-rope-step.styles.js';
+
+export type ProgressRopeStepProps = {
+  /**
+   * Says it is current
+   */
+  current?: boolean;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+  /**
+   * Says it is visited
+   */
+  visited?: boolean;
+} & Omit<ProgressRopeStepItem, 'text'> &
+  VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

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

@@ -0,0 +1,2 @@
+export { ProgressRope } from './progress-rope.component.js';
+export { type ProgressRopeProps } from './progress-rope.types.js';