@westpac/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,111 @@
+import React, { Children, ReactNode, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
+
+import { Form } from '../form/form.component.js';
+
+import { InputAddOn } from './components/add-ons/add-ons.component.js';
+import { SupportingText } from './components/index.js';
+import { styles } from './input-field.styles.js';
+import { type InputFieldProps } from './input-field.types.js';
+
+export function InputField({
+  label,
+  hideLabel,
+  size = 'medium',
+  hint,
+  errorMessage,
+  supportingText,
+  instanceId,
+  after,
+  before,
+  children,
+  tag: Tag = 'div',
+  ...props
+}: InputFieldProps) {
+  const _id = useId();
+  const id = useMemo(() => instanceId || `gel-field-${_id}`, [_id, instanceId]);
+
+  const ariaDescribedByValue = useMemo(() => {
+    const arr = [
+      ...(errorMessage ? [`${id}-error`] : []),
+      ...(hint ? [`${id}-hint`] : []),
+      ...(before ? [`${id}-text-before`] : []),
+      ...(after ? [`${id}-text-after`] : []),
+      ...(supportingText ? [`${id}-supporting-text`] : []),
+    ];
+    return arr.join(' ');
+  }, [id, hint, errorMessage, supportingText]);
+
+  const {
+    element: beforeElement,
+    icon: beforeIcon,
+    inset: beforeInset,
+  } = useMemo(() => {
+    if (
+      before &&
+      typeof before !== 'boolean' &&
+      typeof before !== 'string' &&
+      typeof before !== 'number' &&
+      ('element' in before || 'icon' in before || 'inset' in before)
+    ) {
+      return { ...before, inset: before.inset || !!before.icon };
+    }
+    return { element: before as ReactNode, icon: undefined, inset: false };
+  }, [before]);
+
+  const {
+    element: afterElement,
+    icon: afterIcon,
+    inset: afterInset,
+  } = useMemo(() => {
+    if (
+      after &&
+      typeof after !== 'boolean' &&
+      typeof after !== 'string' &&
+      typeof after !== 'number' &&
+      ('element' in after || 'icon' in after || 'inset' in after)
+    ) {
+      return { ...after, inset: after.inset || !!after.icon };
+    }
+    return { element: after as ReactNode, icon: undefined, inset: false };
+  }, [after]);
+
+  const renderChildren = useCallback(() => {
+    return Children.map<ReactNode, ReactNode>(children, child => {
+      if (isValidElement(child)) {
+        return cloneElement(child, {
+          size,
+          id,
+          'aria-describedby': ariaDescribedByValue,
+        } as any);
+      }
+    });
+  }, [children, ariaDescribedByValue]);
+
+  const isFieldset = useMemo(() => Tag === 'fieldset', [Tag]);
+
+  return (
+    <Tag className={styles({ before: !!before, after: !!after, afterInset, beforeInset })} {...props}>
+      {label && (
+        <Form.Label srOnly={hideLabel} tag={isFieldset ? 'legend' : 'label'} {...(!isFieldset && { htmlFor: id })}>
+          {label}
+        </Form.Label>
+      )}
+      {hint && <Form.Hint id={`${id}-hint`}>{hint}</Form.Hint>}
+      {errorMessage && <Form.ErrorMessage id={`${id}-error`} message={errorMessage} />}
+      <div className="relative flex">
+        {before && (
+          <InputAddOn position="before" size={size} inset={beforeInset} icon={beforeIcon} id={id}>
+            {beforeElement}
+          </InputAddOn>
+        )}
+        {renderChildren()}
+        {after && (
+          <InputAddOn position="after" size={size} inset={afterInset} icon={afterIcon} id={id}>
+            {afterElement}
+          </InputAddOn>
+        )}
+      </div>
+      {supportingText && <SupportingText id={`${id}-supporting-text`}>{supportingText}</SupportingText>}
+    </Tag>
+  );
+}

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

@@ -0,0 +1,177 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { CloseIcon, RefreshIcon, SearchIcon, VisibilityIcon, VisibilityOffIcon } 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/Scenarios',
+  component: InputField,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Number of dependents
+ */
+export const NumberStepperStory: Story = {
+  args: {},
+  render: () => {
+    const [numberOfDependents, setNumberOfDependents] = useState(0);
+    const minusButton = useCallback(() => setNumberOfDependents(state => --state), []);
+    const plusButton = useCallback(() => setNumberOfDependents(state => ++state), []);
+
+    return (
+      <InputField
+        label="Number of dependents"
+        before={<Button onClick={minusButton}>-</Button>}
+        after={<Button onClick={plusButton}>+</Button>}
+      >
+        <Input value={numberOfDependents} />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Masked characters in field
+ */
+export const MaskedCharactersStory: Story = {
+  args: {},
+  render: () => {
+    const [typeInput, setTypeInput] = useState<'password' | 'text'>('password');
+    const toggleType = useCallback(() => setTypeInput(state => (state === 'password' ? 'text' : 'password')), []);
+
+    return (
+      <InputField
+        label="Password"
+        after={{
+          inset: true,
+          element: (
+            <Button
+              onClick={toggleType}
+              look="link"
+              iconAfter={typeInput === 'password' ? VisibilityIcon : VisibilityOffIcon}
+              iconColor="muted"
+            />
+          ),
+        }}
+      >
+        <Input type={typeInput} />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Search with left icon and clear button
+ */
+export const SearchWithLeftIconAndClearButtonStory: Story = {
+  args: {},
+  render: () => {
+    const [inputValue, setInputValue] = useState<string>('');
+    const clearInput = useCallback(() => setInputValue(''), []);
+
+    return (
+      <InputField
+        label="Search"
+        before={{
+          icon: SearchIcon,
+        }}
+        after={{
+          inset: true,
+          element: <Button onClick={clearInput} look="link" iconAfter={CloseIcon} iconColor="muted" />,
+        }}
+      >
+        <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Inline field validation flow
+ */
+export const InlineFieldValidationFlowStory: Story = {
+  args: {},
+  render: () => {
+    const [inputValue, setInputValue] = useState<string>('');
+    const [validating, setValidating] = useState<boolean>(false);
+    const [error, setError] = useState<string>();
+    const validate = useCallback(() => {
+      setValidating(true);
+      setError(undefined);
+      setTimeout(() => {
+        if (inputValue !== '647453') {
+          setError('Routing number not found');
+        }
+        setValidating(false);
+      }, 1500);
+    }, [inputValue]);
+
+    return (
+      <InputField
+        label="Enter ABA routing number"
+        hint="For a valid response use: 647453, all other numbers will show the invalid response"
+        after={validating ? { icon: RefreshIcon } : <Button onClick={validate}>Check</Button>}
+        errorMessage={error}
+      >
+        <Input invalid={!!error} onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+      </InputField>
+    );
+  },
+};
+/**
+ * > Search Currency and frequency
+ */
+export const CurrencyAndFrequencyStory: Story = {
+  args: {},
+  render: () => {
+    const [inputValue, setInputValue] = useState<string>('');
+
+    return (
+      <InputField
+        label="Salary"
+        before="$AUD"
+        after={
+          <Select>
+            <option>Select</option>
+            <option>Per Year</option>
+            <option>Per Month</option>
+            <option>Per Week</option>
+          </Select>
+        }
+      >
+        <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+      </InputField>
+    );
+  },
+};
+/**
+ * > Search Textarea with character count
+ */
+const MAX_LENGTH = 250;
+export const TextareaWithCharacterCountStory: Story = {
+  args: {},
+  render: () => {
+    const [inputValue, setInputValue] = useState<string>('');
+    const counterText = useMemo(() => {
+      const lengthLeft = MAX_LENGTH - inputValue.length;
+      return `${lengthLeft} remaining`;
+    }, [inputValue]);
+
+    return (
+      <InputField label="Comments" hint="I am a hint" supportingText={counterText}>
+        <Textarea onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+      </InputField>
+    );
+  },
+};

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

@@ -0,0 +1,105 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { VisibilityIcon } from '../icon/index.js';
+import { Button, Input, Select } from '../index.js';
+
+import { InputField } from './input-field.component.js';
+
+const meta: Meta<typeof InputField> = {
+  title: 'Example/InputField/Sizes',
+  component: InputField,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Input field with different sizes
+ */
+export const InputFieldWithDifferentSizesStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        {(['small', 'medium', 'large', 'xlarge'] as const).map(size => (
+          <div key={size} className="border-b border-b-border py-3">
+            <h3 className="typography-body-7 mb-4 font-bold">Size: {size}</h3>
+            <InputField
+              size={size}
+              label="Text"
+              hint="I am a hint"
+              supportingText="I am supporting text"
+              before="$AUD"
+              after="Text"
+            >
+              <Input />
+            </InputField>
+
+            <InputField
+              size={size}
+              label="Icon"
+              hint="I am a hint"
+              supportingText="I am supporting text"
+              before={{ icon: VisibilityIcon, inset: true }}
+              after={{ icon: VisibilityIcon, inset: true }}
+            >
+              <Input />
+            </InputField>
+
+            <InputField
+              size={size}
+              label="Icon Button"
+              hint="I am a hint"
+              supportingText="I am supporting text"
+              before={{
+                element: <Button size={size} look="link" iconAfter={VisibilityIcon} iconColor="pop" />,
+                inset: true,
+              }}
+              after={{
+                element: <Button size={size} look="link" iconAfter={VisibilityIcon} iconColor="pop" />,
+                inset: true,
+              }}
+            >
+              <Input />
+            </InputField>
+
+            <InputField
+              size={size}
+              label="Button"
+              hint="I am a hint"
+              supportingText="I am supporting text"
+              before={<Button>Check</Button>}
+              after={<Button>Check</Button>}
+            >
+              <Input />
+            </InputField>
+
+            <InputField
+              size={size}
+              label="Select"
+              hint="I am a hint"
+              supportingText="I am supporting text"
+              before={
+                <Select>
+                  <option value="Select">Select</option>
+                </Select>
+              }
+              after={
+                <Select>
+                  <option value="Select">Select</option>
+                </Select>
+              }
+            >
+              <Input />
+            </InputField>
+          </div>
+        ))}
+      </>
+    );
+  },
+};

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

@@ -0,0 +1,151 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { SearchIcon } from '../icon/index.js';
+import { Button, Input, Select } from '../index.js';
+
+import { InputField } from './input-field.component.js';
+
+const meta: Meta<typeof InputField> = {
+  title: 'Example/InputField/State',
+  component: InputField,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Invalid with error message/s
+ */
+export const InvalidWithErrorMessagesStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          errorMessage="If there is an error it can go here"
+          after={<Button>Check</Button>}
+        >
+          <Input invalid />
+        </InputField>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          errorMessage={['If there is an error it can go here', 'If there is another error it can go here']}
+          after={<Button>Check</Button>}
+          before={<Button>Check</Button>}
+        >
+          <Input invalid />
+        </InputField>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          errorMessage="If there is an error it can go here"
+          after={{ icon: SearchIcon }}
+          before={{ icon: SearchIcon }}
+        >
+          <Input invalid />
+        </InputField>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          errorMessage="If there is an error it can go here"
+          after="Text"
+          before="Text"
+        >
+          <Input invalid />
+        </InputField>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          errorMessage="If there is an error it can go here"
+          after={
+            <Select invalid>
+              <option>Select</option>
+            </Select>
+          }
+          before={
+            <Select invalid>
+              <option>Select</option>
+            </Select>
+          }
+        >
+          <Input invalid />
+        </InputField>
+      </>
+    );
+  },
+};
+
+/**
+ * > Input field with disabled state
+ */
+export const InputFieldWithDisabledStateStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={{ icon: SearchIcon }}
+          before={{ icon: SearchIcon }}
+        >
+          <Input disabled />
+        </InputField>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          before="$AUD"
+          after="Text"
+        >
+          <Input disabled />
+        </InputField>
+      </>
+    );
+  },
+};
+
+/**
+ * > Input field with read-only state
+ */
+export const InputFieldWithReadOnlyStateStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          after={{ icon: SearchIcon }}
+          before={{ icon: SearchIcon }}
+        >
+          <Input readOnly />
+        </InputField>
+        <InputField
+          label="Text after"
+          hint="I am a hint"
+          supportingText="I am supporting text"
+          before="$AUD"
+          after="Text"
+        >
+          <Input readOnly />
+        </InputField>
+      </>
+    );
+  },
+};

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

@@ -0,0 +1,93 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Button, Input } from '../index.js';
+
+import { InputField } from './input-field.component.js';
+
+const meta: Meta<typeof InputField> = {
+  title: 'Example/InputField',
+  component: InputField,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField label="Label" hint="I am a hint" supportingText="I am supporting text" after={<Button>Check</Button>}>
+        <Input />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > SrOnlyLabel usage example
+ */
+export const SrOnlyLabelStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField
+        label="Label"
+        hideLabel
+        hint="I am a hint"
+        supportingText="I am supporting text"
+        after={<Button>Check</Button>}
+      >
+        <Input />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Combination usage example
+ */
+export const CombinationStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField
+        label="Label"
+        hint="I am a hint"
+        supportingText="I am supporting text"
+        after={<Button>Check</Button>}
+        before="$AUD"
+      >
+        <Input />
+      </InputField>
+    );
+  },
+};
+
+/**
+ * > Fieldset as tag
+ */
+export const WithFieldsetStory: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField
+        tag="fieldset"
+        label="Label"
+        hint="I am a hint"
+        supportingText="I am supporting text"
+        after={<Button>Check</Button>}
+        before="$AUD"
+      >
+        <Input />
+      </InputField>
+    );
+  },
+};

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'] },
+);