@westpac/ui 0.5.0 → 0.7.0

package/src/components/checkbox-group/checkbox-group.types.ts

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
 
+import { FormHintProps } from '../index.js';
+
 export type CheckboxGroupProps = {
   /**
    * The `CheckboxItem` components to render
@@ -11,6 +13,14 @@ export type CheckboxGroupProps = {
    * String to override base style
    */
   className?: string;
+  /**
+   * error message
+   */
+  errorMessage?: string | string[];
+  /**
+   * hint message
+   */
+  hintMessage?: FormHintProps['children'];
   /**
    * Orientation of checkbox items
    */

package/src/components/checkbox-group/components/checkbox/checkbox.component.tsx

@@ -25,8 +25,8 @@ function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxPr
   const { size, orientation } = state;
   const localRef = useRef(null);
   const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({ ...props, value, children }, state, localRef);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocusVisible });
+  const { isFocused, focusProps } = useFocusRing();
+  const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocused });
 
   return (
     <label className={styles.base({ className })} ref={ref}>

package/src/components/checkbox-group/components/checkbox/checkbox.stories.tsx

@@ -3,19 +3,16 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Checkbox } from './checkbox.component.js';
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Example/CheckboxGroup/Checkbox',
+  title: 'Components/CheckboxGroup/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => (
-      <div className="flex justify-center p-3">
+      <div className="flex">
         <Story />{' '}
       </div>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
   argTypes: {
     isDisabled: {
       description: 'Controls whether individual checkbox items are disabled or not',
@@ -30,20 +27,20 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Base Checkbox Item, unchecked as that is handled by Checkbox
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: { children: 'Option 1', value: 'Option 1' },
 };
 
 /**
  * > Checkbox Item with hint example
  */
-export const CheckboxItemWithHint: Story = {
+export const HintText: Story = {
   args: { children: 'Option 1', value: 'Option 1', hint: 'Test hint' },
 };
 
 /**
  * > Disabled Checkbox Item example
  */
-export const CheckboxItemDisabled: Story = {
+export const Disabled: Story = {
   args: { children: 'Option 1', value: 'Option 1', isDisabled: true },
 };

package/src/components/checkbox-group/components/checkbox/checkbox.styles.ts

@@ -8,7 +8,7 @@ export const styles = tv(
       textWrapper: 'flex flex-col justify-center',
       labelText: 'typography-body-10 py-[2px] pl-1',
       hintText: 'typography-body-10 pl-1 text-muted',
-      checkbox: 'flex h-4 w-4 items-center justify-center rounded border border-hero',
+      checkbox: 'flex shrink-0 items-center justify-center rounded border border-hero',
     },
     variants: {
       isDisabled: {
@@ -20,8 +20,8 @@ export const styles = tv(
           base: 'hover:cursor-pointer',
         },
       },
-      isFocusVisible: {
-        true: { checkbox: 'rounded focus-outline' },
+      isFocused: {
+        true: { checkbox: 'focus-outline' },
       },
       orientation: {
         horizontal: {

package/src/components/circle/circle.stories.tsx

@@ -3,13 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Circle } from './circle.component.js';
 
 const meta: Meta<typeof Circle> = {
-  title: 'Example/Circle',
+  title: 'Components/Circle',
   component: Circle,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -18,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: 'GK',
   },

package/src/components/collapsible/collapsible.component.tsx

@@ -37,6 +37,7 @@ export function Collapsible({
       <Button
         className={styles.base({ className })}
         look="link"
+        iconColor="primary"
         iconAfter={ButtonIcon}
         onClick={handleClick}
         size={size}

package/src/components/collapsible/collapsible.stories.tsx

@@ -3,30 +3,21 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Collapsible } from './collapsible.component.js';
 
 const meta: Meta<typeof Collapsible> = {
-  title: 'Example/Collapsible',
+  title: 'Components/Collapsible',
   component: Collapsible,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="typography-body-10 p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const SIZES = ['small', 'medium', 'large', 'xlarge'];
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     text: 'Toggle collapsible',
     children:
@@ -37,9 +28,9 @@ export const DefaultStory: Story = {
 /**
  * > Examples of sizes of collapsible button
  */
-export const CollapsibleSizes = () => (
-  <div className="typography-body-10 p-3">
-    {SIZES.map((size: any) => (
+export const Sizes = () => (
+  <div>
+    {SIZES.map(size => (
       <div className="mb-2" key={size}>
         <h2 className="typography-body-8 mb-1 font-bold">{size}</h2>
         <p>
@@ -71,9 +62,9 @@ export const CollapsibleSizes = () => (
 /**
  * > Setting the default of collapsible to open
  */
-export const CollapsibleOpen = () => (
-  <div className="typography-body-10 p-3">
-    {SIZES.map((size: any) => (
+export const Open = () => (
+  <div>
+    {SIZES.map(size => (
       <div className="mb-2" key={size}>
         <h2 className="typography-body-8 mb-1 font-bold">{size}</h2>
         <p>

package/src/components/collapsible/collapsible.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'px-0 text-text no-underline hover:underline focus:focus-outline',
+      base: 'text-text px-0 no-underline hover:underline',
       content: 'typography-body-10 mb-2 block',
     },
     variants: {

package/src/components/compacta/compacta.stories.tsx

@@ -1,34 +1,24 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { ChangeEvent, ReactNode, useState } from 'react';
+import { type Meta, StoryFn } from '@storybook/react';
+import { ChangeEvent, useState } from 'react';
 
 import { Form, Input } from '../index.js';
 
 import { Compacta } from './compacta.component.js';
 
 const meta: Meta<typeof Compacta> = {
-  title: 'Example/Compacta',
+  title: 'Components/Compacta',
   component: Compacta,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-5">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
   args: {},
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 /**
  * > Default usage example
  */
-export const StoryDefault = () => {
+export const Default = () => {
   const [inputs, setInputs] = useState({});
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {

package/src/components/compacta/compacta.styles.ts

@@ -12,7 +12,7 @@ export const styles = tv(
       itemIndex: 'mr-2 w-4 flex-none font-bold',
       removeBtn: 'mt-[0.875rem] h-auto p-0 no-underline hover:underline',
       addBtn: 'h-auto p-0 no-underline hover:underline',
-      toggleBtn: 'focus:outline-focus ml-auto p-0',
+      toggleBtn: 'ml-auto p-0',
       collapsible: '',
       content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
       footer: 'pt-[0.5rem]',

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

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 
 import { ArrowRightIcon } from '../icon/index.js';
 
@@ -20,6 +21,7 @@ function FlexiCellBase(
     tag: Tag = 'div',
     children,
     badge,
+    badgeZIndex,
     before,
     body,
     after,
@@ -31,10 +33,15 @@ function FlexiCellBase(
   }: FlexiCellProps,
   ref: any,
 ) {
-  const styles = flexiCellStyles({ className, withBorder, isLink: !!href || withHoverEffect });
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = flexiCellStyles({ className, withBorder, isLink: !!href || withHoverEffect, isFocusVisible });
   return (
-    <Tag {...({ ref } as any)} className={styles.base({ className })} href={href} {...props}>
-      {badge && <div className={styles.badge()}>{badge}</div>}
+    <Tag {...({ ref } as any)} className={styles.base({ className })} href={href} {...mergeProps(props, focusProps)}>
+      {badge && (
+        <div className={styles.badge()} style={{ zIndex: badgeZIndex }}>
+          {badge}
+        </div>
+      )}
       {before}
       <div className={styles.bodyWrapper()}>{body ? <FlexiCellBody>{children}</FlexiCellBody> : children}</div>
       {after}