@westpac/ui 0.2.1 → 0.4.0

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

@@ -0,0 +1,48 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'group m-0 mb-5 border-none p-0',
+    variants: {
+      before: {
+        true: '',
+        false: '',
+      },
+      after: {
+        true: '',
+        false: '',
+      },
+      beforeInset: {
+        true: '',
+        false: '',
+      },
+      afterInset: {
+        true: '',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        after: true,
+        afterInset: false,
+        className: 'input-field-after',
+      },
+      {
+        before: true,
+        beforeInset: false,
+        className: 'input-field-before',
+      },
+      {
+        after: true,
+        afterInset: true,
+        className: 'input-field-inset-after',
+      },
+      {
+        before: true,
+        beforeInset: true,
+        className: 'input-field-inset-before',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,239 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { SearchIcon, VisibilityIcon } from '../icon/index.js';
+import { Button, Input, Select, Textarea } from '../index.js';
+
+import { InputField } from './input-field.component.js';
+
+const meta: Meta<typeof InputField> = {
+  title: 'Example/InputField/Types',
+  component: InputField,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Text Beforoe story example
+ */
+export const TextBeforeStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField label="Text before" hint="I am a hint" supportingText="I am supporting text" before="$AUD">
+        <Input />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Text Beforoe story example
+ */
+export const TextAfterStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField label="Text after" hint="I am a hint" supportingText="I am supporting text" after="Text">
+        <Input />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Text After and Beforoe story example
+ */
+export const TextAfterAndBeforeStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField
+        label="Text after"
+        hint="I am a hint"
+        supportingText="I am supporting text"
+        before="$AUD"
+        after="Text"
+      >
+        <Input />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Textarea
+ */
+export const IconAddOnStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        <InputField
+          label="Icon before"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          before={{ icon: SearchIcon }}
+        >
+          <Input />
+        </InputField>
+        <InputField
+          label="Icon after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={{ icon: SearchIcon }}
+        >
+          <Input />
+        </InputField>
+        <InputField
+          label="Icon after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={{ icon: SearchIcon }}
+          before={{ icon: SearchIcon }}
+        >
+          <Input />
+        </InputField>
+      </>
+    );
+  },
+};
+
+/**
+ * > Icons in buttons
+ */
+export const IconInButtonsOnStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        <InputField
+          label="Icon button before"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          before={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
+        >
+          <Input />
+        </InputField>
+        <InputField
+          label="Icon button after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
+        >
+          <Input />
+        </InputField>
+        <InputField
+          label="Icon button before and after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
+          before={{ inset: true, element: <Button look="link" iconAfter={VisibilityIcon} iconColor="muted" /> }}
+        >
+          <Input />
+        </InputField>
+      </>
+    );
+  },
+};
+
+/**
+ * > Button add ons
+ */
+export const ButtonAddOnStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        <InputField
+          label="Button before"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          before={<Button>Check</Button>}
+        >
+          <Input />
+        </InputField>
+        <InputField
+          label="Button after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={<Button>Check</Button>}
+        >
+          <Input />
+        </InputField>
+        <InputField
+          label="Button before and after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={<Button>Check</Button>}
+          before={<Button>Check</Button>}
+        >
+          <Input />
+        </InputField>
+        <InputField
+          label="Primary button after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={<Button look="primary">Check</Button>}
+        >
+          <Input />
+        </InputField>
+        <InputField
+          label="Faint button after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={<Button look="faint">Check</Button>}
+        >
+          <Input />
+        </InputField>
+      </>
+    );
+  },
+};
+
+/**
+ * > Select add ons
+ */
+export const SelectAddOnStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField
+        label="Select"
+        hint="I am a hint"
+        supportingText="I am supporting text"
+        before={
+          <Select>
+            <option>Select</option>
+          </Select>
+        }
+        after={
+          <Select>
+            <option>Select</option>
+          </Select>
+        }
+      >
+        <Input />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Textarea
+ */
+export const TextAreaStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField label="Text after" hint="I am a hint" supportingText="I am supporting text">
+        <Textarea />
+      </InputField>
+    );
+  },
+};

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

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { type IconProps } from '../icon/index.js';
+
+import { styles } from './input-field.styles.js';
+
+export type Composition = Record<'before' | 'after', string | null>;
+
+export type Sizes = 'small' | 'medium' | 'large' | 'xlarge';
+
+export type InputFieldContextType = {
+  ariaDescribedByValue: string;
+  id: string;
+  size: Sizes;
+};
+
+export type InputFieldProps = {
+  /**
+   * After element
+   */
+  after?: ReactNode | { element?: ReactNode; icon?: (props: Omit<IconProps, 'icon'>) => JSX.Element; inset?: boolean };
+  /**
+   * Before element
+   */
+  before?: ReactNode | { element?: ReactNode; icon?: (props: Omit<IconProps, 'icon'>) => JSX.Element; inset?: boolean };
+  /**
+   * Children
+   */
+  children?: ReactNode;
+  /**
+   * Error message text
+   */
+  errorMessage?: string | string[];
+  /**
+   * Visually hide label
+   */
+  hideLabel?: boolean;
+  /**
+   * Hint text
+   */
+  hint?: ReactNode;
+  /**
+   * Define an id for internal elements
+   */
+  instanceId?: string;
+  /**
+   * Label text
+   */
+  label?: string;
+  /**
+   * Size for Before/After/Input child components
+   */
+  size?: Sizes;
+  /**
+   * Supporting text
+   */
+  supportingText?: ReactNode;
+  /**
+   * Tag to render
+   */
+  // TODO: maybe we could limit the tags to be only fieldset or div?
+  tag?: keyof JSX.IntrinsicElements;
+} & Omit<VariantProps<typeof styles>, 'before' | 'after'>;

package/src/components/link/index.ts

@@ -0,0 +1,2 @@
+export { Link } from './link.component.js';
+export { type LinkProps } from './link.types.js';

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

@@ -0,0 +1,41 @@
+import React, { forwardRef, useRef } from 'react';
+import { useLink } from 'react-aria';
+
+import { ArrowRightIcon } from '../icon/index.js';
+
+import { styles as linkStyles } from './link.styles.js';
+import { type LinkProps } from './link.types.js';
+
+export function BaseLink(
+  {
+    className,
+    children,
+    href,
+    iconBefore: IconBefore,
+    iconAfter: IconAfter,
+    iconSize = 'small',
+    target,
+    type = 'standalone',
+    underline = true,
+    ...props
+  }: LinkProps,
+  propRef: any,
+) {
+  const ref = useRef(propRef);
+  const { linkProps } = useLink({ ...props }, ref);
+  const styles = linkStyles({ type, underline });
+
+  if (type === 'standalone' && !IconBefore && !IconAfter) {
+    IconBefore = ArrowRightIcon;
+  }
+
+  return (
+    <a {...linkProps} 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>
+      {IconAfter && <IconAfter size={iconSize} color="link" className={styles.iconAfter()} />}
+    </a>
+  );
+}
+
+export const Link = forwardRef(BaseLink);

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

@@ -0,0 +1,122 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
+
+import { Link } from './link.component.js';
+
+const meta: Meta<typeof Link> = {
+  title: 'Example/Link',
+  component: Link,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-1">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: "Look, I'm a default link",
+    href: '#',
+  },
+};
+
+const SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+
+/**
+ * > 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">
+    <h1 className="font-bold">Default</h1>
+    <Link href="#">Look I'm a standalone link</Link>
+    <h1 className="font-bold">Icon Before override</h1>
+    <Link href="#" iconBefore={PdfFileIcon}>
+      Look I'm a standalone link
+    </Link>
+    <h1 className="font-bold">Icon Before override</h1>
+    <Link href="#" iconAfter={ArrowRightIcon}>
+      Look I'm a standalone link
+    </Link>
+  </div>
+);
+
+/**
+ * > Inline link example
+ */
+export const InlineLink = () => (
+  <div className="space-y-1 p-1">
+    <p className="typography-body-10">
+      Lorem ipsum dolor{' '}
+      <Link href="#" type="inline">
+        look, I'm an inline link
+      </Link>{' '}
+      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+    </p>
+    <p className="typography-body-10">
+      Lorem ipsum dolor{' '}
+      <Link href="#" type="inline" underline={false}>
+        look, I'm an inline link with no underline
+      </Link>{' '}
+      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+    </p>
+    <p className="typography-body-10">
+      Lorem ipsum dolor{' '}
+      <Link href="#" type="inline" iconBefore={PdfFileIcon}>
+        look, I'm an inline link
+      </Link>{' '}
+      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+    </p>
+    <p className="typography-body-10">
+      Lorem ipsum dolor{' '}
+      <Link href="#" type="inline" iconAfter={PdfFileIcon}>
+        look, I'm an inline link
+      </Link>{' '}
+      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+    </p>
+    <Link href="#" type="inline" iconBefore={PdfFileIcon}>
+      look, I'm an inline link
+    </Link>
+  </div>
+);
+
+/**
+ * > example of icon sizes
+ */
+export const IconSizes = () => (
+  <div className="space-y-1 pl-1">
+    {SIZES.map((size: any) => (
+      <div key={size}>
+        <h1 className="font-bold">{size}</h1>
+        <Link href="#" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>
+          Look I'm a standalone link
+        </Link>
+        <p className="typography-body-10">
+          Lorem ipsum dolor{' '}
+          <Link href="#" type="inline" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>
+            look, I'm an inline link
+          </Link>{' '}
+          sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+          doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+        </p>
+      </div>
+    ))}
+  </div>
+);

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

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'inline-flex bg-[transparent] hover:underline focus:focus-outline',
+      text: 'typography-body-10',
+      iconBefore: 'mr-1',
+      iconAfter: 'ml-1',
+    },
+    variants: {
+      type: {
+        inline: {
+          base: 'items-baseline text-link',
+          iconBefore: 'self-center',
+          iconAfter: 'self-center',
+        },
+        standalone: {
+          base: 'items-center text-text',
+        },
+      },
+      underline: {
+        true: '',
+      },
+    },
+    compoundSlots: [
+      {
+        slots: ['base'],
+        type: 'inline',
+        underline: true,
+        className: 'underline hover:no-underline',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/link/link.types.ts

@@ -0,0 +1,36 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { AriaLinkOptions } from 'react-aria';
+
+import { IconProps } from '../icon/index.js';
+
+export type LinkProps = {
+  /**
+   * Link text
+   */
+  children?: ReactNode;
+  /**
+   * Classname for overriding base style
+   */
+  className?: string;
+  /**
+   * Places an icon within the button, after the button’s text
+   */
+  iconAfter?: (props: IconProps) => JSX.Element;
+  /**
+   * Places an icon within the button, before the button’s text
+   */
+  iconBefore?: (props: IconProps) => JSX.Element;
+  /**
+   * set size of icon
+   */
+  iconSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Link type
+   */
+  type?: 'inline' | 'standalone';
+  /**
+   * Visually style the (inline) link with an underline
+   */
+  underline?: boolean;
+} & Omit<AriaLinkOptions, 'isDisabled' | 'elementType'> &
+  AnchorHTMLAttributes<Element>;

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

@@ -0,0 +1,2 @@
+export { Item } from './item.component.js';
+export { type ItemProps } from './item.types.js';

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

@@ -0,0 +1,52 @@
+import React, { forwardRef, useContext } from 'react';
+
+import { ListContext } from '../../list.component.js';
+import { getStateValues } from '../../list.utils.js';
+
+import { styles as itemStyles } from './item.styles.js';
+import { type ItemProps } from './item.types.js';
+
+export function BaseItem({ className, children, href, look, type, spacing, icon, ...props }: ItemProps, ref: any) {
+  const state = useContext(ListContext);
+
+  const stateValues = getStateValues({ look, type, spacing, state, icon });
+
+  look = stateValues.look;
+  type = stateValues.type;
+  const Icon = stateValues.icon;
+
+  const styles = itemStyles({
+    look,
+    type,
+    spacing: stateValues.spacing,
+    icon: !!Icon,
+    nested: (state.nested && state.nested > 0) || false,
+  });
+
+  const bulletToRender = () => {
+    if (type === 'ordered' || type === 'unstyled') {
+      return null;
+    }
+    if ((type === 'icon' || type === 'link') && Icon) {
+      return <Icon size="small" className={styles.bullet()} color={look} data-testid={type} />;
+    }
+    return <div className={styles.bullet()} data-testid={type} />;
+  };
+
+  return (
+    <div className={styles.wrapper()} key={state.nested}>
+      {bulletToRender()}
+      <li className={styles.base({ className })} {...props}>
+        {type === 'link' ? (
+          <a href={href} className={styles.link()} ref={ref}>
+            {children}
+          </a>
+        ) : (
+          children
+        )}
+      </li>
+    </div>
+  );
+}
+
+export const Item = forwardRef(BaseItem);