@westpac/ui 0.2.1 → 0.4.0

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

@@ -0,0 +1,64 @@
+import { Button, Input } from '../index.js';
+import { InputField } from './input-field.component.js';
+const meta = {
+    title: 'Example/InputField',
+    component: InputField,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'padded'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Label",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: React.createElement(Button, null, "Check")
+        }, React.createElement(Input, null));
+    }
+};
+export const SrOnlyLabelStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Label",
+            hideLabel: true,
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: React.createElement(Button, null, "Check")
+        }, React.createElement(Input, null));
+    }
+};
+export const CombinationStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Label",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: React.createElement(Button, null, "Check"),
+            before: "$AUD"
+        }, React.createElement(Input, null));
+    }
+};
+export const WithFieldsetStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            tag: "fieldset",
+            label: "Label",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: React.createElement(Button, null, "Check"),
+            before: "$AUD"
+        }, React.createElement(Input, null));
+    }
+};

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

@@ -0,0 +1,37 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    before: {
+        true: string;
+        false: string;
+    };
+    after: {
+        true: string;
+        false: string;
+    };
+    beforeInset: {
+        true: string;
+        false: string;
+    };
+    afterInset: {
+        true: string;
+        false: string;
+    };
+}, undefined, "group m-0 mb-5 border-none p-0", {
+    responsiveVariants: string[];
+}, {
+    before: {
+        true: string;
+        false: string;
+    };
+    after: {
+        true: string;
+        false: string;
+    };
+    beforeInset: {
+        true: string;
+        false: string;
+    };
+    afterInset: {
+        true: string;
+        false: string;
+    };
+}, undefined>;

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

@@ -0,0 +1,52 @@
+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/dist/components/input-field/input-field.type.stories.d.ts

@@ -0,0 +1,37 @@
+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>;
+/**
+ * > Text Beforoe story example
+ */
+export declare const TextBeforeStory: Story;
+/**
+ * > Text Beforoe story example
+ */
+export declare const TextAfterStory: Story;
+/**
+ * > Text After and Beforoe story example
+ */
+export declare const TextAfterAndBeforeStory: Story;
+/**
+ * > Textarea
+ */
+export declare const IconAddOnStory: Story;
+/**
+ * > Icons in buttons
+ */
+export declare const IconInButtonsOnStory: Story;
+/**
+ * > Button add ons
+ */
+export declare const ButtonAddOnStory: Story;
+/**
+ * > Select add ons
+ */
+export declare const SelectAddOnStory: Story;
+/**
+ * > Textarea
+ */
+export declare const TextAreaStory: Story;

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

@@ -0,0 +1,189 @@
+import { SearchIcon, VisibilityIcon } from '../icon/index.js';
+import { Button, Input, Select, Textarea } from '../index.js';
+import { InputField } from './input-field.component.js';
+const meta = {
+    title: 'Example/InputField/Types',
+    component: InputField,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'padded'
+    }
+};
+export default meta;
+export const TextBeforeStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Text before",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            before: "$AUD"
+        }, React.createElement(Input, null));
+    }
+};
+export const TextAfterStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Text after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: "Text"
+        }, React.createElement(Input, null));
+    }
+};
+export const TextAfterAndBeforeStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Text after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            before: "$AUD",
+            after: "Text"
+        }, React.createElement(Input, null));
+    }
+};
+export const IconAddOnStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, React.createElement(InputField, {
+            label: "Icon before",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            before: {
+                icon: SearchIcon
+            }
+        }, React.createElement(Input, null)), React.createElement(InputField, {
+            label: "Icon after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: {
+                icon: SearchIcon
+            }
+        }, React.createElement(Input, null)), React.createElement(InputField, {
+            label: "Icon after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: {
+                icon: SearchIcon
+            },
+            before: {
+                icon: SearchIcon
+            }
+        }, React.createElement(Input, null)));
+    }
+};
+export const IconInButtonsOnStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, React.createElement(InputField, {
+            label: "Icon button before",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            before: {
+                inset: true,
+                element: React.createElement(Button, {
+                    look: "link",
+                    iconAfter: VisibilityIcon,
+                    iconColor: "muted"
+                })
+            }
+        }, React.createElement(Input, null)), React.createElement(InputField, {
+            label: "Icon button after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: {
+                inset: true,
+                element: React.createElement(Button, {
+                    look: "link",
+                    iconAfter: VisibilityIcon,
+                    iconColor: "muted"
+                })
+            }
+        }, React.createElement(Input, null)), React.createElement(InputField, {
+            label: "Icon button before and after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: {
+                inset: true,
+                element: React.createElement(Button, {
+                    look: "link",
+                    iconAfter: VisibilityIcon,
+                    iconColor: "muted"
+                })
+            },
+            before: {
+                inset: true,
+                element: React.createElement(Button, {
+                    look: "link",
+                    iconAfter: VisibilityIcon,
+                    iconColor: "muted"
+                })
+            }
+        }, React.createElement(Input, null)));
+    }
+};
+export const ButtonAddOnStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, React.createElement(InputField, {
+            label: "Button before",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            before: React.createElement(Button, null, "Check")
+        }, React.createElement(Input, null)), React.createElement(InputField, {
+            label: "Button after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: React.createElement(Button, null, "Check")
+        }, React.createElement(Input, null)), React.createElement(InputField, {
+            label: "Button before and after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: React.createElement(Button, null, "Check"),
+            before: React.createElement(Button, null, "Check")
+        }, React.createElement(Input, null)), React.createElement(InputField, {
+            label: "Primary button after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: React.createElement(Button, {
+                look: "primary"
+            }, "Check")
+        }, React.createElement(Input, null)), React.createElement(InputField, {
+            label: "Faint button after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            after: React.createElement(Button, {
+                look: "faint"
+            }, "Check")
+        }, React.createElement(Input, null)));
+    }
+};
+export const SelectAddOnStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Select",
+            hint: "I am a hint",
+            supportingText: "I am supporting text",
+            before: React.createElement(Select, null, React.createElement("option", null, "Select")),
+            after: React.createElement(Select, null, React.createElement("option", null, "Select"))
+        }, React.createElement(Input, null));
+    }
+};
+export const TextAreaStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(InputField, {
+            label: "Text after",
+            hint: "I am a hint",
+            supportingText: "I am supporting text"
+        }, React.createElement(Textarea, null));
+    }
+};

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

@@ -0,0 +1,65 @@
+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
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & Omit<VariantProps<typeof styles>, 'before' | 'after'>;

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

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

package/dist/components/link/index.d.ts

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

package/dist/components/link/index.js

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

package/dist/components/link/link.component.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type LinkProps } from './link.types.js';
+export declare function BaseLink({ className, children, href, iconBefore: IconBefore, iconAfter: IconAfter, iconSize, target, type, underline, ...props }: LinkProps, propRef: any): JSX.Element;
+export declare const Link: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string | undefined;
+    iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+    iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+    iconSize?: "small" | "xsmall" | "medium" | "large" | "xlarge" | undefined;
+    type?: "inline" | "standalone" | undefined;
+    underline?: boolean | undefined;
+} & Omit<import("react-aria").AriaLinkOptions, "isDisabled" | "elementType"> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<unknown>>;

package/dist/components/link/link.component.js

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

package/dist/components/link/link.stories.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Link } from './link.component.js';
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > 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 declare const StandaloneLink: () => JSX.Element;
+/**
+ * > Inline link example
+ */
+export declare const InlineLink: () => JSX.Element;
+/**
+ * > example of icon sizes
+ */
+export declare const IconSizes: () => JSX.Element;

package/dist/components/link/link.stories.js

@@ -0,0 +1,98 @@
+import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
+import { Link } from './link.component.js';
+const meta = {
+    title: 'Example/Link',
+    component: Link,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-1"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: "Look, I'm a default link",
+        href: '#'
+    }
+};
+const SIZES = [
+    'xsmall',
+    'small',
+    'medium',
+    'large',
+    'xlarge'
+];
+export const StandaloneLink = ()=>React.createElement("div", {
+        className: "space-y-1 pl-1"
+    }, React.createElement("h1", {
+        className: "font-bold"
+    }, "Default"), React.createElement(Link, {
+        href: "#"
+    }, "Look I'm a standalone link"), React.createElement("h1", {
+        className: "font-bold"
+    }, "Icon Before override"), React.createElement(Link, {
+        href: "#",
+        iconBefore: PdfFileIcon
+    }, "Look I'm a standalone link"), React.createElement("h1", {
+        className: "font-bold"
+    }, "Icon Before override"), React.createElement(Link, {
+        href: "#",
+        iconAfter: ArrowRightIcon
+    }, "Look I'm a standalone link"));
+export const InlineLink = ()=>React.createElement("div", {
+        className: "space-y-1 p-1"
+    }, React.createElement("p", {
+        className: "typography-body-10"
+    }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
+        href: "#",
+        type: "inline"
+    }, "look, I'm an inline 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?"), React.createElement("p", {
+        className: "typography-body-10"
+    }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
+        href: "#",
+        type: "inline",
+        underline: false
+    }, "look, I'm an inline link with no underline"), ' ', "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?"), React.createElement("p", {
+        className: "typography-body-10"
+    }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
+        href: "#",
+        type: "inline",
+        iconBefore: PdfFileIcon
+    }, "look, I'm an inline 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?"), React.createElement("p", {
+        className: "typography-body-10"
+    }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
+        href: "#",
+        type: "inline",
+        iconAfter: PdfFileIcon
+    }, "look, I'm an inline 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?"), React.createElement(Link, {
+        href: "#",
+        type: "inline",
+        iconBefore: PdfFileIcon
+    }, "look, I'm an inline link"));
+export const IconSizes = ()=>React.createElement("div", {
+        className: "space-y-1 pl-1"
+    }, SIZES.map((size)=>React.createElement("div", {
+            key: size
+        }, React.createElement("h1", {
+            className: "font-bold"
+        }, size), React.createElement(Link, {
+            href: "#",
+            iconSize: size,
+            iconBefore: PdfFileIcon,
+            iconAfter: PdfFileIcon
+        }, "Look I'm a standalone link"), React.createElement("p", {
+            className: "typography-body-10"
+        }, "Lorem ipsum dolor", ' ', React.createElement(Link, {
+            href: "#",
+            type: "inline",
+            iconSize: size,
+            iconBefore: PdfFileIcon,
+            iconAfter: PdfFileIcon
+        }, "look, I'm an inline 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?"))));

package/dist/components/link/link.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    type: {
+        inline: {
+            base: string;
+            iconBefore: string;
+            iconAfter: string;
+        };
+        standalone: {
+            base: string;
+        };
+    };
+    underline: {
+        true: string;
+    };
+}, {
+    base: string;
+    text: string;
+    iconBefore: string;
+    iconAfter: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    type: {
+        inline: {
+            base: string;
+            iconBefore: string;
+            iconAfter: string;
+        };
+        standalone: {
+            base: string;
+        };
+    };
+    underline: {
+        true: string;
+    };
+}, {
+    base: string;
+    text: string;
+    iconBefore: string;
+    iconAfter: string;
+}>;