@westpac/ui 0.6.0 → 0.7.0

package/src/components/accordion/accordion.stories.tsx

@@ -6,19 +6,24 @@ import { Button } from '../index.js';
 import { Accordion } from './accordion.component.js';
 
 const meta: Meta<typeof Accordion> = {
-  title: 'Example/Accordion',
+  title: 'Components/Accordion',
   component: Accordion,
   tags: ['autodocs'],
   decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
+    (Story: StoryFn) => {
+      /**
+       * NOTE:
+       * Needed to change displayName here so subcomponent shows correct name in code view
+       * Could not change it on the component as Item from react-stately is used in three components
+       * and one displayName would overwrite the others
+       */
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      Accordion.Item.displayName = 'Accordion.Item';
+
+      return <Story />;
+    },
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
@@ -27,7 +32,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     rounded: true,
     color: undefined,
@@ -51,7 +56,7 @@ export const DefaultStory: Story = {
 /**
  * > Primary color usage example
  */
-export const PrimaryColorStory: Story = {
+export const PrimaryColor: Story = {
   args: {
     color: 'primary',
     rounded: false,
@@ -75,7 +80,7 @@ export const PrimaryColorStory: Story = {
 /**
  * > Hero color usage example
  */
-export const HeroColorStory: Story = {
+export const HeroColor: Story = {
   args: {
     color: 'hero',
     rounded: false,
@@ -96,34 +101,10 @@ export const HeroColorStory: Story = {
   ),
 };
 
-/**
- * > Hero color usage example
- */
-export const MaterialLookStory: Story = {
-  args: {
-    look: 'material',
-    rounded: false,
-  },
-  render: ({ ...props }) => (
-    <Accordion {...props}>
-      {[
-        { key: 'files', title: 'Your files' },
-        { key: 'shared', title: 'Shared with you' },
-        { key: 'last', title: 'Last item' },
-      ].map(({ key, title }) => (
-        <Accordion.Item key={key} title={title}>
-          <p>{title}</p>
-          <Button>Test</Button>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  ),
-};
-
 /**
  * > Controlled example
  */
-export const ControlledColorStory: Story = {
+export const ControlledColor: Story = {
   args: {
     color: 'hero',
     rounded: false,

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

@@ -11,26 +11,26 @@ export const styles = tv(
     variants: {
       look: {
         material: {
-          itemHeader: 'hover:bg-light bg-white transition-colors',
+          itemHeader: 'bg-white transition-colors hover:bg-light',
           indicator:
-            'before:bg-muted after:bg-muted relative h-2 w-2 before:absolute before:left-1/2 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-x-1/2 before:-translate-y-1/2 after:absolute after:left-1/2 after:top-1/2 after:block after:h-full after:w-[2px] after:-translate-x-1/2 after:-translate-y-1/2 after:transition-transform',
+            'relative h-2 w-2 before:absolute before:left-1/2 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-x-1/2 before:-translate-y-1/2 before:bg-muted after:absolute after:left-1/2 after:top-1/2 after:block after:h-full after:w-[2px] after:-translate-x-1/2 after:-translate-y-1/2 after:bg-muted after:transition-transform',
         },
         default: {
-          itemHeader: 'border-border bg-light border-t',
-          indicator: 'h-3 w-3 -rotate-90 transition-transform',
+          itemHeader: 'border-t border-border bg-light',
+          indicator: 'h-3 w-3 rotate-90 transition-transform',
         },
       },
       color: {
         hero: {
-          itemHeader: 'border-l-border border-l-[0.375rem] transition-colors',
+          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
         },
         primary: {
-          itemHeader: 'border-l-border border-l-[0.375rem] transition-colors',
+          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
         },
       },
       isOpen: {
         true: {
-          content: 'border-border block border-t p-3',
+          content: 'block border-t border-border p-3',
         },
         false: {
           base: '',
@@ -54,7 +54,7 @@ export const styles = tv(
         slots: ['indicator'],
         look: 'default',
         isOpen: true,
-        className: 'rotate-90',
+        className: '-rotate-90',
       },
       {
         slots: ['indicator'],
@@ -77,12 +77,12 @@ export const styles = tv(
       {
         slots: ['content'],
         color: 'hero',
-        className: 'border-l-border border-l-[0.375rem]',
+        className: 'border-l-[0.375rem] border-l-border',
       },
       {
         slots: ['content'],
         color: 'primary',
-        className: 'border-l-border border-l-[0.375rem]',
+        className: 'border-l-[0.375rem] border-l-border',
       },
     ],
   },

package/src/components/alert/alert.stories.tsx

@@ -5,13 +5,10 @@ import { TelephoneIcon } from '../icon/index.js';
 import { Alert } from './alert.component.js';
 
 const meta: Meta<typeof Alert> = {
-  title: 'Example/Alert',
+  title: 'Components/Alert',
   component: Alert,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -20,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: 'This is a default alert',
   },
@@ -29,21 +26,26 @@ export const DefaultStory: Story = {
 /**
  * > All looks example
  */
-export const LooksStory: Story = {
+export const Looks: Story = {
   render: () => (
     <>
+      <h3 className="typography-body-8 font-bold">Info</h3>
       <Alert look="info">
         <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
       </Alert>
+      <h3 className="typography-body-8 font-bold">Success</h3>
       <Alert look="success">
         <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
       </Alert>
+      <h3 className="typography-body-8 font-bold">Warning</h3>
       <Alert look="warning">
         <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
       </Alert>
+      <h3 className="typography-body-8 font-bold">Danger</h3>
       <Alert look="danger">
         <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
       </Alert>
+      <h3 className="typography-body-8 font-bold">System</h3>
       <Alert look="system">
         <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
         inconvenience. <a href="#">Link</a>
@@ -56,21 +58,26 @@ export const LooksStory: Story = {
 /**
  * > Text mode example
  */
-export const TextStory: Story = {
+export const TextMode: Story = {
   render: () => (
     <>
+      <h3 className="typography-body-8 mb-2 font-bold">Info</h3>
       <Alert look="info" mode="text">
         <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
       </Alert>
+      <h3 className="typography-body-8 mb-2 font-bold">Success</h3>
       <Alert look="success" mode="text">
         <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
       </Alert>
+      <h3 className="typography-body-8 mb-2 font-bold">Warning</h3>
       <Alert look="warning" mode="text">
         <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
       </Alert>
+      <h3 className="typography-body-8 mb-2 font-bold">Danger</h3>
       <Alert look="danger" mode="text">
         <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
       </Alert>
+      <h3 className="typography-body-8 mb-2 font-bold">System</h3>
       <Alert look="system" mode="text">
         <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
         inconvenience. <a href="#">Link</a>
@@ -83,7 +90,7 @@ export const TextStory: Story = {
 /**
  * > Heading example
  */
-export const HeadingStory: Story = {
+export const Heading: Story = {
   args: {
     heading: 'I am an alert heading',
     children: 'This is a default alert',
@@ -93,7 +100,7 @@ export const HeadingStory: Story = {
 /**
  * > Dismissible example
  */
-export const DismissibleStory: Story = {
+export const Dismissible: Story = {
   args: {
     dismissible: true,
     children:
@@ -105,9 +112,31 @@ export const DismissibleStory: Story = {
 /**
  * > Custom icon example
  */
-export const CustomIconStory: Story = {
-  args: {
-    icon: TelephoneIcon,
-    children: 'I am an alert. This alert needs your attention, but it’s not super important.',
-  },
+export const CustomIcon: Story = {
+  render: () => (
+    <>
+      <h3 className="typography-body-8 mb-2 font-bold">Info</h3>
+      <Alert look="info" icon={TelephoneIcon}>
+        <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
+      </Alert>
+      <h3 className="typography-body-8 mb-2 font-bold">Note: the following should not render a custom icon</h3>
+      <h3 className="typography-body-8 mb-2 font-bold">Success</h3>
+      <Alert look="success" icon={TelephoneIcon}>
+        <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
+      </Alert>
+      <h3 className="typography-body-8 mb-2 font-bold">Warning</h3>
+      <Alert look="warning" icon={TelephoneIcon}>
+        <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
+      </Alert>
+      <h3 className="typography-body-8 mb-2 font-bold">Danger</h3>
+      <Alert look="danger" icon={TelephoneIcon}>
+        <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
+      </Alert>
+      <h3 className="typography-body-8 mb-2 font-bold">System</h3>
+      <Alert look="system" icon={TelephoneIcon}>
+        <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
+        inconvenience. <a href="#">Link</a>
+      </Alert>
+    </>
+  ),
 };

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

@@ -3,6 +3,7 @@ import { useButton, useComboBox, useFilter, useSearchField } from 'react-aria';
 import { Item, useComboBoxState, useSearchFieldState } from 'react-stately';
 
 import { ClearIcon } from '../icon/index.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 
 import { styles as autocompleteStyles } from './autocomplete.styles.js';
 import { type AutocompleteProps } from './autocomplete.types.js';
@@ -14,6 +15,8 @@ export function Autocomplete<T extends object>({
   isDisabled,
   footer,
   portalContainer,
+  errorMessage,
+  hintMessage,
   ...props
 }: AutocompleteProps<T>) {
   const { contains } = useFilter({ sensitivity: 'base' });
@@ -21,7 +24,7 @@ export function Autocomplete<T extends object>({
   const inputRef = React.useRef(null);
   const listBoxRef = React.useRef(null);
   const popoverRef = React.useRef(null);
-  const { inputProps, listBoxProps, labelProps } = useComboBox(
+  const { inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps } = useComboBox(
     {
       ...props,
       isDisabled,
@@ -57,9 +60,9 @@ export function Autocomplete<T extends object>({
 
   return (
     <div className={styles.base()}>
-      <label {...labelProps} className={styles.label()}>
-        {props.label}
-      </label>
+      <FormLabel {...labelProps}>{props.label}</FormLabel>
+      {hintMessage && <FormHint {...descriptionProps}>{hintMessage}</FormHint>}
+      {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
 
       <div ref={outerRef} className={styles.outerWrapper()}>
         <input {...inputProps} ref={inputRef} className={styles.input()} />
@@ -83,7 +86,7 @@ export function Autocomplete<T extends object>({
           placement="bottom start"
           portalContainer={portalContainer}
         >
-          <ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
+          <ListBox {...listBoxProps} autoFocus={listBoxProps.autoFocus as any} listBoxRef={listBoxRef} state={state} />
           {footer && <div className="border-t border-t-border px-3 py-2">{footer}</div>}
         </Popover>
       )}

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

@@ -4,19 +4,28 @@ import { Key, useState } from 'react';
 import { Autocomplete } from './autocomplete.component.js';
 
 const meta: Meta<typeof Autocomplete> = {
-  title: 'Example/Autocomplete',
+  title: 'Components/Autocomplete',
   component: Autocomplete,
   tags: ['autodocs'],
   decorators: [
-    (Story: StoryFn) => (
-      <div className="h-30 p-3">
-        <Story />
-      </div>
-    ),
+    (Story: StoryFn) => {
+      /**
+       * NOTE:
+       * Needed to change displayName here so subcomponent shows correct name in code view
+       * Could not change it on the component as Item from react-stately is used in three components
+       * and one displayName would overwrite the others
+       */
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      Autocomplete.Item.displayName = 'Autocomplete.Item';
+
+      return (
+        <div className="h-30">
+          <Story />
+        </div>
+      );
+    },
   ],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -25,7 +34,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     'aria-label': 'Animals',
     children: [
@@ -42,7 +51,7 @@ export const DefaultStory: Story = {
 /**
  * > Controlled usage example
  */
-export const ControlledStory: Story = {
+export const Controlled: Story = {
   args: {},
   render: () => {
     const [selectedKey, setSelectedKey] = useState<Key>();
@@ -65,7 +74,7 @@ export const ControlledStory: Story = {
 /**
  * > Disabled usage example
  */
-export const DisabledStory: Story = {
+export const Disabled: Story = {
   args: {
     isDisabled: true,
     'aria-label': 'Disable example',
@@ -83,7 +92,7 @@ export const DisabledStory: Story = {
 /**
  * > Invalid usage example
  */
-export const InvalidStory: Story = {
+export const Invalid: Story = {
   args: {
     invalid: true,
     'aria-label': 'Invalid example',
@@ -101,14 +110,14 @@ export const InvalidStory: Story = {
 /**
  * > Sizes example
  */
-export const SizesStory: Story = {
+export const Sizes: Story = {
   args: {},
   render: () => {
     return (
       <>
-        {['small', 'medium', 'large', 'xlarge'].map(size => (
+        {(['small', 'medium', 'large', 'xlarge'] as const).map(size => (
           <div className="py-2" key={size}>
-            <Autocomplete label={size} size={size as any} aria-label={`size ${size}`}>
+            <Autocomplete label={size} size={size} 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>
@@ -126,7 +135,7 @@ export const SizesStory: Story = {
 /**
  * > Footer example
  */
-export const FooterStory: Story = {
+export const Footer: Story = {
   args: {},
   render: () => {
     return (
@@ -156,3 +165,20 @@ export const FooterStory: Story = {
     );
   },
 };
+
+/**
+ * Error message and label
+ */
+export const ErrorMessageAndLabel: Story = {
+  args: {
+    label: 'Are you an existing customer?',
+    errorMessage: 'This is an inline error message',
+    validationState: 'invalid',
+    hintMessage: 'Hint: choose from one of the following options',
+    children: [
+      <Autocomplete.Item key="Option 1">Option 1</Autocomplete.Item>,
+      <Autocomplete.Item key="Option 2">Option 2</Autocomplete.Item>,
+      <Autocomplete.Item key="Option 3">Option 3</Autocomplete.Item>,
+    ],
+  },
+};

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

@@ -4,11 +4,11 @@ export const styles = tv(
   {
     slots: {
       base: 'relative flex flex-col',
-      label: 'text-text block text-left text-sm font-medium',
+      label: 'block text-left text-sm font-medium text-text',
       outerWrapper:
-        'form-control disabled:form-control-disabled relative flex w-full flex-row items-center overflow-hidden pr-2',
+        'form-control relative flex w-full flex-row items-center overflow-hidden pr-2 disabled:form-control-disabled',
       input: 'w-full appearance-none bg-[transparent] outline-none',
-      clearButton: 'text-text-50 hover:text-border-60 flex cursor-default items-center justify-center',
+      clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60',
     },
     variants: {
       invalid: {

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

@@ -3,14 +3,24 @@ import { type AriaLabelingProps } from '@react-types/shared';
 import { type ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 
+import { FormHintProps } from '../index.js';
+
 import { styles } from './autocomplete.styles.js';
 import { PopoverProps } from './components/index.js';
 
 export type AutocompleteProps<T extends object> = {
+  /**
+   * error message
+   */
+  errorMessage?: string | string[];
   /**
    * Tag to render
    */
   footer?: ReactNode;
+  /**
+   * hint message
+   */
+  hintMessage?: FormHintProps['children'];
   /**
    * Element where the popover will be rendered, by default it will be into the body
    */

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

@@ -1,8 +1,10 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
+import { Button } from '../index.js';
+
 import { Badge } from './badge.component.js';
 
-const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'];
+const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const;
 const INVERTED_COLORS = [
   'danger-inverted',
   'faint-inverted',
@@ -12,22 +14,19 @@ const INVERTED_COLORS = [
   'primary-inverted',
   'success-inverted',
   'warning-inverted',
-];
+] as const;
 
 const meta: Meta<typeof Badge> = {
-  title: 'Example/Badge',
+  title: 'Components/Badge',
   component: Badge,
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => (
-      <div className="flex items-center justify-center p-2">
+      <div className="flex p-2">
         <Story />
       </div>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
   argTypes: {
     children: {
       description: 'Children',
@@ -50,7 +49,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: 'test',
     type: 'default',
@@ -60,7 +59,7 @@ export const DefaultStory: Story = {
 /**
  * > Default usage example
  */
-export const PillStory: Story = {
+export const Pill: Story = {
   args: {
     children: 'test',
     type: 'pill',
@@ -74,12 +73,12 @@ export const Colors = () => (
   <div className="flex flex-col gap-2">
     <div className="flex gap-2">
       {COLORS.map(color => (
-        <Badge color={color as any}>{color}</Badge>
+        <Badge color={color}>{color}</Badge>
       ))}
     </div>
     <div className="flex gap-2">
       {COLORS.map(color => (
-        <Badge color={color as any} type="pill">
+        <Badge color={color} type="pill">
           {color}
         </Badge>
       ))}
@@ -88,12 +87,12 @@ export const Colors = () => (
     <div className="flex flex-col gap-2 bg-muted p-2">
       <div className="flex flex-wrap gap-2">
         {INVERTED_COLORS.map(color => (
-          <Badge color={color as any}>{color}</Badge>
+          <Badge color={color}>{color}</Badge>
         ))}
       </div>
       <div className="flex flex-wrap gap-2">
         {INVERTED_COLORS.map(color => (
-          <Badge color={color as any} type="pill">
+          <Badge color={color} type="pill">
             {color}
           </Badge>
         ))}
@@ -101,3 +100,35 @@ export const Colors = () => (
     </div>
   </div>
 );
+
+/**
+ * > Example next to link
+ */
+export const Links = () => (
+  <div className="flex flex-col gap-2">
+    {COLORS.map(color => (
+      <a className="text-link underline" href="#">
+        {color}
+        <Badge color={color} type="pill">
+          12
+        </Badge>
+      </a>
+    ))}
+  </div>
+);
+
+/**
+ * > Example next to link
+ */
+export const Buttons = () => (
+  <div className="flex flex-col gap-2">
+    {INVERTED_COLORS.map(color => (
+      <Button look="primary">
+        Primary
+        <Badge color={color} type="pill" className="ml-1">
+          {color}
+        </Badge>
+      </Button>
+    ))}
+  </div>
+);

package/src/components/badge/badge.styles.ts

@@ -2,25 +2,25 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'inline-block whitespace-nowrap text-center leading-none',
+    base: 'inline-block whitespace-nowrap border text-center leading-none',
     variants: {
       color: {
-        danger: 'bg-danger text-white',
-        faint: 'border border-border bg-white text-muted',
-        hero: 'bg-hero text-white',
-        info: 'bg-info text-white',
-        neutral: 'bg-neutral text-white',
-        primary: 'bg-primary text-white',
-        success: 'bg-success text-white',
-        warning: 'bg-warning text-white',
-        'danger-inverted': 'bg-white text-danger',
-        'faint-inverted': 'bg-white text-muted',
-        'hero-inverted': 'bg-white text-hero',
-        'info-inverted': 'bg-white text-info',
-        'neutral-inverted': 'bg-white text-neutral',
-        'primary-inverted': 'bg-white text-primary',
-        'success-inverted': 'bg-white text-success',
-        'warning-inverted': 'bg-white text-warning',
+        danger: 'border-danger bg-danger text-white',
+        faint: 'border-border bg-white text-muted',
+        hero: 'border-hero bg-hero text-white',
+        info: 'border-info bg-info text-white',
+        neutral: 'border-neutral bg-neutral text-white',
+        primary: 'border-primary bg-primary text-white',
+        success: 'border-success bg-success text-white',
+        warning: 'border-warning bg-warning text-white',
+        'danger-inverted': 'border-none bg-white text-danger',
+        'faint-inverted': 'border-none bg-white text-muted',
+        'hero-inverted': 'border-none bg-white text-hero',
+        'info-inverted': 'border-none bg-white text-info',
+        'neutral-inverted': 'border-none bg-white text-neutral',
+        'primary-inverted': 'border-none bg-white text-primary',
+        'success-inverted': 'border-none bg-white text-success',
+        'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
         pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-bold leading-none',