@westpac/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,57 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'flex',
+        textWrapper: 'flex flex-col justify-center',
+        labelText: 'typography-body-10 py-[2px] pl-1',
+        hintText: 'typography-body-10 pl-1 text-muted',
+        selector: 'flex h-4 w-4 items-center justify-center rounded-full border border-hero'
+    },
+    variants: {
+        isDisabled: {
+            true: {
+                labelText: 'text-muted',
+                selector: 'bg-border-20 border-border before:bg-border'
+            },
+            false: {
+                base: 'hover:cursor-pointer'
+            }
+        },
+        isSelected: {
+            true: {
+                selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero'
+            }
+        },
+        isFocusVisible: {
+            true: {
+                selector: 'rounded-full focus-outline'
+            }
+        },
+        orientation: {
+            horizontal: {
+                base: 'mr-3'
+            },
+            vertical: {
+                base: ''
+            }
+        },
+        size: {
+            large: {
+                selector: 'h-5 w-5',
+                base: 'mb-2'
+            },
+            medium: {
+                selector: 'h-4 w-4',
+                base: 'mb-1'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/radio-group/components/radio/radio.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { type AriaRadioProps } from 'react-aria';
+export type RadioProps = {
+    /**
+     * `string` for overriding base style
+     */
+    className?: string;
+    /**
+     * Renders hint under radio, most likely a `string` but could be something else
+     */
+    hint?: ReactNode;
+} & AriaRadioProps;

package/dist/components/radio-group/components/radio/radio.types.js

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

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './radio-group.component.js';
+export { type RadioGroupProps } from './radio-group.types.js';

package/dist/components/radio-group/index.js

@@ -0,0 +1 @@
+export { RadioGroup } from './radio-group.component.js';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
+export declare const RadioGroupContext: React.Context<RadioGroupContextState>;
+export declare function RadioGroup({ className, children, label, orientation, showAmount, size, ...props }: RadioGroupProps): JSX.Element;
+export declare namespace RadioGroup {
+    var Radio: React.ForwardRefExoticComponent<{
+        className?: string | undefined;
+        hint?: React.ReactNode;
+    } & import("react-aria").AriaRadioProps & React.RefAttributes<unknown>>;
+}

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

@@ -0,0 +1,100 @@
+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, useEffect, useMemo, useRef, useState } from 'react';
+import { useFocusRing, useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+import { Button } from '../button/index.js';
+import { ExpandMoreIcon } from '../icon/index.js';
+import { Radio } from './components/radio/radio.component.js';
+import { styles as radioGroupStyles } from './radio-group.styles.js';
+export const RadioGroupContext = createContext({
+    name: '',
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false,
+    validationState: null,
+    selectedValue: null,
+    setSelectedValue: ()=>null,
+    lastFocusedValue: null,
+    setLastFocusedValue: ()=>null,
+    orientation: 'vertical',
+    size: 'medium'
+});
+export function RadioGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , ...props }) {
+    const state = useRadioGroupState({
+        ...props,
+        label,
+        orientation
+    });
+    const { radioGroupProps , labelProps  } = useRadioGroup({
+        ...props,
+        label,
+        orientation
+    }, state);
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const [hiddenOptions, setHiddenOptions] = useState(showAmount > 0);
+    const firstNewRadioRef = useRef(null);
+    const revealAmount = children && children.length - showAmount;
+    const styles = radioGroupStyles({
+        orientation,
+        isFocusVisible
+    });
+    const childrenToRender = useMemo(()=>{
+        const newChildren = children.map((child, index)=>{
+            return cloneElement(child, {
+                key: index,
+                ref: index === showAmount ? firstNewRadioRef : null
+            });
+        });
+        return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
+    }, [
+        children,
+        hiddenOptions,
+        showAmount
+    ]);
+    useEffect(()=>{
+        if (showAmount > 0 && !hiddenOptions) {
+            var _firstNewRadioRef_current;
+            (_firstNewRadioRef_current = firstNewRadioRef.current) === null || _firstNewRadioRef_current === void 0 ? void 0 : _firstNewRadioRef_current.focus();
+        }
+    }, [
+        hiddenOptions,
+        showAmount
+    ]);
+    return React.createElement("div", _extends({
+        className: styles.base({
+            className
+        })
+    }, radioGroupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement("div", {
+        className: styles.radioWrapper()
+    }, React.createElement(RadioGroupContext.Provider, {
+        value: {
+            ...state,
+            orientation,
+            size
+        }
+    }, childrenToRender), hiddenOptions && React.createElement(Button, _extends({
+        onClick: ()=>setHiddenOptions(false),
+        className: styles.revealButton(),
+        look: "link",
+        iconAfter: ()=>React.createElement(ExpandMoreIcon, {
+                size: "small",
+                color: "link"
+            })
+    }, focusProps), React.createElement("p", {
+        className: styles.buttonText()
+    }, `Show ${revealAmount} more ${revealAmount === 1 ? 'item' : 'items'}`))));
+}
+RadioGroup.Radio = Radio;

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

@@ -0,0 +1,29 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { RadioGroup } from './radio-group.component.js';
+declare const meta: Meta<typeof RadioGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultRadio: Story;
+/**
+ * > RadioGroup with default value
+ */
+export declare const RadioWithDefaultValue: Story;
+/**
+ * > RadioGroup with radios aligned horizontally
+ */
+export declare const RadioHorizontal: Story;
+/**
+ * > RadioGroup that is disabled
+ */
+export declare const RadioDisabled: Story;
+/**
+ * > RadioGroup with large radios
+ */
+export declare const RadioLarge: Story;
+/**
+ * > RadioGroup that has hidden radios that will be revealed on clicking on button
+ */
+export declare const RadioWithHiddenOptions: Story;

package/dist/components/radio-group/radio-group.stories.js

@@ -0,0 +1,136 @@
+import { RadioGroup } from './radio-group.component.js';
+const meta = {
+    title: 'Example/RadioGroup',
+    component: RadioGroup,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "flex p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    },
+    args: {
+        label: React.createElement("h2", null, "Test")
+    },
+    argTypes: {
+        orientation: {
+            description: "Controls orientation of `Radio` components, can't be applied directly on `Radio` \n\n `'horizontal'` `'vertical'`",
+            type: {
+                name: 'enum',
+                value: [
+                    'horizontal',
+                    'vertical'
+                ]
+            }
+        },
+        isDisabled: {
+            description: 'Controls whether all radio options are disabled or not',
+            type: {
+                name: 'boolean'
+            }
+        },
+        label: {
+            description: 'Not part of original GEL component but added for compatability with React Aria and accessibility. Styling can be done by passing tag with className as value.'
+        }
+    }
+};
+export default meta;
+export const DefaultRadio = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};
+export const RadioWithDefaultValue = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        defaultValue: 'Option 1'
+    }
+};
+export const RadioHorizontal = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        orientation: 'horizontal'
+    }
+};
+export const RadioDisabled = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        isDisabled: true
+    }
+};
+export const RadioLarge = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        size: 'large'
+    }
+};
+export const RadioWithHiddenOptions = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        showAmount: 1
+    }
+};

package/dist/components/radio-group/radio-group.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            radioWrapper: string;
+        };
+        vertical: {
+            radioWrapper: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            revealButton: string;
+        };
+    };
+}, {
+    base: string;
+    radioWrapper: string;
+    revealButton: string;
+    buttonText: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    orientation: {
+        horizontal: {
+            radioWrapper: string;
+        };
+        vertical: {
+            radioWrapper: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            revealButton: string;
+        };
+    };
+}, {
+    base: string;
+    radioWrapper: string;
+    revealButton: string;
+    buttonText: string;
+}>;

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

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        radioWrapper: '',
+        revealButton: 'gap-1 px-0 text-text no-underline hover:underline',
+        buttonText: 'typography-body-10'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                radioWrapper: 'flex flex-wrap'
+            },
+            vertical: {
+                radioWrapper: 'flex flex-col'
+            }
+        },
+        isFocusVisible: {
+            true: {
+                revealButton: 'focus-outline'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/radio-group/radio-group.types.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { type AriaRadioGroupProps } from 'react-aria';
+import { type RadioGroupState } from 'react-stately';
+export type RadioGroupProps = {
+    /**
+     * The `Radio` components to render
+     */
+    children: ReactNode[];
+    /**
+     * String to override base style
+     */
+    className?: string;
+    /**
+     * Amount of Radios to display, remainder will be hidden behind reveal button
+     */
+    showAmount?: number;
+    /**
+     * Controls size of `Radio` components, can't be applied directly to `Radio`
+     */
+    size?: 'medium' | 'large';
+} & Omit<AriaRadioGroupProps, 'errorMessage' | 'description'>;
+export type RadioGroupContextState = {
+    /**
+     * Controls orientation of `Radio` components, can't be applied directly on `Radio`
+     */
+    orientation: 'vertical' | 'horizontal';
+    /**
+     * Controls size of `Radio` components, can't be applied directly on `Radio`
+     */
+    size: 'medium' | 'large';
+} & RadioGroupState;

package/dist/components/radio-group/radio-group.types.js

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

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

@@ -0,0 +1,2 @@
+export { Select } from './select.component.js';
+export { type SelectProps } from './select.types.js';

package/dist/components/select/index.js

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const Select: React.ForwardRefExoticComponent<import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}, undefined>> & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/select/select.component.js

@@ -0,0 +1,27 @@
+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 } from 'react';
+import { styles } from './select.styles.js';
+function BaseSelect({ className , size ='medium' , invalid =false , children , ...props }, ref) {
+    return React.createElement("select", _extends({
+        ref: ref,
+        className: styles({
+            className,
+            size,
+            invalid
+        })
+    }, props), children);
+}
+export const Select = forwardRef(BaseSelect);

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

@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Select } from './select.component.js';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Invalid usage example
+ */
+export declare const InvalidStory: Story;
+/**
+ * > Disabled usage example
+ */
+export declare const DisabledStory: Story;

package/dist/components/select/select.stories.js

@@ -0,0 +1,58 @@
+import { Select } from './select.component.js';
+const meta = {
+    title: 'Example/Select',
+    component: Select,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "flex items-center justify-center p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: React.createElement(React.Fragment, null, React.createElement("option", {
+            value: "option-1"
+        }, "option 1"), React.createElement("option", {
+            value: "option-2"
+        }, "option 2"), React.createElement("option", {
+            value: "option-3"
+        }, "option 3"), React.createElement("option", {
+            value: "option-4"
+        }, "option 4"))
+    }
+};
+export const InvalidStory = {
+    args: {
+        invalid: true,
+        children: React.createElement(React.Fragment, null, React.createElement("option", {
+            value: "option-1"
+        }, "option 1"), React.createElement("option", {
+            value: "option-2"
+        }, "option 2"), React.createElement("option", {
+            value: "option-3"
+        }, "option 3"), React.createElement("option", {
+            value: "option-4"
+        }, "option 4"))
+    }
+};
+export const DisabledStory = {
+    args: {
+        disabled: true,
+        children: React.createElement(React.Fragment, null, React.createElement("option", {
+            value: "option-1"
+        }, "option 1"), React.createElement("option", {
+            value: "option-2"
+        }, "option 2"), React.createElement("option", {
+            value: "option-3"
+        }, "option 3"), React.createElement("option", {
+            value: "option-4"
+        }, "option 4"))
+    }
+};

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

@@ -0,0 +1,25 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}, undefined>;

package/dist/components/select/select.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline',
+    variants: {
+        size: {
+            small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
+            medium: 'form-control-medium bg-[right_0.75rem_center] pr-[calc(0.5rem+14px+0.75rem)]',
+            large: 'form-control-large bg-[right_0.9375rem_center] pr-[calc(0.5rem+14px+0.9375rem)]',
+            xlarge: 'form-control-xlarge bg-[right_1.125rem_center] pr-[calc(0.5rem+14px+1.125rem)]'
+        },
+        invalid: {
+            true: 'border-danger',
+            false: 'border-borderDark'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,4 @@
+import { SelectHTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './select.styles.js';
+export type SelectProps = VariantProps<typeof styles> & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>;

package/dist/components/select/select.types.js

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

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

@@ -0,0 +1,2 @@
+export * from './tab/index.js';
+export * from './tab-panel/index.js';

package/dist/components/tabs/components/index.js

@@ -0,0 +1,2 @@
+export * from './tab/index.js';
+export * from './tab-panel/index.js';