@westpac/ui 0.3.0 → 0.5.0

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.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

@@ -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

@@ -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
    */

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

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useId, useRef } from 'react';
+import { useButton, useOverlayTrigger } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+
+import { Button } from '../button/index.js';
+import { DropDownIcon, IconProps } from '../icon/index.js';
+
+import { styles as buttonDropdownStyles } from './button-dropdown.styles.js';
+import { type ButtonDropdownProps } from './button-dropdown.types.js';
+import { Heading } from './components/heading/index.js';
+import { Panel } from './components/panel/panel.component.js';
+
+export function ButtonDropdown({
+  className,
+  dropdownSize = 'medium',
+  iconBefore: IconBefore,
+  open = false,
+  text,
+  children,
+  size,
+  look = 'hero',
+  soft = false,
+  block = false,
+}: ButtonDropdownProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const panelId = useId();
+  const styles = buttonDropdownStyles({ block, dropdownSize });
+  const state = useOverlayTriggerState({ defaultOpen: open });
+  const { overlayProps, triggerProps } = useOverlayTrigger({ type: 'menu' }, state, ref);
+  const { buttonProps } = useButton(triggerProps, ref);
+
+  // React Aria does not check for escape key press unless panel is focused so this is needed
+  const keyHandler = useCallback(
+    (event: globalThis.KeyboardEvent) => {
+      if (state.isOpen && event.key === 'Escape') state.close();
+    },
+    [state.isOpen],
+  );
+
+  useEffect(() => {
+    window.document.addEventListener('keydown', keyHandler);
+    return () => {
+      window.document.removeEventListener('keydown', keyHandler);
+    };
+  }, [keyHandler]);
+
+  return (
+    <>
+      <Button
+        ref={ref}
+        iconAfter={(props: IconProps) => <DropDownIcon aria-hidden {...props} />}
+        iconBefore={IconBefore}
+        size={size}
+        look={look}
+        soft={soft}
+        block={block}
+        aria-expanded={state.isOpen}
+        aria-controls="panel-dialog"
+        className={styles.base()}
+        {...buttonProps}
+      >
+        {text}
+      </Button>
+      {state.isOpen && (
+        <Panel
+          className={styles.panel({ className })}
+          placement="bottom start"
+          triggerRef={ref}
+          state={state}
+          block={block}
+          id={panelId}
+          {...overlayProps}
+        >
+          {children}
+        </Panel>
+      )}
+    </>
+  );
+}
+
+ButtonDropdown.Heading = Heading;

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

@@ -0,0 +1,178 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { AndroidIcon, AppleIcon } from '../icon/index.js';
+
+import { ButtonDropdown } from './button-dropdown.component.js';
+
+const meta: Meta<typeof ButtonDropdown> = {
+  title: 'Example/ButtonDropdown',
+  component: ButtonDropdown,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LOOKS = ['primary', 'hero', 'faint'];
+const SIZES = ['small', 'medium', 'large', 'xlarge'];
+const DROPDOWNSIZE = ['small', 'medium', 'large'];
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    text: 'Default Dropdown',
+    children: (
+      <p>
+        Example dropdown
+        <a href="#" className="text-[blue] underline">
+          content
+        </a>
+        ...
+      </p>
+    ),
+  },
+};
+
+/**
+ * > Standard looks of button
+ */
+export const StandardLooks = () => (
+  <div className="flex gap-2">
+    {LOOKS.map((look: any) => (
+      <ButtonDropdown look={look} text={look}>
+        <p>
+          Example dropdown
+          <a href="#" className="text-[blue] underline">
+            content
+          </a>
+          ...
+        </p>
+      </ButtonDropdown>
+    ))}
+  </div>
+);
+
+/**
+ * > Soft looks of button
+ */
+export const SoftLooks = () => (
+  <div className="flex gap-2">
+    {LOOKS.map((look: any) => (
+      <ButtonDropdown look={look} soft text={look}>
+        <p>
+          Example dropdown
+          <a href="#" className="text-[blue] underline">
+            content
+          </a>
+          ...
+        </p>
+      </ButtonDropdown>
+    ))}
+  </div>
+);
+
+/**
+ * > Sizes of buttons
+ */
+export const ButtonSizes = () => (
+  <div>
+    {SIZES.map((size: any) => (
+      <>
+        <h3 className="font-bold">{size}</h3>
+        <ButtonDropdown size={size} text={size}>
+          <p>
+            Example dropdown
+            <a href="#" className="text-[blue] underline">
+              content
+            </a>
+            ...
+          </p>
+        </ButtonDropdown>
+      </>
+    ))}
+  </div>
+);
+
+/**
+ * > Sizes of dropdown
+ */
+export const DropdownSizes = () => (
+  <div>
+    {DROPDOWNSIZE.map((size: any) => (
+      <>
+        <h3 className="font-bold">{size}</h3>
+        <ButtonDropdown dropdownSize={size} text={size}>
+          {size}
+        </ButtonDropdown>
+      </>
+    ))}
+  </div>
+);
+
+/**
+ * > Block usage example
+ */
+export const BlockDropdownButton: Story = {
+  args: {
+    block: true,
+    text: 'Block Dropdown',
+    children: (
+      <p>
+        Example dropdown
+        <a href="#" className="text-[blue] underline">
+          content
+        </a>
+        ...
+      </p>
+    ),
+  },
+};
+
+/**
+ * > Icon usage example
+ */
+export const DropdownButtonWithIcons: Story = {
+  args: {
+    iconBefore: AndroidIcon,
+    text: 'Icon Dropdown',
+    children: (
+      <p>
+        Example dropdown
+        <a href="#" className="text-[blue] underline">
+          content
+        </a>
+        ...
+      </p>
+    ),
+  },
+};
+
+/**
+ * > With headings example
+ */
+export const DropdownWithHeadings: Story = {
+  args: {
+    text: 'Heading Dropdown',
+    block: false,
+    children: (
+      <>
+        <ButtonDropdown.Heading>Dropdown heading #1</ButtonDropdown.Heading>
+        Example dropdown content...
+        <ButtonDropdown.Heading>Dropdown heading #2</ButtonDropdown.Heading>
+        Example dropdown content...
+      </>
+    ),
+  },
+};

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

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'focus:focus-outline',
+      panel: 'overflow-hidden',
+    },
+    variants: {
+      dropdownSize: {
+        small: {
+          panel: 'min-w-[8.125rem]',
+        },
+        medium: {
+          panel: 'min-w-[11.875rem]',
+        },
+        large: {
+          panel: 'min-w-[15.625rem]',
+        },
+      },
+      block: {
+        true: {
+          panel: '',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,27 @@
+import { ButtonHTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { ButtonProps } from '../button/index.js';
+
+import { styles } from './button-dropdown.styles.js';
+
+export type ButtonDropdownProps = {
+  /**
+   * Look for button
+   */
+  look?: 'primary' | 'hero' | 'faint';
+  /**
+   * State of whether the Popover is open
+   */
+  open?: boolean;
+  /**
+   * Soft look button
+   */
+  soft?: boolean;
+  /**
+   * Button text
+   */
+  text: string;
+} & ButtonHTMLAttributes<Element> &
+  Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> &
+  VariantProps<typeof styles>;

package/src/components/button-dropdown/components/heading/heading.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { styles as headingStyles } from './heading.styles.js';
+import { type HeadingProps } from './heading.types.js';
+
+export function Heading({ className, tag: Tag = 'h1', children, ...props }: HeadingProps) {
+  const styles = headingStyles({});
+
+  return (
+    <Tag className={styles.base({ className })} {...props}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/button-dropdown/components/heading/heading.styles.ts

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'typography-body-10 text-hero bg-background -mx-1 mb-3 mt-4 p-[0.4375rem] font-medium first-of-type:-mt-1',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/button-dropdown/components/heading/heading.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+
+export type HeadingProps = {
+  /**
+   * The tag of the heading element for semantic reasons
+   */
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & HTMLAttributes<Element>;

package/src/components/button-dropdown/components/heading/index.ts

@@ -0,0 +1,2 @@
+export { Heading } from './heading.component.js';
+export { type HeadingProps } from './heading.types.js';

package/src/components/button-dropdown/components/panel/index.ts

@@ -0,0 +1,2 @@
+export { Panel } from './panel.component.js';
+export { type PanelProps } from './panel.types.js';

package/src/components/button-dropdown/components/panel/panel.component.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { DismissButton, Overlay, mergeProps, useOverlay, usePopover } from 'react-aria';
+
+import { styles as panelStyles } from './panel.styles.js';
+import { type PanelProps } from './panel.types.js';
+
+export function Panel({ className, children, state, block, id, ...props }: PanelProps) {
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const { overlayProps } = useOverlay({ shouldCloseOnBlur: true, onClose: state.close }, popoverRef);
+  const { popoverProps } = usePopover({ popoverRef, shouldFlip: false, ...props }, state);
+  const styles = panelStyles({});
+  const width = props.triggerRef.current?.getBoundingClientRect().width;
+
+  // Added this based on accessibility features seen https://gel.westpacgroup.com.au/design-system/components/button-dropdowns?b=WBC&tab=accessibility and React Aria doesn't do this
+  const focusHandler = useCallback(
+    (event: globalThis.FocusEvent) => {
+      if (event.target && popoverRef.current && !popoverRef.current.contains(event.target as Node) && state.isOpen)
+        state.close();
+    },
+    [state.isOpen],
+  );
+
+  useEffect(() => {
+    window.document.addEventListener('focusin', focusHandler);
+    return () => {
+      window.document.removeEventListener('focusin', focusHandler);
+    };
+  }, []);
+
+  return (
+    <Overlay>
+      <div
+        {...mergeProps(popoverProps, overlayProps)}
+        id={id}
+        data-testid="panel-dialog"
+        style={{ ...popoverProps.style, width: block && width ? `${width}px` : undefined }}
+        ref={popoverRef}
+        className={styles.base({ className })}
+      >
+        <DismissButton onDismiss={state.close} />
+        <div className={styles.dialog()}>{children}</div>
+        <DismissButton onDismiss={state.close} />
+      </div>
+    </Overlay>
+  );
+}

package/src/components/button-dropdown/components/panel/panel.styles.ts

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+
+// eslint-disable-next-line tailwindcss/no-custom-classname
+export const styles = tv(
+  {
+    slots: {
+      base: 'border-border mt-[0.1875rem] rounded-[3px] border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+      dialog: 'focus:outline-none',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/button-dropdown/components/panel/panel.types.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+import { AriaPopoverProps } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+
+import { ButtonProps } from '../../../button/index.js';
+
+export type PanelProps = {
+  /**
+   * State for the panel
+   */
+  state: OverlayTriggerState;
+} & HTMLAttributes<Element> &
+  Omit<AriaPopoverProps, 'popoverRef'> &
+  Pick<ButtonProps, 'block'>;

package/src/components/button-dropdown/index.ts

@@ -0,0 +1,2 @@
+export { ButtonDropdown } from './button-dropdown.component.js';
+export { type ButtonDropdownProps } from './button-dropdown.types.js';

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

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

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

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

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

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

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

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

package/src/components/circle/circle.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './circle.styles.js';
+import { type CircleProps } from './circle.types.js';
+
+export function Circle({ className, tag: Tag = 'div', children, ...props }: CircleProps) {
+  return (
+    <Tag className={styles({ className })} {...props}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/circle/circle.stories.tsx

@@ -0,0 +1,25 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Circle } from './circle.component.js';
+
+const meta: Meta<typeof Circle> = {
+  title: 'Example/Circle',
+  component: Circle,
+  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: {
+    children: 'GK',
+  },
+};