@westpac/ui 0.13.0 → 0.14.0

package/dist/components/header/header.component.js

@@ -0,0 +1,105 @@
+'use client';
+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 throttle from 'lodash.throttle';
+import React, { useEffect, useState } from 'react';
+import { ArrowLeftIcon, HamburgerMenuIcon } from '../icon/index.js';
+import { Button, SkipLink } from '../index.js';
+import { BOMMultibrandLargeLogo, BOMMultibrandSmallLogo, BSAMultibrandLargeLogo, BSAMultibrandSmallLogo, RAMSMultibrandLargeLogo, RAMSMultibrandSmallLogo, STGMultibrandLargeLogo, STGMultibrandSmallLogo, WBCMultibrandLargeLogo, WBCMultibrandSmallLogo, WBGMultibrandLargeLogo, WBGMultibrandSmallLogo } from '../symbol/index.js';
+import { styles as headerStyles } from './header.styles.js';
+const logoMap = {
+    wbc: {
+        logo: (props)=>React.createElement(WBCMultibrandSmallLogo, _extends({}, props)),
+        largeLogo: (props)=>React.createElement(WBCMultibrandLargeLogo, _extends({}, props))
+    },
+    stg: {
+        logo: (props)=>React.createElement(STGMultibrandSmallLogo, _extends({}, props)),
+        largeLogo: (props)=>React.createElement(STGMultibrandLargeLogo, _extends({}, props))
+    },
+    bom: {
+        logo: (props)=>React.createElement(BOMMultibrandSmallLogo, _extends({}, props)),
+        largeLogo: (props)=>React.createElement(BOMMultibrandLargeLogo, _extends({}, props))
+    },
+    bsa: {
+        logo: (props)=>React.createElement(BSAMultibrandSmallLogo, _extends({}, props)),
+        largeLogo: (props)=>React.createElement(BSAMultibrandLargeLogo, _extends({}, props))
+    },
+    wbg: {
+        logo: (props)=>React.createElement(WBGMultibrandSmallLogo, _extends({}, props)),
+        largeLogo: (props)=>React.createElement(WBGMultibrandLargeLogo, _extends({}, props))
+    },
+    rams: {
+        logo: (props)=>React.createElement(RAMSMultibrandSmallLogo, _extends({}, props)),
+        largeLogo: (props)=>React.createElement(RAMSMultibrandLargeLogo, _extends({}, props))
+    }
+};
+export function Header({ brand , className , children , fixed =false , leftIcon , leftOnClick , leftAssistiveText , logoAssistiveText , logoLink ='#' , logoCenter =false , logoOnClick , skipLinkContent ='Skip to main content' , skipToContentId , ...props }) {
+    const [scrolled, setScrolled] = useState(false);
+    const handleScroll = throttle(()=>{
+        let hasScrolled = false;
+        if (window.scrollY > 5) {
+            hasScrolled = true;
+        }
+        setScrolled(hasScrolled);
+    }, 10);
+    useEffect(()=>{
+        if (fixed) window.addEventListener('scroll', handleScroll);
+        return ()=>{
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    const logoAlignment = logoCenter ? 'center' : 'left';
+    const SmallLogo = logoMap[brand].logo;
+    const LargeLogo = logoMap[brand].largeLogo;
+    const ButtonIcon = leftIcon === 'arrow' ? ArrowLeftIcon : HamburgerMenuIcon;
+    const styles = headerStyles({
+        logoCenter,
+        fixed,
+        leftIcon,
+        scrolled
+    });
+    return React.createElement("header", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), React.createElement("div", {
+        className: styles.inner()
+    }, skipToContentId && React.createElement(SkipLink, {
+        href: skipToContentId
+    }, skipLinkContent), leftIcon && React.createElement("div", {
+        className: styles.leftContent()
+    }, React.createElement(Button, {
+        look: "link",
+        iconAfter: ButtonIcon,
+        size: "large",
+        onClick: leftOnClick,
+        "aria-label": leftAssistiveText,
+        className: styles.leftButton(),
+        iconColor: "text"
+    })), React.createElement("a", {
+        href: logoLink,
+        className: styles.logoLink(),
+        onClick: logoOnClick
+    }, React.createElement(SmallLogo, {
+        align: logoAlignment,
+        "aria-label": logoAssistiveText,
+        className: styles.smallLogo()
+    }), React.createElement(LargeLogo, {
+        "aria-label": logoAssistiveText,
+        className: styles.largeLogo()
+    })), children && React.createElement("div", {
+        className: styles.rightContent()
+    }, children)));
+}

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

@@ -0,0 +1,79 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    logoCenter: {
+        true: {
+            logoLink: string;
+            smallLogo: string;
+        };
+        false: {
+            logoLink: string;
+        };
+    };
+    fixed: {
+        true: {
+            base: string;
+            inner: string;
+        };
+    };
+    leftIcon: {
+        arrow: {
+            leftButton: string;
+        };
+        hamburger: {
+            leftButton: string;
+        };
+    };
+    scrolled: {
+        true: {
+            inner: string;
+        };
+    };
+}, {
+    base: string;
+    inner: string;
+    logoLink: string;
+    smallLogo: string;
+    largeLogo: string;
+    leftContent: string;
+    leftButton: string;
+    rightContent: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    logoCenter: {
+        true: {
+            logoLink: string;
+            smallLogo: string;
+        };
+        false: {
+            logoLink: string;
+        };
+    };
+    fixed: {
+        true: {
+            base: string;
+            inner: string;
+        };
+    };
+    leftIcon: {
+        arrow: {
+            leftButton: string;
+        };
+        hamburger: {
+            leftButton: string;
+        };
+    };
+    scrolled: {
+        true: {
+            inner: string;
+        };
+    };
+}, {
+    base: string;
+    inner: string;
+    logoLink: string;
+    smallLogo: string;
+    largeLogo: string;
+    leftContent: string;
+    leftButton: string;
+    rightContent: string;
+}>;

package/dist/components/header/header.styles.js

@@ -0,0 +1,60 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'flex-none bg-white',
+        inner: 'mx-auto flex w-full flex-1 border border-x-0 border-t-0 border-b-[#E8E8ED] bg-white text-left transition-[border-bottom-width] duration-200 will-change-[border-bottom-width] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] max-sm:h-9 max-sm:px-2 sm:h-11 sm:px-4',
+        logoLink: 'inline-flex items-center focus-visible:focus-outline',
+        smallLogo: 'sm:hidden',
+        largeLogo: 'max-sm:hidden',
+        leftContent: 'flex items-center',
+        leftButton: 'my-1 border-r-[1px] border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
+        rightContent: 'ml-auto flex items-center'
+    },
+    variants: {
+        logoCenter: {
+            true: {
+                logoLink: 'max-sm:absolute max-sm:left-1/2 max-sm:z-0 max-sm:translate-x-[-50%] max-sm:translate-y-[15%] sm:relative',
+                smallLogo: ''
+            },
+            false: {
+                logoLink: 'relative'
+            }
+        },
+        fixed: {
+            true: {
+                base: '',
+                inner: 'fixed inset-x-0 top-0 z-10'
+            }
+        },
+        leftIcon: {
+            arrow: {
+                leftButton: ''
+            },
+            hamburger: {
+                leftButton: 'sm:hidden'
+            }
+        },
+        scrolled: {
+            true: {
+                inner: ''
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            fixed: true,
+            scrolled: true,
+            className: {
+                inner: 'border-b-0 after:opacity-100'
+            }
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/header/header.types.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import { BrandKey } from '../../tailwind/index.js';
+export type HeaderProps = {
+    /**
+     * Icon for brand
+     */
+    brand: Exclude<BrandKey, 'btfg'>;
+    /**
+     * Enable fixed header
+     */
+    fixed?: boolean;
+    /**
+     * Visually hidden text for left button
+     */
+    leftAssistiveText?: string;
+    /**
+     * Icon type for left button either 'arrow' or 'hamburger'
+     */
+    leftIcon?: 'arrow' | 'hamburger';
+    /**
+     * On click handler for left button
+     */
+    leftOnClick?: () => void;
+    /**
+     * Aria-label for the logo
+     */
+    logoAssistiveText?: string;
+    /**
+     * Center logo at xs breakpoint
+     */
+    logoCenter?: boolean;
+    /**
+     * Link for logo
+     */
+    logoLink?: string;
+    /**
+     * On click handler for logo
+     */
+    logoOnClick?: () => void;
+    /**
+     * Text content for skip link
+     */
+    skipLinkContent?: string;
+    /**
+     * The id to the pages main content
+     */
+    skipToContentId?: string;
+} & HTMLAttributes<Element>;

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

@@ -0,0 +1,2 @@
+import { type HeadingProps } from './heading.types.js';
+export declare function Heading({ className, tag, brandHeading, size, children, uppercase, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/heading/heading.component.js

@@ -0,0 +1,39 @@
+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 './heading.styles.js';
+export function Heading({ className , tag , brandHeading , size , children , uppercase , ...props }) {
+    const sizeToTag = {
+        1: 'h1',
+        2: 'h2',
+        3: 'h3',
+        4: 'h4',
+        5: 'h5',
+        6: 'h6',
+        7: 'h6',
+        8: 'h6',
+        9: 'h6',
+        10: 'h6'
+    };
+    const Tag = typeof size === 'number' && !tag ? sizeToTag[size] : tag ? tag : 'h6';
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className,
+            brandHeading,
+            size,
+            uppercase
+        })
+    }, props), children);
+}

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

@@ -0,0 +1,45 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+    };
+    brandHeading: {
+        true: {};
+        false: {};
+    };
+    uppercase: {
+        true: string;
+        false: {};
+    };
+}, undefined, "", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+    };
+    brandHeading: {
+        true: {};
+        false: {};
+    };
+    uppercase: {
+        true: string;
+        false: {};
+    };
+}, undefined>;

package/dist/components/heading/heading.styles.js

@@ -0,0 +1,86 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {
+        size: {
+            1: 'typography-body-1',
+            2: 'typography-body-2',
+            3: 'typography-body-3',
+            4: 'typography-body-4',
+            5: 'typography-body-5',
+            6: 'typography-body-6',
+            7: 'typography-body-7',
+            8: 'typography-body-8',
+            9: 'typography-body-9',
+            10: 'typography-body-10'
+        },
+        brandHeading: {
+            true: {},
+            false: {}
+        },
+        uppercase: {
+            true: 'uppercase',
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            brandHeading: true,
+            size: 1,
+            class: 'typography-brand-1'
+        },
+        {
+            brandHeading: true,
+            size: 2,
+            class: 'typography-brand-2'
+        },
+        {
+            brandHeading: true,
+            size: 3,
+            class: 'typography-brand-3'
+        },
+        {
+            brandHeading: true,
+            size: 4,
+            class: 'typography-brand-4'
+        },
+        {
+            brandHeading: true,
+            size: 5,
+            class: 'typography-brand-5'
+        },
+        {
+            brandHeading: true,
+            size: 6,
+            class: 'typography-brand-6'
+        },
+        {
+            brandHeading: true,
+            size: 7,
+            class: 'typography-brand-7'
+        },
+        {
+            brandHeading: true,
+            size: 8,
+            class: 'typography-brand-8'
+        },
+        {
+            brandHeading: true,
+            size: 9,
+            class: 'typography-brand-9'
+        },
+        {
+            brandHeading: true,
+            size: 10,
+            class: 'typography-brand-10'
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/heading/heading.types.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './heading.styles.js';
+type Variants = VariantProps<typeof styles>;
+export type HeadingProps = {
+    /**
+     * Whether it should be a brand heading
+     */
+    brandHeading?: boolean;
+    /**
+     * Heading text
+     */
+    children?: ReactNode;
+    /**
+     * Size of heading
+     */
+    size: Variants['size'];
+    /**
+     * Semantic tag, will be determined by size if not provided.
+     * Will default to 'h6' if using responsive size.
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Whether heading should be uppercase
+     */
+    uppercase?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export {};

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

@@ -0,0 +1,2 @@
+import { type HintProps } from './hint.types.js';
+export declare function Hint({ className, tag: Tag, children, spacing, ...props }: HintProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/hint/hint.component.js

@@ -0,0 +1,24 @@
+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 './hint.styles.js';
+export function Hint({ className , tag: Tag = 'div' , children , spacing , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            className,
+            spacing: spacing || 'medium'
+        })
+    }, props), children);
+}

package/dist/components/hint/hint.types.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+export type HintProps = {
+    /**
+     * spacing
+     */
+    spacing?: 'medium' | 'large';
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<Element>;

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

@@ -0,0 +1,2 @@
+export { Hint } from './hint.component.js';
+export { type HintProps } from './hint.types.js';

package/dist/components/hint/index.js

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

package/dist/components/icon/icon.types.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode, type SVGAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './icon.styles.js';
 type Variants = VariantProps<typeof styles>;
+export type IconLook = 'filled' | 'outlined';
 export type IconProps = SVGAttributes<SVGElement> & {
     /**
      * children prop
@@ -18,7 +19,7 @@ export type IconProps = SVGAttributes<SVGElement> & {
     /**
      * Icon look variation. Defaults to filled
      */
-    look?: 'filled' | 'outlined';
+    look?: IconLook;
     /**
      * Icon size
      */

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

@@ -230,4 +230,4 @@ export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';
 export { Icon } from './icon.component.js';
-export { type IconProps } from './icon.types.js';
+export { type IconProps, type IconLook } from './icon.types.js';

package/dist/components/index.d.ts

@@ -23,11 +23,11 @@ export * from './panel/index.js';
 export * from './collapsible/index.js';
 export * from './list/index.js';
 export * from './circle/index.js';
-export { FlexiCell, type FlexiCellProps } from './flexi-cell/index.js';
+export * from './flexi-cell/index.js';
 export * from './autocomplete/index.js';
 export * from './button-dropdown/index.js';
 export * from './form/index.js';
-export * from './input-field/index.js';
+export * from './input-group/index.js';
 export * from './modal/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
@@ -36,6 +36,14 @@ export * from './selector/index.js';
 export * from './compacta/index.js';
 export * from './repeater/index.js';
 export * from './error-message/index.js';
-export * from './form-label/index.js';
-export * from './form-hint/index.js';
+export * from './label/index.js';
+export * from './hint/index.js';
+export * from './filter/index.js';
 export * from './field/index.js';
+export * from './bottom-sheet/index.js';
+export * from './heading/index.js';
+export * from './pass-code/index.js';
+export * from './pass-code-view/index.js';
+export * from './progress-indicator/index.js';
+export * from './header/index.js';
+export * from './footer/index.js';

package/dist/components/index.js

@@ -23,11 +23,11 @@ export * from './panel/index.js';
 export * from './collapsible/index.js';
 export * from './list/index.js';
 export * from './circle/index.js';
-export { FlexiCell } from './flexi-cell/index.js';
+export * from './flexi-cell/index.js';
 export * from './autocomplete/index.js';
 export * from './button-dropdown/index.js';
 export * from './form/index.js';
-export * from './input-field/index.js';
+export * from './input-group/index.js';
 export * from './modal/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
@@ -36,6 +36,14 @@ export * from './selector/index.js';
 export * from './compacta/index.js';
 export * from './repeater/index.js';
 export * from './error-message/index.js';
-export * from './form-label/index.js';
-export * from './form-hint/index.js';
+export * from './label/index.js';
+export * from './hint/index.js';
+export * from './filter/index.js';
 export * from './field/index.js';
+export * from './bottom-sheet/index.js';
+export * from './heading/index.js';
+export * from './pass-code/index.js';
+export * from './pass-code-view/index.js';
+export * from './progress-indicator/index.js';
+export * from './header/index.js';
+export * from './footer/index.js';

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

@@ -1,9 +1,12 @@
 import React, { ForwardedRef } from 'react';
 import { type InputProps } from './input.types.js';
-export declare function BaseInput({ className, size, invalid, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+export declare function BaseInput({ className, size, invalid, width, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
 export declare const Input: React.ForwardRefExoticComponent<{
     invalid?: boolean | undefined;
     size?: "small" | "medium" | "large" | "xlarge" | {
         [x: string]: "small" | "medium" | "large" | "xlarge" | undefined;
     } | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+    width?: 1 | 2 | "full" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | {
+        [x: string]: 1 | 2 | "full" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | undefined;
+    } | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "width"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -16,15 +16,17 @@ function _extends() {
 import React, { forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { styles } from './input.styles.js';
-export function BaseInput({ className , size ='medium' , invalid =false , ...props }, ref) {
-    const { isFocused , focusProps  } = useFocusRing();
+export function BaseInput({ className , size ='medium' , invalid =false , width ='full' , ...props }, ref) {
+    const { isFocusVisible , isFocused , focusProps  } = useFocusRing();
     return React.createElement("input", _extends({
         ref: ref,
         className: styles({
             className,
             size,
             invalid,
-            isFocused
+            isFocusVisible,
+            isFocused,
+            width
         }),
         "aria-invalid": invalid
     }, mergeProps(props, focusProps)));