@westpac/ui 0.3.0 → 0.5.0

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/link.component.d.ts

@@ -6,7 +6,7 @@ export declare const Link: React.ForwardRefExoticComponent<{
     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" | "medium" | "large" | "xlarge" | "xsmall" | 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.stories.js

@@ -12,7 +12,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     }
 };
 export default meta;

package/dist/components/link/link.styles.js

@@ -1,7 +1,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'
@@ -9,12 +9,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/dist/components/list/components/item/index.d.ts

@@ -0,0 +1,2 @@
+export { Item } from './item.component.js';
+export { type ItemProps } from './item.types.js';

package/dist/components/list/components/item/index.js

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

package/dist/components/list/components/item/item.component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type ItemProps } from './item.types.js';
+export declare function BaseItem({ className, children, href, look, type, spacing, icon, ...props }: ItemProps, ref: any): JSX.Element;
+export declare const Item: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    icon?: ((props: import("../../../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+    look?: "link" | "success" | "danger" | "hero" | "neutral" | "primary" | undefined;
+    nested?: number | undefined;
+    spacing?: "medium" | "large" | undefined;
+    type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;
+} & React.HTMLAttributes<Element> & React.RefAttributes<unknown>>;

package/dist/components/list/components/item/item.component.js

@@ -0,0 +1,68 @@
+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, useContext } from 'react';
+import { ListContext } from '../../list.component.js';
+import { getStateValues } from '../../list.utils.js';
+import { styles as itemStyles } from './item.styles.js';
+export function BaseItem({ className , children , href , look , type , spacing , icon , ...props }, ref) {
+    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 React.createElement(Icon, {
+                size: "small",
+                className: styles.bullet(),
+                color: look,
+                "data-testid": type
+            });
+        }
+        return React.createElement("div", {
+            className: styles.bullet(),
+            "data-testid": type
+        });
+    };
+    return React.createElement("div", {
+        className: styles.wrapper(),
+        key: state.nested
+    }, bulletToRender(), React.createElement("li", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), type === 'link' ? React.createElement("a", {
+        href: href,
+        className: styles.link(),
+        ref: ref
+    }, children) : children));
+}
+export const Item = forwardRef(BaseItem);

package/dist/components/list/components/item/item.styles.d.ts

@@ -0,0 +1,137 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    icon: {
+        true: {};
+    };
+    spacing: {
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+    look: {
+        primary: {
+            bullet: string;
+        };
+        hero: {
+            bullet: string;
+        };
+        neutral: {
+            bullet: string;
+        };
+        success: {
+            bullet: string;
+        };
+        danger: {
+            bullet: string;
+        };
+        link: {
+            bullet: string;
+        };
+    };
+    type: {
+        bullet: {
+            bullet: string;
+        };
+        link: {
+            bullet: string;
+        };
+        tick: {
+            bullet: string;
+        };
+        cross: {
+            bullet: string;
+        };
+        unstyled: {
+            base: string;
+            bullet: string;
+        };
+        icon: {
+            base: string;
+            bullet: string;
+        };
+        ordered: {
+            base: string;
+        };
+    };
+    nested: {
+        true: {
+            bullet: string;
+        };
+    };
+}, {
+    base: string;
+    bullet: string;
+    link: string;
+    wrapper: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    icon: {
+        true: {};
+    };
+    spacing: {
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+    look: {
+        primary: {
+            bullet: string;
+        };
+        hero: {
+            bullet: string;
+        };
+        neutral: {
+            bullet: string;
+        };
+        success: {
+            bullet: string;
+        };
+        danger: {
+            bullet: string;
+        };
+        link: {
+            bullet: string;
+        };
+    };
+    type: {
+        bullet: {
+            bullet: string;
+        };
+        link: {
+            bullet: string;
+        };
+        tick: {
+            bullet: string;
+        };
+        cross: {
+            bullet: string;
+        };
+        unstyled: {
+            base: string;
+            bullet: string;
+        };
+        icon: {
+            base: string;
+            bullet: string;
+        };
+        ordered: {
+            base: string;
+        };
+    };
+    nested: {
+        true: {
+            bullet: string;
+        };
+    };
+}, {
+    base: string;
+    bullet: string;
+    link: string;
+    wrapper: string;
+}>;

package/dist/components/list/components/item/item.styles.js

@@ -0,0 +1,90 @@
+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/dist/components/list/components/item/item.types.d.ts

@@ -0,0 +1,28 @@
+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/dist/components/list/components/item/item.types.js

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

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

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

package/dist/components/list/index.js

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ListContextState, type ListProps } from './list.types.js';
+export declare const ListContext: React.Context<ListContextState>;
+export declare function List({ assistiveText, className, children, look, nested, icon, type, spacing, ...props }: ListProps): JSX.Element;
+export declare namespace List {
+    var Item: React.ForwardRefExoticComponent<{
+        href?: string | undefined;
+        icon?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+        look?: "link" | "success" | "danger" | "hero" | "neutral" | "primary" | undefined;
+        nested?: number | undefined;
+        spacing?: "medium" | "large" | undefined;
+        type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;
+    } & React.HTMLAttributes<Element> & React.RefAttributes<unknown>>;
+}