@westpac/ui 0.2.1 → 0.4.0

package/dist/components/symbol/symbol.component.js

@@ -0,0 +1,35 @@
+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 './symbol.styles.js';
+import { getTransform } from './symbol.utils.js';
+export function Symbol({ copyrightYear ='' , xmlns ='http://www.w3.org/2000/svg' , role ='img' , focusable =false , className , viewBoxWidth , viewBoxHeight , align , offset , children , ...props }) {
+    return React.createElement("span", {
+        className: styles({
+            className
+        })
+    }, React.createElement("svg", _extends({
+        xmlns: xmlns,
+        role: role,
+        viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
+        focusable: focusable,
+        className: "block"
+    }, props), copyrightYear && React.createElement("metadata", null, `Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`), align && offset ? React.createElement("g", {
+        transform: getTransform({
+            align,
+            offset
+        })
+    }, children) : children));
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Symbol>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+export declare const Offset: () => JSX.Element;
+export declare const AllSymbols: () => JSX.Element;
+export declare const AllLogos: () => JSX.Element;

package/dist/components/symbol/symbol.stories.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { WBCLogo, WBCMultibrandSmallLogo } from './index.js';
+import * as symbols from './index.js';
+const meta = {
+    title: 'Example/Symbol',
+    component: WBCLogo,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {}
+};
+export const Offset = ()=>React.createElement("div", null, React.createElement("p", null, "Left"), React.createElement(WBCMultibrandSmallLogo, {
+        className: "border border-dashed"
+    }), React.createElement("br", null), React.createElement("br", null), React.createElement("p", null, "Center"), React.createElement(WBCMultibrandSmallLogo, {
+        align: "center",
+        className: "border border-dashed"
+    }), React.createElement("br", null), React.createElement("br", null), React.createElement("p", null, "Right"), React.createElement(WBCMultibrandSmallLogo, {
+        align: "right",
+        className: "border border-dashed"
+    }));
+export const AllSymbols = ()=>{
+    const allSymbols = Object.entries(symbols).reduce((curr, [key, symbol])=>key.includes('Symbol') ? {
+            ...curr,
+            [key]: symbol
+        } : curr, {});
+    return React.createElement("div", {
+        className: "grid grid-cols-4 gap-5"
+    }, Object.entries(allSymbols).map(([key, Symbol])=>React.createElement("div", {
+            key: key,
+            className: " flex flex-col items-center justify-end"
+        }, React.createElement(Symbol, null), React.createElement("p", {
+            className: "mt-2"
+        }, key))));
+};
+export const AllLogos = ()=>{
+    const allLogos = Object.entries(symbols).reduce((curr, [key, symbol])=>key.includes('Logo') ? {
+            ...curr,
+            [key]: symbol
+        } : curr, {});
+    return React.createElement("div", {
+        className: "grid grid-cols-4 gap-5"
+    }, Object.entries(allLogos).map(([key, Logo])=>React.createElement("div", {
+            key: key,
+            className: " flex flex-col items-center justify-end"
+        }, React.createElement(Logo, null), React.createElement("p", {
+            className: "mt-2"
+        }, key))));
+};

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

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "inline-block shrink-0 align-middle leading-none", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/symbol/symbol.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'inline-block shrink-0 align-middle leading-none',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,30 @@
+import { type SVGAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './symbol.styles.js';
+export type Align = 'left' | 'center' | 'right';
+export type SymbolProps = Omit<SVGAttributes<SVGElement>, 'offset'> & {
+    /**
+     * SVG alignment
+     */
+    align?: Align;
+    /**
+     * Symbol copyright year
+     */
+    copyrightYear?: string;
+    /**
+     * Symbol offset alignment array i.e. [left, center, right]
+     */
+    offset?: Array<number | null>;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+    /**
+     * SVG viewBox height
+     */
+    viewBoxHeight?: number;
+    /**
+     * SVG viewBox width
+     */
+    viewBoxWidth?: number;
+} & VariantProps<typeof styles>;

package/dist/components/symbol/symbol.types.js

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

package/dist/components/symbol/symbol.utils.d.ts

@@ -0,0 +1,5 @@
+import { type Align } from './symbol.types.js';
+export declare function getTransform({ offset, align }: {
+    align: Align;
+    offset: (number | null)[];
+}): string;

package/dist/components/symbol/symbol.utils.js

@@ -0,0 +1,9 @@
+export function getTransform({ offset , align  }) {
+    const alignMap = {
+        left: offset[0],
+        center: offset[1],
+        right: offset[2]
+    };
+    const translate = alignMap[align];
+    return translate ? `translate(${translate})` : '';
+}

package/dist/components/table/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/table/components/body/body.component.js

@@ -0,0 +1,23 @@
+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 './body.styles.js';
+export function Body({ className , children , ...props }) {
+    return React.createElement("tbody", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

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

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

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

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

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

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

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

package/dist/components/table/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/table/components/body/index.js

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

package/dist/components/table/components/caption/caption.component.d.ts

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

package/dist/components/table/components/caption/caption.component.js

@@ -0,0 +1,23 @@
+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 './caption.styles.js';
+export function Caption({ className , children , ...props }) {
+    return React.createElement("caption", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

package/dist/components/table/components/caption/caption.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "typography-body-8 mb-2 text-left font-light group-first/panel:px-4 group-first/panel:pt-4 max-xsl:group-first/panel:px-2 max-xsl:group-first/panel:pt-2", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/table/components/caption/caption.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'typography-body-8 mb-2 text-left font-light group-first/panel:px-4 group-first/panel:pt-4 max-xsl:group-first/panel:px-2 max-xsl:group-first/panel:pt-2',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/caption/caption.types.d.ts

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

package/dist/components/table/components/caption/caption.types.js

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

package/dist/components/table/components/caption/index.d.ts

@@ -0,0 +1,2 @@
+export { Caption } from './caption.component.js';
+export { type CaptionProps } from './caption.types.js';

package/dist/components/table/components/caption/index.js

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

package/dist/components/table/components/cell/cell.component.d.ts

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

package/dist/components/table/components/cell/cell.component.js

@@ -0,0 +1,30 @@
+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, { useContext } from 'react';
+import { TableContext } from '../../table.component.js';
+import { styles as cellStyles } from './cell.styles.js';
+export function Cell({ className , children , highlighted , highlightStart , ...props }) {
+    const { bordered  } = useContext(TableContext);
+    const styles = cellStyles({
+        bordered,
+        highlighted,
+        highlightStart
+    });
+    return React.createElement("td", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

package/dist/components/table/components/cell/cell.styles.d.ts

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

package/dist/components/table/components/cell/cell.styles.js

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'typography-body-10 border border-x-0 border-b-[1px] border-t-0 border-border p-2 text-left align-bottom'
+    },
+    variants: {
+        bordered: {
+            true: {
+                base: 'border-x'
+            }
+        },
+        highlighted: {
+            true: {
+                base: 'border border-b-[3px] border-b-primary'
+            }
+        },
+        highlightStart: {
+            true: {
+                base: 'border border-b-[3px] border-l-[6px] border-l-primary'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/cell/cell.types.d.ts

@@ -0,0 +1,13 @@
+import { TdHTMLAttributes } from 'react';
+export type CellProps = {
+    /**
+     * Should be `true` if cell is start of highlight
+     */
+    highlightStart?: boolean;
+    /**
+     * Should be `true` if cell should be highlighted
+     * If cell is first cell in a highlight block highlightStart should also be `true`
+     * If multiple cells need to be highlighted it may be easier to pass array of cells through Row
+     */
+    highlighted?: boolean;
+} & TdHTMLAttributes<HTMLTableCellElement>;

package/dist/components/table/components/cell/cell.types.js

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

package/dist/components/table/components/cell/index.d.ts

@@ -0,0 +1,2 @@
+export { Cell } from './cell.component.js';
+export { type CellProps } from './cell.types.js';

package/dist/components/table/components/cell/index.js

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

package/dist/components/table/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, colspan, ...props }: FooterProps): JSX.Element;

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

@@ -0,0 +1,29 @@
+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, { useContext } from 'react';
+import { TableContext } from '../../table.component.js';
+import { styles as footerStyles } from './footer.styles.js';
+export function Footer({ className , children , colspan , ...props }) {
+    const { bordered  } = useContext(TableContext);
+    const styles = footerStyles({
+        bordered
+    });
+    return React.createElement("tfoot", _extends({}, props), React.createElement("tr", null, React.createElement("td", {
+        className: styles.base({
+            className
+        }),
+        colSpan: colspan
+    }, children)));
+}

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

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

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

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'typography-body-10 p-2 text-left font-light text-muted'
+    },
+    variants: {
+        bordered: {
+            true: {
+                base: 'border border-border'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export type FooterProps = {
+    /**
+     * Span for footer, should be same length as amount of columns in table
+     */
+    colspan: number;
+} & HTMLAttributes<HTMLTableSectionElement>;

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

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

package/dist/components/table/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/table/components/footer/index.js

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

package/dist/components/table/components/header/header.component.d.ts

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

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

@@ -0,0 +1,23 @@
+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 './header.styles.js';
+export function Header({ className , children , ...props }) {
+    return React.createElement("thead", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

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

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

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

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

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

package/dist/components/table/components/header/header.types.js

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

package/dist/components/table/components/header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './header.component.js';
+export { type HeaderProps } from './header.types.js';

package/dist/components/table/components/header/index.js

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

package/dist/components/table/components/header-cell/header-cell.component.d.ts

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

package/dist/components/table/components/header-cell/header-cell.component.js

@@ -0,0 +1,28 @@
+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, { useContext } from 'react';
+import { TableContext } from '../../table.component.js';
+import { styles as headerCellStyles } from './header-cell.styles.js';
+export function HeaderCell({ className , children , ...props }) {
+    const { bordered  } = useContext(TableContext);
+    const styles = headerCellStyles({
+        bordered
+    });
+    return React.createElement("th", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}