@westpac/ui 0.1.0 → 0.2.0

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

@@ -1,3 +1,4 @@
+/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Button } from './button.component.js';
 declare const meta: Meta<typeof Button>;
@@ -8,6 +9,30 @@ type Story = StoryObj<typeof meta>;
  */
 export declare const DefaultStory: Story;
 /**
- * > Responsive size
+ * > Button looks
  */
-export declare const ResponsiveSizeStory: Story;
+export declare const ButtonColors: () => JSX.Element;
+/**
+ * > Button sizes
+ */
+export declare const ButtonSizes: () => JSX.Element;
+/**
+ * > Block buttons
+ */
+export declare const BlockButtons: () => JSX.Element;
+/**
+ * > Buttons with icons
+ */
+export declare const ButtonIcons: () => JSX.Element;
+/**
+ * > Responsive styles
+ */
+export declare const ResponsiveSize: () => JSX.Element;
+/**
+ * > As anchor tag
+ */
+export declare const AsLinkStory: Story;
+/**
+ * > Disabled look
+ */
+export declare const DisabledStory: Story;

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

@@ -1,3 +1,4 @@
+import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../index.js';
 import { Button } from './button.component.js';
 const meta = {
     title: 'Example/Button',
@@ -17,18 +18,209 @@ const meta = {
     }
 };
 export default meta;
+const LOOKS = [
+    'primary',
+    'hero',
+    'faint',
+    'link'
+];
+const SOFT_LOOKS = [
+    'primary',
+    'hero',
+    'faint'
+];
+const SIZES = [
+    'small',
+    'medium',
+    'large',
+    'xlarge'
+];
 export const DefaultStory = {
     args: {
         children: 'Button text'
     }
 };
-export const ResponsiveSizeStory = {
-    args: {
-        children: 'Button text',
+export const ButtonColors = ()=>React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, React.createElement("h3", {
+        className: "font-bold"
+    }, "Default"), React.createElement("div", {
+        className: "flex gap-2"
+    }, LOOKS.map((look)=>React.createElement(Button, {
+            look: look
+        }, look))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Soft"), React.createElement("div", {
+        className: "flex gap-2"
+    }, SOFT_LOOKS.map((look)=>React.createElement(Button, {
+            look: look,
+            soft: true
+        }, look))));
+export const ButtonSizes = ()=>React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, SIZES.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "font-bold"
+        }, size), React.createElement("div", {
+            className: "flex gap-2"
+        }, LOOKS.map((look)=>React.createElement(Button, {
+                look: look,
+                size: size
+            }, look))), React.createElement("div", {
+            className: "flex gap-2"
+        }, SOFT_LOOKS.map((look)=>React.createElement(Button, {
+                look: look,
+                size: size,
+                soft: true
+            }, look))))));
+export const BlockButtons = ()=>React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, SIZES.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "font-bold"
+        }, size), React.createElement("div", {
+            className: "flex flex-col gap-2"
+        }, SOFT_LOOKS.map((look)=>React.createElement(Button, {
+                look: look,
+                size: size,
+                block: true
+            }, look))))));
+export const ButtonIcons = ()=>React.createElement("div", null, React.createElement("div", {
+        className: "mb-4 flex flex-col gap-2"
+    }, React.createElement("h2", {
+        className: "typography-body-7 font-bold"
+    }, "Icon Before"), React.createElement("h3", {
+        className: "font-bold"
+    }, "Colors"), React.createElement("div", {
+        className: "flex gap-2"
+    }, LOOKS.map((look)=>React.createElement(Button, {
+            look: look,
+            iconBefore: BurgerIcon
+        }, look))), React.createElement("div", {
+        className: "flex gap-2"
+    }, SOFT_LOOKS.map((look)=>React.createElement(Button, {
+            look: look,
+            soft: true,
+            iconBefore: BurgerIcon
+        }, look))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Sizes"), React.createElement("div", null, SIZES.map((size)=>React.createElement(Button, {
+            size: size,
+            iconBefore: BurgerIcon,
+            className: "mr-2"
+        }, "Button"))), React.createElement("div", null, SIZES.map((size)=>React.createElement(Button, {
+            size: size,
+            iconBefore: BurgerIcon,
+            soft: true,
+            className: "mr-2"
+        }, "Button"))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Block"), React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, React.createElement(Button, {
+        block: true,
+        iconBefore: ArrowLeftIcon
+    }, "Button"), React.createElement(Button, {
+        block: true,
+        justify: true,
+        iconBefore: ArrowLeftIcon
+    }, "Button"))), React.createElement("div", {
+        className: "mb-4 flex flex-col gap-2"
+    }, React.createElement("h2", {
+        className: "typography-body-7 font-bold"
+    }, "Icon After"), React.createElement("h3", {
+        className: "font-bold"
+    }, "Colors"), React.createElement("div", {
+        className: "flex gap-2"
+    }, LOOKS.map((look)=>React.createElement(Button, {
+            look: look,
+            iconAfter: BurgerIcon
+        }, look))), React.createElement("div", {
+        className: "flex gap-2"
+    }, SOFT_LOOKS.map((look)=>React.createElement(Button, {
+            look: look,
+            soft: true,
+            iconAfter: BurgerIcon
+        }, look))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Sizes"), React.createElement("div", null, SIZES.map((size)=>React.createElement(Button, {
+            size: size,
+            iconAfter: BurgerIcon,
+            className: "mr-2"
+        }, "Button"))), React.createElement("div", null, SIZES.map((size)=>React.createElement(Button, {
+            size: size,
+            iconAfter: BurgerIcon,
+            soft: true,
+            className: "mr-2"
+        }, "Button"))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Block"), React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, React.createElement(Button, {
+        block: true,
+        iconAfter: ArrowRightIcon
+    }, "Button"), React.createElement(Button, {
+        block: true,
+        justify: true,
+        iconAfter: ArrowRightIcon
+    }, "Button"))), React.createElement("div", {
+        className: "mb-4 flex flex-col gap-2"
+    }, React.createElement("h2", {
+        className: "typography-body-7 font-bold"
+    }, "Icon Only"), React.createElement("h3", {
+        className: "font-bold"
+    }, "Colors"), React.createElement("div", {
+        className: "flex gap-2"
+    }, LOOKS.map((look)=>React.createElement(Button, {
+            look: look,
+            iconAfter: BurgerIcon
+        }))), React.createElement("div", {
+        className: "flex gap-2"
+    }, SOFT_LOOKS.map((look)=>React.createElement(Button, {
+            look: look,
+            soft: true,
+            iconAfter: BurgerIcon
+        }))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Sizes"), React.createElement("div", null, SIZES.map((size)=>React.createElement(Button, {
+            size: size,
+            iconAfter: BurgerIcon,
+            className: "mr-2"
+        }))), React.createElement("div", null, SIZES.map((size)=>React.createElement(Button, {
+            size: size,
+            iconAfter: BurgerIcon,
+            soft: true,
+            className: "mr-2"
+        }))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Block"), React.createElement("div", {
+        className: "flex flex-col gap-2"
+    }, React.createElement(Button, {
+        block: true,
+        iconAfter: BurgerIcon
+    }))));
+export const ResponsiveSize = ()=>React.createElement("div", null, React.createElement(Button, {
+        size: {
+            initial: 'small',
+            md: 'large',
+            lg: 'xlarge'
+        }
+    }, "Responsive Button"), ' ', React.createElement(Button, {
+        iconAfter: BurgerIcon,
         size: {
             initial: 'small',
             md: 'large',
             lg: 'xlarge'
         }
+    }, "Responsive Button with icon"), ' ');
+export const AsLinkStory = {
+    args: {
+        children: 'Link button',
+        tag: 'a',
+        href: '#'
+    }
+};
+export const DisabledStory = {
+    args: {
+        children: 'Disabled button',
+        disabled: true
     }
 };

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

@@ -1,35 +1,110 @@
+/**
+ * Current GEL design not using design tokens in some cases. Because of that, we need specify numeric values such as pb-[0.25rem] for spacing
+ */
 export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    color: {
-        hero: string;
-        primary: string;
-        link: string;
-        faint: string;
-        'hero-soft': string;
-        'primary-soft': string;
-        'faint-soft': string;
-    };
-}, undefined, "inline-flex items-center gap-2 rounded transition-colors disabled:pointer-events-none disabled:opacity-50", {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        xlarge: {
+            base: string;
+        };
+    };
+    look: {
+        primary: {
+            base: string;
+        };
+        hero: {
+            base: string;
+        };
+        faint: {
+            base: string;
+        };
+        link: {
+            base: string;
+        };
+    };
+    soft: {
+        true: {
+            base: string;
+        };
+    };
+    block: {
+        true: {
+            base: string;
+        };
+    };
+    justify: {
+        true: {
+            base: string;
+        };
+    };
+    hasChildren: {
+        true: string;
+    };
+}, {
+    base: string;
+    iconBefore: string;
+    iconAfter: string;
+    text: string;
+}, undefined, {
     responsiveVariants: string[];
 }, {
     size: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
-    };
-    color: {
-        hero: string;
-        primary: string;
-        link: string;
-        faint: string;
-        'hero-soft': string;
-        'primary-soft': string;
-        'faint-soft': string;
-    };
-}, undefined>;
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        xlarge: {
+            base: string;
+        };
+    };
+    look: {
+        primary: {
+            base: string;
+        };
+        hero: {
+            base: string;
+        };
+        faint: {
+            base: string;
+        };
+        link: {
+            base: string;
+        };
+    };
+    soft: {
+        true: {
+            base: string;
+        };
+    };
+    block: {
+        true: {
+            base: string;
+        };
+    };
+    justify: {
+        true: {
+            base: string;
+        };
+    };
+    hasChildren: {
+        true: string;
+    };
+}, {
+    base: string;
+    iconBefore: string;
+    iconAfter: string;
+    text: string;
+}>;

package/dist/components/button/button.styles.js

@@ -1,23 +1,99 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'inline-flex items-center gap-2 rounded transition-colors disabled:pointer-events-none disabled:opacity-50',
+    slots: {
+        base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50',
+        iconBefore: '',
+        iconAfter: '',
+        text: 'overflow-hidden text-ellipsis'
+    },
     variants: {
         size: {
-            small: 'typography-body-10 px-1',
-            medium: 'typography-body-9 px-2 py-1',
-            large: 'typography-body-9 px-3 py-1',
-            xlarge: 'typography-body-8 px-4 py-2'
-        },
-        color: {
-            hero: 'border border-hero bg-hero text-white hover:bg-hero-300 active:bg-hero-200',
-            primary: 'border border-primary bg-primary text-white hover:bg-primary-300 active:bg-primary-200',
-            link: 'text-link underline',
-            faint: 'border border-border bg-light text-text hover:bg-white active:bg-white',
-            'hero-soft': 'border border-hero bg-white text-text hover:bg-hero-300 hover:text-white active:bg-hero-200',
-            'primary-soft': 'border border-primary bg-white text-text hover:bg-primary-300 hover:text-white active:bg-primary-200',
-            'faint-soft': 'border border-border bg-white text-text hover:bg-light active:bg-light'
+            small: {
+                base: 'typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem]'
+            },
+            medium: {
+                base: 'typography-body-9 px-2 py-[0.3125rem]'
+            },
+            large: {
+                base: 'typography-body-9 px-[0.9375rem] py-[0.5rem]'
+            },
+            xlarge: {
+                base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]'
+            }
+        },
+        look: {
+            primary: {
+                base: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50'
+            },
+            hero: {
+                base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50'
+            },
+            faint: {
+                base: 'border border-border bg-light text-muted hover:bg-white active:bg-white'
+            },
+            link: {
+                base: 'text-link underline'
+            }
+        },
+        soft: {
+            true: {
+                base: 'bg-white'
+            }
+        },
+        block: {
+            true: {
+                base: 'flex w-full'
+            }
+        },
+        justify: {
+            true: {
+                base: 'justify-between'
+            }
+        },
+        hasChildren: {
+            true: ''
         }
-    }
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'base'
+            ],
+            look: 'primary',
+            soft: true,
+            className: 'text-text hover:text-white'
+        },
+        {
+            slots: [
+                'base'
+            ],
+            look: 'hero',
+            soft: true,
+            className: 'text-text hover:text-white'
+        },
+        {
+            slots: [
+                'base'
+            ],
+            look: 'faint',
+            soft: true,
+            className: 'hover:bg-light active:bg-light'
+        },
+        {
+            slots: [
+                'iconBefore'
+            ],
+            hasChildren: true,
+            className: 'mr-[0.4em]'
+        },
+        {
+            slots: [
+                'iconAfter'
+            ],
+            hasChildren: true,
+            className: 'ml-[0.4em]'
+        }
+    ]
 }, {
     responsiveVariants: [
         'xsl',

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

@@ -1,9 +1,18 @@
-import { AnchorHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
+import { IconProps } from '../index.js';
 import { styles } from './button.styles.js';
 export type ButtonProps = {
+    /**
+     * Places an icon within the button, after the button’s text
+     */
+    iconAfter?: (props: IconProps) => JSX.Element;
+    /**
+     * Places an icon within the button, before the button’s text
+     */
+    iconBefore?: (props: IconProps) => JSX.Element;
     /**
      * Tag to render
      */
     tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
-} & Omit<AnchorHTMLAttributes<Element>, 'type' | 'color'> & VariantProps<typeof styles>;
+} & ButtonHTMLAttributes<Element> & AnchorHTMLAttributes<Element> & VariantProps<typeof styles>;

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

@@ -0,0 +1 @@
+export declare const getIconSize: (size: string | object) => {};

package/dist/components/button/button.utils.js

@@ -0,0 +1,16 @@
+export const getIconSize = (size)=>{
+    const iconSizeMap = {
+        small: 'small',
+        medium: 'small',
+        large: 'medium',
+        xlarge: 'medium'
+    };
+    if (typeof size === 'string') {
+        return iconSizeMap[size];
+    } else {
+        return Object.entries(size).reduce((acc, [key, val])=>({
+                ...acc,
+                [key]: iconSizeMap[val]
+            }), {});
+    }
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
+export declare const ButtonGroupContext: React.Context<ButtonGroupContextState>;
+export declare function ButtonGroup({ className, children, label, look, size, block, ...props }: ButtonGroupProps): JSX.Element;
+export declare namespace ButtonGroup {
+    var Button: typeof import("./components/button/button.component.js").Button;
+}

package/dist/components/button-group/button-group.component.js

@@ -0,0 +1,67 @@
+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, { cloneElement, createContext } from 'react';
+import { useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+import { styles as buttonGroupStyles } from './button-group.styles.js';
+import { Button } from './components/button/button.component.js';
+export const ButtonGroupContext = createContext({
+    name: '',
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false,
+    validationState: null,
+    selectedValue: null,
+    setSelectedValue: ()=>null,
+    lastFocusedValue: null,
+    setLastFocusedValue: ()=>null,
+    block: false,
+    look: 'hero',
+    size: 'medium'
+});
+export function ButtonGroup({ className , children , label , look ='hero' , size ='medium' , block =false , ...props }) {
+    const state = useRadioGroupState({
+        ...props,
+        label,
+        orientation: 'horizontal'
+    });
+    const { radioGroupProps , labelProps  } = useRadioGroup({
+        ...props,
+        label,
+        orientation: 'horizontal'
+    }, state);
+    const styles = buttonGroupStyles({});
+    const childrenToRender = children.map((child, index)=>{
+        return cloneElement(child, {
+            key: index,
+            className: 'group/buttons'
+        });
+    });
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, radioGroupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement("div", {
+        className: styles.buttonWrapper()
+    }, React.createElement(ButtonGroupContext.Provider, {
+        value: {
+            ...state,
+            size,
+            look,
+            block
+        }
+    }, childrenToRender)));
+}
+ButtonGroup.Button = Button;

package/dist/components/button-group/button-group.stories.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { ButtonGroup } from './button-group.component.js';
+declare const meta: Meta<typeof ButtonGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * Button group looks
+ */
+export declare const ButtonGroupColors: () => JSX.Element;
+/**
+ * Button group sizes
+ */
+export declare const ButtonGroupSizes: () => JSX.Element;
+/**
+ * Button group responsive sizing
+ */
+export declare const ButtonGroupResponsiveSize: Story;
+/**
+ * Button group block
+ */
+export declare const ButtonGroupBlock: () => JSX.Element;
+/**
+ * Disabled button group
+ */
+export declare const DisabledButtonGroup: Story;