@westpac/ui 0.3.0 → 0.5.0

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

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

@@ -0,0 +1,48 @@
+import React, { createContext } from 'react';
+import { useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+
+import { SelectorRadioGroupOption } from './components/index.js';
+import { styles } from './selector-radio-group.styles.js';
+import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
+
+export const SelectorRadioGroupContext = createContext<SelectorRadioGroupContextState>({
+  // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
+  name: '',
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  validationState: null,
+  selectedValue: null,
+  setSelectedValue: () => null,
+  lastFocusedValue: null,
+  setLastFocusedValue: () => null,
+  orientation: 'vertical',
+});
+
+export function SelectorRadioGroup({
+  className,
+  children,
+  label,
+  orientation = 'vertical',
+  errorMessage,
+  ...props
+}: SelectorRadioGroupProps) {
+  const state = useRadioGroupState({ ...props, errorMessage, label, orientation });
+  const { radioGroupProps, labelProps, errorMessageProps } = useRadioGroup({ ...props, label, orientation }, state);
+
+  return (
+    <div className={styles({ className, orientation })} {...radioGroupProps}>
+      <span {...labelProps}>{label}</span>
+      <SelectorRadioGroupContext.Provider value={{ ...state, orientation }}>
+        {children}
+      </SelectorRadioGroupContext.Provider>
+      {errorMessage && state.validationState === 'invalid' && (
+        <div {...errorMessageProps} className="typography-body-10 text-danger">
+          {errorMessage}
+        </div>
+      )}
+    </div>
+  );
+}
+SelectorRadioGroup.Option = SelectorRadioGroupOption;

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

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

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

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from 'react';
+import { type AriaRadioGroupProps } from 'react-aria';
+import { type RadioGroupState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './selector-radio-group.styles.js';
+
+export type SelectorRadioGroupProps = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  AriaRadioGroupProps &
+  Omit<HTMLAttributes<Element>, 'onChange'>;
+
+export type SelectorRadioGroupContextState = {
+  /**
+   * Controls orientation of `Radio` components, can't be applied directly on `Radio`
+   */
+  orientation: 'vertical' | 'horizontal';
+} & RadioGroupState;

package/src/components/selector/index.ts

@@ -0,0 +1,2 @@
+export { Selector } from './selector.component.js';
+export { type SelectorProps } from './selector.types.js';

package/src/components/selector/selector.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  FlexiCellAdornment,
+  FlexiCellBody,
+  FlexiCellButton,
+  FlexiCellCircle,
+  FlexiCellFooter,
+  FlexiCellHint,
+  FlexiCellLabel,
+} from '../flexi-cell/components/index.js';
+
+import { SelectorCheckboxGroup, SelectorRadioGroup } from './components/index.js';
+import { SelectorCheckboxGroupOption } from './components/selector-checkbox-group/components/index.js';
+import { SelectorRadioGroupOption } from './components/selector-radio-group/components/index.js';
+import { type SelectorProps } from './selector.types.js';
+
+// TODO: react-aria doesn't consider the click as focus. so the focusRing will appeared just with the tab.
+export function Selector(props: SelectorProps) {
+  if (props.type === 'checkbox') {
+    return <SelectorCheckboxGroup {...props} />;
+  }
+  return <SelectorRadioGroup {...props} />;
+}
+
+Selector.Radio = SelectorRadioGroupOption;
+Selector.Checkbox = SelectorCheckboxGroupOption;
+Selector.Body = FlexiCellBody;
+Selector.Footer = FlexiCellFooter;
+Selector.Adornment = FlexiCellAdornment;
+Selector.Hint = FlexiCellHint;
+Selector.Label = FlexiCellLabel;
+Selector.Button = FlexiCellButton;
+Selector.Circle = FlexiCellCircle;