@westpac/ui 0.2.1 → 0.4.0

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

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

@@ -0,0 +1,13 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    noPadding: {
+        true: string;
+        false: string;
+    };
+}, undefined, "relative border-t border-t-border first:border-t-0 [&:not(:first-of-type)]:pt-5 md:[&:not(:first-of-type)]:pt-6 [&:not(:last-child)]:pb-1", {
+    responsiveVariants: string[];
+}, {
+    noPadding: {
+        true: string;
+        false: string;
+    };
+}, undefined>;

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

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'relative border-t border-t-border first:border-t-0 [&:not(:first-of-type)]:pt-5 md:[&:not(:first-of-type)]:pt-6 [&:not(:last-child)]:pb-1',
+    variants: {
+        noPadding: {
+            true: '',
+            false: 'px-0 sm:px-9 md:px-[2.875rem] lg:px-[3.125rem]'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/form/components/form-section/form-section.types.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './form-section.styles.js';
+export type FormSectionProps = {
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/form/components/form-section/form-section.types.js

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

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

@@ -0,0 +1,2 @@
+export { FormSection } from './form-section.component.js';
+export { type FormSectionProps } from './form-section.types.js';

package/dist/components/form/components/form-section/index.js

@@ -0,0 +1 @@
+export { FormSection } from './form-section.component.js';

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

@@ -0,0 +1,6 @@
+export * from './error-message/index.js';
+export * from './form-label/index.js';
+export * from './form-hint/index.js';
+export * from './form-chit-chat/index.js';
+export * from './form-group/index.js';
+export * from './form-section/index.js';

package/dist/components/form/components/index.js

@@ -0,0 +1,6 @@
+export * from './error-message/index.js';
+export * from './form-label/index.js';
+export * from './form-hint/index.js';
+export * from './form-chit-chat/index.js';
+export * from './form-group/index.js';
+export * from './form-section/index.js';

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

@@ -0,0 +1,13 @@
+/// <reference types="react" resolution-mode="require"/>
+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, size, spacing, inline, ...props }: FormProps): JSX.Element;
+export declare namespace Form {
+    var Label: typeof FormLabel;
+    var ErrorMessage: typeof import("./components/index.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

@@ -0,0 +1,33 @@
+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, { createContext, useContext } from 'react';
+import { ErrorMessage, FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
+const FormContext = createContext(null);
+export const useFormContext = ()=>useContext(FormContext) || {};
+export function Form({ children , size ='medium' , spacing ='medium' , inline =false , ...props }) {
+    return React.createElement(FormContext.Provider, {
+        value: {
+            inline,
+            size,
+            spacing
+        }
+    }, 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/form.stories.d.ts

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Form } from './form.component.js';
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default size and spacing
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Multiple errors
+ */
+export declare const MultipleErrorsStory: Story;
+/**
+ * > All sizes Story
+ */
+export declare const AllSizesStory: Story;
+/**
+ * > All spacings Story
+ */
+export declare const AllSpacingsStory: Story;

package/dist/components/form/form.stories.js

@@ -0,0 +1,106 @@
+import { Input } from '../index.js';
+import { Form } from './form.component.js';
+const meta = {
+    title: 'Example/Form',
+    component: Form,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, React.createElement("h2", {
+            className: "typography-body-7 my-4 font-bold"
+        }, "Default size and spacing"), React.createElement(Form, null, React.createElement(Form.Section, null, React.createElement(Form.ChitChat, null, "Hello, I’m the friendly conversational text component. I live at the top of the form pod if required.")), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-default-1"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-default-1"
+        })), React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-default-2"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-default-2"
+        }))), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-default-3"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-default-3"
+        })))), React.createElement("hr", null), React.createElement("h2", {
+            className: "typography-body-7 my-4 font-bold"
+        }, "Large size with large spacing"), React.createElement(Form, {
+            size: "large",
+            spacing: "large"
+        }, React.createElement(Form.Section, null, React.createElement(Form.ChitChat, null, "Hello, I’m the friendly conversational text component. I live at the top of the form pod if required.")), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-large-1"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-large-1"
+        })), React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-large-2"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-large-2"
+        }))), React.createElement(Form.Section, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
+            htmlFor: "example-large-3"
+        }, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: "This is an error message"
+        }), React.createElement(Input, {
+            name: "example-large-3"
+        })))));
+    }
+};
+export const MultipleErrorsStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(Form, null, React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+            message: [
+                'This is an error message',
+                'another error message'
+            ]
+        }), React.createElement(Input, null));
+    }
+};
+export const AllSizesStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-3"
+        }, [
+            'small',
+            'medium'
+        ].map((size)=>React.createElement(Form, {
+                size: size
+            }, React.createElement("h3", null, "Form with size: ", size), React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+                message: "This is an error message"
+            }), React.createElement(Input, null))));
+    }
+};
+export const AllSpacingsStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-3"
+        }, [
+            'medium',
+            'large'
+        ].map((size)=>React.createElement(Form, {
+                spacing: size
+            }, React.createElement("h3", null, "Form with Spacing:", size), React.createElement(Form.Label, null, "This is a label"), React.createElement(Form.Hint, null, "This is a hint"), React.createElement(Form.ErrorMessage, {
+                message: "This is an error message"
+            }), React.createElement(Input, null))));
+    }
+};

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

@@ -0,0 +1,7 @@
+import { FormHTMLAttributes } from 'react';
+export type FormContextValue = {
+    inline?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    spacing?: 'medium' | 'large';
+};
+export type FormProps = FormContextValue & FormHTMLAttributes<HTMLFormElement>;

package/dist/components/form/form.types.js

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

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

@@ -0,0 +1,2 @@
+export { Form } from './form.component.js';
+export { type FormProps } from './form.types.js';

package/dist/components/form/index.js

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

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

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

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

package/dist/components/grid/components/container/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-2 xsl:px-5 sm:px-6 md:px-8 lg:px-10", {
+    responsiveVariants: string[];
+}, {
+    fixed: {
+        true: string;
+    };
+}, undefined>;

package/dist/components/grid/components/container/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-2 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/container/container.types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './container.styles.js';
+export type ContainerProps = {
+    /**
+     * 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;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/grid/components/container/container.types.js

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ItemProps } from './item.types.js';
+export declare function Item({ className, tag: Tag, span, start, children, ...props }: ItemProps): JSX.Element;

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

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

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

@@ -0,0 +1,61 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    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[];
+}, {
+    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/item/item.styles.js

@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {
+        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/item/item.types.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './item.styles.js';
+export type ItemProps = {
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/grid/components/item/item.types.js

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

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

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta } from '@storybook/react';
+import { Grid } from './grid.component.js';
+declare const meta: Meta<typeof Grid>;
+export default meta;
+export declare const GridStory: () => JSX.Element;
+export declare const ContainerStory: () => JSX.Element;
+export declare const ItemStory: () => JSX.Element;

package/dist/components/grid/grid.stories.js

@@ -0,0 +1,51 @@
+import { Container, Item } from './components/index.js';
+import { Grid } from './grid.component.js';
+const meta = {
+    title: 'Example/Grid',
+    component: Grid,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "mt-10"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+export const GridStory = ()=>{
+    const items = Array(12).fill(null);
+    return React.createElement(Grid, null, items.map((_, i)=>React.createElement(Item, {
+            key: i,
+            className: "border border-border bg-light p-2 text-center"
+        }, i + 1)));
+};
+export const ContainerStory = ()=>{
+    const items = Array(12).fill(null);
+    return React.createElement(Container, null, React.createElement(Grid, null, items.map((_, i)=>React.createElement(Item, {
+            key: i,
+            className: "border border-border bg-light p-2 text-center"
+        }, i + 1))));
+};
+export const ItemStory = ()=>{
+    return React.createElement(Container, null, React.createElement(Grid, null, React.createElement(Item, {
+        span: {
+            initial: 6,
+            lg: 2
+        },
+        className: "border border-border bg-light p-2 text-center"
+    }, "span - (xs:6, lg:3)"), React.createElement(Item, {
+        span: {
+            initial: 6,
+            lg: 10
+        },
+        className: "border border-border bg-light p-2 text-center"
+    }, "span - (xs:6, lg:10)"), React.createElement(Item, {
+        start: 5,
+        span: 4,
+        className: "border border-border bg-light p-2 text-center"
+    }, "start:5 span:4")));
+};

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

@@ -0,0 +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", {
+    responsiveVariants: string[];
+}, {}, undefined>;

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

@@ -0,0 +1,13 @@
+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',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './grid.styles.js';
+export type GridProps = {
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & HTMLAttributes<Element>;

package/dist/components/grid/grid.types.js

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