@westpac/ui 0.2.1 → 0.4.0

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

@@ -0,0 +1,94 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../button/index.js';
+
+import { ProgressBar } from './progress-bar.component.js';
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'Example/ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    value: 50,
+    look: 'default',
+  },
+};
+
+/**
+ * > Skinny example
+ */
+export const ProgressBarSkinny: Story = {
+  args: {
+    value: 50,
+    look: 'skinny',
+  },
+};
+
+/**
+ * > No label example
+ */
+export const ProgressBarNoLabel: Story = {
+  args: {
+    value: 50,
+    look: 'default',
+    noLabel: true,
+  },
+};
+
+/**
+ * Example of Progress Bar controlled by buttons
+ */
+export const ProgressBarControlled = () => {
+  const [barValue, setBarValue] = useState(0);
+  const handleProgress = useCallback(
+    (calc: number) => {
+      const progress = barValue + calc;
+      if (progress > 100) return setBarValue(100);
+      if (progress < 0) return setBarValue(0);
+      return setBarValue(progress);
+    },
+    [barValue],
+  );
+  return (
+    <>
+      <h2 className="typography-body-9 mb-1 font-bold">Default</h2>
+      <ProgressBar value={barValue} className="mb-2" />
+      <h2 className="typography-body-9 mb-1 font-bold">Skinny</h2>
+      <ProgressBar look="skinny" value={barValue} className="mb-2" />
+      <div className="flex space-x-2">
+        <Button soft onClick={() => handleProgress(-1)}>
+          -1%
+        </Button>
+        <Button soft onClick={() => handleProgress(-10)}>
+          -10%
+        </Button>
+        <Button soft onClick={() => handleProgress(+1)}>
+          +1%
+        </Button>
+        <Button soft onClick={() => handleProgress(+10)}>
+          +10%
+        </Button>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      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: {
+      look: {
+        default: {
+          base: 'h-[1.5rem] rounded-[1.5rem]',
+          innerBar: ' rounded-[1.5rem]',
+        },
+        skinny: {
+          base: 'h-[0.625rem] rounded-[0.625rem]',
+          innerBar: 'rounded-[0.625rem]',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,20 @@
+import { AriaProgressBarProps } from 'react-aria';
+
+export type ProgressBarProps = {
+  /**
+   * Classname for overriding base style
+   */
+  className?: string;
+  /**
+   * look of bar
+   */
+  look?: 'default' | 'skinny';
+  /**
+   * Whether or not label shows on default bar
+   */
+  noLabel?: boolean;
+  /**
+   * The progress bar value as a percentage. Decimal numbers are rounded.
+   */
+  value?: number;
+} & Pick<AriaProgressBarProps, 'aria-label' | 'aria-describedby' | 'aria-details' | 'aria-labelledby' | 'id'>;

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';

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

@@ -0,0 +1,104 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { ProgressRopeGroupStep, ProgressRopeStep } from './components/index.js';
+import { styles } from './progress-rope.styles.js';
+import { type ProgressRopeProps, type ProgressRopeStepWithIndex } from './progress-rope.types.js';
+
+const verifyByCurrentIndexWhichGroupIsOpened = (currentIndex: number, mappedData: ProgressRopeStepWithIndex[]) => {
+  return mappedData.reduce((acc: null | number, step, index) => {
+    if (step.type === 'group' && step.steps.find(subStep => subStep.index === currentIndex)) {
+      return index;
+    }
+    return acc;
+  }, null);
+};
+
+export function ProgressRope({
+  'aria-label': ariaLabel = 'Form steps',
+  role = 'navigation',
+  className,
+  tag: Tag = 'nav',
+  current = 0,
+  data,
+  ...props
+}: ProgressRopeProps) {
+  const [furthestVisitedStep, setFurthestVisitedStep] = useState<number>(current);
+
+  const mappedData = useMemo(() => {
+    let autoIncrement = -1;
+    return data?.reduce((acc: ProgressRopeStepWithIndex[], current) => {
+      if (current.type === 'group') {
+        return [
+          ...acc,
+          {
+            ...current,
+            steps: current.steps.map(step => {
+              autoIncrement++;
+              return { ...step, index: autoIncrement };
+            }),
+          },
+        ];
+      }
+      autoIncrement++;
+      return [
+        ...acc,
+        {
+          ...current,
+          index: autoIncrement,
+        },
+      ];
+    }, []);
+  }, [data]);
+
+  useEffect(() => {
+    setFurthestVisitedStep(state => {
+      return state > current ? state : current;
+    });
+  }, [current]);
+
+  const [openedGroupStepIndex, setOpenedGroupStepIndex] = useState<number | null>(
+    verifyByCurrentIndexWhichGroupIsOpened(current, mappedData || []),
+  );
+
+  useEffect(() => {
+    const newGroupStepIndex = verifyByCurrentIndexWhichGroupIsOpened(current, mappedData || []);
+    if (newGroupStepIndex !== openedGroupStepIndex) {
+      setOpenedGroupStepIndex(newGroupStepIndex);
+    }
+  }, [current]);
+
+  return (
+    <Tag className={className} role={role} aria-label={ariaLabel} {...props}>
+      <ul className={styles({})}>
+        {mappedData?.map((item, index) => {
+          return (
+            <li key={index}>
+              {item.type === 'group' ? (
+                <ProgressRopeGroupStep
+                  firstItem={index === 0}
+                  furthestVisitedStep={furthestVisitedStep}
+                  currentKey={current}
+                  steps={item.steps}
+                  opened={openedGroupStepIndex === index}
+                  onToggle={() => setOpenedGroupStepIndex(state => (state === index ? null : index))}
+                >
+                  {item.text}
+                </ProgressRopeGroupStep>
+              ) : (
+                <ProgressRopeStep
+                  firstItem={index === 0}
+                  type={item.type}
+                  onClick={furthestVisitedStep >= item.index ? item.onClick : undefined}
+                  visited={furthestVisitedStep >= item.index}
+                  current={current === item.index}
+                >
+                  {item.text}
+                </ProgressRopeStep>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </Tag>
+  );
+}

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

@@ -0,0 +1,112 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../index.js';
+
+import { ProgressRope } from './progress-rope.component.js';
+import { ProgressRopeProps } from './progress-rope.types.js';
+
+const meta: Meta<typeof ProgressRope> = {
+  title: 'Example/ProgressRope',
+  component: ProgressRope,
+  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: {},
+  render: () => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const handleClick = useCallback(
+      (index: number) => () => {
+        setActiveIndex(index);
+      },
+      [],
+    );
+    const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
+      { text: <h3>Step 1</h3>, onClick: handleClick(0) },
+      { text: <h3>Step 2</h3>, onClick: handleClick(1) },
+      { text: <h3>Step 3</h3>, onClick: handleClick(2) },
+      { text: <h3>Step 4</h3>, onClick: handleClick(3) },
+      { text: <h3>Step 5</h3>, onClick: handleClick(4) },
+      { text: <h3>Review and Submit</h3>, onClick: handleClick(5) },
+    ];
+
+    return (
+      <div>
+        <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
+        <div>
+          <h3>Helper Controls</h3>
+          <h4>Current: {activeIndex}</h4>
+          <Button onClick={() => setActiveIndex(state => --state)}>prev</Button>{' '}
+          <Button onClick={() => setActiveIndex(state => ++state)}>next</Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * > Grouping steps story usage example
+ */
+export const GroupingStepsStory: Story = {
+  args: {},
+  render: () => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const handleClick = useCallback(
+      (index: number) => () => {
+        setActiveIndex(index);
+      },
+      [],
+    );
+    const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
+      {
+        type: 'group',
+        text: 'Group 1',
+        steps: [
+          { text: 'Step 1', onClick: handleClick(0) },
+          { text: 'Step 2', onClick: handleClick(1) },
+        ],
+      },
+      {
+        type: 'group',
+        text: 'Group 2',
+        steps: [
+          { text: 'Step 3', onClick: handleClick(2) },
+          { text: 'Step 4', onClick: handleClick(3) },
+        ],
+      },
+      {
+        type: 'group',
+        text: 'Group 3',
+        steps: [
+          { text: 'Step 5', onClick: handleClick(4) },
+          { text: 'Step 6', onClick: handleClick(5) },
+          { text: 'Step 7', onClick: handleClick(6) },
+        ],
+      },
+      { text: 'Review and Submit', onClick: handleClick(7) },
+    ];
+
+    return (
+      <div>
+        <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
+        <div>
+          <h3>Helper Controls</h3>
+          <h4>Current: {activeIndex}</h4>
+          <Button onClick={() => setActiveIndex(state => --state)}>prev</Button>{' '}
+          <Button onClick={() => setActiveIndex(state => ++state)}>next</Button>
+        </div>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'relative flex flex-col',
+});