@westpac/ui 0.6.0 → 0.7.0

package/dist/components/alert/alert.stories.js

@@ -1,70 +1,87 @@
 import { TelephoneIcon } from '../icon/index.js';
 import { Alert } from './alert.component.js';
 const meta = {
-    title: 'Example/Alert',
+    title: 'Components/Alert',
     component: Alert,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'centered'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'This is a default alert'
     }
 };
-export const LooksStory = {
-    render: ()=>React.createElement(React.Fragment, null, React.createElement(Alert, {
+export const Looks = {
+    render: ()=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "typography-body-8 font-bold"
+        }, "Info"), React.createElement(Alert, {
             look: "info"
         }, React.createElement("strong", null, "Heads up!"), " This alert needs your attention, but it’s not super important. ", React.createElement("a", {
             href: "#"
-        }, "Link")), React.createElement(Alert, {
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 font-bold"
+        }, "Success"), React.createElement(Alert, {
             look: "success"
         }, React.createElement("strong", null, "Well done!"), " You successfully read this important alert message. ", React.createElement("a", {
             href: "#"
-        }, "Link")), React.createElement(Alert, {
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 font-bold"
+        }, "Warning"), React.createElement(Alert, {
             look: "warning"
         }, React.createElement("strong", null, "Warning!"), " Better check yourself, you’re not looking too good. ", React.createElement("a", {
             href: "#"
-        }, "Link")), React.createElement(Alert, {
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 font-bold"
+        }, "Danger"), React.createElement(Alert, {
             look: "danger"
         }, React.createElement("strong", null, "Oh snap!"), " Change a few things up and try submitting again. ", React.createElement("a", {
             href: "#"
-        }, "Link")), React.createElement(Alert, {
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 font-bold"
+        }, "System"), React.createElement(Alert, {
             look: "system"
         }, React.createElement("strong", null, "System Error 8942:"), " The server is no responding. Please try again later. Sorry for the inconvenience. ", React.createElement("a", {
             href: "#"
         }, "Link"))),
     args: {}
 };
-export const TextStory = {
-    render: ()=>React.createElement(React.Fragment, null, React.createElement(Alert, {
+export const TextMode = {
+    render: ()=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Info"), React.createElement(Alert, {
             look: "info",
             mode: "text"
         }, React.createElement("strong", null, "Heads up!"), " This alert needs your attention, but it’s not super important. ", React.createElement("a", {
             href: "#"
-        }, "Link")), React.createElement(Alert, {
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Success"), React.createElement(Alert, {
             look: "success",
             mode: "text"
         }, React.createElement("strong", null, "Well done!"), " You successfully read this important alert message. ", React.createElement("a", {
             href: "#"
-        }, "Link")), React.createElement(Alert, {
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Warning"), React.createElement(Alert, {
             look: "warning",
             mode: "text"
         }, React.createElement("strong", null, "Warning!"), " Better check yourself, you’re not looking too good. ", React.createElement("a", {
             href: "#"
-        }, "Link")), React.createElement(Alert, {
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Danger"), React.createElement(Alert, {
             look: "danger",
             mode: "text"
         }, React.createElement("strong", null, "Oh snap!"), " Change a few things up and try submitting again. ", React.createElement("a", {
             href: "#"
-        }, "Link")), React.createElement(Alert, {
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "System"), React.createElement(Alert, {
             look: "system",
             mode: "text"
         }, React.createElement("strong", null, "System Error 8942:"), " The server is no responding. Please try again later. Sorry for the inconvenience. ", React.createElement("a", {
@@ -72,22 +89,56 @@ export const TextStory = {
         }, "Link"))),
     args: {}
 };
-export const HeadingStory = {
+export const Heading = {
     args: {
         heading: 'I am an alert heading',
         children: 'This is a default alert'
     }
 };
-export const DismissibleStory = {
+export const Dismissible = {
     args: {
         dismissible: true,
         children: 'I am an alert. This alert needs your attention, but it’s not super important. Hey neato, I can be closed.',
         onClose: ()=>console.log('closed')
     }
 };
-export const CustomIconStory = {
-    args: {
-        icon: TelephoneIcon,
-        children: 'I am an alert. This alert needs your attention, but it’s not super important.'
-    }
+export const CustomIcon = {
+    render: ()=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Info"), React.createElement(Alert, {
+            look: "info",
+            icon: TelephoneIcon
+        }, React.createElement("strong", null, "Heads up!"), " This alert needs your attention, but it’s not super important. ", React.createElement("a", {
+            href: "#"
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Note: the following should not render a custom icon"), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Success"), React.createElement(Alert, {
+            look: "success",
+            icon: TelephoneIcon
+        }, React.createElement("strong", null, "Well done!"), " You successfully read this important alert message. ", React.createElement("a", {
+            href: "#"
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Warning"), React.createElement(Alert, {
+            look: "warning",
+            icon: TelephoneIcon
+        }, React.createElement("strong", null, "Warning!"), " Better check yourself, you’re not looking too good. ", React.createElement("a", {
+            href: "#"
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "Danger"), React.createElement(Alert, {
+            look: "danger",
+            icon: TelephoneIcon
+        }, React.createElement("strong", null, "Oh snap!"), " Change a few things up and try submitting again. ", React.createElement("a", {
+            href: "#"
+        }, "Link")), React.createElement("h3", {
+            className: "typography-body-8 mb-2 font-bold"
+        }, "System"), React.createElement(Alert, {
+            look: "system",
+            icon: TelephoneIcon
+        }, React.createElement("strong", null, "System Error 8942:"), " The server is no responding. Please try again later. Sorry for the inconvenience. ", React.createElement("a", {
+            href: "#"
+        }, "Link")))
 };

package/dist/components/autocomplete/autocomplete.component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" resolution-mode="require"/>
 import { type AutocompleteProps } from './autocomplete.types.js';
-export declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, ...props }: AutocompleteProps<T>): JSX.Element;
+export declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, errorMessage, hintMessage, ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Autocomplete {
     var Item: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;
 }

package/dist/components/autocomplete/autocomplete.component.js

@@ -16,9 +16,10 @@ import * as React from 'react';
 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 { ListBox, Popover } from './components/index.js';
-export function Autocomplete({ size ='medium' , invalid =false , isDisabled , footer , portalContainer , ...props }) {
+export function Autocomplete({ size ='medium' , invalid =false , isDisabled , footer , portalContainer , errorMessage , hintMessage , ...props }) {
     const { contains  } = useFilter({
         sensitivity: 'base'
     });
@@ -30,7 +31,7 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
     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,
         inputRef,
@@ -59,9 +60,9 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
     const outerRef = React.useRef(null);
     return React.createElement("div", {
         className: styles.base()
-    }, React.createElement("label", _extends({}, labelProps, {
-        className: styles.label()
-    }), props.label), React.createElement("div", {
+    }, React.createElement(FormLabel, _extends({}, labelProps), props.label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", {
         ref: outerRef,
         className: styles.outerWrapper()
     }, React.createElement("input", _extends({}, inputProps, {
@@ -85,6 +86,7 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         placement: "bottom start",
         portalContainer: portalContainer
     }, React.createElement(ListBox, _extends({}, listBoxProps, {
+        autoFocus: listBoxProps.autoFocus,
         listBoxRef: listBoxRef,
         state: state
     })), footer && React.createElement("div", {

package/dist/components/autocomplete/autocomplete.stories.d.ts

@@ -6,24 +6,28 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Controlled usage example
  */
-export declare const ControlledStory: Story;
+export declare const Controlled: Story;
 /**
  * > Disabled usage example
  */
-export declare const DisabledStory: Story;
+export declare const Disabled: Story;
 /**
  * > Invalid usage example
  */
-export declare const InvalidStory: Story;
+export declare const Invalid: Story;
 /**
  * > Sizes example
  */
-export declare const SizesStory: Story;
+export declare const Sizes: Story;
 /**
  * > Footer example
  */
-export declare const FooterStory: Story;
+export declare const Footer: Story;
+/**
+ * Error message and label
+ */
+export declare const ErrorMessageAndLabel: Story;

package/dist/components/autocomplete/autocomplete.stories.js

@@ -1,22 +1,22 @@
 import { useState } from 'react';
 import { Autocomplete } from './autocomplete.component.js';
 const meta = {
-    title: 'Example/Autocomplete',
+    title: 'Components/Autocomplete',
     component: Autocomplete,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "h-30 p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'centered'
-    }
+        (Story)=>{
+            Autocomplete.Item.displayName = 'Autocomplete.Item';
+            return React.createElement("div", {
+                className: "h-30"
+            }, React.createElement(Story, null));
+        }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         'aria-label': 'Animals',
         children: [
@@ -41,7 +41,7 @@ export const DefaultStory = {
         ]
     }
 };
-export const ControlledStory = {
+export const Controlled = {
     args: {},
     render: ()=>{
         const [selectedKey, setSelectedKey] = useState();
@@ -67,7 +67,7 @@ export const ControlledStory = {
         }, "Snake"));
     }
 };
-export const DisabledStory = {
+export const Disabled = {
     args: {
         isDisabled: true,
         'aria-label': 'Disable example',
@@ -93,7 +93,7 @@ export const DisabledStory = {
         ]
     }
 };
-export const InvalidStory = {
+export const Invalid = {
     args: {
         invalid: true,
         'aria-label': 'Invalid example',
@@ -119,7 +119,7 @@ export const InvalidStory = {
         ]
     }
 };
-export const SizesStory = {
+export const Sizes = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, [
@@ -149,7 +149,7 @@ export const SizesStory = {
             }, "Snake")))));
     }
 };
-export const FooterStory = {
+export const Footer = {
     args: {},
     render: ()=>{
         return React.createElement("div", {
@@ -198,3 +198,22 @@ export const FooterStory = {
         }, "Orca")));
     }
 };
+export const ErrorMessageAndLabel = {
+    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: [
+            React.createElement(Autocomplete.Item, {
+                key: "Option 1"
+            }, "Option 1"),
+            React.createElement(Autocomplete.Item, {
+                key: "Option 2"
+            }, "Option 2"),
+            React.createElement(Autocomplete.Item, {
+                key: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};

package/dist/components/autocomplete/autocomplete.styles.js

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'relative flex flex-col',
-        label: 'text-text block text-left text-sm font-medium',
-        outerWrapper: 'form-control disabled:form-control-disabled relative flex w-full flex-row items-center overflow-hidden pr-2',
+        label: 'block text-left text-sm font-medium text-text',
+        outerWrapper: '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/dist/components/autocomplete/autocomplete.types.d.ts

@@ -2,13 +2,22 @@ import { type ComboBoxProps } from '@react-types/combobox';
 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/dist/components/autocomplete/components/list-box/components/list-box-option/list-box-option.component.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Node } from '@react-types/shared';
 import { type ListState } from 'react-stately';
 interface OptionProps<T = any> {
     item: Node<T>;
     state: ListState<T>;
 }
-export declare function Option({ item, state }: OptionProps): JSX.Element;
+export declare function Option({ item, state }: OptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/autocomplete/components/list-box/components/list-box-section/list-box-section.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ListBoxSectionProps } from './list-box-section.types.js';
-export declare function ListBoxSection({ section, state }: ListBoxSectionProps): JSX.Element;
+export declare function ListBoxSection({ section, state }: ListBoxSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/autocomplete/components/list-box/list-box.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { ListBoxProps } from './list-box.types.js';
-export declare function ListBox(props: ListBoxProps): JSX.Element;
+export declare function ListBox(props: ListBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/autocomplete/components/popover/popover.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { PopoverProps } from './popover.types.js';
-export declare function Popover(props: PopoverProps): JSX.Element;
+export declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/badge.component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type BadgeProps } from './badge.types.js';
-export declare function BaseBadge({ className, tag: Tag, color, type, children, ...props }: BadgeProps, ref: any): JSX.Element;
+export declare function BaseBadge({ className, tag: Tag, color, type, children, ...props }: BadgeProps, ref: any): import("react/jsx-runtime").JSX.Element;
 export declare const Badge: React.ForwardRefExoticComponent<{
     tag?: keyof JSX.IntrinsicElements | undefined;
 } & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
@@ -26,7 +26,7 @@ export declare const Badge: React.ForwardRefExoticComponent<{
         pill: string;
         default: string;
     };
-}, undefined, "inline-block whitespace-nowrap text-center leading-none", {
+}, undefined, "inline-block whitespace-nowrap border text-center leading-none", {
     responsiveVariants: string[];
 }, {
     color: {

package/dist/components/badge/badge.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Badge } from './badge.component.js';
 declare const meta: Meta<typeof Badge>;
@@ -7,12 +6,20 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Default usage example
  */
-export declare const PillStory: Story;
+export declare const Pill: Story;
 /**
  * > Different colors
  */
-export declare const Colors: () => JSX.Element;
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * > Example next to link
+ */
+export declare const Links: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * > Example next to link
+ */
+export declare const Buttons: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/badge.stories.js

@@ -1,3 +1,4 @@
+import { Button } from '../index.js';
 import { Badge } from './badge.component.js';
 const COLORS = [
     'danger',
@@ -20,19 +21,16 @@ const INVERTED_COLORS = [
     'warning-inverted'
 ];
 const meta = {
-    title: 'Example/Badge',
+    title: 'Components/Badge',
     component: Badge,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement("div", {
-                className: "flex items-center justify-center p-2"
+                className: "flex p-2"
             }, React.createElement(Story, null))
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     argTypes: {
         children: {
             description: 'Children',
@@ -63,13 +61,13 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'test',
         type: 'default'
     }
 };
-export const PillStory = {
+export const Pill = {
     args: {
         children: 'test',
         type: 'pill'
@@ -100,3 +98,21 @@ export const Colors = ()=>React.createElement("div", {
             color: color,
             type: "pill"
         }, color)))));
+export const Links = ()=>React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, COLORS.map((color)=>React.createElement("a", {
+            className: "text-link underline",
+            href: "#"
+        }, color, React.createElement(Badge, {
+            color: color,
+            type: "pill"
+        }, "12"))));
+export const Buttons = ()=>React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, INVERTED_COLORS.map((color)=>React.createElement(Button, {
+            look: "primary"
+        }, "Primary", React.createElement(Badge, {
+            color: color,
+            type: "pill",
+            className: "ml-1"
+        }, color))));

package/dist/components/badge/badge.styles.d.ts

@@ -21,7 +21,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         pill: string;
         default: string;
     };
-}, undefined, "inline-block whitespace-nowrap text-center leading-none", {
+}, undefined, "inline-block whitespace-nowrap border text-center leading-none", {
     responsiveVariants: string[];
 }, {
     color: {

package/dist/components/badge/badge.styles.js

@@ -1,24 +1,24 @@
 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',

package/dist/components/breadcrumb/breadcrumb.component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type BreadcrumbProps } from './breadcrumb.types.js';
-export declare function Breadcrumb({ className, children, ...props }: BreadcrumbProps): JSX.Element;
+export declare function Breadcrumb({ className, children, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Breadcrumb {
     var Item: React.ForwardRefExoticComponent<{
         isCurrent?: boolean | undefined;

package/dist/components/breadcrumb/breadcrumb.stories.d.ts

@@ -6,4 +6,4 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;