@westpac/ui 0.3.0 → 0.4.0

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: 'typography-body-10 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>>;
+}

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

@@ -0,0 +1,54 @@
+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, createContext, useContext } from 'react';
+import { Item } from './components/item/index.js';
+import { styles as listStyles } from './list.styles.js';
+import { getStateValues } from './list.utils.js';
+export const ListContext = createContext({});
+export function List({ assistiveText , className , children , look , nested , icon , type , spacing , ...props }) {
+    const state = useContext(ListContext);
+    const Tag = type === 'ordered' ? 'ol' : 'ul';
+    const stateValues = getStateValues({
+        look,
+        type,
+        spacing,
+        state,
+        icon
+    });
+    if (typeof nested !== 'number') {
+        nested = typeof state.nested === 'number' && state.nested + 1 || 0;
+    }
+    assistiveText = (type === 'tick' || type === 'cross') && nested === 0 ? assistiveText || `The following items are ${type === 'tick' ? 'ticked' : 'crossed'}` : undefined;
+    const styles = listStyles({
+        type: stateValues.type,
+        nested: typeof state.nested === 'number'
+    });
+    return React.createElement(ListContext.Provider, {
+        value: {
+            nested,
+            ...stateValues
+        }
+    }, React.createElement(Tag, _extends({
+        className: styles.base({
+            className
+        })
+    }, props, {
+        role: "list",
+        "aria-label": assistiveText
+    }), Children.map(children, (child, index)=>cloneElement(child, {
+            key: index
+        }))));
+}
+List.Item = Item;

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

@@ -0,0 +1,26 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { List } from './list.component.js';
+declare const meta: Meta<typeof List>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Type of list
+ */
+export declare const ListTypes: () => JSX.Element[];
+/**
+ * > Type of list
+ */
+export declare const ListLooks: () => JSX.Element[];
+/**
+ * Nested list
+ */
+export declare const NestedList: () => JSX.Element;
+/**
+ * List spacing
+ */
+export declare const ListSpacing: () => JSX.Element;

package/dist/components/list/list.stories.js

@@ -0,0 +1,85 @@
+import { AndroidIcon } from '../icon/index.js';
+import { List } from './list.component.js';
+const meta = {
+    title: 'Example/List',
+    component: List,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-2"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+const LOOKS = [
+    'primary',
+    'hero',
+    'neutral',
+    'success',
+    'danger',
+    'link'
+];
+const TYPES = [
+    'bullet',
+    'link',
+    'tick',
+    'cross',
+    'unstyled',
+    'icon',
+    'ordered'
+];
+export const DefaultStory = {
+    args: {
+        children: [
+            React.createElement(List.Item, null, "Styled list"),
+            React.createElement(List.Item, null, "Styled list"),
+            React.createElement(List.Item, null, "Styled list")
+        ]
+    }
+};
+export const ListTypes = ()=>TYPES.map((type)=>React.createElement("div", {
+            className: "mb-2",
+            key: type
+        }, React.createElement("h1", {
+            className: "typography-body-8"
+        }, type), React.createElement(List, {
+            type: type,
+            icon: type === 'icon' ? AndroidIcon : undefined
+        }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List, {
+            icon: type === 'link' ? AndroidIcon : undefined
+        }, React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list"), React.createElement(List.Item, null, "Styled ", type, " list")), React.createElement(List.Item, null, "Styled ", type, " list"))));
+export const ListLooks = ()=>LOOKS.map((look)=>React.createElement("div", {
+            className: "mb-2",
+            key: look
+        }, React.createElement("h1", {
+            className: "typography-body-8"
+        }, look), React.createElement(List, {
+            look: look,
+            type: "bullet"
+        }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List, {
+            icon: look === 'link' ? AndroidIcon : undefined
+        }, React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list"), React.createElement(List.Item, null, "Styled ", look, " list")), React.createElement(List.Item, null, "Styled ", look, " list"))));
+export const NestedList = ()=>React.createElement("div", null, React.createElement(List, {
+        type: "bullet",
+        assistiveText: "test"
+    }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, {
+        nested: 0
+    }, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List, null, React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"), React.createElement(List.Item, null, "Styled list"))))));
+export const ListSpacing = ()=>React.createElement("div", null, React.createElement("h1", {
+        className: "typography-body-10 mb-2"
+    }, "Medium"), React.createElement(List, {
+        type: "bullet",
+        className: "mb-4",
+        spacing: "medium"
+    }, React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list")), React.createElement("h1", {
+        className: "typography-body-10 mb-2"
+    }, "Large"), React.createElement(List, {
+        type: "bullet",
+        className: "mb-4",
+        spacing: "large"
+    }, React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list"), React.createElement(List.Item, null, "Styled bullet list")));