@westpac/ui 0.2.1 → 0.4.0

package/dist/components/input-field/components/index.js

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

package/dist/components/input-field/components/supporting-text/index.d.ts

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

package/dist/components/input-field/components/supporting-text/index.js

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

package/dist/components/input-field/components/supporting-text/supporting-text.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type SupportingTextProps } from './supporting-text.types.js';
+export declare function SupportingText({ className, tag: Tag, children, ...props }: SupportingTextProps): JSX.Element;

package/dist/components/input-field/components/supporting-text/supporting-text.component.js

@@ -0,0 +1,23 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles } from './supporting-text.styles.js';
+export function SupportingText({ className , tag: Tag = 'p' , children , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

package/dist/components/input-field/components/supporting-text/supporting-text.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "mt-1 text-xs text-muted"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "mt-1 text-xs text-muted">;
+    } | undefined;
+} | {}, undefined, "mt-1 text-xs text-muted", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "mt-1 text-xs text-muted"> | {}, undefined>;

package/dist/components/input-field/components/supporting-text/supporting-text.styles.js

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

package/dist/components/input-field/components/supporting-text/supporting-text.types.d.ts

@@ -0,0 +1,9 @@
+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/dist/components/input-field/components/supporting-text/supporting-text.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/input-field/index.d.ts

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

package/dist/components/input-field/index.js

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

package/dist/components/input-field/input-field.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type InputFieldProps } from './input-field.types.js';
+export declare function InputField({ label, hideLabel, size, hint, errorMessage, supportingText, instanceId, after, before, children, tag: Tag, ...props }: InputFieldProps): JSX.Element;

package/dist/components/input-field/input-field.component.js

@@ -0,0 +1,132 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { Children, 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';
+export function InputField({ label , hideLabel , size ='medium' , hint , errorMessage , supportingText , instanceId , after , before , children , tag: Tag = 'div' , ...props }) {
+    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,
+            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,
+            icon: undefined,
+            inset: false
+        };
+    }, [
+        after
+    ]);
+    const renderChildren = useCallback(()=>{
+        return Children.map(children, (child)=>{
+            if (isValidElement(child)) {
+                return cloneElement(child, {
+                    size,
+                    id,
+                    'aria-describedby': ariaDescribedByValue
+                });
+            }
+        });
+    }, [
+        children,
+        ariaDescribedByValue
+    ]);
+    const isFieldset = useMemo(()=>Tag === 'fieldset', [
+        Tag
+    ]);
+    return React.createElement(Tag, _extends({
+        className: styles({
+            before: !!before,
+            after: !!after,
+            afterInset,
+            beforeInset
+        })
+    }, props), label && React.createElement(Form.Label, _extends({
+        srOnly: hideLabel,
+        tag: isFieldset ? 'legend' : 'label'
+    }, !isFieldset && {
+        htmlFor: id
+    }), label), hint && React.createElement(Form.Hint, {
+        id: `${id}-hint`
+    }, hint), errorMessage && React.createElement(Form.ErrorMessage, {
+        id: `${id}-error`,
+        message: errorMessage
+    }), React.createElement("div", {
+        className: "relative flex"
+    }, before && React.createElement(InputAddOn, {
+        position: "before",
+        size: size,
+        inset: beforeInset,
+        icon: beforeIcon,
+        id: id
+    }, beforeElement), renderChildren(), after && React.createElement(InputAddOn, {
+        position: "after",
+        size: size,
+        inset: afterInset,
+        icon: afterIcon,
+        id: id
+    }, afterElement)), supportingText && React.createElement(SupportingText, {
+        id: `${id}-supporting-text`
+    }, supportingText));
+}

package/dist/components/input-field/input-field.scenarios.stories.d.ts

@@ -0,0 +1,26 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { InputField } from './input-field.component.js';
+declare const meta: Meta<typeof InputField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Number of dependents
+ */
+export declare const NumberStepperStory: Story;
+/**
+ * > Masked characters in field
+ */
+export declare const MaskedCharactersStory: Story;
+/**
+ * > Search with left icon and clear button
+ */
+export declare const SearchWithLeftIconAndClearButtonStory: Story;
+/**
+ * > Inline field validation flow
+ */
+export declare const InlineFieldValidationFlowStory: Story;
+/**
+ * > Search Currency and frequency
+ */
+export declare const CurrencyAndFrequencyStory: Story;
+export declare const TextareaWithCharacterCountStory: Story;

package/dist/components/input-field/input-field.scenarios.stories.js

@@ -0,0 +1,152 @@
+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 = {
+    title: 'Example/InputField/Scenarios',
+    component: InputField,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'padded'
+    }
+};
+export default meta;
+export const NumberStepperStory = {
+    args: {},
+    render: ()=>{
+        const [numberOfDependents, setNumberOfDependents] = useState(0);
+        const minusButton = useCallback(()=>setNumberOfDependents((state)=>--state), []);
+        const plusButton = useCallback(()=>setNumberOfDependents((state)=>++state), []);
+        return React.createElement(InputField, {
+            label: "Number of dependents",
+            before: React.createElement(Button, {
+                onClick: minusButton
+            }, "-"),
+            after: React.createElement(Button, {
+                onClick: plusButton
+            }, "+")
+        }, React.createElement(Input, {
+            value: numberOfDependents
+        }));
+    }
+};
+export const MaskedCharactersStory = {
+    args: {},
+    render: ()=>{
+        const [typeInput, setTypeInput] = useState('password');
+        const toggleType = useCallback(()=>setTypeInput((state)=>state === 'password' ? 'text' : 'password'), []);
+        return React.createElement(InputField, {
+            label: "Password",
+            after: {
+                inset: true,
+                element: React.createElement(Button, {
+                    onClick: toggleType,
+                    look: "link",
+                    iconAfter: typeInput === 'password' ? VisibilityIcon : VisibilityOffIcon,
+                    iconColor: "muted"
+                })
+            }
+        }, React.createElement(Input, {
+            type: typeInput
+        }));
+    }
+};
+export const SearchWithLeftIconAndClearButtonStory = {
+    args: {},
+    render: ()=>{
+        const [inputValue, setInputValue] = useState('');
+        const clearInput = useCallback(()=>setInputValue(''), []);
+        return React.createElement(InputField, {
+            label: "Search",
+            before: {
+                icon: SearchIcon
+            },
+            after: {
+                inset: true,
+                element: React.createElement(Button, {
+                    onClick: clearInput,
+                    look: "link",
+                    iconAfter: CloseIcon,
+                    iconColor: "muted"
+                })
+            }
+        }, React.createElement(Input, {
+            onChange: ({ target: { value  }  })=>setInputValue(value),
+            value: inputValue
+        }));
+    }
+};
+export const InlineFieldValidationFlowStory = {
+    args: {},
+    render: ()=>{
+        const [inputValue, setInputValue] = useState('');
+        const [validating, setValidating] = useState(false);
+        const [error, setError] = useState();
+        const validate = useCallback(()=>{
+            setValidating(true);
+            setError(undefined);
+            setTimeout(()=>{
+                if (inputValue !== '647453') {
+                    setError('Routing number not found');
+                }
+                setValidating(false);
+            }, 1500);
+        }, [
+            inputValue
+        ]);
+        return React.createElement(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
+            } : React.createElement(Button, {
+                onClick: validate
+            }, "Check"),
+            errorMessage: error
+        }, React.createElement(Input, {
+            invalid: !!error,
+            onChange: ({ target: { value  }  })=>setInputValue(value),
+            value: inputValue
+        }));
+    }
+};
+export const CurrencyAndFrequencyStory = {
+    args: {},
+    render: ()=>{
+        const [inputValue, setInputValue] = useState('');
+        return React.createElement(InputField, {
+            label: "Salary",
+            before: "$AUD",
+            after: React.createElement(Select, null, React.createElement("option", null, "Select"), React.createElement("option", null, "Per Year"), React.createElement("option", null, "Per Month"), React.createElement("option", null, "Per Week"))
+        }, React.createElement(Input, {
+            onChange: ({ target: { value  }  })=>setInputValue(value),
+            value: inputValue
+        }));
+    }
+};
+const MAX_LENGTH = 250;
+export const TextareaWithCharacterCountStory = {
+    args: {},
+    render: ()=>{
+        const [inputValue, setInputValue] = useState('');
+        const counterText = useMemo(()=>{
+            const lengthLeft = MAX_LENGTH - inputValue.length;
+            return `${lengthLeft} remaining`;
+        }, [
+            inputValue
+        ]);
+        return React.createElement(InputField, {
+            label: "Comments",
+            hint: "I am a hint",
+            supportingText: counterText
+        }, React.createElement(Textarea, {
+            onChange: ({ target: { value  }  })=>setInputValue(value),
+            value: inputValue
+        }));
+    }
+};

package/dist/components/input-field/input-field.sizes.stories.d.ts

@@ -0,0 +1,9 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { InputField } from './input-field.component.js';
+declare const meta: Meta<typeof InputField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Input field with different sizes
+ */
+export declare const InputFieldWithDifferentSizesStory: Story;

package/dist/components/input-field/input-field.sizes.stories.js

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

package/dist/components/input-field/input-field.state.stories.d.ts

@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { InputField } from './input-field.component.js';
+declare const meta: Meta<typeof InputField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Invalid with error message/s
+ */
+export declare const InvalidWithErrorMessagesStory: Story;
+/**
+ * > Input field with disabled state
+ */
+export declare const InputFieldWithDisabledStateStory: Story;
+/**
+ * > Input field with read-only state
+ */
+export declare const InputFieldWithReadOnlyStateStory: Story;

package/dist/components/input-field/input-field.state.stories.js

@@ -0,0 +1,130 @@
+import { SearchIcon } from '../icon/index.js';
+import { Button, Input, Select } from '../index.js';
+import { InputField } from './input-field.component.js';
+const meta = {
+    title: 'Example/InputField/State',
+    component: InputField,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'padded'
+    }
+};
+export default meta;
+export const InvalidWithErrorMessagesStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, React.createElement(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: React.createElement(Button, null, "Check")
+        }, React.createElement(Input, {
+            invalid: true
+        })), React.createElement(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: React.createElement(Button, null, "Check"),
+            before: React.createElement(Button, null, "Check")
+        }, React.createElement(Input, {
+            invalid: true
+        })), React.createElement(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
+            }
+        }, React.createElement(Input, {
+            invalid: true
+        })), React.createElement(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"
+        }, React.createElement(Input, {
+            invalid: true
+        })), React.createElement(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: React.createElement(Select, {
+                invalid: true
+            }, React.createElement("option", null, "Select")),
+            before: React.createElement(Select, {
+                invalid: true
+            }, React.createElement("option", null, "Select"))
+        }, React.createElement(Input, {
+            invalid: true
+        })));
+    }
+};
+export const InputFieldWithDisabledStateStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, React.createElement(InputField, {
+            label: "Text after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: {
+                icon: SearchIcon
+            },
+            before: {
+                icon: SearchIcon
+            }
+        }, React.createElement(Input, {
+            disabled: true
+        })), React.createElement(InputField, {
+            label: "Text after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            before: "$AUD",
+            after: "Text"
+        }, React.createElement(Input, {
+            disabled: true
+        })));
+    }
+};
+export const InputFieldWithReadOnlyStateStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, React.createElement(InputField, {
+            label: "Text after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: {
+                icon: SearchIcon
+            },
+            before: {
+                icon: SearchIcon
+            }
+        }, React.createElement(Input, {
+            readOnly: true
+        })), React.createElement(InputField, {
+            label: "Text after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            before: "$AUD",
+            after: "Text"
+        }, React.createElement(Input, {
+            readOnly: true
+        })));
+    }
+};

package/dist/components/input-field/input-field.stories.d.ts

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { InputField } from './input-field.component.js';
+declare const meta: Meta<typeof InputField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > SrOnlyLabel usage example
+ */
+export declare const SrOnlyLabelStory: Story;
+/**
+ * > Combination usage example
+ */
+export declare const CombinationStory: Story;
+/**
+ * > Fieldset as tag
+ */
+export declare const WithFieldsetStory: Story;