@westpac/ui 0.12.0 → 0.14.0

package/dist/components/flexi-cell/flexi-cell.types.d.ts

@@ -1,49 +1,59 @@
-import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { BadgeProps } from '../index.js';
+import { styles } from './flexi-cell.styles.js';
+type Variants = VariantProps<typeof styles>;
 type BaseFlexiCellProps = {
     /**
      * Renders an element on the right
      */
     after?: ReactNode;
     /**
-     * Renders an element on the top right corner
+     * Renders an element on the left
      */
-    badge?: ReactNode;
+    before?: ReactNode;
     /**
-     * zIndex for badge
+     * the middle content of FlexiCell
      */
-    badgeZIndex?: CSSProperties['zIndex'];
+    children?: ReactNode;
     /**
-     * Renders an element on the left
+     * Sets tabIndex to -1 to make untabbable when disabled
      */
-    before?: ReactNode;
+    disabled?: boolean;
     /**
-     * Injects the FlexiCell.Body inside of the children
+     * Wraps body with an 'a' tag for dual action styled component
+     * - Requires href to be provided
+     * - Tag prop should not be used when using this prop
+     * @default false
      */
-    body?: boolean;
+    dualAction?: boolean;
     /**
-     * the middle content of FlexiCell
+     * href in case it is an "a" tag or dualAction
      */
-    children?: ReactNode;
+    href?: string;
     /**
-     * href in case it is an "a" tag
+     * Large adds more padding/spacing to the Flex Cell
+     * @default default
      */
-    href?: string;
+    size?: Variants['size'];
     /**
      * The native tag that flexicell will be rendered
+     * @default div
      */
     tag?: keyof JSX.IntrinsicElements;
+    /**
+     * Renders badge in top right corner based on provided string
+     */
+    topBadge?: (props: BadgeProps) => JSX.Element;
     /**
      * Adds an arrow on top right
      */
     withArrow?: boolean;
     /**
      * Adds a border radius and a border
+     * @default false
      */
     withBorder?: boolean;
-    /**
-     * With hover style
-     */
-    withHoverEffect?: boolean;
 } & HTMLAttributes<HTMLOrSVGElement>;
 type FlexiCellAsLinkProps = {
     /**
@@ -55,9 +65,19 @@ type FlexiCellAsLinkProps = {
      */
     tag: 'a';
 };
+type DualActionFlexiCellProps = {
+    /**
+     * The native tag that the circle will be rendered as
+     */
+    dualAction: true;
+    /**
+     * The href for the link
+     */
+    href: string;
+};
 type FlexiCellAsAllOtherTagsProps<Tag> = {
     href?: never;
     tag?: Tag;
 };
-export type FlexiCellProps<Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) & BaseFlexiCellProps & HTMLAttributes<Element>;
+export type FlexiCellProps<Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>> = (FlexiCellAsLinkProps | DualActionFlexiCellProps | FlexiCellAsAllOtherTagsProps<Tag>) & BaseFlexiCellProps & HTMLAttributes<Element>;
 export {};

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

@@ -0,0 +1,2 @@
+import { type FooterProps } from './footer.types.js';
+export declare function Footer({ brand, logoLink, logoAssistiveText, hideLogo, offsetSidebar, srOnlyText, className, children, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/footer/footer.component.js

@@ -0,0 +1,70 @@
+'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 React from 'react';
+import { useFocusRing } from 'react-aria';
+import { Grid, GridItem, VisuallyHidden } from '../index.js';
+import { BOMMultibrandSmallLogo, BSAMultibrandSmallLogo, RAMSMultibrandSmallLogo, STGMultibrandSmallLogo, WBCMultibrandSmallLogo, WBGMultibrandSmallLogo } from '../symbol/index.js';
+import { styles as footerStyles } from './footer.styles.js';
+export function Footer({ brand , logoLink ='#' , logoAssistiveText , hideLogo =false , offsetSidebar =false , srOnlyText , className , children , ...props }) {
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const styles = footerStyles({
+        offsetSidebar,
+        isFocusVisible
+    });
+    const logoMap = {
+        wbc: {
+            logo: (props)=>React.createElement(WBCMultibrandSmallLogo, _extends({}, props))
+        },
+        stg: {
+            logo: (props)=>React.createElement(STGMultibrandSmallLogo, _extends({}, props))
+        },
+        bom: {
+            logo: (props)=>React.createElement(BOMMultibrandSmallLogo, _extends({}, props))
+        },
+        bsa: {
+            logo: (props)=>React.createElement(BSAMultibrandSmallLogo, _extends({}, props))
+        },
+        wbg: {
+            logo: (props)=>React.createElement(WBGMultibrandSmallLogo, _extends({}, props))
+        },
+        rams: {
+            logo: (props)=>React.createElement(RAMSMultibrandSmallLogo, _extends({}, props))
+        }
+    };
+    const Logo = logoMap[brand].logo;
+    return React.createElement("footer", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), React.createElement("div", {
+        className: styles.wrapper()
+    }, React.createElement(Grid, {
+        className: styles.topRow()
+    }, React.createElement(GridItem, {
+        span: 12
+    }, children)), React.createElement(Grid, null, React.createElement(GridItem, {
+        span: {
+            initial: 12,
+            md: 1
+        }
+    }, !hideLogo && React.createElement("a", _extends({
+        href: logoLink,
+        className: styles.link()
+    }, focusProps), srOnlyText && React.createElement(VisuallyHidden, null, srOnlyText), React.createElement(Logo, {
+        align: "right",
+        "aria-label": logoAssistiveText
+    }))))));
+}

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

@@ -0,0 +1,37 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    offsetSidebar: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocusVisible: {
+        true: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    topRow: string;
+    link: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    offsetSidebar: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocusVisible: {
+        true: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    topRow: string;
+    link: string;
+}>;

package/dist/components/footer/footer.styles.js

@@ -0,0 +1,30 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'relative overflow-hidden border-t-[1px] border-t-primary',
+        wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
+        topRow: 'max-md:mb-7 md:mb-4',
+        link: 'float-right block'
+    },
+    variants: {
+        offsetSidebar: {
+            true: {
+                base: 'lg:mr-[300px]'
+            },
+            false: {}
+        },
+        isFocusVisible: {
+            true: {
+                link: 'focus-outline'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from 'react';
+import { BrandKey } from '../../tailwind/index.js';
+export type FooterProps = {
+    /**
+     * Icon for brand
+     */
+    brand: Exclude<BrandKey, 'btfg'>;
+    /**
+     * Hide logo
+     */
+    hideLogo?: boolean;
+    /**
+     * Aria-label for the logo
+     */
+    logoAssistiveText?: string;
+    /**
+     * href for logo link
+     */
+    logoLink?: string;
+    /**
+     * Right offset for use with GEL sidebar component
+     */
+    offsetSidebar?: boolean;
+    /**
+     * Visually hidden text for logo link
+     */
+    srOnlyText?: string;
+} & HTMLAttributes<Element>;

package/dist/components/form/components/form-group/form-group.styles.d.ts

@@ -7,7 +7,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         medium: string;
         large: string;
     };
-}, undefined, "last:mb-0", {
+}, undefined, "", {
     responsiveVariants: string[];
 }, {
     inline: {

package/dist/components/form/components/form-group/form-group.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'last:mb-0',
+    base: '',
     variants: {
         inline: {
             true: 'sm:inline-block sm:align-middle',

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

@@ -1,2 +1,2 @@
-import { type FormHintProps } from '../../../index.js';
-export declare function FormHint({ ...props }: FormHintProps): import("react/jsx-runtime").JSX.Element;
+import { type HintProps } from '../../../index.js';
+export declare function FormHint({ ...props }: HintProps): import("react/jsx-runtime").JSX.Element;

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

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
-import { FormHint as GelFormHint } from '../../../index.js';
+import { Hint as GelFormHint } from '../../../index.js';
 import { useFormContext } from '../../form.component.js';
 export function FormHint({ ...props }) {
     const { spacing  } = useFormContext();

package/dist/components/form/components/form-label/form-label.component.d.ts

@@ -1,2 +1,2 @@
-import { type FormLabelProps } from '../../../../index.js';
-export declare function FormLabel({ spacing, children, ...props }: FormLabelProps): import("react/jsx-runtime").JSX.Element;
+import { type LabelProps } from '../../../../index.js';
+export declare function FormLabel({ spacing, children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/components/form-label/form-label.component.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
-import { FormLabel as GELFormLabel } from '../../../index.js';
+import { Label as GELFormLabel } from '../../../index.js';
 import { useFormContext } from '../../form.component.js';
 export function FormLabel({ spacing , children , ...props }) {
     const context = useFormContext();

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

@@ -1,12 +1,3 @@
-import { FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
 import { FormContextValue, type FormProps } from './form.types.js';
 export declare const useFormContext: () => FormContextValue;
 export declare function Form({ children, spacing, inline, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Form {
-    var Label: typeof FormLabel;
-    var ErrorMessage: typeof import("../error-message/error-message.component.js").ErrorMessage;
-    var Hint: typeof FormHint;
-    var Section: typeof FormSection;
-    var ChitChat: typeof FormChitChat;
-    var Group: typeof FormGroup;
-}

package/dist/components/form/form.component.js

@@ -14,8 +14,6 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { createContext, useContext } from 'react';
-import { ErrorMessage } from '../error-message/index.js';
-import { FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
 const FormContext = createContext(null);
 export const useFormContext = ()=>useContext(FormContext) || {};
 export function Form({ children , spacing ='medium' , inline =false , ...props }) {
@@ -26,9 +24,3 @@ export function Form({ children , spacing ='medium' , inline =false , ...props }
         }
     }, React.createElement("form", _extends({}, props), children));
 }
-Form.Label = FormLabel;
-Form.ErrorMessage = ErrorMessage;
-Form.Hint = FormHint;
-Form.Section = FormSection;
-Form.ChitChat = FormChitChat;
-Form.Group = FormGroup;

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

@@ -1,2 +1,3 @@
 export { Form } from './form.component.js';
 export { type FormProps } from './form.types.js';
+export { FormLabel, FormHint, FormSection, FormChitChat, FormGroup } from './components/index.js';

package/dist/components/form/index.js

@@ -1 +1,2 @@
 export { Form } from './form.component.js';
+export { FormLabel, FormHint, FormSection, FormChitChat, FormGroup } from './components/index.js';

package/dist/components/grid/components/grid-container/grid-container.component.d.ts

@@ -0,0 +1,2 @@
+import { type GridContainerProps } from './grid-container.types.js';
+export declare function GridContainer({ className, tag: Tag, fixed, children, ...props }: GridContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/grid/components/grid-container/grid-container.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 './grid-container.styles.js';
+export function GridContainer({ className , tag: Tag = 'div' , fixed , children , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            fixed,
+            className
+        })
+    }, props), children);
+}

package/dist/components/grid/components/grid-container/grid-container.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    fixed: {
+        true: string;
+    };
+}, undefined, "mx-auto box-border w-full max-w-container px-4 xsl:px-5 sm:px-6 md:px-8 lg:px-10", {
+    responsiveVariants: string[];
+}, {
+    fixed: {
+        true: string;
+    };
+}, undefined>;

package/dist/components/grid/components/grid-container/grid-container.styles.js

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'mx-auto box-border w-full max-w-container px-4 xsl:px-5 sm:px-6 md:px-8 lg:px-10',
+    variants: {
+        fixed: {
+            true: 'sm:max-w-xsl md:max-w-md lg:max-w-lg'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/grid/components/grid-container/grid-container.types.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+export type GridContainerProps = {
+    /**
+     * Enable fixed width container mode. In this mode the container width is fixed at each breakpoint.
+     */
+    fixed?: boolean;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<Element>;

package/dist/components/grid/components/grid-item/grid-item.component.d.ts

@@ -0,0 +1,2 @@
+import { type GridItemProps } from './grid-item.types.js';
+export declare function GridItem({ className, tag: Tag, span, rowSpan, start, children, ...props }: GridItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/grid/components/grid-item/grid-item.component.js

@@ -0,0 +1,26 @@
+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 './grid-item.styles.js';
+export function GridItem({ className , tag: Tag = 'div' , span , rowSpan , start , children , ...props }) {
+    return React.createElement(Tag, _extends({
+        className: styles({
+            span,
+            rowSpan,
+            start,
+            className
+        })
+    }, props), children);
+}

package/dist/components/grid/components/grid-item/grid-item.styles.d.ts

@@ -0,0 +1,77 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    rowSpan: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    span: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+    };
+    start: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+    };
+}, undefined, "", {
+    responsiveVariants: string[];
+}, {
+    rowSpan: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
+    span: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+    };
+    start: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+    };
+}, undefined>;

package/dist/components/grid/components/grid-item/grid-item.styles.js

@@ -0,0 +1,50 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {
+        rowSpan: {
+            1: 'row-span-1',
+            2: 'row-span-2',
+            3: 'row-span-3',
+            4: 'row-span-4',
+            5: 'row-span-5',
+            6: 'row-span-6'
+        },
+        span: {
+            1: 'col-span-1',
+            2: 'col-span-2',
+            3: 'col-span-3',
+            4: 'col-span-4',
+            5: 'col-span-5',
+            6: 'col-span-6',
+            7: 'col-span-7',
+            8: 'col-span-8',
+            9: 'col-span-9',
+            10: 'col-span-10',
+            11: 'col-span-11',
+            12: 'col-span-12'
+        },
+        start: {
+            1: 'col-start-1',
+            2: 'col-start-2',
+            3: 'col-start-3',
+            4: 'col-start-4',
+            5: 'col-start-5',
+            6: 'col-start-6',
+            7: 'col-start-7',
+            8: 'col-start-8',
+            9: 'col-start-9',
+            10: 'col-start-10',
+            11: 'col-start-11',
+            12: 'col-start-12'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/grid/components/grid-item/grid-item.types.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './grid-item.styles.js';
+type Variants = VariantProps<typeof styles>;
+export type GridItemProps = {
+    /**
+     * Controls height of item based on amount of grid spaces to cover
+     */
+    rowSpan?: Variants['rowSpan'];
+    /**
+     * Controls width of item based on amount of grid spaces to cover
+     */
+    span?: Variants['span'];
+    /**
+     * Position item should start in grid
+     */
+    start?: Variants['start'];
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<Element>;
+export {};

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

@@ -1,2 +1,2 @@
-export { Container } from './container/container.component.js';
-export { Item } from './item/item.component.js';
+export { GridContainer } from './grid-container/grid-container.component.js';
+export { GridItem } from './grid-item/grid-item.component.js';

package/dist/components/grid/components/index.js

@@ -1,2 +1,2 @@
-export { Container } from './container/container.component.js';
-export { Item } from './item/item.component.js';
+export { GridContainer } from './grid-container/grid-container.component.js';
+export { GridItem } from './grid-item/grid-item.component.js';

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

@@ -1,3 +1,3 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "grid h-auto grid-flow-row auto-rows-[minmax(32px,auto)] grid-cols-[repeat(12,_1fr)] gap-2 xsl:gap-4", {
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "grid h-auto grid-flow-row auto-rows-[minmax(32px,auto)] grid-cols-[repeat(12,_1fr)] gap-2 xsl:gap-3 sm:gap-4", {
     responsiveVariants: string[];
 }, {}, undefined>;

package/dist/components/grid/grid.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'grid h-auto grid-flow-row auto-rows-[minmax(32px,auto)] grid-cols-[repeat(12,_1fr)] gap-2 xsl:gap-4',
+    base: 'grid h-auto grid-flow-row auto-rows-[minmax(32px,auto)] grid-cols-[repeat(12,_1fr)] gap-2 xsl:gap-3 sm:gap-4',
     variants: {}
 }, {
     responsiveVariants: [

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

@@ -1,3 +1,4 @@
 export { Grid } from './grid.component.js';
-export { Container, Item } from './components/index.js';
+export { GridContainer, GridItem } from './components/index.js';
 export { type GridProps } from './grid.types.js';
+export { type GridContainerProps } from './components/grid-container/grid-container.types.js';

package/dist/components/grid/index.js

@@ -1,2 +1,2 @@
 export { Grid } from './grid.component.js';
-export { Container, Item } from './components/index.js';
+export { GridContainer, GridItem } from './components/index.js';