Merge pull request #513 from department-of-veterans-affairs/feature/4…

…27-narin-checkbox-group-add-description [Feature] CheckboxGroup – Add item descriptions
department-of-veterans-affairs · Oct 3, 2024 · e6d0c6f · e6d0c6f
2 parents 589e4d9 + 8132f93
commit e6d0c6f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/components/src/components/Checkbox/Checkbox.tsx b/packages/components/src/components/Checkbox/Checkbox.tsx
@@ -57,7 +57,7 @@ export const Checkbox: FC<CheckboxProps> = ({
       ...containerStyle,
       borderLeftWidth: spacing.vadsSpace2xs,
       borderColor: theme.vadsColorFormsBorderError,
-      paddingLeft: spacing.vadsSpaceLg,
+      paddingLeft: spacing.vadsSpaceMd,
     }
   }
 
@@ -73,7 +73,7 @@ export const Checkbox: FC<CheckboxProps> = ({
   const tileStyle: ViewStyle = {
     ...pressableBaseStyle,
     borderWidth: 2,
-    borderRadius: spacing.vadsSpace2xs,
+    borderRadius: 4,
     padding: spacing.vadsSpaceSm,
     paddingRight: spacing.vadsSpaceMd,
     borderColor: checked

diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -54,11 +54,15 @@ const statefulComponentRenderer = (props: CheckboxGroupProps) => {
 }
 
 const items = [
-  { text: 'Option 1' },
+  { text: 'Option 1', description: 'Description for option 1' },
   {
     text: 'Option 2',
     a11yLabel: 'Accessibility override for option 2',
     value: '2',
+    description: {
+      text: 'Description for option 2',
+      a11yLabel: 'Accessibility override for description',
+    },
   },
   { text: 'Option 3' },
   { text: 'Option 4' },

diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -5,11 +5,17 @@ import React, { FC, Fragment } from 'react'
 import { Checkbox } from '../Checkbox/Checkbox'
 import { ComponentWrapper } from '../../wrapper'
 import { Error, Header, Hint } from '../shared/FormText'
-import { FormElementProps, TextWithA11y } from '../../types'
+import {
+  FormElementProps,
+  StringOrTextWithA11y,
+  TextWithA11y,
+} from '../../types'
 import { Spacer } from '../Spacer/Spacer'
 import { useTheme } from '../../utils'
 
 type TextWithA11yAndValue = TextWithA11y & {
+  /** Description for checkbox item */
+  description?: StringOrTextWithA11y
   /** Value or ID for checkbox item if different than checkbox label */
   value?: string | number
   /** Optional TestID */
@@ -115,7 +121,7 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = ({
       ...containerStyle,
       borderLeftWidth: spacing.vadsSpace2xs,
       borderColor: theme.vadsColorFormsBorderError,
-      paddingLeft: spacing.vadsSpaceLg,
+      paddingLeft: spacing.vadsSpaceMd,
     }
   }
 
@@ -139,6 +145,7 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = ({
             <Fragment key={`checkbox-group-item-${index}`}>
               <Checkbox
                 label={item}
+                description={isObject ? item.description : undefined}
                 checked={selectedItems.includes(value)}
                 onPress={() => handleCheckboxChange(value)}
                 testID={isObject ? item.testID : undefined}