@westpac/ui 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 0.3.0
+
+### Minor Changes
+
+- add more components
+
 ## 0.2.1
 
 ### Patch Changes

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

@@ -16,7 +16,7 @@ import { useAccordionItem } from '@react-aria/accordion';
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useRef } from 'react';
 import { mergeProps, useHover, useLocale } from 'react-aria';
-import { ArrowLeftIcon, ArrowRightIcon } from '../../../index.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 import { styles as accordionItemStyles } from './accordion-item.styles.js';
 const loadAnimations = ()=>import('./accordion-item.utils.js').then((res)=>res.default);
 export function AccordionItem({ className , tag: Tag = 'div' , color , look ='default' , ...props }) {

package/dist/components/alert/alert.component.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useState } from 'react';
-import { AlertIcon, CloseIcon, InfoIcon, LimitIcon, SuccessIcon, WarningIcon } from '../index.js';
+import { AlertIcon, CloseIcon, InfoIcon, LimitIcon, SuccessIcon, WarningIcon } from '../icon/index.js';
 import { styles as alertStyles } from './alert.styles.js';
 const loadAnimations = ()=>import('./alert.utils.js').then((res)=>res.default);
 export function Alert({ look ='info' , mode ='box' , heading , headingTag: HeadingTag = 'h2' , dismissible =false , open: isOpen = true , onClose , icon , tag: Tag = 'div' , className , children , ...props }) {

package/dist/components/alert/alert.stories.js

@@ -1,4 +1,4 @@
-import { TelephoneIcon } from '../index.js';
+import { TelephoneIcon } from '../icon/index.js';
 import { Alert } from './alert.component.js';
 const meta = {
     title: 'Example/Alert',

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

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { forwardRef, useRef } from 'react';
 import { useBreadcrumbItem } from 'react-aria';
-import { ArrowRightIcon } from '../../../index.js';
+import { ArrowRightIcon } from '../../../icon/index.js';
 import { styles } from './breadcrumb-item.styles.js';
 export function BaseBreadcrumbItem({ className , isDisabled =false , isCurrent =false , href , children , tag: Tag = 'span' , ...props }, propRef) {
     const ref = useRef(propRef);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const Button: React.ForwardRefExoticComponent<{
-    iconAfter?: ((props: import("../index.js").IconProps) => JSX.Element) | undefined;
-    iconBefore?: ((props: import("../index.js").IconProps) => JSX.Element) | undefined;
+    iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+    iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
     tag?: "a" | "button" | "div" | "span" | undefined;
 } & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {

package/dist/components/button/button.stories.js

@@ -1,4 +1,4 @@
-import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../index.js';
+import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
 import { Button } from './button.component.js';
 const meta = {
     title: 'Example/Button',

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

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
-import { IconProps } from '../index.js';
+import { IconProps } from '../icon/index.js';
 import { styles } from './button.styles.js';
 export type ButtonProps = {
     /**

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

@@ -5,14 +5,14 @@ export const styles = tv({
         checkIcon: 'overflow-visible',
         textWrapper: 'flex flex-col justify-center',
         labelText: 'typography-body-10 py-[2px] pl-1',
-        hintText: 'typography-body-10 text-muted pl-1',
+        hintText: 'typography-body-10 pl-1 text-muted',
         checkbox: 'flex h-4 w-4 items-center justify-center rounded border border-hero'
     },
     variants: {
         isDisabled: {
             true: {
                 labelText: 'text-muted',
-                checkbox: 'bg-border-20 border-border'
+                checkbox: 'border-border bg-border-20'
             },
             false: {
                 base: 'hover:cursor-pointer'

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 { };

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

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

package/dist/components/grid/index.js

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

package/dist/components/index.d.ts

@@ -2,7 +2,6 @@ export * from './skip-link/index.js';
 export * from './visually-hidden/index.js';
 export * from './button/index.js';
 export * from './well/index.js';
-export * from './icon/index.js';
 export * from './alert/index.js';
 export * from './textarea/index.js';
 export * from './input/index.js';
@@ -14,3 +13,8 @@ export * from './tabs/index.js';
 export * from './checkbox-group/index.js';
 export * from './accordion/index.js';
 export * from './button-group/index.js';
+export * from './switch/index.js';
+export * from './progress-bar/index.js';
+export * from './link/index.js';
+export * from './grid/index.js';
+export * from './table/index.js';

package/dist/components/index.js

@@ -2,7 +2,6 @@ export * from './skip-link/index.js';
 export * from './visually-hidden/index.js';
 export * from './button/index.js';
 export * from './well/index.js';
-export * from './icon/index.js';
 export * from './alert/index.js';
 export * from './textarea/index.js';
 export * from './input/index.js';
@@ -14,3 +13,8 @@ export * from './tabs/index.js';
 export * from './checkbox-group/index.js';
 export * from './accordion/index.js';
 export * from './button-group/index.js';
+export * from './switch/index.js';
+export * from './progress-bar/index.js';
+export * from './link/index.js';
+export * from './grid/index.js';
+export * from './table/index.js';

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

@@ -0,0 +1,2 @@
+export { Link } from './link.component.js';
+export { type LinkProps } from './link.types.js';

package/dist/components/link/index.js

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type LinkProps } from './link.types.js';
+export declare function BaseLink({ className, children, href, iconBefore: IconBefore, iconAfter: IconAfter, iconSize, target, type, underline, ...props }: LinkProps, propRef: any): JSX.Element;
+export declare const Link: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string | undefined;
+    iconAfter?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+    iconBefore?: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;
+    iconSize?: "small" | "medium" | "large" | "xlarge" | "xsmall" | undefined;
+    type?: "inline" | "standalone" | undefined;
+    underline?: boolean | undefined;
+} & Omit<import("react-aria").AriaLinkOptions, "isDisabled" | "elementType"> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<unknown>>;

package/dist/components/link/link.component.js

@@ -0,0 +1,50 @@
+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, { forwardRef, useRef } from 'react';
+import { useLink } from 'react-aria';
+import { ArrowRightIcon } from '../icon/index.js';
+import { styles as linkStyles } from './link.styles.js';
+export function BaseLink({ className , children , href , iconBefore: IconBefore , iconAfter: IconAfter , iconSize ='small' , target , type ='standalone' , underline =true , ...props }, propRef) {
+    const ref = useRef(propRef);
+    const { linkProps  } = useLink({
+        ...props
+    }, ref);
+    const styles = linkStyles({
+        type,
+        underline
+    });
+    if (type === 'standalone' && !IconBefore && !IconAfter) {
+        IconBefore = ArrowRightIcon;
+    }
+    return React.createElement("a", _extends({}, linkProps, {
+        ref: propRef,
+        href: href,
+        target: target,
+        className: styles.base({
+            className
+        })
+    }), IconBefore && React.createElement(IconBefore, {
+        size: iconSize,
+        color: "link",
+        className: styles.iconBefore()
+    }), React.createElement("span", {
+        className: styles.text()
+    }, children), IconAfter && React.createElement(IconAfter, {
+        size: iconSize,
+        color: "link",
+        className: styles.iconAfter()
+    }));
+}
+export const Link = forwardRef(BaseLink);

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

@@ -0,0 +1,23 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Link } from './link.component.js';
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Standalone link with iconSizes, arrowRight is default but can be overridden.
+ * > If no icon is passed it defaults to ArrowRightIcon in the iconBefore position
+ */
+export declare const StandaloneLink: () => JSX.Element;
+/**
+ * > Inline link example
+ */
+export declare const InlineLink: () => JSX.Element;
+/**
+ * > example of icon sizes
+ */
+export declare const IconSizes: () => JSX.Element;