@westpac/ui 0.2.1 → 0.4.0

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/checkbox-group/components/checkbox/checkbox.styles.ts

@@ -7,14 +7,14 @@ export const styles = tv(
       checkIcon: 'overflow-visible',
       textWrapper: 'flex flex-col justify-center',
       labelText: 'typography-body-10 py-[2px] pl-1',
-      hintText: 'typography-body-10 text-muted pl-1',
+      hintText: 'typography-body-10 pl-1 text-muted',
       checkbox: 'flex h-4 w-4 items-center justify-center rounded border border-hero',
     },
     variants: {
       isDisabled: {
         true: {
           labelText: 'text-muted',
-          checkbox: 'bg-border-20 border-border',
+          checkbox: 'border-border bg-border-20',
         },
         false: {
           base: 'hover:cursor-pointer',

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

package/src/components/circle/circle.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/circle/circle.types.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './circle.styles.js';
+
+export type CircleProps = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/circle/index.ts

@@ -0,0 +1,2 @@
+export { Circle } from './circle.component.js';
+export { type CircleProps } from './circle.types.js';

package/src/components/collapsible/collapsible.component.tsx

@@ -0,0 +1,67 @@
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useCallback, useId, useState } from 'react';
+
+import { Button } from '../button/index.js';
+import { ExpandLessIcon, ExpandMoreIcon, IconProps } from '../icon/index.js';
+
+import { styles as collapsibleStyles } from './collapsible.styles.js';
+import { type CollapsibleProps } from './collapsible.types.js';
+
+const loadAnimations = () => import('./collapsible.utils.js').then(res => res.default);
+
+export function Collapsible({
+  className,
+  children,
+  open = false,
+  text,
+  size = 'medium',
+  onClick = () => undefined,
+}: CollapsibleProps) {
+  const [contentOpen, setContentOpen] = useState(open);
+  const contentId = useId();
+
+  const ButtonIcon = (props: IconProps) => {
+    if (!contentOpen) return <ExpandMoreIcon color="link" {...props} />;
+    return <ExpandLessIcon color="link" {...props} />;
+  };
+
+  const handleClick = useCallback(() => {
+    onClick();
+    setContentOpen(contentOpen => !contentOpen);
+  }, [contentOpen]);
+
+  const styles = collapsibleStyles({ open: contentOpen });
+
+  return (
+    <>
+      <Button
+        className={styles.base({ className })}
+        look="link"
+        iconAfter={ButtonIcon}
+        onClick={handleClick}
+        size={size}
+        aria-expanded={contentOpen}
+        aria-controls={contentId}
+      >
+        {text}
+      </Button>
+      <LazyMotion features={loadAnimations}>
+        <AnimatePresence>
+          {contentOpen && (
+            <m.div
+              key="content"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.15 }}
+              className={styles.content()}
+              id={contentId}
+              aria-hidden={!contentOpen}
+            >
+              {children}
+            </m.div>
+          )}
+        </AnimatePresence>
+      </LazyMotion>
+    </>
+  );
+}