@westpac/ui 0.3.0 → 0.5.0

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/link.stories.tsx

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

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

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'focus:focus-outline inline-flex bg-[transparent] hover:underline',
+      base: 'inline-flex bg-[transparent] hover:underline focus:focus-outline',
       text: 'typography-body-10',
       iconBefore: 'mr-1',
       iconAfter: 'ml-1',
@@ -11,12 +11,12 @@ export const styles = tv(
     variants: {
       type: {
         inline: {
-          base: 'text-link items-baseline',
+          base: 'items-baseline text-link',
           iconBefore: 'self-center',
           iconAfter: 'self-center',
         },
         standalone: {
-          base: 'text-text items-center',
+          base: 'items-center text-text',
         },
       },
       underline: {

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);

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

@@ -0,0 +1,85 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'pl-[1.1875rem]',
+      bullet: 'absolute block border',
+      link: 'text-text hover:cursor-pointer hover:underline focus:focus-outline',
+      wrapper: 'relative',
+    },
+    variants: {
+      icon: {
+        true: {},
+      },
+      spacing: {
+        medium: {
+          base: 'my-1',
+        },
+        large: {
+          base: 'my-2',
+        },
+      },
+      look: {
+        primary: {
+          bullet: 'border-primary bg-primary after:border-primary',
+        },
+        hero: {
+          bullet: 'border-hero bg-hero after:border-hero',
+        },
+        neutral: {
+          bullet: 'border-neutral bg-neutral after:border-neutral',
+        },
+        success: {
+          bullet: 'border-success bg-success after:border-success',
+        },
+        danger: {
+          bullet: 'border-danger bg-danger after:border-danger',
+        },
+        link: {
+          bullet: 'border-link bg-link after:border-link',
+        },
+      },
+      type: {
+        bullet: {
+          bullet: 'left-[0.25rem] top-[0.375rem] h-[0.5rem] w-[0.5rem] rounded-full',
+        },
+        link: {
+          bullet:
+            'left-[0.125rem] top-[0.375rem] h-[0.5rem] w-[0.5rem] rotate-45 border-b-0 border-l-0 border-r-[0.125rem] border-t-[0.125rem] bg-[transparent]',
+        },
+        tick: {
+          bullet:
+            ' left-[0.125rem] top-[0.3125rem] h-[0.375rem] w-[0.75rem] rotate-[-44deg] border-b-[0.125rem] border-l-[0.125rem] border-r-0 border-t-0 bg-[transparent]',
+        },
+        cross: {
+          bullet:
+            'left-[0.375rem] top-[0.25rem] h-[0.75rem] w-0 -rotate-45 border-y-0 border-l-[0.125rem] border-r-0 bg-[transparent] after:absolute after:left-[-0.125rem] after:block after:h-[0.75rem] after:w-0 after:rotate-90 after:border-y-0 after:border-l-[0.125rem] after:border-r-0',
+        },
+        unstyled: {
+          base: 'pl-0',
+          bullet: 'pl-[1.1875rem] ',
+        },
+        icon: {
+          base: '',
+          bullet: 'border-none bg-[transparent]',
+        },
+        ordered: {
+          base: 'pl-0',
+        },
+      },
+      nested: {
+        true: { bullet: 'bg-[transparent]' },
+      },
+    },
+    compoundSlots: [
+      {
+        slots: ['bullet'],
+        type: 'link',
+        icon: true,
+        className: 'left-0 top-0 h-3 w-3 rotate-0 border-none bg-[transparent]',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+
+import { IconProps } from '../../../icon/index.js';
+
+export type ItemProps = {
+  /**
+   * Renders `<a>` link element around the item content
+   */
+  href?: string;
+  /**
+   * The icon for list item
+   */
+  icon?: (props: IconProps) => JSX.Element;
+  /**
+   * The look of the bullet, icon, tick and cross lists
+   */
+  look?: 'primary' | 'hero' | 'neutral' | 'success' | 'danger' | 'link';
+  /**
+   * The level of nesting
+   */
+  nested?: number;
+  /**
+   * The size of space between list elements
+   */
+  spacing?: 'medium' | 'large';
+  /**
+   * The list style
+   */
+  type?: 'bullet' | 'link' | 'tick' | 'cross' | 'unstyled' | 'icon' | 'ordered';
+} & HTMLAttributes<Element>;

package/src/components/list/index.ts

@@ -0,0 +1,2 @@
+export { List } from './list.component.js';
+export { type ListProps } from './list.types.js';

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

@@ -0,0 +1,35 @@
+import React, { Children, ReactElement, cloneElement, createContext, useContext } from 'react';
+
+import { Item } from './components/item/index.js';
+import { styles as listStyles } from './list.styles.js';
+import { ListContextState, type ListProps } from './list.types.js';
+import { getStateValues } from './list.utils.js';
+
+export const ListContext = createContext<ListContextState>({});
+
+export function List({ assistiveText, className, children, look, nested, icon, type, spacing, ...props }: ListProps) {
+  const state = useContext(ListContext);
+  const Tag = type === 'ordered' ? 'ol' : 'ul';
+  const stateValues = getStateValues({ look, type, spacing, state, icon });
+
+  if (typeof nested !== 'number') {
+    nested = (typeof state.nested === 'number' && state.nested + 1) || 0;
+  }
+
+  assistiveText =
+    (type === 'tick' || type === 'cross') && nested === 0
+      ? assistiveText || `The following items are ${type === 'tick' ? 'ticked' : 'crossed'}`
+      : undefined;
+
+  const styles = listStyles({ type: stateValues.type, nested: typeof state.nested === 'number' });
+
+  return (
+    <ListContext.Provider value={{ nested, ...stateValues }}>
+      <Tag className={styles.base({ className })} {...props} role="list" aria-label={assistiveText}>
+        {Children.map(children, (child, index) => cloneElement(child as ReactElement, { key: index }))}
+      </Tag>
+    </ListContext.Provider>
+  );
+}
+
+List.Item = Item;

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

@@ -0,0 +1,130 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { AndroidIcon } from '../icon/index.js';
+
+import { List } from './list.component.js';
+
+const meta: Meta<typeof List> = {
+  title: 'Example/List',
+  component: List,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-2">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+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'];
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: [
+      <List.Item>Styled list</List.Item>,
+      <List.Item>Styled list</List.Item>,
+      <List.Item>Styled list</List.Item>,
+    ],
+  },
+};
+
+/**
+ * > Type of list
+ */
+export const ListTypes = () =>
+  TYPES.map((type: any) => (
+    <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 icon={type === 'link' ? AndroidIcon : undefined}>
+          <List.Item>Styled {type} list</List.Item>
+          <List.Item>Styled {type} list</List.Item>
+          <List.Item>Styled {type} list</List.Item>
+        </List>
+        <List.Item>Styled {type} list</List.Item>
+      </List>
+    </div>
+  ));
+
+/**
+ * > Type of list
+ */
+export const ListLooks = () =>
+  LOOKS.map((look: any) => (
+    <div className="mb-2" key={look}>
+      <h1 className="typography-body-8">{look}</h1>
+      <List look={look} type="bullet">
+        <List.Item>Styled {look} list</List.Item>
+        <List.Item>Styled {look} list</List.Item>
+        <List.Item>Styled {look} list</List.Item>
+        <List icon={look === 'link' ? AndroidIcon : undefined}>
+          <List.Item>Styled {look} list</List.Item>
+          <List.Item>Styled {look} list</List.Item>
+          <List.Item>Styled {look} list</List.Item>
+        </List>
+        <List.Item>Styled {look} list</List.Item>
+      </List>
+    </div>
+  ));
+
+/**
+ * Nested list
+ */
+export const NestedList = () => (
+  <div>
+    <List type="bullet" assistiveText="test">
+      <List.Item>Styled list</List.Item>
+      <List.Item>Styled list</List.Item>
+      <List.Item>Styled list</List.Item>
+      <List>
+        <List.Item>Styled list</List.Item>
+        <List.Item>Styled list</List.Item>
+        <List.Item>Styled list</List.Item>
+        <List nested={0}>
+          <List.Item>Styled list</List.Item>
+          <List.Item>Styled list</List.Item>
+          <List.Item>Styled list</List.Item>
+          <List>
+            <List.Item>Styled list</List.Item>
+            <List.Item>Styled list</List.Item>
+            <List.Item>Styled list</List.Item>
+          </List>
+        </List>
+      </List>
+    </List>
+  </div>
+);
+
+/**
+ * List spacing
+ */
+export const ListSpacing = () => (
+  <div>
+    <h1 className="typography-body-10 mb-2">Medium</h1>
+    <List type="bullet" className="mb-4" spacing="medium">
+      <List.Item>Styled bullet list</List.Item>
+      <List.Item>Styled bullet list</List.Item>
+      <List.Item>Styled bullet list</List.Item>
+    </List>
+    <h1 className="typography-body-10 mb-2">Large</h1>
+    <List type="bullet" className="mb-4" spacing="large">
+      <List.Item>Styled bullet list</List.Item>
+      <List.Item>Styled bullet list</List.Item>
+      <List.Item>Styled bullet list</List.Item>
+    </List>
+  </div>
+);