docs updates

packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.stories.tsx

@@ -8,6 +8,7 @@ import { Text } from '../Text';
 const meta: Meta<typeof CheckboxGridGroup> = {
   title: 'Web UI / Components / Checkbox / CheckboxGridGroup',
   component: CheckboxGridGroup,
+  tags: ['autodocs'],
   argTypes: {
     helperText: { control: { type: 'text' } },
     helperTextPosition: { options: ['top', 'bottom'], control: { type: 'radio' } },
@@ -72,3 +73,42 @@ export const Controlled: Story = {
     );
   },
 };
+
+export const CheckboxGridWithRadioHelperText: Story = {
+  name: 'With Checkbox HelperText',
+  render: args => {
+    return (
+      <CheckboxGridGroup {...args}>
+        <CheckboxTile value="1" label="One" helperText="One helper text" />
+        <CheckboxTile value="2" label="Two" helperText="Two helper text" />
+        <CheckboxTile value="3" label="Three" helperText="Three helper text" />
+        <CheckboxTile value="4" label="One" helperText="Four helper text" />
+        <CheckboxTile value="5" label="Two" helperText="Five helper text" />
+        <CheckboxTile value="6" label="Three" helperText="Six helper text" />
+      </CheckboxGridGroup>
+    );
+  },
+  args: {
+    helperText: '',
+  },
+};
+
+export const CheckboxGridGroupResponsiveColumns: Story = {
+  name: 'With Responsive Columns',
+  render: args => {
+    return (
+      <CheckboxGridGroup {...args}>
+        <CheckboxTile value="1" label="One" />
+        <CheckboxTile value="2" label="Two" />
+        <CheckboxTile value="3" label="Three" />
+        <CheckboxTile value="4" label="Four" />
+        <CheckboxTile value="5" label="Five" />
+        <CheckboxTile value="6" label="Six" />
+      </CheckboxGridGroup>
+    );
+  },
+  args: {
+    helperText: 'CheckboxGridGroup with Responsive Columns',
+    columns: { mobile: 1, tablet: 2, desktop: 3, wide: 6 },
+  },
+};

packages/web-ui/src/CheckboxGridGroup/CheckboxGridGroup.tsx

@@ -8,8 +8,22 @@ import { BaseCheckboxGroup } from '../BaseCheckboxGroup';
 const componentName = 'CheckboxGridGroup';
 const componentClassName = withGlobalPrefix(componentName);
 
+/**
+ * Set of interactive buttons where multiple options can be selected at a time,
+ * displayed in a grid layout. The `CheckboxGroup` uses a fieldset to group
+ * related `Checkbox` controls.
+ *
+ * For displaying checkboxes in a column or row, please use the `CheckboxGroup` component.
+ *
+ * The `CheckboxGridGroup` is responsible for handling the value, helper text,
+ * error state, error message, and disabled state, as well as determining the
+ * presentation and selection of the items in the list.
+ *
+ * > This component does not need to be wrapped in a `ThemeProvider` and can be used standalone with other component libraries.
+ */
 export const CheckboxGridGroup = React.forwardRef<HTMLFieldSetElement, CheckboxGridGroupProps>(
   ({ children, contentWidth = 'fit-content', columns = 2, className, ...props }, ref) => {
+    console.log('columns', getColumns(columns));
     return (
       <BaseCheckboxGroup ref={ref} className={clsx(componentClassName, className)} {...props}>
         <Box

packages/web-ui/src/RadioGridGroup/RadioGridGroup.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { RadioGridGroup } from './RadioGridGroup';
-import { Stack } from '../Stack';
 import { RadioTile } from '../RadioTile';
 
 const meta: Meta<typeof RadioGridGroup> = {
@@ -61,16 +60,14 @@ export const RadioGridWithRadioHelperText: Story = {
   name: 'With Radio HelperText',
   render: args => {
     return (
-      <Stack spacing={8}>
-        <RadioGridGroup {...args}>
-          <RadioTile value="1" label="One" helperText="One helper text" />
-          <RadioTile value="2" label="Two" helperText="Two helper text" />
-          <RadioTile value="3" label="Three" helperText="Three helper text" />
-          <RadioTile value="4" label="One" helperText="Four helper text" />
-          <RadioTile value="5" label="Two" helperText="Five helper text" />
-          <RadioTile value="6" label="Three" helperText="Six helper text" />
-        </RadioGridGroup>
-      </Stack>
+      <RadioGridGroup {...args}>
+        <RadioTile value="1" label="One" helperText="One helper text" />
+        <RadioTile value="2" label="Two" helperText="Two helper text" />
+        <RadioTile value="3" label="Three" helperText="Three helper text" />
+        <RadioTile value="4" label="One" helperText="Four helper text" />
+        <RadioTile value="5" label="Two" helperText="Five helper text" />
+        <RadioTile value="6" label="Three" helperText="Six helper text" />
+      </RadioGridGroup>
     );
   },
   args: {
@@ -82,7 +79,7 @@ export const RadioGridGroupResponsiveColumns: Story = {
   name: 'With Responsive Columns',
   render: args => {
     return (
-      <RadioGridGroup {...args} columns={{ mobile: 2, desktop: 1 }}>
+      <RadioGridGroup {...args}>
         <RadioTile value="1" label="One" />
         <RadioTile value="2" label="Two" />
         <RadioTile value="3" label="Three" />
@@ -94,5 +91,6 @@ export const RadioGridGroupResponsiveColumns: Story = {
   },
   args: {
     helperText: 'RadioGridGroup with Responsive Columns',
+    columns: { mobile: 1, tablet: 2, desktop: 3, wide: 6 },
   },
 };

packages/web-ui/src/utils/columns.ts

@@ -11,7 +11,7 @@ export function getColumns(columns: StackProps['spacing']) {
   }
   if (typeof columns === 'object') {
     return Object.keys(breakpoints).reduce((acc: { [key: string]: string }, breakpoint: string) => {
-      if (columns[breakpoint] !== null) {
+      if (columns[breakpoint] !== undefined) {
         acc[breakpoint] = convert(columns[breakpoint] as string);
       }
       return acc;