@westpac/ui 0.4.0 → 0.5.0

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

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

@@ -0,0 +1,53 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'group/checkbox-option cursor-pointer',
+      icon: 'transition-transform',
+    },
+    variants: {
+      checkIcon: {
+        arrow: {
+          icon: 'text-primary group-hover/checkbox-option:translate-x-1',
+        },
+        checkbox: {},
+      },
+      isSelected: {
+        true: {
+          base: 'border-hero shadow-[0_0_0_2px_inset]',
+        },
+        false: {},
+      },
+      isFocusVisible: {
+        true: {
+          base: 'focus-outline',
+        },
+        false: {},
+      },
+      isDisabled: {
+        true: {
+          base: 'opacity-50',
+        },
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        checkIcon: 'checkbox',
+        isSelected: false,
+        className: {
+          icon: 'opacity-0',
+        },
+      },
+      {
+        checkIcon: 'checkbox',
+        isSelected: true,
+        className: {
+          icon: 'opacity-100',
+        },
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,15 @@
+import { type AriaCheckboxGroupItemProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+
+import { FlexiCellProps } from '../../../../../index.js';
+
+import { styles } from './selector-checkbox-group-option.styles.js';
+
+export type SelectorCheckboxGroupOptionProps = {
+  /**
+   * Check icon to render
+   */
+  checkIcon?: 'checkbox' | 'arrow';
+} & FlexiCellProps &
+  VariantProps<typeof styles> &
+  Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

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

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

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

@@ -0,0 +1,46 @@
+import React, { createContext } from 'react';
+import { useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
+
+import { SelectorCheckboxGroupOption } from './components/index.js';
+import { styles } from './selector-checkbox-group.styles.js';
+import {
+  type SelectorCheckboxGroupContextState,
+  type SelectorCheckboxGroupProps,
+} from './selector-checkbox-group.types.js';
+
+export const SelectorCheckboxGroupContext = createContext<SelectorCheckboxGroupContextState>({
+  value: [],
+  isDisabled: false,
+  isReadOnly: false,
+  isSelected: () => false,
+  setValue: () => null,
+  addValue: () => null,
+  removeValue: () => null,
+  toggleValue: () => null,
+  validationState: 'valid',
+});
+
+export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {
+  const { children, label, description, errorMessage } = props;
+  const state = useCheckboxGroupState(props);
+  const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
+
+  return (
+    <div {...groupProps} className={styles({ className: groupProps.className })}>
+      <span {...labelProps}>{label}</span>
+      <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
+      {description && (
+        <div {...descriptionProps} style={{ fontSize: 12 }}>
+          {description}
+        </div>
+      )}
+      {errorMessage && state.validationState === 'invalid' && (
+        <div {...errorMessageProps} className="typography-body-10 text-danger">
+          {errorMessage}
+        </div>
+      )}
+    </div>
+  );
+}
+SelectorCheckboxGroup.Option = SelectorCheckboxGroupOption;

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

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex flex-col gap-2 md:gap-3',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { AriaCheckboxGroupProps } from 'react-aria';
+import { CheckboxGroupState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './selector-checkbox-group.styles.js';
+
+export type SelectorCheckboxGroupContextState = CheckboxGroupState;
+
+export type SelectorCheckboxGroupProps = {
+  /**
+   * String to override base style
+   */
+  className?: string;
+  /**
+   * Orientation of checkbox items
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Controls size of `CheckboxItem` components, can't be applied directly to `CheckboxItem`
+   */
+  size?: 'medium' | 'large';
+} & AriaCheckboxGroupProps &
+  VariantProps<typeof styles> &
+  Omit<HTMLAttributes<Element>, 'onChange'>;

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

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

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

@@ -0,0 +1,2 @@
+export { SelectorRadioGroupOption } from './selector-radio-group-option.component.js';
+export { type SelectorRadioGroupOptionProps } from './selector-radio-group-option.types.js';

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

@@ -0,0 +1,90 @@
+import React, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, useFocusRing, useRadio } 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 '../../../../../index.js';
+import { SelectorRadioGroupContext } from '../../selector-radio-group.component.js';
+
+import { styles as selectorRadioGroupOptionStyles } from './selector-radio-group-option.styles.js';
+import { type SelectorRadioGroupOptionProps } from './selector-radio-group-option.types.js';
+
+function BaseSelectorRadioGroupOption(
+  {
+    className,
+    children,
+    value,
+    withBorder = true,
+    withArrow,
+    after,
+    badge,
+    badgeZIndex,
+    before,
+    body = true,
+    checkIcon = 'checkbox',
+    ...props
+  }: SelectorRadioGroupOptionProps,
+  ref: any,
+) {
+  const state = useContext(SelectorRadioGroupContext);
+  const localRef = useRef(null);
+  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, value, children }, state, localRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = selectorRadioGroupOptionStyles({ 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}
+      className={styles.base({})}
+      withHoverEffect
+    >
+      <VisuallyHidden>
+        <input {...inputProps} {...focusProps} ref={localRef} />
+      </VisuallyHidden>
+      {children}
+    </FlexiCell>
+  );
+}
+
+export const SelectorRadioGroupOption = forwardRef(BaseSelectorRadioGroupOption) as React.ForwardRefExoticComponent<
+  SelectorRadioGroupOptionProps & 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;
+};
+
+SelectorRadioGroupOption.Body = FlexiCellBody;
+SelectorRadioGroupOption.Footer = FlexiCellFooter;
+SelectorRadioGroupOption.Adornment = FlexiCellAdornment;
+SelectorRadioGroupOption.Hint = FlexiCellHint;
+SelectorRadioGroupOption.Label = FlexiCellLabel;
+SelectorRadioGroupOption.Button = FlexiCellButton;
+SelectorRadioGroupOption.Circle = FlexiCellCircle;

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.styles.ts

@@ -0,0 +1,53 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'group/radio-option cursor-pointer',
+      icon: 'transition-transform',
+    },
+    variants: {
+      checkIcon: {
+        arrow: {
+          icon: 'text-primary group-hover/radio-option:translate-x-1',
+        },
+        checkbox: {},
+      },
+      isSelected: {
+        true: {
+          base: 'border-hero shadow-[0_0_0_2px_inset] shadow-hero',
+        },
+        false: {},
+      },
+      isFocusVisible: {
+        true: {
+          base: 'focus-outline',
+        },
+        false: {},
+      },
+      isDisabled: {
+        true: {
+          base: 'opacity-50',
+        },
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        checkIcon: 'checkbox',
+        isSelected: false,
+        className: {
+          icon: 'opacity-0',
+        },
+      },
+      {
+        checkIcon: 'checkbox',
+        isSelected: true,
+        className: {
+          icon: 'opacity-100',
+        },
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.types.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from 'react';
+import { type AriaRadioProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+
+import { type FlexiCellProps } from '../../../../../../index.js';
+
+import { styles } from './selector-radio-group-option.styles.js';
+
+export type SelectorRadioGroupOptionProps = {
+  /**
+   * Check icon to render
+   */
+  checkIcon?: 'checkbox' | 'arrow';
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & FlexiCellProps &
+  AriaRadioProps &
+  VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

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

@@ -0,0 +1,2 @@
+export { SelectorRadioGroup } from './selector-radio-group.component.js';
+export { type SelectorRadioGroupProps } from './selector-radio-group.types.js';