@westpac/ui 0.6.0 → 0.7.1

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/breadcrumb.types.ts

@@ -1,3 +1,10 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactElement } from 'react';
 
-export type BreadcrumbProps = HTMLAttributes<HTMLDivElement>;
+import { type BreadcrumbItemProps } from './components/breadcrumb-item/index.js';
+
+export type BreadcrumbProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Children with Breadcrumb.Item[]
+   */
+  children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
+};

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

@@ -48,3 +48,5 @@ export function BaseBreadcrumbItem(
 }
 
 export const BreadcrumbItem = forwardRef<any, BreadcrumbItemProps>(BaseBreadcrumbItem);
+
+BreadcrumbItem.displayName = '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/breadcrumb/components/breadcrumb-item/breadcrumb-item.types.ts

@@ -1,7 +1,4 @@
 import { AnchorHTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './breadcrumb-item.styles.js';
 
 export type BreadcrumbItemProps = {
   /**
@@ -16,5 +13,4 @@ export type BreadcrumbItemProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  AnchorHTMLAttributes<Element>;
+} & AnchorHTMLAttributes<Element>;

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

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

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: 'typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem] active-theme-rams:before:h-[0.0625rem]' },
+        medium: { base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem]' },
+        large: { base: 'typography-body-9 px-[0.9375rem] py-[0.5rem] active-theme-rams:before:h-[0.1875rem]' },
+        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem] active-theme-rams:before:h-[0.25rem]' },
       },
       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: 'relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 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',
+        },
+        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/button.types.ts

@@ -5,7 +5,13 @@ import { IconProps } from '../icon/index.js';
 
 import { styles } from './button.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type ButtonProps = {
+  /**
+   * Fit button width to its parent width.
+   */
+  block?: Variants['block'];
   /**
    * Places an icon within the button, after the button’s text
    */
@@ -20,10 +26,25 @@ export type ButtonProps = {
    * Defaults to the current text color.
    */
   iconColor?: IconProps['color'];
+  /**
+   * Justify align button children
+   */
+  justify?: Variants['justify'];
+  /**
+   * Button look
+   */
+  look?: Variants['look'];
+  /**
+   * Size of the button
+   */
+  size?: Variants['size'];
+  /**
+   * Removes background colour and adjusts text colour.
+   */
+  soft?: Variants['soft'];
   /**
    * Tag to render
    */
   tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
 } & ButtonHTMLAttributes<Element> &
-  AnchorHTMLAttributes<Element> &
-  VariantProps<typeof styles>;
+  AnchorHTMLAttributes<Element>;

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

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useCallback, useEffect, useId, useRef } from 'react';
 import { useButton, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
@@ -55,7 +57,7 @@ export function ButtonDropdown({
         soft={soft}
         block={block}
         aria-expanded={state.isOpen}
-        aria-controls="panel-dialog"
+        aria-controls={panelId}
         className={styles.base()}
         {...buttonProps}
       >