@westpac/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,161 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Input } from '../index.js';
+
+import { Form } from './form.component.js';
+
+const meta: Meta<typeof Form> = {
+  title: 'Example/Form',
+  component: Form,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default size and spacing
+ */
+export const DefaultStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        <h2 className="typography-body-7 my-4 font-bold">Default size and spacing</h2>
+        <Form>
+          <Form.Section>
+            <Form.ChitChat>
+              Hello, I’m the friendly conversational text component. I live at the top of the form pod if required.
+            </Form.ChitChat>
+          </Form.Section>
+
+          <Form.Section>
+            <Form.Group>
+              <Form.Label htmlFor="example-default-1">This is a label</Form.Label>
+              <Form.Hint>This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" />
+              <Input name="example-default-1" />
+            </Form.Group>
+
+            <Form.Group>
+              <Form.Label htmlFor="example-default-2">This is a label</Form.Label>
+              <Form.Hint>This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" />
+              <Input name="example-default-2" />
+            </Form.Group>
+          </Form.Section>
+
+          <Form.Section>
+            <Form.Group>
+              <Form.Label htmlFor="example-default-3">This is a label</Form.Label>
+              <Form.Hint>This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" />
+              <Input name="example-default-3" />
+            </Form.Group>
+          </Form.Section>
+        </Form>
+
+        <hr />
+
+        <h2 className="typography-body-7 my-4 font-bold">Large size with large spacing</h2>
+        <Form size="large" spacing="large">
+          <Form.Section>
+            <Form.ChitChat>
+              Hello, I’m the friendly conversational text component. I live at the top of the form pod if required.
+            </Form.ChitChat>
+          </Form.Section>
+
+          <Form.Section>
+            <Form.Group>
+              <Form.Label htmlFor="example-large-1">This is a label</Form.Label>
+              <Form.Hint>This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" />
+              <Input name="example-large-1" />
+            </Form.Group>
+
+            <Form.Group>
+              <Form.Label htmlFor="example-large-2">This is a label</Form.Label>
+              <Form.Hint>This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" />
+              <Input name="example-large-2" />
+            </Form.Group>
+          </Form.Section>
+
+          <Form.Section>
+            <Form.Group>
+              <Form.Label htmlFor="example-large-3">This is a label</Form.Label>
+              <Form.Hint>This is a hint</Form.Hint>
+              <Form.ErrorMessage message="This is an error message" />
+              <Input name="example-large-3" />
+            </Form.Group>
+          </Form.Section>
+        </Form>
+      </>
+    );
+  },
+};
+
+/**
+ * > Multiple errors
+ */
+export const MultipleErrorsStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Form>
+        <Form.Label>This is a label</Form.Label>
+        <Form.Hint>This is a hint</Form.Hint>
+        <Form.ErrorMessage message={['This is an error message', 'another error message']} />
+        <Input />
+      </Form>
+    );
+  },
+};
+
+/**
+ * > All sizes Story
+ */
+export const AllSizesStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <div className="flex flex-col gap-3">
+        {(['small', 'medium'] as const).map(size => (
+          <Form size={size}>
+            <h3>Form with size: {size}</h3>
+            <Form.Label>This is a label</Form.Label>
+            <Form.Hint>This is a hint</Form.Hint>
+            <Form.ErrorMessage message="This is an error message" />
+            <Input />
+          </Form>
+        ))}
+      </div>
+    );
+  },
+};
+
+/**
+ * > All spacings Story
+ */
+export const AllSpacingsStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <div className="flex flex-col gap-3">
+        {(['medium', 'large'] as const).map(size => (
+          <Form spacing={size}>
+            <h3>Form with Spacing:{size}</h3>
+            <Form.Label>This is a label</Form.Label>
+            <Form.Hint>This is a hint</Form.Hint>
+            <Form.ErrorMessage message="This is an error message" />
+            <Input />
+          </Form>
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/form/form.types.ts

@@ -0,0 +1,9 @@
+import { FormHTMLAttributes } from 'react';
+
+export type FormContextValue = {
+  inline?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  spacing?: 'medium' | 'large';
+};
+
+export type FormProps = FormContextValue & FormHTMLAttributes<HTMLFormElement>;

package/src/components/form/index.ts

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

package/src/components/icon/index.ts

@@ -233,4 +233,5 @@ export { STGLogoIcon } from './components/stg-logo-icon.js';
 export { WBCLogoIcon } from './components/wbc-logo-icon.js';
 export { WBGLogoIcon } from './components/wbg-logo-icon.js';
 
+export { Icon } from './icon.component.js';
 export { type IconProps } from './icon.types.js';

package/src/components/index.ts

@@ -16,5 +16,22 @@ export * from './button-group/index.js';
 export * from './switch/index.js';
 export * from './progress-bar/index.js';
 export * from './link/index.js';
+export * from './date-picker/index.js';
 export * from './grid/index.js';
 export * from './table/index.js';
+export * from './panel/index.js';
+export * from './collapsible/index.js';
+export * from './list/index.js';
+export * from './circle/index.js';
+export { FlexiCell, type FlexiCellProps } from './flexi-cell/index.js';
+export * from './autocomplete/index.js';
+export * from './button-dropdown/index.js';
+export * from './form/index.js';
+export * from './input-field/index.js';
+export * from './modal/index.js';
+export * from './pagination/index.js';
+export * from './popover/index.js';
+export * from './progress-rope/index.js';
+export * from './selector/index.js';
+export * from './compacta/index.js';
+export * from './repeater/index.js';

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

@@ -7,7 +7,7 @@ export function BaseInput(
   { className, size = 'medium', invalid = false, ...props }: InputProps,
   ref: ForwardedRef<HTMLInputElement>,
 ) {
-  return <input ref={ref} className={styles({ className, size, invalid })} {...props} />;
+  return <input ref={ref} className={styles({ className, size, invalid })} aria-invalid={invalid} {...props} />;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(BaseInput);

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

@@ -14,7 +14,7 @@ const meta: Meta<typeof Input> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

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

@@ -2,13 +2,13 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
+    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',
     variants: {
       size: {
-        small: 'form-control-small',
-        medium: 'form-control-medium',
-        large: 'form-control-large',
-        xlarge: 'form-control-xlarge',
+        small: 'form-control-small group-[.input-field-inset-after]:pr-6 group-[.input-field-inset-before]:pl-6',
+        medium: 'form-control-medium group-[.input-field-inset-after]:pr-7 group-[.input-field-inset-before]:pl-7',
+        large: 'form-control-large group-[.input-field-inset-after]:pr-8 group-[.input-field-inset-before]:pl-8',
+        xlarge: 'form-control-xlarge group-[.input-field-inset-after]:pr-9 group-[.input-field-inset-before]:pl-9',
       },
       invalid: {
         true: 'border-danger',

package/src/components/input/input.types.ts

@@ -3,4 +3,5 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './input.styles.js';
 
-export type InputProps = VariantProps<typeof styles> & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export type InputProps = { invalid?: boolean } & Omit<VariantProps<typeof styles>, 'invalid'> &
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { styles } from './add-ons.styles.js';
+import { InputAddOnProps } from './add-ons.types.js';
+import { DefaultAddOn, IconAddOn, TextAddOn } from './components/index.js';
+
+export const InputAddOn = ({
+  position,
+  icon: Icon,
+  iconProps = {},
+  inset = false,
+  children,
+  size,
+  id,
+  ...props
+}: InputAddOnProps) => {
+  const isInset = Icon ? true : inset;
+
+  let Wrapper = DefaultAddOn;
+  const childrenIsString = typeof children === 'string';
+
+  if (Icon) {
+    Wrapper = IconAddOn;
+  } else if (typeof children === 'string') {
+    Wrapper = TextAddOn;
+  }
+
+  return (
+    <Wrapper
+      position={position}
+      size={size}
+      className={styles({ position, isInset })}
+      id={childrenIsString ? id : undefined}
+      {...props}
+    >
+      {Icon ? <Icon size="small" aria-hidden={true} {...iconProps} /> : children}
+    </Wrapper>
+  );
+};

package/src/components/input-field/components/add-ons/add-ons.styles.ts

@@ -0,0 +1,30 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'inset-y-0',
+    variants: {
+      isInset: {
+        true: 'absolute',
+        false: '',
+      },
+      position: {
+        before: 'add-on-before group',
+        after: 'add-on-after group',
+      },
+    },
+    compoundVariants: [
+      {
+        isInset: true,
+        position: 'before',
+        className: 'left-0',
+      },
+      {
+        isInset: true,
+        position: 'after',
+        className: 'right-0',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/input-field/components/add-ons/add-ons.types.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+
+import { IconProps } from '../../../../components/icon/index.js';
+
+export type AddOnProps = {
+  /**
+   * Children
+   */
+  children: ReactNode;
+  /**
+   * Position of add on i.e. before or after input
+   */
+  position: 'before' | 'after';
+  /**
+   * Sizes of add ons
+   */
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+};
+
+export type InputAddOnProps = {
+  /**
+   * Children
+   */
+  children?: ReactNode;
+  /**
+   * Icon to display
+   */
+  icon?: (props: Omit<IconProps, 'icon'>) => JSX.Element;
+  /**
+   * Icon component props
+   */
+  iconProps?: Omit<IconProps, 'icon'>;
+  /**
+   * ID for aria props
+   */
+  id?: string;
+  /**
+   * Render compononent within input borders
+   */
+  inset?: boolean;
+  /**
+   * Position of add on i.e. before or after input
+   */
+  position: 'before' | 'after';
+  /**
+   * Sizes of add ons
+   */
+  size: AddOnProps['size'];
+};
+
+export enum AddOnType {
+  Default = 'default',
+  Inset = 'inset',
+}

package/src/components/input-field/components/add-ons/components/default-add-on/default-add-on.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './default-add-on.styles.js';
+import { type DefaultAddOnProps } from './default-add-on.types.js';
+
+export const DefaultAddOn = ({ position, className, children, ...props }: DefaultAddOnProps) => {
+  return (
+    <div className={styles({ className })} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/input-field/components/add-ons/components/default-add-on/default-add-on.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'flex shrink-0',
+});

package/src/components/input-field/components/add-ons/components/default-add-on/default-add-on.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { AddOnProps } from '../../add-ons.types.js';
+
+import { styles } from './default-add-on.styles.js';
+
+export type DefaultAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/src/components/input-field/components/add-ons/components/default-add-on/index.ts

@@ -0,0 +1,2 @@
+export { DefaultAddOn } from './default-add-on.component.js';
+export { type DefaultAddOnProps } from './default-add-on.types.js';

package/src/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './icon-add-on.styles.js';
+import { type IconAddOnProps } from './icon-add-on.types.js';
+
+export const IconAddOn = ({ position, children, size, className, ...props }: IconAddOnProps) => {
+  return (
+    <div className={styles({ className, size, position })} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.styles.ts

@@ -0,0 +1,62 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex h-full items-center',
+    variants: {
+      size: {
+        small: 'px-[0.5625rem]', //'0.5625rem',
+        medium: 'px-2', //'0.75rem',
+        large: 'px-[0.9375rem]', //'0.9375rem',
+        xlarge: 'px-3', //'1.125rem',
+      },
+      position: {
+        before: '',
+        after: '',
+      },
+    },
+    compoundVariants: [
+      {
+        position: 'before',
+        size: 'small', //'0.5625rem',,
+        className: 'pl-[0.5625rem]',
+      },
+      {
+        position: 'before',
+        size: 'medium', //'0.75rem',,
+        className: 'pl-2',
+      },
+      {
+        position: 'before',
+        size: 'large', //'0.9375rem',,
+        className: 'pl-[0.9375rem]',
+      },
+      {
+        position: 'before',
+        size: 'xlarge', //'1.125rem',,
+        className: 'pl-3',
+      },
+      {
+        position: 'after',
+        size: 'small', //'0.5625rem',,
+        className: 'pr-[0.5625rem]',
+      },
+      {
+        position: 'after',
+        size: 'medium', //'0.75rem',,
+        className: 'pr-2',
+      },
+      {
+        position: 'after',
+        size: 'large', //'0.9375rem',,
+        className: 'pr-[0.9375rem]',
+      },
+      {
+        position: 'after',
+        size: 'xlarge', //'1.125rem',,
+        className: 'pr-3',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/input-field/components/add-ons/components/icon-add-on/icon-add-on.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { type AddOnProps } from '../../add-ons.types.js';
+
+import { styles } from './icon-add-on.styles.js';
+
+export type IconAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/src/components/input-field/components/add-ons/components/icon-add-on/index.ts

@@ -0,0 +1,2 @@
+export { IconAddOn } from './icon-add-on.component.js';
+export { type IconAddOnProps } from './icon-add-on.types.js';

package/src/components/input-field/components/add-ons/components/index.ts

@@ -0,0 +1,3 @@
+export * from './default-add-on/index.js';
+export * from './icon-add-on/index.js';
+export * from './text-add-on/index.js';

package/src/components/input-field/components/add-ons/components/text-add-on/index.ts

@@ -0,0 +1,2 @@
+export { TextAddOn } from './text-add-on.component.js';
+export { type TextAddOnProps } from './text-add-on.types.js';

package/src/components/input-field/components/add-ons/components/text-add-on/text-add-on.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './text-add-on.styles.js';
+import { type TextAddOnProps } from './text-add-on.types.js';
+
+export const TextAddOn = ({ position, className, size, id, children, ...props }: TextAddOnProps) => {
+  return (
+    <div id={`${id}-text-${position}`} className={styles({ className, position, size })} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/input-field/components/add-ons/components/text-add-on/text-add-on.styles.ts

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'relative box-border whitespace-nowrap border border-borderDark bg-light',
+    variants: {
+      position: {
+        before: 'rounded-l-[0.1875rem]',
+        after: 'rounded-r-[0.1875rem]',
+      },
+      size: {
+        small: 'typography-body-10 h-5 px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem]',
+        medium: 'typography-body-9 h-6 px-2 py-[0.3125rem]',
+        large: 'typography-body-9 h-7 px-[0.9375rem] py-[0.5rem]',
+        xlarge: 'typography-body-8 h-8 px-3 py-[0.5625rem] pb-[0.625rem]',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/input-field/components/add-ons/components/text-add-on/text-add-on.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { AddOnProps } from '../../add-ons.types.js';
+
+import { styles } from './text-add-on.styles.js';
+
+export type TextAddOnProps = AddOnProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/src/components/input-field/components/add-ons/index.ts

@@ -0,0 +1,2 @@
+export * from './add-ons.component.js';
+export * from './add-ons.types.js';

package/src/components/input-field/components/index.ts

@@ -0,0 +1 @@
+export * from './supporting-text/index.js';

package/src/components/input-field/components/supporting-text/index.ts

@@ -0,0 +1,2 @@
+export { SupportingText } from './supporting-text.component.js';
+export { type SupportingTextProps } from './supporting-text.types.js';

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './supporting-text.styles.js';
+import { type SupportingTextProps } from './supporting-text.types.js';
+
+export function SupportingText({ className, tag: Tag = 'p', children, ...props }: SupportingTextProps) {
+  return (
+    <Tag className={styles({ className })} {...props}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/input-field/components/supporting-text/supporting-text.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'mt-1 text-xs text-muted',
+});

package/src/components/input-field/components/supporting-text/supporting-text.types.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './supporting-text.styles.js';
+
+export type SupportingTextProps = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/input-field/index.ts

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