@westpac/ui 0.5.0 → 0.7.0

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,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative flex gap-2 bg-white p-2 transition-colors focus:focus-outline 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',
     },
@@ -20,6 +20,9 @@ export const styles = tv(
         },
         false: {},
       },
+      isFocusVisible: {
+        true: { base: 'focus-outline' },
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

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';
 
 // ==============================

package/src/components/form/form.stories.tsx

@@ -5,13 +5,10 @@ import { Input } from '../index.js';
 import { Form } from './form.component.js';
 
 const meta: Meta<typeof Form> = {
-  title: 'Example/Form',
+  title: 'Components/Form',
   component: Form,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -20,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default size and spacing
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
   render: () => {
     return (
@@ -102,7 +99,7 @@ export const DefaultStory: Story = {
 /**
  * > Multiple errors
  */
-export const MultipleErrorsStory: Story = {
+export const MultipleErrors: Story = {
   args: {},
   render: () => {
     return (
@@ -119,7 +116,7 @@ export const MultipleErrorsStory: Story = {
 /**
  * > All sizes Story
  */
-export const AllSizesStory: Story = {
+export const AllSizes: Story = {
   args: {},
   render: () => {
     return (
@@ -141,7 +138,7 @@ export const AllSizesStory: Story = {
 /**
  * > All spacings Story
  */
-export const AllSpacingsStory: Story = {
+export const AllSpacings: Story = {
   args: {},
   render: () => {
     return (

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

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

package/src/components/{form/components/form-hint → form-hint}/form-hint.types.ts

@@ -4,6 +4,10 @@ import { type VariantProps } from 'tailwind-variants';
 import { styles } from './form-hint.styles.js';
 
 export type FormHintProps = {
+  /**
+   * spacing
+   */
+  spacing?: 'medium' | 'large';
   /**
    * Tag to render
    */

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { VisuallyHidden } from '../index.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) {
+  const finalSpacing = spacing || 'medium';
+
+  return srOnly ? (
+    <VisuallyHidden>{children}</VisuallyHidden>
+  ) : (
+    <Tag className={styles({ className, spacing: finalSpacing, subLabel })} {...props}>
+      {children}
+    </Tag>
+  );
+}

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

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

package/src/components/grid/grid.stories.tsx

@@ -4,24 +4,15 @@ import { Container, Item } from './components/index.js';
 import { Grid } from './grid.component.js';
 
 const meta: Meta<typeof Grid> = {
-  title: 'Example/Grid',
+  title: 'Foundation/Grid',
   component: Grid,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="mt-10">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 
-export const GridStory = () => {
+export const Default = () => {
   const items = Array(12).fill(null);
 
   return (
@@ -35,7 +26,7 @@ export const GridStory = () => {
   );
 };
 
-export const ContainerStory = () => {
+export const DefaultContainer = () => {
   const items = Array(12).fill(null);
 
   return (
@@ -51,7 +42,7 @@ export const ContainerStory = () => {
   );
 };
 
-export const ItemStory = () => {
+export const ResponsiveItems = () => {
   return (
     <Container>
       <Grid>
@@ -61,8 +52,53 @@ export const ItemStory = () => {
         <Item span={{ initial: 6, lg: 10 }} className="border border-border bg-light p-2 text-center">
           span - (xs:6, lg:10)
         </Item>
+      </Grid>
+    </Container>
+  );
+};
+
+export const Positioning = () => {
+  return (
+    <Container>
+      <Grid>
+        <Item span={4} className="border border-border bg-light p-2 text-center">
+          Top Left
+        </Item>
+        <Item start={9} span={4} className="border border-border bg-light p-2 text-center">
+          Top Right
+        </Item>
         <Item start={5} span={4} className="border border-border bg-light p-2 text-center">
-          start:5 span:4
+          Middle
+        </Item>
+        <Item start={1} span={4} className="border border-border bg-light p-2 text-center">
+          Bottom Left
+        </Item>
+        <Item start={9} span={4} className="border border-border bg-light p-2 text-center">
+          Bottom Right
+        </Item>
+      </Grid>
+    </Container>
+  );
+};
+
+export const HolyGrailLayout = () => {
+  return (
+    <Container>
+      <Grid>
+        <Item span={12} className="h-12 border border-border bg-light p-2 text-center">
+          Header
+        </Item>
+        <Item span={3} className="h-10 border border-border bg-light p-2 text-center">
+          Menu
+        </Item>
+        <Item span={6} className="h-10 border border-border bg-light p-2 text-center">
+          Content
+        </Item>
+        <Item span={3} className="h-10 border border-border bg-light p-2 text-center">
+          Ads
+        </Item>
+        <Item span={12} className="h-12 border border-border bg-light p-2 text-center">
+          Footer
         </Item>
       </Grid>
     </Container>

package/src/components/icon/icon.stories.tsx

@@ -56,19 +56,10 @@ const AllIconsExample = (props: AllIcons.IconProps) => {
 };
 
 const meta: Meta<typeof Icon> = {
-  title: 'Example/Icon',
+  title: 'Foundation/Icons',
   component: AllIconsExample,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ padding: '3rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
   argTypes: {
     children: {
       description: 'Children',
@@ -119,14 +110,14 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
 };
 
 /**
  * > With primary color example
  */
-export const WithPrimaryColorStory: Story = {
+export const Primary: Story = {
   args: {
     color: 'primary',
   },
@@ -135,7 +126,7 @@ export const WithPrimaryColorStory: Story = {
 /**
  * > With large size example
  */
-export const WithDifferentSizeStory: Story = {
+export const Size: Story = {
   args: {
     size: 'xlarge',
   },
@@ -144,7 +135,7 @@ export const WithDifferentSizeStory: Story = {
 /**
  * > With outlined look example
  */
-export const WithOutlinedLookStory: Story = {
+export const Outlined: Story = {
   args: {
     look: 'outlined',
   },

package/src/components/index.ts

@@ -35,3 +35,7 @@ export * from './progress-rope/index.js';
 export * from './selector/index.js';
 export * from './compacta/index.js';
 export * from './repeater/index.js';
+export * from './error-message/index.js';
+export * from './form-label/index.js';
+export * from './form-hint/index.js';
+export * from './field/index.js';

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

@@ -1,4 +1,5 @@
 import React, { ForwardedRef, forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 
 import { styles } from './input.styles.js';
 import { type InputProps } from './input.types.js';
@@ -7,7 +8,15 @@ export function BaseInput(
   { className, size = 'medium', invalid = false, ...props }: InputProps,
   ref: ForwardedRef<HTMLInputElement>,
 ) {
-  return <input ref={ref} className={styles({ className, size, invalid })} aria-invalid={invalid} {...props} />;
+  const { isFocused, focusProps } = useFocusRing();
+  return (
+    <input
+      ref={ref}
+      className={styles({ className, size, invalid, isFocused })}
+      aria-invalid={invalid}
+      {...mergeProps(props, focusProps)}
+    />
+  );
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(BaseInput);

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

@@ -3,28 +3,28 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Input } from './input.component.js';
 
 const meta: Meta<typeof Input> = {
-  title: 'Example/Input',
+  title: 'Components/Input',
   component: Input,
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => (
-      <div className="flex justify-center p-3">
+      <div className="flex">
         <Story />
       </div>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
+const FIXED_WIDTHS = [2, 3, 4, 5, 10, 20, 30];
+
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     placeholder: 'placeholder',
     size: 'medium',
@@ -34,7 +34,7 @@ export const DefaultStory: Story = {
 /**
  * > Invalid usage example
  */
-export const InvalidStory: Story = {
+export const Invalid: Story = {
   args: {
     invalid: true,
   },
@@ -43,16 +43,27 @@ export const InvalidStory: Story = {
 /**
  * > Disabled usage example
  */
-export const DisabledStory: Story = {
+export const Disabled: Story = {
   args: {
     disabled: true,
   },
 };
 
+/**
+ * >Sizes
+ */
+export const Sizes = () => (
+  <div className="flex flex-col gap-2">
+    {SIZES.map(size => (
+      <Input size={size} placeholder={size} />
+    ))}
+  </div>
+);
+
 /**
  * > ReadOnly usage example
  */
-export const ReadOnlyStory: Story = {
+export const ReadOnly: Story = {
   args: {
     readOnly: true,
   },

package/src/components/input/input.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control flex-1 read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0',
+    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled flex-1 group-[.input-field-after]:rounded-r-none group-[.input-field-before]:rounded-l-none group-[.input-field-after]:border-r-0 group-[.input-field-before]:border-l-0',
     variants: {
       size: {
         small: 'form-control-small group-[.input-field-inset-after]:pr-6 group-[.input-field-inset-before]:pl-6',
@@ -14,6 +14,9 @@ export const styles = tv(
         true: 'border-danger',
         false: 'border-borderDark',
       },
+      isFocused: {
+        true: 'focus-outline',
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },