@westpac/ui 0.6.0 → 0.7.0

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta } from '@storybook/react';
 import { Compacta } from './compacta.component.js';
 declare const meta: Meta<typeof Compacta>;
@@ -6,4 +5,4 @@ export default meta;
 /**
  * > Default usage example
  */
-export declare const StoryDefault: () => JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/compacta/compacta.stories.js

@@ -2,23 +2,18 @@ import { useState } from 'react';
 import { Form, Input } from '../index.js';
 import { Compacta } from './compacta.component.js';
 const meta = {
-    title: 'Example/Compacta',
+    title: 'Components/Compacta',
     component: Compacta,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-5"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     args: {}
 };
 export default meta;
-export const StoryDefault = ()=>{
+export const Default = ()=>{
     const [inputs, setInputs] = useState({});
     const handleChange = (e)=>{
         setInputs((prev)=>({

package/dist/components/date-picker/date-picker.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type DatePickerProps } from './date-picker.types.js';
-export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, ...props }: DatePickerProps): JSX.Element;
+export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/date-picker.stories.d.ts

@@ -6,12 +6,28 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Different sizes example
  */
-export declare const DifferentSizesStory: Story;
+export declare const Sizes: Story;
 /**
  * > Controlled value
  */
-export declare const ControlledValueStory: Story;
+export declare const Controlled: Story;
+/**
+ * > Disable weekends
+ */
+export declare const DisableWeekends: Story;
+/**
+ * > Disable days of the week (Mon, Wed, Fri in example)
+ */
+export declare const DisableDaysOfWeek: Story;
+/**
+ * > Disable specific dates (2023-10-10 in example)
+ */
+export declare const DisableSpecificDates: Story;
+/**
+ * > Form field example
+ */
+export declare const FormField: Story;

package/dist/components/date-picker/date-picker.stories.js

@@ -1,25 +1,23 @@
 import { useState } from 'react';
+import { Field } from '../field/field.component.js';
 import { DatePicker } from './date-picker.component.js';
 const meta = {
-    title: 'Example/DatePicker',
+    title: 'Components/DatePicker',
     component: DatePicker,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement("div", {
-                className: "h-30 p-3"
+                className: "h-30"
             }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {}
 };
-export const DifferentSizesStory = {
+export const Sizes = {
     args: {},
     render: ()=>{
         return React.createElement(React.Fragment, null, [
@@ -37,7 +35,7 @@ export const DifferentSizesStory = {
         }));
     }
 };
-export const ControlledValueStory = {
+export const Controlled = {
     args: {},
     render: ()=>{
         const [value, setValue] = useState('2023-08-01');
@@ -62,3 +60,53 @@ export const ControlledValueStory = {
         });
     }
 };
+export const DisableWeekends = {
+    args: {
+        disableWeekends: true
+    }
+};
+export const DisableDaysOfWeek = {
+    args: {
+        disableDaysOfWeek: [
+            1,
+            3,
+            5
+        ]
+    }
+};
+export const DisableSpecificDates = {
+    args: {
+        disableDates: [
+            '2023-10-10'
+        ]
+    }
+};
+export const FormField = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('2023-08-01');
+        return React.createElement(Field, {
+            label: "Are you an existing customer?",
+            hintMessage: "Hint: choose from one of the following options",
+            errorMessage: "This is an inline error message"
+        }, React.createElement(DatePicker, {
+            onChange: (value)=>{
+                console.log(value.target.value);
+                setValue(value.target.value);
+            },
+            onOpen: ()=>{
+                console.log('onOpen');
+            },
+            onClose: ()=>{
+                console.log('onClose');
+            },
+            onBlur: ()=>{
+                console.log('onBlur');
+            },
+            onFocus: ()=>{
+                console.log('onFocus');
+            },
+            value: value
+        }));
+    }
+};

package/dist/components/date-picker/date-picker.types.d.ts

@@ -24,10 +24,10 @@ export type DatePickerProps = {
      */
     min?: string;
     name?: string;
-    onBlur?: (...args: any[]) => any;
-    onChange?: (...args: any[]) => any;
-    onClose?: (...args: any[]) => any;
-    onFocus?: (...args: any[]) => any;
-    onOpen?: (...args: any[]) => any;
+    onBlur?: (...args: any[]) => unknown;
+    onChange?: (...args: any[]) => unknown;
+    onClose?: (...args: any[]) => unknown;
+    onFocus?: (...args: any[]) => unknown;
+    onOpen?: (...args: any[]) => unknown;
     value?: string;
 } & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/{form/components/error-message → error-message}/error-message.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ErrorMessageProps } from './error-message.types.js';
-export declare function ErrorMessage({ className, tag: Tag, icon: Icon, message, ...props }: ErrorMessageProps): JSX.Element;
+export declare function ErrorMessage({ className, tag: Tag, icon: Icon, message, ...props }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{form/components/error-message → error-message}/error-message.component.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
-import { AlertIcon } from '../../../../components/icon/index.js';
+import { AlertIcon } from '../../components/icon/index.js';
 import { styles as errorMessageStyles } from './error-message.styles.js';
 export function ErrorMessage({ className , tag: Tag = 'div' , icon: Icon , message , ...props }) {
     const styles = errorMessageStyles({});
@@ -34,7 +34,7 @@ export function ErrorMessage({ className , tag: Tag = 'div' , icon: Icon , messa
             className: `${className} mb-2`
         })
     }, props), React.createElement(FinalIcon, {
-        copyrightYear: "2020",
+        copyrightYear: "2023",
         className: styles.icon({}),
         size: "xsmall",
         look: "outlined"

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

@@ -0,0 +1,2 @@
+import { type FieldProps } from './field.types.js';
+export declare function Field({ className, label, tag: Tag, children, hintMessage, errorMessage, labelElementType, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/field/field.component.js

@@ -0,0 +1,43 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { Children, cloneElement, isValidElement, useCallback } from 'react';
+import { useField } from 'react-aria';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
+import { styles } from './field.styles.js';
+export function Field({ className , label , tag: Tag = 'div' , children , hintMessage , errorMessage , labelElementType , ...props }) {
+    const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({
+        ...props,
+        description: hintMessage,
+        errorMessage,
+        label,
+        labelElementType
+    });
+    const renderChildren = useCallback(()=>{
+        return Children.map(children, (child)=>{
+            if (isValidElement(child)) {
+                return cloneElement(child, fieldProps);
+            }
+        });
+    }, [
+        children
+    ]);
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className
+        })
+    }, props), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), renderChildren());
+}

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

@@ -0,0 +1,16 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Field } from './field.component.js';
+/**
+ * Field component provides label, hint message and error message to form components such as Select, Input etc.
+ */
+declare const meta: Meta<typeof Field>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Select usage example
+ */
+export declare const SelectStory: Story;

package/dist/components/field/field.stories.js

@@ -0,0 +1,37 @@
+import { Input, Select } from '../index.js';
+import { Field } from './field.component.js';
+const meta = {
+    title: 'Foundation/Field',
+    component: Field,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ]
+};
+export default meta;
+export const DefaultStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(Field, {
+            label: "Are you an existing customer?",
+            hintMessage: "Hint: choose from one of the following options",
+            errorMessage: "This is an inline error message"
+        }, React.createElement(Input, null));
+    }
+};
+export const SelectStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(Field, {
+            label: "Are you an existing customer?",
+            hintMessage: "Hint: choose from one of the following options",
+            errorMessage: "This is an inline error message"
+        }, React.createElement(Select, null, React.createElement("option", {
+            value: "1"
+        }, "Yes"), React.createElement("option", {
+            value: "2"
+        }, "No")));
+    }
+};

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

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/field/field.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/field/field.types.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+import { AriaFieldProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+import { FormHintProps } from '../index.js';
+import { styles } from './field.styles.js';
+export type FieldProps = {
+    /**
+     * error message
+     */
+    errorMessage?: string | string[];
+    /**
+     * hint message
+     */
+    hintMessage?: FormHintProps['children'];
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & AriaFieldProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/field/index.d.ts

@@ -0,0 +1,2 @@
+export { Field } from './field.component.js';
+export { type FieldProps } from './field.types.js';

package/dist/components/field/index.js

@@ -0,0 +1 @@
+export { Field } from './field.component.js';

package/dist/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type FlexiCellAdornmentProps } from './flexi-cell-adornment.types.js';
 /** Flexi Cell Adornment: Flexi Cell Adornment */
-export declare const FlexiCellAdornment: ({ children, tag: Tag, align, className, ...props }: FlexiCellAdornmentProps) => JSX.Element;
+export declare const FlexiCellAdornment: ({ children, tag: Tag, align, className, ...props }: FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type FlexiCellBodyProps } from './flexi-cell-body.types.js';
 /** Flexi Cell Body: Flexi Cell Body */
-export declare const FlexiCellBody: ({ children, tag: Tag, className, ...props }: FlexiCellBodyProps) => JSX.Element;
+export declare const FlexiCellBody: ({ children, tag: Tag, className, ...props }: FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type FlexiCellButtonProps } from './flexi-cell-button.types.js';
 /** Flexi Cell Button: Flexi Cell Button */
-export declare const FlexiCellButton: ({ className, ...props }: FlexiCellButtonProps) => JSX.Element;
+export declare const FlexiCellButton: ({ className, ...props }: FlexiCellButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { FlexiCellCircleProps } from './flexi-cell-circle.types.js';
 /** Flexi Cell Circle: Flexi Cell Circle */
-export declare const FlexiCellCircle: ({ className, ...props }: FlexiCellCircleProps) => JSX.Element;
+export declare const FlexiCellCircle: ({ className, ...props }: FlexiCellCircleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "h-5 w-5 text-muted hover:text-link md:h-6 md:w-6", {
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "h-5 w-5 text-muted hover:text-link xsl:h-6 xsl:w-6", {
     responsiveVariants: string[];
 }, {}, undefined>;

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'h-5 w-5 text-muted hover:text-link md:h-6 md:w-6',
+    base: 'h-5 w-5 text-muted hover:text-link xsl:h-6 xsl:w-6',
     variants: {}
 }, {
     responsiveVariants: [

package/dist/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type FlexiCellFooterProps } from './flexi-cell-footer.types.js';
 /** Flexi Cell Footer: Flexi Cell Footer */
-export declare const FlexiCellFooter: ({ children, className, tag: Tag, ...props }: FlexiCellFooterProps) => JSX.Element;
+export declare const FlexiCellFooter: ({ children, className, tag: Tag, ...props }: FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { FlexiCellHintProps } from './flexi-cell-hint.types.js';
 /** Flexi Cell Hint: Flexi Cell Hint */
-export declare const FlexiCellHint: ({ children, tag: Tag, className, truncateText, ...props }: FlexiCellHintProps) => JSX.Element;
+export declare const FlexiCellHint: ({ children, tag: Tag, className, truncateText, ...props }: FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.styles.d.ts

@@ -3,7 +3,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "typography-body-10 m-0 font-normal text-muted md:typography-body-9", {
+}, undefined, "typography-body-10 m-0 font-normal text-muted xsl:typography-body-9", {
     responsiveVariants: string[];
 }, {
     truncateText: {

package/dist/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-10 m-0 font-normal text-muted md:typography-body-9',
+    base: 'typography-body-10 m-0 font-normal text-muted xsl:typography-body-9',
     variants: {
         truncateText: {
             true: 'truncate',

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { FlexiCellLabelProps } from './flexi-cell-label.types.js';
 /** Flexi Cell Label: Flexi Cell Label */
-export declare const FlexiCellLabel: ({ children, tag: Tag, truncateText, className, ...props }: FlexiCellLabelProps) => JSX.Element;
+export declare const FlexiCellLabel: ({ children, tag: Tag, truncateText, className, ...props }: FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.styles.d.ts

@@ -3,7 +3,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "typography-body-9 m-0 font-normal text-text transition-colors md:typography-body-8 group-hover:text-link", {
+}, undefined, "typography-body-9 m-0 font-normal text-text transition-colors xsl:typography-body-8 group-hover:text-link", {
     responsiveVariants: string[];
 }, {
     truncateText: {

package/dist/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'typography-body-9 m-0 font-normal text-text transition-colors md:typography-body-8 group-hover:text-link',
+    base: 'typography-body-9 m-0 font-normal text-text transition-colors xsl:typography-body-8 group-hover:text-link',
     variants: {
         truncateText: {
             true: 'truncate',

package/dist/components/flexi-cell/flexi-cell.component.js

@@ -17,7 +17,7 @@ import { mergeProps, useFocusRing } from 'react-aria';
 import { ArrowRightIcon } from '../icon/index.js';
 import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from './components/index.js';
 import { styles as flexiCellStyles } from './flexi-cell.styles.js';
-function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , before , body , after , withArrow , withBorder =false , href , withHoverEffect =false , ...props }, ref) {
+function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , badgeZIndex , before , body , after , withArrow , withBorder =false , href , withHoverEffect =false , ...props }, ref) {
     const { isFocusVisible , focusProps  } = useFocusRing();
     const styles = flexiCellStyles({
         className,
@@ -33,7 +33,10 @@ function FlexiCellBase({ className , tag: Tag = 'div' , children , badge , befor
         }),
         href: href
     }, mergeProps(props, focusProps)), badge && React.createElement("div", {
-        className: styles.badge()
+        className: styles.badge(),
+        style: {
+            zIndex: badgeZIndex
+        }
     }, badge), before, React.createElement("div", {
         className: styles.bodyWrapper()
     }, body ? React.createElement(FlexiCellBody, null, children) : children), after, withArrow && React.createElement(FlexiCellAdornment, {

package/dist/components/flexi-cell/flexi-cell.stories.d.ts

@@ -2,25 +2,25 @@ import { type Meta, type StoryObj } from '@storybook/react';
 import { FlexiCell } from './flexi-cell.component.js';
 declare const meta: Meta<typeof FlexiCell>;
 export default meta;
-type Story = StoryObj<any>;
+type Story = StoryObj<unknown>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
-export declare const CreditCardStory: Story;
-export declare const AccountStory: Story;
-export declare const PayeeStory: Story;
-export declare const PayeeWithInfoStory: Story;
-export declare const FlagPayeeStory: Story;
-export declare const ListItemWithFlagStory: Story;
-export declare const ListItemStory: Story;
-export declare const WestpacSpecialProductStory: Story;
-export declare const FlexiCellWithImageStory: Story;
-export declare const StickyFooterExampleStory: Story;
-export declare const AccountListStory: Story;
-export declare const PayeeListStory: Story;
-export declare const CountryListStory: Story;
-export declare const ForeignCurrencyListStory: Story;
-export declare const PromotilesHorizontalListStory: Story;
-export declare const PromotilesVerticalListStory: Story;
-export declare const ProductTilesStory: Story;
+export declare const Default: Story;
+export declare const CreditCard: Story;
+export declare const Account: Story;
+export declare const Payee: Story;
+export declare const PayeeWithInfo: Story;
+export declare const FlagPayee: Story;
+export declare const ListItemWithFlag: Story;
+export declare const ListItem: Story;
+export declare const WestpacSpecialProduct: Story;
+export declare const FlexiCellWithImage: Story;
+export declare const StickyFooterExample: Story;
+export declare const AccountList: Story;
+export declare const PayeeList: Story;
+export declare const CountryList: Story;
+export declare const ForeignCurrencyList: Story;
+export declare const PromotilesHorizontalList: Story;
+export declare const PromotilesVerticalList: Story;
+export declare const ProductTiles: Story;