@westpac/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,33 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta } from '@storybook/react';
+import { Pagination } from './pagination.component.js';
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+/**
+ * > Button usage example
+ */
+export declare const DefaultStory: any;
+/**
+ * > Link usage example
+ */
+export declare const AsLinkStory: any;
+/**
+ * > Using useState as example
+ */
+export declare const ExampleWithState: () => JSX.Element;
+/**
+ * > Using useState as example
+ */
+export declare const ExampleWithInfiniteState: () => JSX.Element;
+/**
+ * > Using custom back and next label
+ */
+export declare const ExampleWithCustomBackAndNextLabel: () => JSX.Element;
+/**
+ * > Using use pagination hook
+ */
+export declare const ExampleWithUsePagination: () => JSX.Element;
+/**
+ * > Using use pagination hook with other components
+ */
+export declare const ExampleUsePagination: () => JSX.Element;

package/dist/components/pagination/pagination.stories.js

@@ -0,0 +1,172 @@
+import { action } from '@storybook/addon-actions';
+import { useState } from 'react';
+import { ArrowLeftIcon, ArrowRightIcon } from '../icon/index.js';
+import { Button } from '../index.js';
+import { Pagination } from './pagination.component.js';
+import { usePagination } from './pagination.hooks.js';
+const meta = {
+    title: 'Example/Pagination',
+    component: Pagination,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        current: 1,
+        onChange: action('onChange'),
+        pages: [
+            {
+                text: '1'
+            },
+            {
+                text: '2'
+            },
+            {
+                text: '3'
+            }
+        ]
+    }
+};
+export const AsLinkStory = {
+    args: {
+        current: 1,
+        onChange: undefined,
+        pages: [
+            {
+                text: '1',
+                href: '#page-1'
+            },
+            {
+                text: '2',
+                href: '#page-2'
+            },
+            {
+                text: '3',
+                href: '#page-3'
+            }
+        ]
+    }
+};
+export const ExampleWithState = ()=>{
+    const [page, setPage] = useState(1);
+    return React.createElement(Pagination, {
+        current: page,
+        onChange: (changedPage)=>{
+            setPage(changedPage);
+        },
+        pages: [
+            {
+                text: '1'
+            },
+            {
+                text: '2'
+            },
+            {
+                text: '3'
+            }
+        ]
+    });
+};
+export const ExampleWithInfiniteState = ()=>{
+    const [page, setPage] = useState(1);
+    return React.createElement(Pagination, {
+        current: page,
+        infinite: true,
+        onChange: (changedPage)=>{
+            setPage(changedPage);
+        },
+        pages: [
+            {
+                text: '1'
+            },
+            {
+                text: '2'
+            },
+            {
+                text: '3'
+            }
+        ]
+    });
+};
+export const ExampleWithCustomBackAndNextLabel = ()=>{
+    const [page, setPage] = useState(1);
+    return React.createElement(Pagination, {
+        current: page,
+        backLabel: "Custom back",
+        nextLabel: "Custom next",
+        onChange: (changedPage)=>{
+            setPage(changedPage);
+        },
+        pages: [
+            {
+                text: '1'
+            },
+            {
+                text: '2'
+            },
+            {
+                text: '3'
+            }
+        ]
+    });
+};
+export const ExampleWithUsePagination = ()=>{
+    const { pages , currentPage , setCurrentPage  } = usePagination({
+        pages: [
+            {
+                text: '1'
+            },
+            {
+                text: '2'
+            },
+            {
+                text: '3'
+            }
+        ]
+    });
+    return React.createElement(Pagination, {
+        current: currentPage,
+        backLabel: "Custom back",
+        nextLabel: "Custom next",
+        infinite: true,
+        onChange: (changedPage)=>{
+            setCurrentPage(changedPage);
+        },
+        pages: pages
+    });
+};
+export const ExampleUsePagination = ()=>{
+    const { next , previous , selectedPage  } = usePagination({
+        pages: [
+            {
+                text: 'Page 1'
+            },
+            {
+                text: 'Page 2'
+            },
+            {
+                text: 'Page 3'
+            }
+        ],
+        infinite: true
+    });
+    return React.createElement("div", {
+        className: "flex items-center"
+    }, React.createElement(Button, {
+        look: "link",
+        iconAfter: ArrowLeftIcon,
+        onClick: previous
+    }), React.createElement("h4", null, selectedPage.text), React.createElement(Button, {
+        look: "link",
+        iconAfter: ArrowRightIcon,
+        onClick: next
+    }));
+};

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

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

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;