@westpac/ui 0.3.0 → 0.4.0

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'overflow-hidden rounded border border-border',
+        ul: 'flex'
+    },
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,61 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { type PaginationItemProps } from './components/index.js';
+import { styles } from './pagination.styles.js';
+export type PageProps = {
+    href: string;
+    text: ReactNode;
+};
+export type PaginationAsLinkProps = {
+    /**
+     * on page change
+     */
+    onChange?: never;
+    /**
+     * Pages items
+     */
+    pages: PageProps[];
+};
+export type PaginationAsButtonProps = {
+    /**
+     * on page change
+     */
+    onChange: (page: number) => any;
+    /**
+     * Pages items
+     */
+    pages: Omit<PageProps, 'href'>[];
+};
+export type PaginationHookProps = {
+    defaultCurrent?: number;
+    infinite?: boolean;
+    pages: (Omit<PageProps, 'href'> & {
+        href?: string;
+    })[];
+};
+export type PaginationProps = {
+    /**
+     * Back label
+     */
+    backLabel?: ReactNode;
+    /**
+     * Current page
+     */
+    current?: number;
+    /**
+     * Carousel feature
+     */
+    infinite?: boolean;
+    /**
+     * Link component to render
+     */
+    linkComponent?: PaginationItemProps['tag'];
+    /**
+     * Next label
+     */
+    nextLabel?: ReactNode;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & (PaginationAsLinkProps | PaginationAsButtonProps) & VariantProps<typeof styles> & Omit<HTMLAttributes<Element>, 'onChange'>;

package/dist/components/pagination/pagination.types.js

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

package/dist/components/panel/components/body/body.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type BodyProps } from './body.types.js';
+export declare function Body({ className, children, ...props }: BodyProps): JSX.Element;

package/dist/components/panel/components/body/body.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 as bodyStyles } from './body.styles.js';
+export function Body({ className , children , ...props }) {
+    const styles = bodyStyles({});
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

package/dist/components/panel/components/body/body.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {}, {
+    base: string;
+}>;

package/dist/components/panel/components/body/body.styles.js

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'typography-body-10 p-4 max-xsl:px-2'
+    },
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/panel/components/body/body.types.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type BodyProps = HTMLAttributes<Element>;

package/dist/components/panel/components/body/body.types.js

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

package/dist/components/panel/components/body/index.d.ts

@@ -0,0 +1,2 @@
+export { Body } from './body.component.js';
+export { type BodyProps } from './body.types.js';

package/dist/components/panel/components/body/index.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FooterProps } from './footer.types.js';
+export declare function Footer({ className, children, ...props }: FooterProps): JSX.Element;

package/dist/components/panel/components/footer/footer.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 as footerStyles } from './footer.styles.js';
+export function Footer({ className , children , ...props }) {
+    const styles = footerStyles();
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

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

@@ -0,0 +1,7 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {}, {
+    base: string;
+}>;

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

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'border-t-1 border-0 border-t border-border bg-light px-4 py-[0.625rem] max-xsl:px-2'
+    },
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type FooterProps = HTMLAttributes<Element>;

package/dist/components/panel/components/footer/footer.types.js

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

package/dist/components/panel/components/footer/index.d.ts

@@ -0,0 +1,2 @@
+export { Footer } from './footer.component.js';
+export { type FooterProps } from './footer.types.js';

package/dist/components/panel/components/footer/index.js

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

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

@@ -0,0 +1,2 @@
+export * from './body/index.js';
+export * from './footer/index.js';

package/dist/components/panel/components/index.js

@@ -0,0 +1,2 @@
+export * from './body/index.js';
+export * from './footer/index.js';

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

@@ -0,0 +1,2 @@
+export { Panel } from './panel.component.js';
+export { type PanelProps } from './panel.types.js';

package/dist/components/panel/index.js

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PanelProps } from './panel.types.js';
+export declare function Panel({ className, children, heading, headingTag: Tag, look, ...props }: PanelProps): JSX.Element;
+export declare namespace Panel {
+    var Body: typeof import("./components/index.js").Body;
+    var Footer: typeof import("./components/index.js").Footer;
+}

package/dist/components/panel/panel.component.js

@@ -0,0 +1,31 @@
+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 { Body, Footer } from './components/index.js';
+import { styles as panelStyles } from './panel.styles.js';
+export function Panel({ className , children , heading , headingTag: Tag = 'h1' , look ='hero' , ...props }) {
+    const styles = panelStyles({
+        look
+    });
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), React.createElement(Tag, {
+        className: styles.header()
+    }, heading), children);
+}
+Panel.Body = Body;
+Panel.Footer = Footer;

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

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Panel } from './panel.component.js';
+declare const meta: Meta<typeof Panel>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Faint look example
+ */
+export declare const FaintLookPanel: Story;
+/**
+ * > Example using a table
+ */
+export declare const PanelWithTable: Story;
+/**
+ * > Example using a table with a body and a panel footer
+ */
+export declare const PanelWithTableAndBody: Story;

package/dist/components/panel/panel.stories.js

@@ -0,0 +1,58 @@
+import { Table } from '../table/index.js';
+import { Panel } from './panel.component.js';
+const meta = {
+    title: 'Example/Panel',
+    component: Panel,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    },
+    args: {
+        heading: 'Panel title'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: [
+            React.createElement(Panel.Body, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit."),
+            React.createElement(Panel.Footer, null, "Panel footer")
+        ]
+    }
+};
+export const FaintLookPanel = {
+    args: {
+        look: 'faint',
+        children: [
+            React.createElement(Panel.Body, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit."),
+            React.createElement(Panel.Footer, null, "Panel footer")
+        ]
+    }
+};
+export const PanelWithTable = {
+    args: {
+        children: [
+            React.createElement(Table, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+                colspan: 3
+            }, "Footer goes here and should colSpan all columns"))
+        ]
+    }
+};
+export const PanelWithTableAndBody = {
+    args: {
+        children: [
+            React.createElement(Panel.Body, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit."),
+            React.createElement(Table, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+                colspan: 3
+            }, "Footer goes here and should colSpan all columns")),
+            React.createElement(Panel.Footer, null, "Panel footer")
+        ]
+    }
+};

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

@@ -0,0 +1,29 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    look: {
+        hero: {
+            header: string;
+        };
+        faint: {
+            base: string;
+            header: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    look: {
+        hero: {
+            header: string;
+        };
+        faint: {
+            base: string;
+            header: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+}>;

package/dist/components/panel/panel.styles.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'group/panel mb-4 overflow-hidden rounded-[0.1875rem] border border-hero',
+        header: 'px-4 py-[0.625rem] max-xsl:px-2'
+    },
+    variants: {
+        look: {
+            hero: {
+                header: 'bg-hero text-white'
+            },
+            faint: {
+                base: 'border-border',
+                header: 'border-0 border-b border-b-border bg-background text-text'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+export type PanelProps = {
+    /**
+     * The heading of the panel
+     */
+    heading: string;
+    /**
+     * Tag for heading defaults to h1
+     */
+    headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * The styling of the panel
+     */
+    look?: 'faint' | 'hero';
+} & HTMLAttributes<Element>;

package/dist/components/panel/panel.types.js

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

package/dist/components/popover/components/panel/index.d.ts

@@ -0,0 +1,2 @@
+export { Panel } from './panel.component.js';
+export { type PanelProps } from './panel.types.js';

package/dist/components/popover/components/panel/index.js

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

package/dist/components/popover/components/panel/panel.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PanelProps } from './panel.types.js';
+export declare function Panel({ state, heading, headingTag: Tag, content, placement, id }: PanelProps): JSX.Element;

package/dist/components/popover/components/panel/panel.component.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FocusScope } from 'react-aria';
+import { Button } from '../../../button/index.js';
+import { CloseIcon } from '../../../icon/index.js';
+import { styles as panelStyles } from './panel.styles.js';
+export function Panel({ state , heading , headingTag: Tag = 'h1' , content , placement ='top' , id  }) {
+    const styles = panelStyles({
+        placement
+    });
+    return React.createElement(FocusScope, {
+        restoreFocus: true
+    }, React.createElement("div", {
+        className: styles.popover(),
+        id: id
+    }, React.createElement("div", {
+        className: styles.content()
+    }, React.createElement(Tag, {
+        className: styles.heading()
+    }, heading), React.createElement("div", {
+        className: styles.body()
+    }, content), React.createElement(Button, {
+        look: "link",
+        onClick: state.close,
+        className: styles.closeBtn(),
+        iconAfter: ()=>React.createElement(CloseIcon, {
+                color: "muted",
+                size: "small",
+                "aria-hidden": true
+            }),
+        "aria-label": "Close popover"
+    })), React.createElement("div", {
+        "aria-hidden": true,
+        className: styles.arrow()
+    })));
+}

package/dist/components/popover/components/panel/panel.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    placement: {
+        top: {
+            popover: string;
+            arrow: string;
+        };
+        bottom: {
+            popover: string;
+            arrow: string;
+        };
+    };
+}, {
+    base: string;
+    popover: string;
+    arrow: string;
+    closeBtn: string;
+    content: string;
+    heading: string;
+    body: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    placement: {
+        top: {
+            popover: string;
+            arrow: string;
+        };
+        bottom: {
+            popover: string;
+            arrow: string;
+        };
+    };
+}, {
+    base: string;
+    popover: string;
+    arrow: string;
+    closeBtn: string;
+    content: string;
+    heading: string;
+    body: string;
+}>;

package/dist/components/popover/components/panel/panel.styles.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+        arrow: 'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+        closeBtn: 'focus:focus-outline absolute right-1 top-1 m-1 p-0 hover:opacity-80',
+        content: 'w-[17.625rem] py-4 pl-3 pr-5',
+        heading: 'typography-body-9 mb-2 font-bold',
+        body: 'typography-body-10'
+    },
+    variants: {
+        placement: {
+            top: {
+                popover: 'bottom-full left-1/2 mb-[0.9375rem] -translate-x-1/2',
+                arrow: 'left-1/2 top-full -translate-x-1/2 after:top-[-12px] after:translate-x-[-7px]'
+            },
+            bottom: {
+                popover: 'left-1/2 top-full mt-[0.9375rem] -translate-x-1/2',
+                arrow: 'bottom-full left-1/2 -translate-x-1/2 rotate-180 after:bottom-[1px] after:translate-x-[-7px]'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/popover/components/panel/panel.types.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+export type PanelProps = {
+    /**
+     * Content of popover
+     */
+    content: string;
+    /**
+     * Heading for popover box
+     */
+    heading?: string;
+    /**
+     * Tag to render
+     */
+    headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+    /**
+     * Overlay trigger state
+     */
+    placement?: 'top' | 'bottom';
+    /**
+     * Overlay trigger state
+     */
+    state: OverlayTriggerState;
+} & HTMLAttributes<Element>;

package/dist/components/popover/components/panel/panel.types.js

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

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

@@ -0,0 +1,2 @@
+export { Popover } from './popover.component.js';
+export { type PopoverProps } from './popover.types.js';

package/dist/components/popover/index.js

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PopoverProps } from './popover.types.js';
+export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, open, icon, }: PopoverProps): JSX.Element;

package/dist/components/popover/popover.component.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useId } from 'react';
+import { useOverlayTriggerState } from 'react-stately';
+import { Button } from '../button/index.js';
+import { Panel } from './components/panel/panel.component.js';
+import { styles as popoverStyles } from './popover.styles.js';
+export function Popover({ children , className , headingTag , content , heading , onClick =()=>undefined , placement , look , open =false , icon  }) {
+    const state = useOverlayTriggerState({
+        defaultOpen: open
+    });
+    const panelId = useId();
+    const styles = popoverStyles({});
+    const handleClick = useCallback(()=>{
+        onClick();
+        state.toggle();
+    }, [
+        onClick,
+        state.isOpen
+    ]);
+    const keyHandler = useCallback((event)=>{
+        if (state.isOpen && event.key === 'Escape') state.close();
+    }, [
+        state.isOpen
+    ]);
+    useEffect(()=>{
+        window.document.addEventListener('keydown', keyHandler);
+        return ()=>{
+            window.document.removeEventListener('keydown', keyHandler);
+        };
+    }, [
+        state.isOpen
+    ]);
+    return React.createElement("div", {
+        className: styles.base({
+            className
+        })
+    }, React.createElement(Button, {
+        look: icon && !children ? 'link' : look,
+        iconAfter: icon,
+        className: styles.button(),
+        "aria-expanded": state.isOpen,
+        "aria-controls": panelId,
+        onClick: handleClick
+    }, children), state.isOpen && React.createElement(Panel, {
+        placement: placement,
+        heading: heading ? heading : '',
+        headingTag: headingTag,
+        content: content,
+        state: state,
+        id: panelId
+    }));
+}