@westpac/ui 0.5.0 → 0.7.0

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

@@ -1,6 +1,6 @@
 import React, { Children, ReactNode, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
 
-import { Form } from '../form/form.component.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 
 import { InputAddOn } from './components/add-ons/add-ons.component.js';
 import { SupportingText } from './components/index.js';
@@ -86,12 +86,12 @@ export function InputField({
   return (
     <Tag className={styles({ before: !!before, after: !!after, afterInset, beforeInset })} {...props}>
       {label && (
-        <Form.Label srOnly={hideLabel} tag={isFieldset ? 'legend' : 'label'} {...(!isFieldset && { htmlFor: id })}>
+        <FormLabel srOnly={hideLabel} tag={isFieldset ? 'legend' : 'label'} {...(!isFieldset && { htmlFor: id })}>
           {label}
-        </Form.Label>
+        </FormLabel>
       )}
-      {hint && <Form.Hint id={`${id}-hint`}>{hint}</Form.Hint>}
-      {errorMessage && <Form.ErrorMessage id={`${id}-error`} message={errorMessage} />}
+      {hint && <FormHint id={`${id}-hint`}>{hint}</FormHint>}
+      {errorMessage && <ErrorMessage id={`${id}-error`} message={errorMessage} />}
       <div className="relative flex">
         {before && (
           <InputAddOn position="before" size={size} inset={beforeInset} icon={beforeIcon} id={id}>

package/src/components/input-field/input-field.scenarios.stories.tsx

@@ -7,13 +7,10 @@ import { Button, Input, Select, Textarea } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField/Scenarios',
+  title: 'Components/InputField/Scenarios',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -22,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Number of dependents
  */
-export const NumberStepperStory: Story = {
+export const NumberStepper: Story = {
   args: {},
   render: () => {
     const [numberOfDependents, setNumberOfDependents] = useState(0);
@@ -44,7 +41,7 @@ export const NumberStepperStory: Story = {
 /**
  * > Masked characters in field
  */
-export const MaskedCharactersStory: Story = {
+export const MaskedCharacters: Story = {
   args: {},
   render: () => {
     const [typeInput, setTypeInput] = useState<'password' | 'text'>('password');
@@ -74,7 +71,7 @@ export const MaskedCharactersStory: Story = {
 /**
  * > Search with left icon and clear button
  */
-export const SearchWithLeftIconAndClearButtonStory: Story = {
+export const SearchWithLeftIconAndClearButton: Story = {
   args: {},
   render: () => {
     const [inputValue, setInputValue] = useState<string>('');
@@ -100,7 +97,7 @@ export const SearchWithLeftIconAndClearButtonStory: Story = {
 /**
  * > Inline field validation flow
  */
-export const InlineFieldValidationFlowStory: Story = {
+export const InlineFieldValidationFlow: Story = {
   args: {},
   render: () => {
     const [inputValue, setInputValue] = useState<string>('');
@@ -132,7 +129,7 @@ export const InlineFieldValidationFlowStory: Story = {
 /**
  * > Search Currency and frequency
  */
-export const CurrencyAndFrequencyStory: Story = {
+export const CurrencyAndFrequency: Story = {
   args: {},
   render: () => {
     const [inputValue, setInputValue] = useState<string>('');
@@ -159,7 +156,7 @@ export const CurrencyAndFrequencyStory: Story = {
  * > Search Textarea with character count
  */
 const MAX_LENGTH = 250;
-export const TextareaWithCharacterCountStory: Story = {
+export const TextareaWithCharacterCount: Story = {
   args: {},
   render: () => {
     const [inputValue, setInputValue] = useState<string>('');

package/src/components/input-field/input-field.sizes.stories.tsx

@@ -6,13 +6,10 @@ import { Button, Input, Select } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField/Sizes',
+  title: 'Components/InputField/Sizes',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -21,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Input field with different sizes
  */
-export const InputFieldWithDifferentSizesStory: Story = {
+export const InputFieldWithDifferentSizes: Story = {
   args: {},
   render: () => {
     return (

package/src/components/input-field/input-field.state.stories.tsx

@@ -6,13 +6,10 @@ import { Button, Input, Select } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField/State',
+  title: 'Components/InputField/State',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -21,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Invalid with error message/s
  */
-export const InvalidWithErrorMessagesStory: Story = {
+export const InvalidWithErrorMessages: Story = {
   args: {},
   render: () => {
     return (
@@ -91,7 +88,7 @@ export const InvalidWithErrorMessagesStory: Story = {
 /**
  * > Input field with disabled state
  */
-export const InputFieldWithDisabledStateStory: Story = {
+export const InputFieldWithDisabledState: Story = {
   args: {},
   render: () => {
     return (
@@ -122,7 +119,7 @@ export const InputFieldWithDisabledStateStory: Story = {
 /**
  * > Input field with read-only state
  */
-export const InputFieldWithReadOnlyStateStory: Story = {
+export const InputFieldWithReadOnlyState: Story = {
   args: {},
   render: () => {
     return (

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

@@ -5,13 +5,10 @@ import { Button, Input } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField',
+  title: 'Components/InputField',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -20,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
   render: () => {
     return (
@@ -31,10 +28,24 @@ export const DefaultStory: Story = {
   },
 };
 
+/**
+ * > Another usage example
+ */
+export const AnotherDefault: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField label="Label" hint="I am a hint" supportingText="I am supporting text">
+        <Input />
+      </InputField>
+    );
+  },
+};
+
 /**
  * > SrOnlyLabel usage example
  */
-export const SrOnlyLabelStory: Story = {
+export const SrOnlyLabel: Story = {
   args: {},
   render: () => {
     return (
@@ -54,7 +65,7 @@ export const SrOnlyLabelStory: Story = {
 /**
  * > Combination usage example
  */
-export const CombinationStory: Story = {
+export const Combination: Story = {
   args: {},
   render: () => {
     return (
@@ -74,7 +85,7 @@ export const CombinationStory: Story = {
 /**
  * > Fieldset as tag
  */
-export const WithFieldsetStory: Story = {
+export const WithFieldset: Story = {
   args: {},
   render: () => {
     return (

package/src/components/input-field/input-field.type.stories.tsx

@@ -6,13 +6,10 @@ import { Button, Input, Select, Textarea } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField/Types',
+  title: 'Components/InputField/Types',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -35,7 +32,7 @@ export const TextBeforeStory: Story = {
 /**
  * > Text Beforoe story example
  */
-export const TextAfterStory: Story = {
+export const TextAfter: Story = {
   args: {},
   render: () => {
     return (
@@ -49,7 +46,7 @@ export const TextAfterStory: Story = {
 /**
  * > Text After and Beforoe story example
  */
-export const TextAfterAndBeforeStory: Story = {
+export const TextAfterAndBefore: Story = {
   args: {},
   render: () => {
     return (
@@ -69,7 +66,7 @@ export const TextAfterAndBeforeStory: Story = {
 /**
  * > Textarea
  */
-export const IconAddOnStory: Story = {
+export const IconAddOn: Story = {
   args: {},
   render: () => {
     return (
@@ -107,7 +104,7 @@ export const IconAddOnStory: Story = {
 /**
  * > Icons in buttons
  */
-export const IconInButtonsOnStory: Story = {
+export const IconInButtonsOn: Story = {
   args: {},
   render: () => {
     return (
@@ -145,7 +142,7 @@ export const IconInButtonsOnStory: Story = {
 /**
  * > Button add ons
  */
-export const ButtonAddOnStory: Story = {
+export const ButtonAddOn: Story = {
   args: {},
   render: () => {
     return (
@@ -199,7 +196,7 @@ export const ButtonAddOnStory: Story = {
 /**
  * > Select add ons
  */
-export const SelectAddOnStory: Story = {
+export const SelectAddOn: Story = {
   args: {},
   render: () => {
     return (
@@ -227,7 +224,7 @@ export const SelectAddOnStory: Story = {
 /**
  * > Textarea
  */
-export const TextAreaStory: Story = {
+export const TextArea: Story = {
   args: {},
   render: () => {
     return (

package/src/components/link/link.component.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef } from 'react';
-import { useLink } from 'react-aria';
+import { mergeProps, useFocusRing, useLink } from 'react-aria';
 
 import { ArrowRightIcon } from '../icon/index.js';
 
@@ -23,16 +23,23 @@ export function BaseLink(
 ) {
   const ref = useRef(propRef);
   const { linkProps } = useLink({ ...props }, ref);
-  const styles = linkStyles({ type, underline });
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = linkStyles({ type, underline, isFocusVisible });
 
   if (type === 'standalone' && !IconBefore && !IconAfter) {
     IconBefore = ArrowRightIcon;
   }
 
   return (
-    <a {...linkProps} ref={propRef} href={href} target={target} className={styles.base({ className })}>
+    <a
+      {...mergeProps(linkProps, focusProps)}
+      ref={propRef}
+      href={href}
+      target={target}
+      className={styles.base({ className })}
+    >
       {IconBefore && <IconBefore size={iconSize} color="link" className={styles.iconBefore()} />}
-      <span className={styles.text()}>{children}</span>
+      <span>{children}</span>
       {IconAfter && <IconAfter size={iconSize} color="link" className={styles.iconAfter()} />}
     </a>
   );

package/src/components/link/link.stories.tsx

@@ -5,19 +5,10 @@ import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
 import { Link } from './link.component.js';
 
 const meta: Meta<typeof Link> = {
-  title: 'Example/Link',
+  title: 'Components/Link',
   component: Link,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-1">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -26,21 +17,21 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: "Look, I'm a default link",
     href: '#',
   },
 };
 
-const SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+const SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
 
 /**
  * > Standalone link with iconSizes, arrowRight is default but can be overridden.
  * > If no icon is passed it defaults to ArrowRightIcon in the iconBefore position
  */
-export const StandaloneLink = () => (
-  <div className="space-y-1 pl-1">
+export const Standalone = () => (
+  <div className="space-y-1">
     <h1 className="font-bold">Default</h1>
     <Link href="#">Look I'm a standalone link</Link>
     <h1 className="font-bold">Icon Before override</h1>
@@ -57,8 +48,8 @@ export const StandaloneLink = () => (
 /**
  * > Inline link example
  */
-export const InlineLink = () => (
-  <div className="space-y-1 p-1">
+export const Inline = () => (
+  <div className="space-y-1">
     <p className="typography-body-10">
       Lorem ipsum dolor{' '}
       <Link href="#" type="inline">
@@ -101,8 +92,8 @@ export const InlineLink = () => (
  * > example of icon sizes
  */
 export const IconSizes = () => (
-  <div className="space-y-1 pl-1">
-    {SIZES.map((size: any) => (
+  <div className="space-y-1">
+    {SIZES.map(size => (
       <div key={size}>
         <h1 className="font-bold">{size}</h1>
         <Link href="#" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>

package/src/components/link/link.styles.ts

@@ -3,8 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'inline-flex bg-[transparent] hover:underline focus:focus-outline',
-      text: 'typography-body-10',
+      base: 'inline-flex bg-[transparent] hover:underline',
       iconBefore: 'mr-1',
       iconAfter: 'ml-1',
     },
@@ -22,6 +21,10 @@ export const styles = tv(
       underline: {
         true: '',
       },
+      isFocusVisible: {
+        true: { base: 'focus-outline' },
+        false: { base: 'outline-none' },
+      },
     },
     compoundSlots: [
       {

package/src/components/list/components/item/item.component.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useContext } from 'react';
+import { useFocusRing } from 'react-aria';
 
 import { ListContext } from '../../list.component.js';
 import { getStateValues } from '../../list.utils.js';
@@ -14,6 +15,7 @@ export function BaseItem({ className, children, href, look, type, spacing, icon,
   look = stateValues.look;
   type = stateValues.type;
   const Icon = stateValues.icon;
+  const { isFocusVisible, focusProps } = useFocusRing();
 
   const styles = itemStyles({
     look,
@@ -21,6 +23,7 @@ export function BaseItem({ className, children, href, look, type, spacing, icon,
     spacing: stateValues.spacing,
     icon: !!Icon,
     nested: (state.nested && state.nested > 0) || false,
+    isFocusVisible,
   });
 
   const bulletToRender = () => {
@@ -38,7 +41,7 @@ export function BaseItem({ className, children, href, look, type, spacing, icon,
       {bulletToRender()}
       <li className={styles.base({ className })} {...props}>
         {type === 'link' ? (
-          <a href={href} className={styles.link()} ref={ref}>
+          <a href={href} className={styles.link()} ref={ref} {...focusProps}>
             {children}
           </a>
         ) : (

package/src/components/list/components/item/item.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: 'pl-[1.1875rem]',
       bullet: 'absolute block border',
-      link: 'text-text hover:cursor-pointer hover:underline focus:focus-outline',
+      link: 'text-text hover:cursor-pointer hover:underline',
       wrapper: 'relative',
     },
     variants: {
@@ -71,6 +71,9 @@ export const styles = tv(
       nested: {
         true: { bullet: 'bg-[transparent]' },
       },
+      isFocusVisible: {
+        true: { link: 'focus-outline' },
+      },
     },
     compoundSlots: [
       {

package/src/components/list/list.stories.tsx

@@ -5,31 +5,22 @@ import { AndroidIcon } from '../icon/index.js';
 import { List } from './list.component.js';
 
 const meta: Meta<typeof List> = {
-  title: 'Example/List',
+  title: 'Components/List',
   component: List,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-2">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'center',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const LOOKS = ['primary', 'hero', 'neutral', 'success', 'danger', 'link'];
-const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'];
+const LOOKS = ['primary', 'hero', 'neutral', 'success', 'danger', 'link'] as const;
+const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: [
       <List.Item>Styled list</List.Item>,
@@ -42,14 +33,14 @@ export const DefaultStory: Story = {
 /**
  * > Type of list
  */
-export const ListTypes = () =>
-  TYPES.map((type: any) => (
+export const Types = () =>
+  TYPES.map(type => (
     <div className="mb-2" key={type}>
       <h1 className="typography-body-8">{type}</h1>
       <List type={type} icon={type === 'icon' ? AndroidIcon : undefined}>
-        <List.Item>Styled {type} list</List.Item>
-        <List.Item>Styled {type} list</List.Item>
-        <List.Item>Styled {type} list</List.Item>
+        <List.Item href={type === 'link' ? '#' : undefined}>Styled {type} list</List.Item>
+        <List.Item href={type === 'link' ? '#' : undefined}>Styled {type} list</List.Item>
+        <List.Item href={type === 'link' ? '#' : undefined}>Styled {type} list</List.Item>
         <List icon={type === 'link' ? AndroidIcon : undefined}>
           <List.Item>Styled {type} list</List.Item>
           <List.Item>Styled {type} list</List.Item>
@@ -63,8 +54,8 @@ export const ListTypes = () =>
 /**
  * > Type of list
  */
-export const ListLooks = () =>
-  LOOKS.map((look: any) => (
+export const Looks = () =>
+  LOOKS.map(look => (
     <div className="mb-2" key={look}>
       <h1 className="typography-body-8">{look}</h1>
       <List look={look} type="bullet">
@@ -84,7 +75,7 @@ export const ListLooks = () =>
 /**
  * Nested list
  */
-export const NestedList = () => (
+export const Nested = () => (
   <div>
     <List type="bullet" assistiveText="test">
       <List.Item>Styled list</List.Item>
@@ -112,7 +103,7 @@ export const NestedList = () => (
 /**
  * List spacing
  */
-export const ListSpacing = () => (
+export const Spacing = () => (
   <div>
     <h1 className="typography-body-10 mb-2">Medium</h1>
     <List type="bullet" className="mb-4" spacing="medium">

package/src/components/modal/components/backdrop/backdrop.styles.ts

@@ -3,6 +3,6 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
     base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
-    modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown focus:outline-none',
+    modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown',
   },
 });

package/src/components/modal/components/dialog/dialog.component.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { useDialog } from 'react-aria';
+import { useDialog, useFocusRing } from 'react-aria';
 
 import { CloseIcon } from '../../../../components/icon/index.js';
 
@@ -10,7 +10,8 @@ import { type DialogProps } from './dialog.types.js';
 
 export function Dialog({ className, body, onClose, size = 'md', ...props }: DialogProps) {
   const { children } = props;
-  const styles = dialogStyles({ className, size });
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = dialogStyles({ className, size, isFocusVisible });
 
   const ref = useRef(null);
 
@@ -19,7 +20,7 @@ export function Dialog({ className, body, onClose, size = 'md', ...props }: Dial
   return (
     <div {...dialogProps} ref={ref} className={styles.base()}>
       {onClose && (
-        <button className={styles.close()} onClick={onClose} aria-label="Close modal">
+        <button className={styles.close()} onClick={onClose} aria-label="Close modal" {...focusProps}>
           <CloseIcon className="block" size="small" />
         </button>
       )}

package/src/components/modal/components/dialog/dialog.styles.ts

@@ -3,9 +3,9 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white focus:focus-outline',
+      base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white outline-none',
       title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-      close: 'absolute right-1 top-1 block p-1 focus:focus-outline',
+      close: 'absolute right-1 top-1 block p-1',
     },
     variants: {
       size: {
@@ -19,6 +19,10 @@ export const styles = tv(
           base: 'w-[18.75rem]',
         },
       },
+      isFocusVisible: {
+        true: { close: 'focus-outline' },
+        false: { close: 'outline-none' },
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/modal/components/dialog/dialog.types.ts

@@ -19,7 +19,7 @@ export type DialogProps = {
   /**
    * onClose callback
    */
-  onClose?: () => any;
+  onClose?: () => unknown;
   /**
    * Title for Modal
    */