@westpac/ui 0.6.0 → 0.7.0

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

@@ -3,19 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Breadcrumb } from './breadcrumb.component.js';
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: 'Example/Breadcrumb',
+  title: 'Components/Breadcrumb',
   component: Breadcrumb,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-2">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -24,24 +15,17 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: [
       <Breadcrumb.Item tag="button" onClick={() => alert('Folder 1')}>
-        Button item
-      </Breadcrumb.Item>,
-      <Breadcrumb.Item tag="a" href="#test">
-        Anchor item
-      </Breadcrumb.Item>,
-      <Breadcrumb.Item tag="span">Span item</Breadcrumb.Item>,
-      <Breadcrumb.Item tag="span" isDisabled>
-        Span and disabled
+        About us
       </Breadcrumb.Item>,
-      <Breadcrumb.Item tag="a" isDisabled href="#lol">
-        anchor and disabled
+      <Breadcrumb.Item tag="a" href="#nogo">
+        Innovation
       </Breadcrumb.Item>,
       <Breadcrumb.Item tag="a" href="#loko">
-        Last item
+        Principal investments
       </Breadcrumb.Item>,
     ],
   },

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

@@ -3,19 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { BreadcrumbItem } from './breadcrumb-item.component.js';
 
 const meta: Meta<typeof BreadcrumbItem> = {
-  title: 'Example/Breadcrumb/BreadCrumbItem',
+  title: 'Components/Breadcrumb/BreadCrumbItem',
   component: BreadcrumbItem,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-2">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -24,19 +15,19 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     isDisabled: false,
-    children: 'Default Crumb',
+    children: 'Strategic partnerships',
   },
 };
 
 /**
  * > Disabled
  */
-export const IsDisabledStory: Story = {
+export const IsDisabled: Story = {
   args: {
     isDisabled: true,
-    children: 'Disabled Crumb',
+    children: 'Open Banking',
   },
 };

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

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

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

@@ -5,32 +5,23 @@ import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
 import { Button } from './button.component.js';
 
 const meta: Meta<typeof Button> = {
-  title: 'Example/Button',
+  title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ padding: '3rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const LOOKS = ['primary', 'hero', 'faint', 'link'];
-const SOFT_LOOKS = ['primary', 'hero', 'faint'];
-const SIZES = ['small', 'medium', 'large', 'xlarge'];
+const LOOKS = ['primary', 'hero', 'faint', 'link'] as const;
+const SOFT_LOOKS = ['primary', 'hero', 'faint'] as const;
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: 'Button text',
   },
@@ -39,17 +30,17 @@ export const DefaultStory: Story = {
 /**
  * > Button looks
  */
-export const ButtonColors = () => (
+export const Colors = () => (
   <div className="flex flex-col gap-2">
     <h3 className="font-bold">Default</h3>
     <div className="flex gap-2">
-      {LOOKS.map((look: any) => (
+      {LOOKS.map(look => (
         <Button look={look}>{look}</Button>
       ))}
     </div>
     <h3 className="font-bold">Soft</h3>
     <div className="flex gap-2">
-      {SOFT_LOOKS.map((look: any) => (
+      {SOFT_LOOKS.map(look => (
         <Button look={look} soft>
           {look}
         </Button>
@@ -61,20 +52,20 @@ export const ButtonColors = () => (
 /**
  * > Button sizes
  */
-export const ButtonSizes = () => (
+export const Sizes = () => (
   <div className="flex flex-col gap-2">
-    {SIZES.map((size: any) => (
+    {SIZES.map(size => (
       <>
         <h3 className="font-bold">{size}</h3>
         <div className="flex gap-2">
-          {LOOKS.map((look: any) => (
+          {LOOKS.map(look => (
             <Button look={look} size={size}>
               {look}
             </Button>
           ))}
         </div>
         <div className="flex gap-2">
-          {SOFT_LOOKS.map((look: any) => (
+          {SOFT_LOOKS.map(look => (
             <Button look={look} size={size} soft>
               {look}
             </Button>
@@ -88,13 +79,13 @@ export const ButtonSizes = () => (
 /**
  * > Block buttons
  */
-export const BlockButtons = () => (
+export const Block = () => (
   <div className="flex flex-col gap-2">
-    {SIZES.map((size: any) => (
+    {SIZES.map(size => (
       <>
         <h3 className="font-bold">{size}</h3>
         <div className="flex flex-col gap-2">
-          {SOFT_LOOKS.map((look: any) => (
+          {SOFT_LOOKS.map(look => (
             <Button look={look} size={size} block>
               {look}
             </Button>
@@ -108,20 +99,20 @@ export const BlockButtons = () => (
 /**
  * > Buttons with icons
  */
-export const ButtonIcons = () => (
+export const Icons = () => (
   <div>
     <div className="mb-4 flex flex-col gap-2">
       <h2 className="typography-body-7 font-bold">Icon Before</h2>
       <h3 className="font-bold">Colors</h3>
       <div className="flex gap-2">
-        {LOOKS.map((look: any) => (
+        {LOOKS.map(look => (
           <Button look={look} iconBefore={BurgerIcon}>
             {look}
           </Button>
         ))}
       </div>
       <div className="flex gap-2">
-        {SOFT_LOOKS.map((look: any) => (
+        {SOFT_LOOKS.map(look => (
           <Button look={look} soft iconBefore={BurgerIcon}>
             {look}
           </Button>
@@ -129,14 +120,14 @@ export const ButtonIcons = () => (
       </div>
       <h3 className="font-bold">Sizes</h3>
       <div>
-        {SIZES.map((size: any) => (
+        {SIZES.map(size => (
           <Button size={size} iconBefore={BurgerIcon} className="mr-2">
             Button
           </Button>
         ))}
       </div>
       <div>
-        {SIZES.map((size: any) => (
+        {SIZES.map(size => (
           <Button size={size} iconBefore={BurgerIcon} soft className="mr-2">
             Button
           </Button>
@@ -157,14 +148,14 @@ export const ButtonIcons = () => (
       <h2 className="typography-body-7 font-bold">Icon After</h2>
       <h3 className="font-bold">Colors</h3>
       <div className="flex gap-2">
-        {LOOKS.map((look: any) => (
+        {LOOKS.map(look => (
           <Button look={look} iconAfter={BurgerIcon}>
             {look}
           </Button>
         ))}
       </div>
       <div className="flex gap-2">
-        {SOFT_LOOKS.map((look: any) => (
+        {SOFT_LOOKS.map(look => (
           <Button look={look} soft iconAfter={BurgerIcon}>
             {look}
           </Button>
@@ -172,14 +163,14 @@ export const ButtonIcons = () => (
       </div>
       <h3 className="font-bold">Sizes</h3>
       <div>
-        {SIZES.map((size: any) => (
+        {SIZES.map(size => (
           <Button size={size} iconAfter={BurgerIcon} className="mr-2">
             Button
           </Button>
         ))}
       </div>
       <div>
-        {SIZES.map((size: any) => (
+        {SIZES.map(size => (
           <Button size={size} iconAfter={BurgerIcon} soft className="mr-2">
             Button
           </Button>
@@ -199,23 +190,23 @@ export const ButtonIcons = () => (
       <h2 className="typography-body-7 font-bold">Icon Only</h2>
       <h3 className="font-bold">Colors</h3>
       <div className="flex gap-2">
-        {LOOKS.map((look: any) => (
+        {LOOKS.map(look => (
           <Button look={look} iconAfter={BurgerIcon} />
         ))}
       </div>
       <div className="flex gap-2">
-        {SOFT_LOOKS.map((look: any) => (
+        {SOFT_LOOKS.map(look => (
           <Button look={look} soft iconAfter={BurgerIcon} />
         ))}
       </div>
       <h3 className="font-bold">Sizes</h3>
       <div>
-        {SIZES.map((size: any) => (
+        {SIZES.map(size => (
           <Button size={size} iconAfter={BurgerIcon} className="mr-2" />
         ))}
       </div>
       <div>
-        {SIZES.map((size: any) => (
+        {SIZES.map(size => (
           <Button size={size} iconAfter={BurgerIcon} soft className="mr-2" />
         ))}
       </div>
@@ -232,15 +223,17 @@ export const ButtonIcons = () => (
  */
 export const ResponsiveSize = () => (
   <div>
-    <Button
-      size={{
-        initial: 'small',
-        md: 'large',
-        lg: 'xlarge',
-      }}
-    >
-      Responsive Button
-    </Button>{' '}
+    <div className="py-2">
+      <Button
+        size={{
+          initial: 'small',
+          md: 'large',
+          lg: 'xlarge',
+        }}
+      >
+        Responsive Button
+      </Button>
+    </div>
     <Button
       iconAfter={BurgerIcon}
       size={{
@@ -250,14 +243,14 @@ export const ResponsiveSize = () => (
       }}
     >
       Responsive Button with icon
-    </Button>{' '}
+    </Button>
   </div>
 );
 
 /**
  * > As anchor tag
  */
-export const AsLinkStory: Story = {
+export const AsLink: Story = {
   args: {
     children: 'Link button',
     tag: 'a',
@@ -268,7 +261,7 @@ export const AsLinkStory: Story = {
 /**
  * > Disabled look
  */
-export const DisabledStory: Story = {
+export const Disabled: Story = {
   args: {
     children: 'Disabled button',
     disabled: true,

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

@@ -14,15 +14,17 @@ export const styles = tv(
     },
     variants: {
       size: {
-        small: { base: 'typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem]' },
-        medium: { base: 'typography-body-9 px-2 py-[0.3125rem]' },
-        large: { base: 'typography-body-9 px-[0.9375rem] py-[0.5rem]' },
-        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]' },
+        small: { base: 'active-theme-rams:before:h-[0.0625rem] typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem]' },
+        medium: { base: 'active-theme-rams:before:h-[0.125rem] typography-body-9 px-2 py-[0.3125rem]' },
+        large: { base: 'active-theme-rams:before:h-[0.1875rem] typography-body-9 px-[0.9375rem] py-[0.5rem]' },
+        xlarge: { base: 'active-theme-rams:before:h-[0.25rem] typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]' },
       },
       look: {
-        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' },
+        primary: {
+          base: 'active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop relative 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' },
         link: { base: 'text-link underline' },
       },
       soft: {
@@ -47,7 +49,7 @@ export const styles = tv(
         slots: ['base'],
         look: 'primary',
         soft: true,
-        className: 'text-text hover:text-white',
+        className: 'text-text hover:text-white active-theme-rams:text-primary active-theme-rams:hover:text-white',
       },
       {
         slots: ['base'],

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

@@ -55,7 +55,7 @@ export function ButtonDropdown({
         soft={soft}
         block={block}
         aria-expanded={state.isOpen}
-        aria-controls="panel-dialog"
+        aria-controls={panelId}
         className={styles.base()}
         {...buttonProps}
       >

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

@@ -1,36 +1,27 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
-import { AndroidIcon, AppleIcon } from '../icon/index.js';
+import { AndroidIcon } from '../icon/index.js';
 
 import { ButtonDropdown } from './button-dropdown.component.js';
 
 const meta: Meta<typeof ButtonDropdown> = {
-  title: 'Example/ButtonDropdown',
+  title: 'Components/ButtonDropdown',
   component: ButtonDropdown,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const LOOKS = ['primary', 'hero', 'faint'];
-const SIZES = ['small', 'medium', 'large', 'xlarge'];
-const DROPDOWNSIZE = ['small', 'medium', 'large'];
+const LOOKS = ['primary', 'hero', 'faint'] as const;
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
+const DROPDOWNSIZE = ['small', 'medium', 'large'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     text: 'Default Dropdown',
     children: (
@@ -50,7 +41,7 @@ export const DefaultStory: Story = {
  */
 export const StandardLooks = () => (
   <div className="flex gap-2">
-    {LOOKS.map((look: any) => (
+    {LOOKS.map(look => (
       <ButtonDropdown look={look} text={look}>
         <p>
           Example dropdown
@@ -69,7 +60,7 @@ export const StandardLooks = () => (
  */
 export const SoftLooks = () => (
   <div className="flex gap-2">
-    {LOOKS.map((look: any) => (
+    {LOOKS.map(look => (
       <ButtonDropdown look={look} soft text={look}>
         <p>
           Example dropdown
@@ -88,7 +79,7 @@ export const SoftLooks = () => (
  */
 export const ButtonSizes = () => (
   <div>
-    {SIZES.map((size: any) => (
+    {SIZES.map(size => (
       <>
         <h3 className="font-bold">{size}</h3>
         <ButtonDropdown size={size} text={size}>
@@ -102,6 +93,23 @@ export const ButtonSizes = () => (
         </ButtonDropdown>
       </>
     ))}
+    <h3 className="font-bold">Responsive</h3>
+    <ButtonDropdown
+      size={{
+        initial: 'small',
+        md: 'large',
+        lg: 'xlarge',
+      }}
+      text="responsive"
+    >
+      <p>
+        Example dropdown
+        <a href="#" className="text-[blue] underline">
+          content
+        </a>
+        ...
+      </p>
+    </ButtonDropdown>
   </div>
 );
 
@@ -110,7 +118,7 @@ export const ButtonSizes = () => (
  */
 export const DropdownSizes = () => (
   <div>
-    {DROPDOWNSIZE.map((size: any) => (
+    {DROPDOWNSIZE.map(size => (
       <>
         <h3 className="font-bold">{size}</h3>
         <ButtonDropdown dropdownSize={size} text={size}>
@@ -118,27 +126,41 @@ export const DropdownSizes = () => (
         </ButtonDropdown>
       </>
     ))}
+    <h3 className="font-bold">Responsive</h3>
+    <ButtonDropdown
+      dropdownSize={{
+        initial: 'large',
+        md: 'small',
+        lg: 'medium',
+      }}
+      text="Responsive"
+    >
+      Responive
+    </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>
-    ),
-  },
-};
+export const BlockDropdownButton = () => (
+  <div>
+    <h3 className="font-bold">Block</h3>
+    <ButtonDropdown block={true} text="Block">
+      Block
+    </ButtonDropdown>
+    <h3 className="font-bold">Responsive Block</h3>
+    <ButtonDropdown
+      block={{
+        initial: false,
+        lg: true,
+      }}
+      text="Responsive Block"
+    >
+      Responive Block
+    </ButtonDropdown>
+  </div>
+);
 
 /**
  * > Icon usage example
@@ -176,3 +198,23 @@ export const DropdownWithHeadings: Story = {
     ),
   },
 };
+
+/**
+ * > Open by default
+ * NOTE: This element has a visual bug on the Storybook Docs page when page loaded but doesn't in dev docs/canvas view
+ */
+export const Open: Story = {
+  args: {
+    open: true,
+    text: 'Default Dropdown',
+    children: (
+      <p>
+        Example dropdown
+        <a href="#" className="text-[blue] underline">
+          content
+        </a>
+        ...
+      </p>
+    ),
+  },
+};

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

@@ -3,7 +3,7 @@ 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',
+      base: 'typography-body-10 -mx-1 mb-3 mt-4 bg-background p-[0.4375rem] font-medium text-hero first-of-type:-mt-1',
     },
     variants: {},
   },

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

@@ -1,13 +1,12 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { DismissButton, Overlay, mergeProps, useFocusRing, useOverlay, usePopover } from 'react-aria';
+import { DismissButton, Overlay, mergeProps, useFocusRing, 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 { popoverProps } = usePopover({ popoverRef, shouldFlip: false, isNonModal: true, ...props }, state);
   const { isFocused, focusProps } = useFocusRing();
   const styles = panelStyles({ isFocused });
   const width = props.triggerRef.current?.getBoundingClientRect().width;
@@ -15,6 +14,21 @@ export function Panel({ className, children, state, block, id, ...props }: Panel
   // 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 &&
+        event.target !== props.triggerRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        state.isOpen
+      )
+        state.close();
+    },
+    [state.isOpen],
+  );
+
+  // React Aria does not handle click as we need when isNonModal is true so this is needed
+  const clickHandler = useCallback(
+    (event: globalThis.MouseEvent) => {
       if (event.target && popoverRef.current && !popoverRef.current.contains(event.target as Node) && state.isOpen)
         state.close();
     },
@@ -23,15 +37,17 @@ export function Panel({ className, children, state, block, id, ...props }: Panel
 
   useEffect(() => {
     window.document.addEventListener('focusin', focusHandler);
+    window.document.addEventListener('click', clickHandler);
     return () => {
       window.document.removeEventListener('focusin', focusHandler);
+      window.document.removeEventListener('click', clickHandler);
     };
   }, []);
 
   return (
     <Overlay>
       <div
-        {...mergeProps(popoverProps, overlayProps, focusProps)}
+        {...mergeProps(popoverProps, focusProps)}
         id={id}
         data-testid="panel-dialog"
         style={{ ...popoverProps.style, width: block && width ? `${width}px` : undefined }}

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

@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants';
 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)]',
+      base: 'mt-[0.1875rem] rounded-[3px] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
       dialog: '',
     },
     variants: {