@westpac/ui 0.3.0 → 0.4.0

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