@westpac/ui 0.6.0 → 0.7.0

package/src/components/date-picker/date-picker.stories.tsx

@@ -1,22 +1,21 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { Field } from '../field/field.component.js';
+
 import { DatePicker } from './date-picker.component.js';
 
 const meta: Meta<typeof DatePicker> = {
-  title: 'Example/DatePicker',
+  title: 'Components/DatePicker',
   component: DatePicker,
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => (
-      <div className="h-30 p-3">
+      <div className="h-30">
         <Story />
       </div>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
@@ -25,19 +24,19 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
 };
 
 /**
  * > Different sizes example
  */
-export const DifferentSizesStory: Story = {
+export const Sizes: Story = {
   args: {},
   render: () => {
     return (
       <>
-        {(['sm', 'md', 'lg', 'xl'] as any[]).map(size => {
+        {(['sm', 'md', 'lg', 'xl'] as const).map(size => {
           return (
             <div className="py-2" key={size}>
               <DatePicker size={size} />
@@ -52,7 +51,7 @@ export const DifferentSizesStory: Story = {
 /**
  * > Controlled value
  */
-export const ControlledValueStory: Story = {
+export const Controlled: Story = {
   args: {},
   render: () => {
     const [value, setValue] = useState('2023-08-01');
@@ -79,3 +78,62 @@ export const ControlledValueStory: Story = {
     );
   },
 };
+
+/**
+ * > Disable weekends
+ */
+export const DisableWeekends: Story = {
+  args: { disableWeekends: true },
+};
+
+/**
+ * > Disable days of the week (Mon, Wed, Fri in example)
+ */
+export const DisableDaysOfWeek: Story = {
+  args: { disableDaysOfWeek: [1, 3, 5] },
+};
+
+/**
+ * > Disable specific dates (2023-10-10 in example)
+ */
+export const DisableSpecificDates: Story = {
+  args: { disableDates: ['2023-10-10'] },
+};
+
+/**
+ * > Form field example
+ */
+export const FormField: Story = {
+  args: {},
+  render: () => {
+    const [value, setValue] = useState('2023-08-01');
+
+    return (
+      <Field
+        label="Are you an existing customer?"
+        hintMessage="Hint: choose from one of the following options"
+        errorMessage="This is an inline error message"
+      >
+        <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}
+        />
+      </Field>
+    );
+  },
+};

package/src/components/date-picker/date-picker.types.ts

@@ -42,23 +42,23 @@ export type DatePickerProps = {
   /*
    * onBlur
    */
-  onBlur?: (...args: any[]) => any;
+  onBlur?: (...args: any[]) => unknown;
   /*
    * onChange
    */
-  onChange?: (...args: any[]) => any;
+  onChange?: (...args: any[]) => unknown;
   /*
    * onClose
    */
-  onClose?: (...args: any[]) => any;
+  onClose?: (...args: any[]) => unknown;
   /*
    * onFocus
    */
-  onFocus?: (...args: any[]) => any;
+  onFocus?: (...args: any[]) => unknown;
   /*
    * onOpen
    */
-  onOpen?: (...args: any[]) => any;
+  onOpen?: (...args: any[]) => unknown;
   /*
    * Date picker input value. Must be in IS0-8601 format: YYYY-MM-DD
    */

package/src/components/date-picker/date-picker.utils.ts

@@ -39,8 +39,8 @@ export function useListener(
   useEffect(() => {
     if (ref?.current && handler) {
       const element = ref.current;
-      element.addEventListener(eventName as any, handler);
-      return () => element.removeEventListener(eventName as any, handler);
+      element.addEventListener(eventName, handler);
+      return () => element.removeEventListener(eventName, handler);
     }
   }, [eventName, handler]);
 }

package/src/components/{form/components/error-message → error-message}/error-message.component.tsx

@@ -1,6 +1,6 @@
 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';
 import { type ErrorMessageProps } from './error-message.types.js';
@@ -26,13 +26,7 @@ export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message,
     </ul>
   ) : (
     <Tag className={styles.base({ className: `${className} mb-2` })} {...props}>
-      <FinalIcon
-        copyrightYear="2020"
-        className={styles.icon({})}
-        size="xsmall"
-        look="outlined"
-        // color="inherit"
-      />
+      <FinalIcon copyrightYear="2023" className={styles.icon({})} size="xsmall" look="outlined" />
       {message}
     </Tag>
   );

package/src/components/field/field.component.tsx

@@ -0,0 +1,43 @@
+import React, { Children, ReactNode, cloneElement, isValidElement, useCallback } from 'react';
+import { useField } from 'react-aria';
+
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
+
+import { styles } from './field.styles.js';
+import { type FieldProps } from './field.types.js';
+
+export function Field({
+  className,
+  label,
+  tag: Tag = 'div',
+  children,
+  hintMessage,
+  errorMessage,
+  labelElementType,
+  ...props
+}: FieldProps) {
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+    ...props,
+    description: hintMessage,
+    errorMessage,
+    label,
+    labelElementType,
+  });
+
+  const renderChildren = useCallback(() => {
+    return Children.map<ReactNode, ReactNode>(children, child => {
+      if (isValidElement(child)) {
+        return cloneElement(child, fieldProps);
+      }
+    });
+  }, [children]);
+
+  return (
+    <Tag className={styles({ className })} {...props}>
+      <FormLabel {...labelProps}>{label}</FormLabel>
+      {hintMessage && <FormHint {...descriptionProps}>{hintMessage}</FormHint>}
+      {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
+      {renderChildren()}
+    </Tag>
+  );
+}

package/src/components/field/field.stories.tsx

@@ -0,0 +1,57 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Input, Select } from '../index.js';
+
+import { Field } from './field.component.js';
+
+/**
+ * Field component provides label, hint message and error message to form components such as Select, Input etc.
+ */
+const meta: Meta<typeof Field> = {
+  title: 'Foundation/Field',
+  component: Field,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Field
+        label="Are you an existing customer?"
+        hintMessage="Hint: choose from one of the following options"
+        errorMessage="This is an inline error message"
+      >
+        <Input />
+      </Field>
+    );
+  },
+};
+
+/**
+ * > Select usage example
+ */
+export const SelectStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Field
+        label="Are you an existing customer?"
+        hintMessage="Hint: choose from one of the following options"
+        errorMessage="This is an inline error message"
+      >
+        <Select>
+          <option value="1">Yes</option>
+          <option value="2">No</option>
+        </Select>
+      </Field>
+    );
+  },
+};

package/src/components/field/field.styles.ts

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

package/src/components/field/field.types.ts

@@ -0,0 +1,24 @@
+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/src/components/field/index.ts

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

package/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.ts

@@ -2,7 +2,7 @@ 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: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.styles.ts

@@ -2,7 +2,7 @@ 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/src/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.styles.ts

@@ -2,7 +2,7 @@ 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/src/components/flexi-cell/flexi-cell.component.tsx

@@ -21,6 +21,7 @@ function FlexiCellBase(
     tag: Tag = 'div',
     children,
     badge,
+    badgeZIndex,
     before,
     body,
     after,
@@ -36,7 +37,11 @@ function FlexiCellBase(
   const styles = flexiCellStyles({ className, withBorder, isLink: !!href || withHoverEffect, isFocusVisible });
   return (
     <Tag {...({ ref } as any)} className={styles.base({ className })} href={href} {...mergeProps(props, focusProps)}>
-      {badge && <div className={styles.badge()}>{badge}</div>}
+      {badge && (
+        <div className={styles.badge()} style={{ zIndex: badgeZIndex }}>
+          {badge}
+        </div>
+      )}
       {before}
       <div className={styles.bodyWrapper()}>{body ? <FlexiCellBody>{children}</FlexiCellBody> : children}</div>
       {after}

package/src/components/flexi-cell/flexi-cell.stories.tsx

@@ -7,16 +7,10 @@ import { GiftPictogram } from '../pictogram/index.js';
 import { FlexiCell } from './flexi-cell.component.js';
 
 const meta: Meta<typeof FlexiCell> = {
-  title: 'Example/FlexiCell',
+  title: 'Components/FlexiCell',
   component: FlexiCell,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
-  ],
+  decorators: [(Story: StoryFn) => <Story />],
   argTypes: {
     after: {
       description: 'Renders an element on the right',
@@ -59,18 +53,15 @@ const meta: Meta<typeof FlexiCell> = {
       type: { name: 'boolean' },
     },
   },
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
-type Story = StoryObj<any>;
+type Story = StoryObj<unknown>;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     tag: 'a',
     href: '#',
@@ -87,7 +78,7 @@ export const DefaultStory: Story = {
   },
 };
 
-export const CreditCardStory: Story = {
+export const CreditCard: Story = {
   args: {
     tag: 'a',
     href: '#',
@@ -108,7 +99,7 @@ export const CreditCardStory: Story = {
   },
 };
 
-export const AccountStory: Story = {
+export const Account: Story = {
   args: {
     tag: 'a',
     href: '#',
@@ -128,7 +119,7 @@ export const AccountStory: Story = {
   },
 };
 
-export const PayeeStory: Story = {
+export const Payee: Story = {
   args: {
     tag: 'a',
     href: '#',
@@ -153,7 +144,7 @@ export const PayeeStory: Story = {
   },
 };
 
-export const PayeeWithInfoStory: Story = {
+export const PayeeWithInfo: Story = {
   args: {
     withBorder: true,
     body: true,
@@ -176,7 +167,7 @@ export const PayeeWithInfoStory: Story = {
   },
 };
 
-export const FlagPayeeStory: Story = {
+export const FlagPayee: Story = {
   args: {
     withBorder: true,
     body: true,
@@ -195,7 +186,7 @@ export const FlagPayeeStory: Story = {
   },
 };
 
-export const ListItemWithFlagStory: Story = {
+export const ListItemWithFlag: Story = {
   args: {
     tag: 'a',
     href: '#',
@@ -206,7 +197,7 @@ export const ListItemWithFlagStory: Story = {
   },
 };
 
-export const ListItemStory: Story = {
+export const ListItem: Story = {
   args: {
     tag: 'a',
     href: '#',
@@ -216,7 +207,7 @@ export const ListItemStory: Story = {
   },
 };
 
-export const WestpacSpecialProductStory: Story = {
+export const WestpacSpecialProduct: Story = {
   args: {
     tag: 'a',
     href: '#',
@@ -237,7 +228,7 @@ export const WestpacSpecialProductStory: Story = {
   },
 };
 
-export const FlexiCellWithImageStory: Story = {
+export const FlexiCellWithImage: Story = {
   args: {
     tag: 'a',
     href: '#',
@@ -257,7 +248,7 @@ export const FlexiCellWithImageStory: Story = {
   },
 };
 
-export const StickyFooterExampleStory: Story = {
+export const StickyFooterExample: Story = {
   args: {},
   render: () => {
     return (
@@ -343,7 +334,7 @@ const MOCK_ACCOUNTS = [
   },
 ];
 // WIP
-export const AccountListStory: Story = {
+export const AccountList: Story = {
   args: {},
   render: () => {
     return (
@@ -433,7 +424,7 @@ const MOCK_PAYEES = [
   },
 ];
 
-export const PayeeListStory: Story = {
+export const PayeeList: Story = {
   args: {},
   render: () => {
     return (
@@ -535,7 +526,7 @@ const MOCK_COUNTRIES = [
   },
 ];
 
-export const CountryListStory: Story = {
+export const CountryList: Story = {
   args: {},
   render: () => {
     return (
@@ -583,7 +574,7 @@ export const CountryListStory: Story = {
   },
 };
 
-export const ForeignCurrencyListStory: Story = {
+export const ForeignCurrencyList: Story = {
   args: {},
   render: () => {
     return (
@@ -674,7 +665,7 @@ const MOCK_PROMOS = [
   },
 ];
 
-export const PromotilesHorizontalListStory: Story = {
+export const PromotilesHorizontalList: Story = {
   args: {},
   render: () => {
     return (
@@ -715,7 +706,7 @@ export const PromotilesHorizontalListStory: Story = {
   },
 };
 
-export const PromotilesVerticalListStory: Story = {
+export const PromotilesVerticalList: Story = {
   args: {},
   render: () => {
     return (
@@ -777,7 +768,7 @@ const MOCK_PRODUCTS = [
   },
 ];
 
-export const ProductTilesStory: Story = {
+export const ProductTiles: Story = {
   args: {},
   render: () => {
     return (

package/src/components/flexi-cell/flexi-cell.styles.ts

@@ -3,14 +3,14 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative flex gap-2 bg-white p-2 transition-colors md:p-3',
+      base: 'relative flex gap-2 bg-white p-2 transition-colors xsl:p-3',
       bodyWrapper: 'flex flex-1 flex-col',
       badge: 'absolute right-0 top-0',
     },
     variants: {
       withBorder: {
         true: {
-          base: 'border-borderDark rounded border',
+          base: 'rounded border border-borderDark',
         },
         false: {},
       },

package/src/components/form/components/form-hint/form-hint.component.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
 
+import { type FormHintProps, FormHint as GelFormHint } from '../../../index.js';
 import { useFormContext } from '../../form.component.js';
 
-import { styles } from './form-hint.styles.js';
-import { type FormHintProps } from './form-hint.types.js';
-
-export function FormHint({ className, tag: Tag = 'div', children, ...props }: FormHintProps) {
+export function FormHint({ ...props }: FormHintProps) {
   const { spacing } = useFormContext();
 
-  return (
-    <Tag className={styles({ className, spacing: spacing || 'medium' })} {...props}>
-      {children}
-    </Tag>
-  );
+  return <GelFormHint spacing={spacing} {...props} />;
 }

package/src/components/form/components/form-hint/index.ts

@@ -1,2 +1 @@
 export { FormHint } from './form-hint.component.js';
-export { type FormHintProps } from './form-hint.types.js';

package/src/components/form/components/form-label/form-label.component.tsx

@@ -1,29 +1,16 @@
 import React from 'react';
 
-import { VisuallyHidden } from '../../../index.js';
+import { type FormLabelProps } from '../../../../index.js';
+import { FormLabel as GELFormLabel } from '../../../index.js';
 import { useFormContext } from '../../form.component.js';
 
-import { styles } from './form-label.styles.js';
-import { type FormLabelProps } from './form-label.types.js';
-
-export function FormLabel({
-  className,
-  tag: Tag = 'label',
-  spacing,
-  srOnly,
-  children,
-  subLabel = false,
-  ...props
-}: FormLabelProps) {
+export function FormLabel({ spacing, children, ...props }: FormLabelProps) {
   const context = useFormContext();
-
   const finalSpacing = spacing || context?.spacing || 'medium';
 
-  return srOnly ? (
-    <VisuallyHidden>{children}</VisuallyHidden>
-  ) : (
-    <Tag className={styles({ className, spacing: finalSpacing, subLabel })} {...props}>
+  return (
+    <GELFormLabel {...props} spacing={finalSpacing}>
       {children}
-    </Tag>
+    </GELFormLabel>
   );
 }

package/src/components/form/components/form-label/index.ts

@@ -1,2 +1 @@
 export { FormLabel } from './form-label.component.js';
-export { type FormLabelProps } from './form-label.types.js';

package/src/components/form/components/index.ts

@@ -1,4 +1,3 @@
-export * from './error-message/index.js';
 export * from './form-label/index.js';
 export * from './form-hint/index.js';
 export * from './form-chit-chat/index.js';

package/src/components/form/form.component.tsx

@@ -1,6 +1,8 @@
 import React, { createContext, useContext } from 'react';
 
-import { ErrorMessage, FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
+import { ErrorMessage } from '../error-message/index.js';
+
+import { FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
 import { FormContextValue, type FormProps } from './form.types.js';
 
 // ==============================