@westpac/ui 0.3.0 → 0.5.0

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',
+});

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

@@ -0,0 +1,41 @@
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './progress-rope.styles.js';
+
+export type ProgressRopeStepItem = {
+  onClick?: MouseEventHandler<Element>;
+  text: ReactNode;
+  type?: 'step';
+};
+
+export type ProgressRopeStepWithIndex =
+  | (ProgressRopeStepItem & { index: number })
+  | {
+      steps: (ProgressRopeStepItem & { index: number })[];
+      text: ReactNode;
+      type: 'group';
+    };
+
+export type ProgressRopeProps = {
+  /**
+   * Current active step (zero-indexed)
+   */
+  current?: number;
+  /**
+   * Data
+   */
+  data?: (
+    | ProgressRopeStepItem
+    | {
+        steps: ProgressRopeStepItem[];
+        text: ReactNode;
+        type: 'group';
+      }
+  )[];
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/radio-group/components/radio/radio.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof Radio> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
   argTypes: {
     isDisabled: {

package/src/components/radio-group/radio-group.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof RadioGroup> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
   args: {
     label: <h2>Test</h2>,

package/src/components/repeater/index.ts

@@ -0,0 +1,2 @@
+export { Repeater } from './repeater.component.js';
+export { type RepeaterProps } from './repeater.types.js';

package/src/components/repeater/repeater.component.tsx

@@ -0,0 +1,121 @@
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { generateID } from '../../utils/index.js';
+import { Button } from '../button/index.js';
+import { AddCircleIcon, IconProps, RemoveCircleIcon } from '../icon/index.js';
+import { VisuallyHidden } from '../index.js';
+
+import { styles as repeaterStyles } from './repeater.styles.js';
+import { type RepeaterProps } from './repeater.types.js';
+
+interface Action {
+  id?: string;
+  index: number;
+  type: string;
+}
+
+const loadAnimations = () => import('./repeater.utils.js').then(res => res.default);
+
+export function Repeater({
+  addText = 'Add another item',
+  indexTag: ItemIndex = 'h3',
+  children,
+  separator = false,
+  className,
+}: RepeaterProps) {
+  const [items, setItems] = useState([{ id: generateID() }]);
+  const [action, setAction] = useState<Action>({ type: '', index: 0 });
+  const [status, setStatus] = useState('');
+  const refArr = useRef<HTMLElement[]>([]);
+
+  const handleAdd = useCallback(() => {
+    setItems([...items, { id: generateID() }]);
+    setAction({ type: 'add', index: items.length });
+  }, [items]);
+
+  const handleRemove = useCallback(
+    (id: string, index: number) => {
+      const newItems = items.filter(item => item.id !== id);
+      setItems(newItems);
+      setAction({ type: 'remove', index, id });
+    },
+    [items],
+  );
+
+  useEffect(() => {
+    if (action.type === 'add') {
+      refArr.current[items.length - 1]?.focus();
+      setStatus(`Item added`);
+    }
+
+    if (action.type === 'remove') {
+      refArr.current.splice(action.index, 1);
+      const focusIndex = action.index === 0 ? 0 : action.index - 1;
+      refArr.current[focusIndex]?.focus();
+      setStatus(`Item ${action.index + 1} removed`);
+    }
+  }, [items.length, action]);
+
+  const Tag = separator ? 'ol' : 'ul';
+  const styles = repeaterStyles({ separator });
+
+  return (
+    <div className={styles.base({ className })}>
+      <Tag className={styles.list()}>
+        <LazyMotion features={loadAnimations}>
+          <AnimatePresence>
+            {items.map((item, index) => {
+              return (
+                <m.li
+                  initial={{ opacity: 1 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.15 }}
+                  key={index}
+                >
+                  <div
+                    ref={(el: HTMLDivElement) => {
+                      refArr.current[index] = el;
+                    }}
+                    tabIndex={-1}
+                    className={styles.item()}
+                  >
+                    {separator && <ItemIndex className={styles.itemIndex()}>{index + 1}.</ItemIndex>}
+                    <div className={styles.content()}>{children}</div>
+                    {items.length > 1 && (
+                      <Button
+                        className={styles.removeBtn()}
+                        aria-label={`remove item ${index + 1}`}
+                        iconBefore={(props: IconProps) => <RemoveCircleIcon {...props} aria-hidden size="xsmall" />}
+                        look="link"
+                        size="small"
+                        soft
+                        onClick={() => handleRemove(item.id, index)}
+                      >
+                        Remove
+                      </Button>
+                    )}
+                  </div>
+                </m.li>
+              );
+            })}
+          </AnimatePresence>
+        </LazyMotion>
+      </Tag>
+      <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/repeater/repeater.stories.tsx

@@ -0,0 +1,49 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Form, Input } from '../index.js';
+
+import { Repeater } from './repeater.component.js';
+
+const meta: Meta<typeof Repeater> = {
+  title: 'Example/Repeater',
+  component: Repeater,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-5">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    children: (
+      <Form>
+        <Form.Group>
+          <Form.Label htmlFor={`test`}>Primary</Form.Label>
+          <Form.Hint>Primary title text</Form.Hint>
+          <Input name={`test`} onChange={(e: any) => console.log(e)} />
+        </Form.Group>
+      </Form>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+};
+
+/**
+ * > Example using the separator prop
+ */
+export const SeparatedRepeater: Story = {
+  args: { separator: true },
+};

package/src/components/repeater/repeater.styles.ts

@@ -0,0 +1,27 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      list: 'm-0 list-none pl-0',
+      item: 'relative focus:outline-none',
+      itemIndex: 'mb-[1.125rem] font-bold',
+      content: '',
+      removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
+      footer: 'flex justify-between',
+      addBtn: 'height-auto p-0 no-underline hover:underline',
+    },
+    variants: {
+      separator: {
+        true: {
+          item: 'border-neutral border-t-2 pt-[0.625rem]',
+          content: 'p-[0_1.125rem_2.625rem]',
+          removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
+          footer: 'border-neutral border-t-2 pt-[0.875rem]',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/repeater/repeater.types.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+
+export type RepeaterProps = {
+  /**
+   * Text for add button
+   */
+  addText?: string;
+  /**
+   * Component to repeat
+   */
+  children: React.ReactNode;
+  /**
+   * Index heading tag to use for index on separator version
+   */
+  indexTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * Enable separator version
+   */
+  separator?: boolean;
+} & HTMLAttributes<Element>;

package/src/components/repeater/repeater.utils.tsx

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

package/src/components/select/select.stories.tsx

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

package/src/components/select/select.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline',
+    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
     variants: {
       size: {
         small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',

package/src/components/selector/components/index.ts

@@ -0,0 +1,2 @@
+export * from './selector-checkbox-group/index.js';
+export * from './selector-radio-group/index.js';

package/src/components/selector/components/selector-checkbox-group/components/index.ts

@@ -0,0 +1 @@
+export * from './selector-checkbox-group-option/index.js';

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/index.ts

@@ -0,0 +1,2 @@
+export { SelectorCheckboxGroupOption } from './selector-checkbox-group-option.component.js';
+export { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+
+import {
+  FlexiCellAdornment,
+  FlexiCellBody,
+  FlexiCellButton,
+  FlexiCellCircle,
+  FlexiCellFooter,
+  FlexiCellHint,
+  FlexiCellLabel,
+} from '../../../../../../components/flexi-cell/index.js';
+import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
+import { FlexiCell } from '../../../../../../components/index.js';
+import { SelectorCheckboxGroupContext } from '../../selector-checkbox-group.component.js';
+
+import { styles as selectorCheckboxGroupOptionStyles } from './selector-checkbox-group-option.styles.js';
+import { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';
+
+function BaseSelectorCheckboxGroupOption(
+  {
+    className,
+    children,
+    value,
+    withBorder = true,
+    withArrow,
+    after,
+    badge,
+    badgeZIndex,
+    before,
+    body = true,
+    checkIcon = 'checkbox',
+    ...props
+  }: SelectorCheckboxGroupOptionProps,
+  ref: any,
+) {
+  const state = useContext(SelectorCheckboxGroupContext);
+  const localRef = useRef(null);
+  const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({ ...props, value, children }, state, localRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = selectorCheckboxGroupOptionStyles({
+    className,
+    isSelected,
+    isFocusVisible,
+    isDisabled,
+    checkIcon,
+  });
+
+  const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
+
+  return (
+    <FlexiCell
+      after={
+        <div className="flex gap-2">
+          {after}
+          <FinalIcon aria-hidden="true" className={styles.icon({})} />
+        </div>
+      }
+      badge={badge}
+      badgeZIndex={badgeZIndex}
+      before={before}
+      body={body}
+      withBorder={withBorder}
+      withArrow={withArrow}
+      tag="label"
+      ref={ref}
+      withHoverEffect
+      className={styles.base({})}
+    >
+      <VisuallyHidden>
+        <input {...inputProps} {...focusProps} ref={localRef} />
+      </VisuallyHidden>
+      {children}
+    </FlexiCell>
+  );
+}
+
+export const SelectorCheckboxGroupOption = forwardRef(
+  BaseSelectorCheckboxGroupOption,
+) as React.ForwardRefExoticComponent<SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
+  Adornment: typeof FlexiCell.Adornment;
+  Body: typeof FlexiCell.Body;
+  Button: typeof FlexiCell.Button;
+  Circle: typeof FlexiCell.Circle;
+  Footer: typeof FlexiCell.Footer;
+  Hint: typeof FlexiCell.Hint;
+  Label: typeof FlexiCell.Label;
+};
+
+SelectorCheckboxGroupOption.Body = FlexiCellBody;
+SelectorCheckboxGroupOption.Footer = FlexiCellFooter;
+SelectorCheckboxGroupOption.Adornment = FlexiCellAdornment;
+SelectorCheckboxGroupOption.Hint = FlexiCellHint;
+SelectorCheckboxGroupOption.Label = FlexiCellLabel;
+SelectorCheckboxGroupOption.Button = FlexiCellButton;
+SelectorCheckboxGroupOption.Circle = FlexiCellCircle;