@westpac/ui 0.2.1 → 0.4.0

package/src/components/autocomplete/autocomplete.stories.tsx

@@ -0,0 +1,158 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { Key, useState } from 'react';
+
+import { Autocomplete } from './autocomplete.component.js';
+
+const meta: Meta<typeof Autocomplete> = {
+  title: 'Example/Autocomplete',
+  component: Autocomplete,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="h-30 p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    'aria-label': 'Animals',
+    children: [
+      <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>,
+      <Autocomplete.Item key="cat">Cat</Autocomplete.Item>,
+      <Autocomplete.Item key="dog">Dog</Autocomplete.Item>,
+      <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>,
+      <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>,
+      <Autocomplete.Item key="snake">Snake</Autocomplete.Item>,
+    ],
+  },
+};
+
+/**
+ * > Controlled usage example
+ */
+export const ControlledStory: Story = {
+  args: {},
+  render: () => {
+    const [selectedKey, setSelectedKey] = useState<Key>();
+    const handleSelectionChange = (key: Key) => {
+      setSelectedKey(key);
+    };
+    return (
+      <Autocomplete onSelectionChange={handleSelectionChange} selectedKey={selectedKey} aria-label="Animals">
+        <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+        <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+        <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+        <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+        <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+        <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+      </Autocomplete>
+    );
+  },
+};
+
+/**
+ * > Disabled usage example
+ */
+export const DisabledStory: Story = {
+  args: {
+    isDisabled: true,
+    'aria-label': 'Disable example',
+    children: [
+      <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>,
+      <Autocomplete.Item key="cat">Cat</Autocomplete.Item>,
+      <Autocomplete.Item key="dog">Dog</Autocomplete.Item>,
+      <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>,
+      <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>,
+      <Autocomplete.Item key="snake">Snake</Autocomplete.Item>,
+    ],
+  },
+};
+
+/**
+ * > Invalid usage example
+ */
+export const InvalidStory: Story = {
+  args: {
+    invalid: true,
+    'aria-label': 'Invalid example',
+    children: [
+      <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>,
+      <Autocomplete.Item key="cat">Cat</Autocomplete.Item>,
+      <Autocomplete.Item key="dog">Dog</Autocomplete.Item>,
+      <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>,
+      <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>,
+      <Autocomplete.Item key="snake">Snake</Autocomplete.Item>,
+    ],
+  },
+};
+
+/**
+ * > Sizes example
+ */
+export const SizesStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        {['small', 'medium', 'large', 'xlarge'].map(size => (
+          <div className="py-2" key={size}>
+            <Autocomplete label={size} size={size as any} aria-label={`size ${size}`}>
+              <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+              <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+              <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+              <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+              <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+              <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+            </Autocomplete>
+          </div>
+        ))}
+      </>
+    );
+  },
+};
+
+/**
+ * > Footer example
+ */
+export const FooterStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <div className="py-2">
+        <Autocomplete label="With footer" footer={<h3>Footer</h3>}>
+          <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+          <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+          <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+          <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+          <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+          <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+          <Autocomplete.Item key="elephant">Elephant</Autocomplete.Item>
+          <Autocomplete.Item key="giraffe">Giraffe</Autocomplete.Item>
+          <Autocomplete.Item key="lion">Lion</Autocomplete.Item>
+          <Autocomplete.Item key="tiger">Tiger</Autocomplete.Item>
+          <Autocomplete.Item key="penguin">Penguin</Autocomplete.Item>
+          <Autocomplete.Item key="octopus">Octopus</Autocomplete.Item>
+          <Autocomplete.Item key="cheetah">Cheetah</Autocomplete.Item>
+          <Autocomplete.Item key="polar bear">Polar Bear</Autocomplete.Item>
+          <Autocomplete.Item key="koala">Koala</Autocomplete.Item>
+          <Autocomplete.Item key="dolphin">Dolphin</Autocomplete.Item>
+          <Autocomplete.Item key="flamingo">Flamingo</Autocomplete.Item>
+          <Autocomplete.Item key="elephant seal">Elephant Seal</Autocomplete.Item>
+          <Autocomplete.Item key="orca">Orca</Autocomplete.Item>
+        </Autocomplete>
+      </div>
+    );
+  },
+};

package/src/components/autocomplete/autocomplete.styles.ts

@@ -0,0 +1,52 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'relative flex flex-col',
+      label: 'block text-left text-sm font-medium text-text',
+      outerWrapper:
+        'form-control relative flex w-full flex-row items-center overflow-hidden pr-2 disabled:form-control-disabled focus:focus-outline',
+      input: 'w-full appearance-none bg-[transparent] outline-none',
+      clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60',
+    },
+    variants: {
+      invalid: {
+        true: {
+          outerWrapper: 'border-danger',
+        },
+        false: {
+          outerWrapper: 'border-borderDark',
+        },
+      },
+      size: {
+        small: {
+          input: 'form-control-small',
+        },
+        medium: {
+          input: 'form-control-medium',
+        },
+        large: {
+          input: 'form-control-large',
+        },
+        xlarge: {
+          input: 'form-control-xlarge',
+        },
+      },
+      isDisabled: {
+        true: {
+          outerWrapper: 'form-control-disabled',
+          input: 'cursor-not-allowed',
+        },
+        false: {},
+      },
+      isFocused: {
+        true: {
+          outerWrapper: 'focus-outline',
+        },
+        false: {},
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/autocomplete/autocomplete.types.ts

@@ -0,0 +1,20 @@
+import { type ComboBoxProps } from '@react-types/combobox';
+import { type AriaLabelingProps } from '@react-types/shared';
+import { type ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './autocomplete.styles.js';
+import { PopoverProps } from './components/index.js';
+
+export type AutocompleteProps<T extends object> = {
+  /**
+   * Tag to render
+   */
+  footer?: ReactNode;
+  /**
+   * Element where the popover will be rendered, by default it will be into the body
+   */
+  portalContainer?: PopoverProps['portalContainer'];
+} & VariantProps<typeof styles> &
+  ComboBoxProps<T> &
+  AriaLabelingProps;

package/src/components/autocomplete/components/index.ts

@@ -0,0 +1,2 @@
+export * from './list-box/index.js';
+export * from './popover/index.js';

package/src/components/autocomplete/components/list-box/components/index.ts

@@ -0,0 +1,2 @@
+export * from './list-box-option/index.js';
+export * from './list-box-section/index.js';

package/src/components/autocomplete/components/list-box/components/list-box-option/index.ts

@@ -0,0 +1,2 @@
+export { Option } from './list-box-option.component.js';
+export { type OptionProps } from './list-box-option.types.js';

package/src/components/autocomplete/components/list-box/components/list-box-option/list-box-option.component.tsx

@@ -0,0 +1,29 @@
+import { type Node } from '@react-types/shared';
+import * as React from 'react';
+import { useOption } from 'react-aria';
+import { type ListState } from 'react-stately';
+
+import { styles } from './list-box-option.styles.js';
+
+interface OptionProps<T = any> {
+  item: Node<T>;
+  state: ListState<T>;
+}
+
+export function Option({ item, state }: OptionProps) {
+  const ref = React.useRef<HTMLLIElement>(null);
+
+  const { optionProps, isDisabled, isSelected, isFocused } = useOption(
+    {
+      key: item.key,
+    },
+    state,
+    ref,
+  );
+
+  return (
+    <li {...optionProps} ref={ref} className={styles({ isFocused, isSelected, isDisabled })}>
+      {item.rendered}
+    </li>
+  );
+}

package/src/components/autocomplete/components/list-box/components/list-box-option/list-box-option.styles.ts

@@ -0,0 +1,19 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
+    variants: {
+      isFocused: {
+        true: 'bg-hero !text-white',
+      },
+      isSelected: {
+        true: 'font-bold',
+      },
+      isDisabled: {
+        true: 'text-muted',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/autocomplete/components/list-box/components/list-box-option/list-box-option.types.ts

@@ -0,0 +1,7 @@
+import { type Node } from '@react-types/shared';
+import { type ListState } from 'react-stately';
+
+export type OptionProps<T = any> = {
+  item: Node<T>;
+  state: ListState<T>;
+};

package/src/components/autocomplete/components/list-box/components/list-box-section/index.ts

@@ -0,0 +1,2 @@
+export { ListBoxSection } from './list-box-section.component.js';
+export { type ListBoxSectionProps } from './list-box-section.types.js';

package/src/components/autocomplete/components/list-box/components/list-box-section/list-box-section.component.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useListBoxSection } from 'react-aria';
+
+import { Option } from '../list-box-option/index.js';
+
+import { type ListBoxSectionProps } from './list-box-section.types.js';
+
+export function ListBoxSection({ section, state }: ListBoxSectionProps) {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    'aria-label': section['aria-label'],
+  });
+
+  return (
+    <>
+      <li {...itemProps} className="pt-2">
+        {section.rendered && (
+          <span {...headingProps} className="mx-3 text-xs font-bold uppercase text-text">
+            {section.rendered}
+          </span>
+        )}
+
+        <ul {...groupProps}>
+          {[...section.childNodes].map(node => (
+            <Option key={node.key} item={node} state={state} />
+          ))}
+        </ul>
+      </li>
+    </>
+  );
+}

package/src/components/autocomplete/components/list-box/components/list-box-section/list-box-section.types.ts

@@ -0,0 +1,7 @@
+import { type Node } from '@react-types/shared';
+import { ListState } from 'react-stately';
+
+export type ListBoxSectionProps<T = any> = {
+  section: Node<T>;
+  state: ListState<T>;
+};

package/src/components/autocomplete/components/list-box/index.ts

@@ -0,0 +1,2 @@
+export { ListBox } from './list-box.component.js';
+export { type ListBoxProps } from './list-box.types.js';

package/src/components/autocomplete/components/list-box/list-box.component.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useListBox } from 'react-aria';
+
+import { ListBoxSection, Option } from './components/index.js';
+import { ListBoxProps } from './list-box.types.js';
+
+export function ListBox(props: ListBoxProps) {
+  const ref = React.useRef<HTMLUListElement>(null);
+
+  const { listBoxRef = ref, state } = props;
+
+  const { listBoxProps } = useListBox(props, state, listBoxRef);
+
+  return (
+    <ul {...listBoxProps} ref={listBoxRef} className="max-h-[400px] w-full overflow-auto outline-none">
+      {[...state.collection].map(item =>
+        item.type === 'section' ? (
+          <ListBoxSection key={item.key} section={item} state={state} />
+        ) : (
+          <Option key={item.key} item={item} state={state} />
+        ),
+      )}
+    </ul>
+  );
+}

package/src/components/autocomplete/components/list-box/list-box.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { AriaListBoxOptions } from 'react-aria';
+import { ListState } from 'react-stately';
+
+export type ListBoxProps<T = any> = AriaListBoxOptions<T> & {
+  listBoxRef?: React.RefObject<HTMLUListElement>;
+  state: ListState<T>;
+} & HTMLAttributes<Element>;

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

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

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

@@ -0,0 +1,35 @@
+import { clsx } from 'clsx';
+import * as React from 'react';
+import { DismissButton, Overlay, usePopover } from 'react-aria';
+
+import { PopoverProps } from './popover.types.js';
+
+export function Popover(props: PopoverProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const { popoverRef = ref, state, children, className, isNonModal, portalContainer } = props;
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      ...props,
+      popoverRef,
+    },
+    state,
+  );
+
+  const width = props.triggerRef.current?.getBoundingClientRect().width;
+  return (
+    <Overlay portalContainer={portalContainer}>
+      {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
+
+      <div
+        {...popoverProps}
+        style={{ ...popoverProps.style, width: width ? `${width}px` : undefined }}
+        ref={popoverRef}
+        className={clsx('z-10 border border-border bg-white shadow-lg', className)}
+      >
+        {!isNonModal && <DismissButton onDismiss={state.close} />}
+        {children}
+        <DismissButton onDismiss={state.close} />
+      </div>
+    </Overlay>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type AriaPopoverProps } from 'react-aria';
+import { type OverlayTriggerState } from 'react-stately';
+
+export type PopoverProps = Omit<AriaPopoverProps, 'popoverRef'> & {
+  /**
+   * Popover content
+   */
+  children: ReactNode;
+  /**
+   * Classname
+   */
+  className?: string;
+  /**
+   * Popover ref
+   */
+  popoverRef?: React.RefObject<HTMLDivElement>;
+  /**
+   * Element where the popover will be rendered, by default it will be into the body
+   */
+  portalContainer?: Element;
+  /**
+   * Popover state
+   */
+  state: OverlayTriggerState;
+} & HTMLAttributes<Element>;

package/src/components/autocomplete/index.ts

@@ -0,0 +1,2 @@
+export { Autocomplete } from './autocomplete.component.js';
+export { type AutocompleteProps } from './autocomplete.types.js';

package/src/components/badge/badge.stories.tsx

@@ -26,7 +26,7 @@ const meta: Meta<typeof Badge> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
   argTypes: {
     children: {

package/src/components/breadcrumb/breadcrumb.stories.tsx

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

package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef } from 'react';
 import { useBreadcrumbItem } from 'react-aria';
 
-import { ArrowRightIcon } from '../../../index.js';
+import { ArrowRightIcon } from '../../../icon/index.js';
 
 import { styles } from './breadcrumb-item.styles.js';
 import { type BreadcrumbItemProps } from './breadcrumb-item.types.js';

package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.stories.tsx

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

package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -9,7 +9,7 @@ export const styles = tv(
         false: '',
       },
       isDisabled: {
-        true: 'text-muted-100',
+        true: 'text-muted-10',
         false: 'text-muted',
       },
     },

package/src/components/button/button.component.tsx

@@ -1,6 +1,8 @@
 import React, { forwardRef, useMemo } from 'react';
 import { FocusRing } from 'react-aria';
 
+import { DropDownIcon } from '../icon/index.js';
+
 import { styles as buttonStyles } from './button.styles.js';
 import { type ButtonProps } from './button.types.js';
 import { getIconSize } from './button.utils.js';
@@ -16,6 +18,7 @@ function BaseButton(
     tag: Tag = 'button',
     iconBefore: IconBefore,
     iconAfter: IconAfter,
+    iconColor,
     children,
     ...props
   }: ButtonProps,
@@ -33,9 +36,9 @@ function BaseButton(
   return (
     <FocusRing focusRingClass="focus-outline">
       <Tag ref={ref} className={styles.base({ className })} {...props}>
-        {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} />}
+        {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} />}
         <span className={styles.text()}>{children}</span>
-        {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} />}
+        {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} />}
       </Tag>
     </FocusRing>
   );

package/src/components/button/button.stories.tsx

@@ -1,6 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
-import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../index.js';
+import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
 
 import { Button } from './button.component.js';
 
@@ -16,7 +16,7 @@ const meta: Meta<typeof Button> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/components/button/button.styles.ts

@@ -6,9 +6,10 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50',
+      base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
       iconBefore: '',
       iconAfter: '',
+      dropdown: 'ml-[0.4em]',
       text: 'overflow-hidden text-ellipsis',
     },
     variants: {
@@ -19,9 +20,9 @@ export const styles = tv(
         xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]' },
       },
       look: {
-        primary: { base: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50' },
-        hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
-        faint: { base: 'border border-border bg-light text-muted hover:bg-white active:bg-white' },
+        primary: { base: 'border-primary bg-primary hover:bg-primary-70 active:bg-primary-50 border text-white' },
+        hero: { base: 'border-hero bg-hero hover:bg-hero-70 active:bg-hero-50 border text-white' },
+        faint: { base: 'border-border bg-light text-muted border hover:bg-white active:bg-white' },
         link: { base: 'text-link underline' },
       },
       soft: {

package/src/components/button/button.types.ts

@@ -1,7 +1,7 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 
-import { IconProps } from '../index.js';
+import { IconProps } from '../icon/index.js';
 
 import { styles } from './button.styles.js';
 
@@ -14,6 +14,12 @@ export type ButtonProps = {
    * Places an icon within the button, before the button’s text
    */
   iconBefore?: (props: IconProps) => JSX.Element;
+  /**
+   * The color for the icon.
+   *
+   * Defaults to the current text color.
+   */
+  iconColor?: IconProps['color'];
   /**
    * Tag to render
    */