@westpac/ui 0.5.0 → 0.7.0

package/dist/components/button-dropdown/components/panel/panel.component.js

@@ -13,34 +13,41 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useCallback, useEffect, useRef } from 'react';
-import { DismissButton, Overlay, mergeProps, useOverlay, usePopover } from 'react-aria';
+import { DismissButton, Overlay, mergeProps, useFocusRing, usePopover } from 'react-aria';
 import { styles as panelStyles } from './panel.styles.js';
 export function Panel({ className , children , state , block , id , ...props }) {
     var _props_triggerRef_current;
     const popoverRef = useRef(null);
-    const { overlayProps  } = useOverlay({
-        shouldCloseOnBlur: true,
-        onClose: state.close
-    }, popoverRef);
     const { popoverProps  } = usePopover({
         popoverRef,
         shouldFlip: false,
+        isNonModal: true,
         ...props
     }, state);
-    const styles = panelStyles({});
+    const { isFocused , focusProps  } = useFocusRing();
+    const styles = panelStyles({
+        isFocused
+    });
     const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
     const focusHandler = useCallback((event)=>{
+        if (event.target && popoverRef.current && event.target !== props.triggerRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
+    }, [
+        state.isOpen
+    ]);
+    const clickHandler = useCallback((event)=>{
         if (event.target && popoverRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
     }, [
         state.isOpen
     ]);
     useEffect(()=>{
         window.document.addEventListener('focusin', focusHandler);
+        window.document.addEventListener('click', clickHandler);
         return ()=>{
             window.document.removeEventListener('focusin', focusHandler);
+            window.document.removeEventListener('click', clickHandler);
         };
     }, []);
-    return React.createElement(Overlay, null, React.createElement("div", _extends({}, mergeProps(popoverProps, overlayProps), {
+    return React.createElement(Overlay, null, React.createElement("div", _extends({}, mergeProps(popoverProps, focusProps), {
         id: id,
         "data-testid": "panel-dialog",
         style: {

package/dist/components/button-dropdown/components/panel/panel.styles.d.ts

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

package/dist/components/button-dropdown/components/panel/panel.styles.js

@@ -1,10 +1,16 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'border-border mt-[0.1875rem] rounded-[3px] border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
-        dialog: 'focus:outline-none'
+        base: 'mt-[0.1875rem] rounded-[3px] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+        dialog: ''
     },
-    variants: {}
+    variants: {
+        isFocused: {
+            true: {
+                dialog: 'outline-none'
+            }
+        }
+    }
 }, {
     responsiveVariants: [
         'xsl',

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

@@ -1,7 +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 function ButtonGroup({ className, children, label, look, size, block, errorMessage, hintMessage, ...props }: ButtonGroupProps): import("react/jsx-runtime").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

@@ -15,6 +15,7 @@ function _extends() {
 import React, { cloneElement, createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 import { Button } from './components/button/button.component.js';
 export const ButtonGroupContext = createContext({
@@ -31,14 +32,15 @@ export const ButtonGroupContext = createContext({
     look: 'hero',
     size: 'medium'
 });
-export function ButtonGroup({ className , children , label , look ='hero' , size ='medium' , block =false , ...props }) {
+export function ButtonGroup({ className , children , label , look ='hero' , size ='medium' , block =false , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
         ...props,
         label,
         orientation: 'horizontal'
     });
-    const { radioGroupProps , labelProps  } = useRadioGroup({
+    const { radioGroupProps , labelProps , errorMessageProps , descriptionProps  } = useRadioGroup({
         ...props,
+        'aria-errormessage': Array.isArray(errorMessage) ? errorMessage.join(', ') : errorMessage,
         label,
         orientation: 'horizontal'
     }, state);
@@ -53,7 +55,9 @@ export function ButtonGroup({ className , children , label , look ='hero' , size
         className: styles.base({
             className
         })
-    }, radioGroupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement("div", {
+    }, radioGroupProps), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", {
         className: styles.buttonWrapper()
     }, React.createElement(ButtonGroupContext.Provider, {
         value: {

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

@@ -1,4 +1,3 @@
-/// <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>;
@@ -7,24 +6,28 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * Button group looks
  */
-export declare const ButtonGroupColors: () => JSX.Element;
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
 /**
  * Button group sizes
  */
-export declare const ButtonGroupSizes: () => JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * Button group responsive sizing
  */
-export declare const ButtonGroupResponsiveSize: Story;
+export declare const ResponsiveSize: Story;
 /**
  * Button group block
  */
-export declare const ButtonGroupBlock: () => JSX.Element;
+export declare const Block: () => import("react/jsx-runtime").JSX.Element;
 /**
  * Disabled button group
  */
-export declare const DisabledButtonGroup: Story;
+export declare const Disabled: Story;
+/**
+ * Error message and label
+ */
+export declare const ErrorMessageAndLabel: Story;

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

@@ -1,18 +1,13 @@
 import { ButtonGroup } from './button-group.component.js';
 const meta = {
-    title: 'Example/ButtonGroup',
+    title: 'Components/ButtonGroup',
     component: ButtonGroup,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-3"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     argTypes: {
         isDisabled: {
             description: 'Controls whether all radio options are disabled or not',
@@ -43,7 +38,7 @@ const SIZES = [
     'large',
     'xlarge'
 ];
-export const DefaultStory = {
+export const Default = {
     args: {
         children: [
             React.createElement(ButtonGroup.Button, {
@@ -58,7 +53,7 @@ export const DefaultStory = {
         ]
     }
 };
-export const ButtonGroupColors = ()=>React.createElement("div", {
+export const Colors = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, LOOKS.map((look)=>React.createElement(ButtonGroup, {
             label: React.createElement("h3", {
@@ -72,7 +67,7 @@ export const ButtonGroupColors = ()=>React.createElement("div", {
         }, "Option 2"), React.createElement(ButtonGroup.Button, {
             value: "Option 3"
         }, "Option 3"))));
-export const ButtonGroupSizes = ()=>React.createElement("div", {
+export const Sizes = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, SIZES.map((size)=>React.createElement(ButtonGroup, {
             label: React.createElement("h3", {
@@ -86,7 +81,7 @@ export const ButtonGroupSizes = ()=>React.createElement("div", {
         }, "Option 2"), React.createElement(ButtonGroup.Button, {
             value: "Option 3"
         }, "Option 3"))));
-export const ButtonGroupResponsiveSize = {
+export const ResponsiveSize = {
     args: {
         children: [
             React.createElement(ButtonGroup.Button, {
@@ -106,7 +101,7 @@ export const ButtonGroupResponsiveSize = {
         }
     }
 };
-export const ButtonGroupBlock = ()=>React.createElement("div", {
+export const Block = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, SIZES.map((size)=>React.createElement(ButtonGroup, {
             block: true,
@@ -121,7 +116,7 @@ export const ButtonGroupBlock = ()=>React.createElement("div", {
         }, "Option 2"), React.createElement(ButtonGroup.Button, {
             value: "Option 3"
         }, "Option 3"))));
-export const DisabledButtonGroup = {
+export const Disabled = {
     args: {
         children: [
             React.createElement(ButtonGroup.Button, {
@@ -137,3 +132,22 @@ export const DisabledButtonGroup = {
         isDisabled: true
     }
 };
+export const ErrorMessageAndLabel = {
+    args: {
+        label: 'Are you an existing customer?',
+        errorMessage: 'This is an inline error message',
+        validationState: 'invalid',
+        hintMessage: 'Hint: choose from one of the following options',
+        children: [
+            React.createElement(ButtonGroup.Button, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(ButtonGroup.Button, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(ButtonGroup.Button, {
+                value: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};

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

@@ -15,6 +15,14 @@ export type ButtonGroupProps = {
      * String to override base style
      */
     className?: string;
+    /**
+     * error message
+     */
+    errorMessage?: string;
+    /**
+     * hint message
+     */
+    hintMessage?: string;
     /**
      * Controls look of `Button` components, can't be applied directly to `Button`
      */

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ButtonProps } from './button.types.js';
-export declare function Button({ className, children, ...props }: ButtonProps): JSX.Element;
+export declare function Button({ className, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        button: 'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0'
+        button: 'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden'
     },
     variants: {
         isDisabled: {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js';
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextState>;
-export declare function CheckboxGroup({ className, children, label, orientation, showAmount, size, ...props }: CheckboxGroupProps): JSX.Element;
+export declare function CheckboxGroup({ className, children, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CheckboxGroup {
     var Checkbox: React.ForwardRefExoticComponent<{
         className?: string | undefined;

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

@@ -17,6 +17,7 @@ import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 import { styles as checkboxStyles } from './checkbox-group.styles.js';
 import { Checkbox } from './components/checkbox/checkbox.component.js';
 export const CheckboxGroupContext = createContext({
@@ -32,12 +33,12 @@ export const CheckboxGroupContext = createContext({
     toggleValue: ()=>null,
     validationState: 'valid'
 });
-export function CheckboxGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , ...props }) {
+export function CheckboxGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useCheckboxGroupState({
         ...props,
         label
     });
-    const { groupProps , labelProps  } = useCheckboxGroup({
+    const { groupProps , labelProps , errorMessageProps , descriptionProps  } = useCheckboxGroup({
         ...props,
         label
     }, state);
@@ -75,7 +76,9 @@ export function CheckboxGroup({ className , children , label , orientation ='ver
         className: styles.base({
             className
         })
-    }, groupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement("div", {
+    }, groupProps), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", {
         className: styles.itemWrapper()
     }, React.createElement(CheckboxGroupContext.Provider, {
         value: {

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

@@ -6,24 +6,44 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
+/**
+ * > Default usage example
+ */
+export declare const LongLines: Story;
 /**
  * > CheckboxGroup with default value
  */
-export declare const CheckboxGroupWithDefaultValue: Story;
+export declare const DefaultValue: Story;
 /**
  * > CheckboxGroup with checkboxes aligned horizontally
  */
-export declare const CheckboxGroupHorizontal: Story;
+export declare const Inline: Story;
+/**
+ * > Horizontal long lines
+ */
+export declare const InlineLongLines: Story;
 /**
  * > CheckboxGroup that is disabled
  */
-export declare const CheckboxGroupDisabled: Story;
+export declare const Disabled: Story;
 /**
  * > CheckboxGroup with large checkboxes
  */
-export declare const CheckboxGroupLarge: Story;
+export declare const Large: Story;
 /**
  * > CheckboxGroup that has hidden checkboxes that will be revealed on clicking on button
  */
-export declare const CheckboxGroupWithHiddenItems: Story;
+export declare const HiddenItems: Story;
+/**
+ * > Hint text
+ */
+export declare const HintText: Story;
+/**
+ * > On change (check console log)
+ */
+export declare const OnChange: Story;
+/**
+ * Error message and label
+ */
+export declare const ErrorMessageAndLabel: Story;

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

@@ -1,18 +1,15 @@
 import { CheckboxGroup } from './checkbox-group.component.js';
 const meta = {
-    title: 'Example/CheckboxGroup',
+    title: 'Components/CheckboxGroup',
     component: CheckboxGroup,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement("div", {
-                className: "flex p-3"
+                className: "flex"
             }, React.createElement(Story, null))
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     args: {
         label: React.createElement("h2", null, "Test")
     },
@@ -39,7 +36,7 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -54,7 +51,22 @@ export const DefaultStory = {
         ]
     }
 };
-export const CheckboxGroupWithDefaultValue = {
+export const LongLines = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.")
+        ]
+    }
+};
+export const DefaultValue = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -72,7 +84,7 @@ export const CheckboxGroupWithDefaultValue = {
         ]
     }
 };
-export const CheckboxGroupHorizontal = {
+export const Inline = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -88,7 +100,23 @@ export const CheckboxGroupHorizontal = {
         orientation: 'horizontal'
     }
 };
-export const CheckboxGroupDisabled = {
+export const InlineLongLines = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.")
+        ],
+        orientation: 'horizontal'
+    }
+};
+export const Disabled = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -107,7 +135,7 @@ export const CheckboxGroupDisabled = {
         ]
     }
 };
-export const CheckboxGroupLarge = {
+export const Large = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -123,7 +151,7 @@ export const CheckboxGroupLarge = {
         size: 'large'
     }
 };
-export const CheckboxGroupWithHiddenItems = {
+export const HiddenItems = {
     args: {
         children: [
             React.createElement(CheckboxGroup.Checkbox, {
@@ -139,3 +167,59 @@ export const CheckboxGroupWithHiddenItems = {
         showAmount: 1
     }
 };
+export const HintText = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1",
+                hint: "This is hint text"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2",
+                hint: "This is hint text"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3",
+                hint: "This is hint text"
+            }, "Option 3")
+        ]
+    }
+};
+export const OnChange = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1",
+                hint: "This is hint text"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2",
+                hint: "This is hint text"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3",
+                hint: "This is hint text"
+            }, "Option 3")
+        ],
+        onChange: (e)=>console.log(e)
+    }
+};
+export const ErrorMessageAndLabel = {
+    args: {
+        label: 'Are you an existing customer?',
+        errorMessage: 'This is an inline error message',
+        validationState: 'invalid',
+        hintMessage: 'Hint: choose from one of the following options',
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
+import { FormHintProps } from '../index.js';
 export type CheckboxGroupProps = {
     /**
      * The `CheckboxItem` components to render
@@ -10,6 +11,14 @@ export type CheckboxGroupProps = {
      * String to override base style
      */
     className?: string;
+    /**
+     * error message
+     */
+    errorMessage?: string | string[];
+    /**
+     * hint message
+     */
+    hintMessage?: FormHintProps['children'];
     /**
      * Orientation of checkbox items
      */

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

@@ -34,12 +34,12 @@ function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
         value,
         children
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocused , focusProps  } = useFocusRing();
     const styles = checkboxItemStyles({
         isDisabled,
         size,
         orientation,
-        isFocusVisible
+        isFocused
     });
     return React.createElement("label", {
         className: styles.base({

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

@@ -6,12 +6,12 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Base Checkbox Item, unchecked as that is handled by Checkbox
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Checkbox Item with hint example
  */
-export declare const CheckboxItemWithHint: Story;
+export declare const HintText: Story;
 /**
  * > Disabled Checkbox Item example
  */
-export declare const CheckboxItemDisabled: Story;
+export declare const Disabled: Story;

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

@@ -1,18 +1,15 @@
 import { Checkbox } from './checkbox.component.js';
 const meta = {
-    title: 'Example/CheckboxGroup/Checkbox',
+    title: 'Components/CheckboxGroup/Checkbox',
     component: Checkbox,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement("div", {
-                className: "flex justify-center p-3"
+                className: "flex"
             }, React.createElement(Story, null), ' ')
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     argTypes: {
         isDisabled: {
             description: 'Controls whether individual checkbox items are disabled or not',
@@ -23,20 +20,20 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'Option 1',
         value: 'Option 1'
     }
 };
-export const CheckboxItemWithHint = {
+export const HintText = {
     args: {
         children: 'Option 1',
         value: 'Option 1',
         hint: 'Test hint'
     }
 };
-export const CheckboxItemDisabled = {
+export const Disabled = {
     args: {
         children: 'Option 1',
         value: 'Option 1',