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

…27-narin-checkbox-group [Feature] CheckboxGroup
department-of-veterans-affairs · Oct 2, 2024 · 21478cd · 21478cd
2 parents c009e73 + fe0be12
commit 21478cd
Show file tree

Hide file tree

Showing 13 changed files with 560 additions and 215 deletions.
diff --git a/packages/components/.storybook/web/preview.tsx b/packages/components/.storybook/web/preview.tsx
@@ -21,8 +21,8 @@ export const parameters = {
       currentProps.theme = isDark ? themes.dark : themes.light
       return React.createElement(DocsContainer, currentProps)
     },
-  },
-  viewport: {
-    defaultViewport: 'mobile2',
+    controls: {
+      sort: 'requiredFirst',
+    },
   },
 }
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.25.0",
+  "version": "0.25.1-alpha.1",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {
@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "@department-of-veterans-affairs/mobile-assets": "^0.12.0",
-    "@department-of-veterans-affairs/mobile-tokens": "^0.17.0",
+    "@department-of-veterans-affairs/mobile-tokens": "^0.17.1",
     "react": "^18.2.0",
     "react-native": ">=0.71.7",
     "react-native-gesture-handler": "^2.12.0",
@@ -60,7 +60,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
     "@department-of-veterans-affairs/mobile-assets": "0.13.0",
-    "@department-of-veterans-affairs/mobile-tokens": "0.17.0",
+    "@department-of-veterans-affairs/mobile-tokens": "0.17.1",
     "@expo/metro-runtime": "~3.2.1",
     "@expo/webpack-config": "~19.0.1",
     "@react-native-async-storage/async-storage": "1.23.1",

diff --git a/packages/components/src/components/Checkbox/Checkbox.stories.tsx b/packages/components/src/components/Checkbox/Checkbox.stories.tsx
@@ -43,16 +43,11 @@ type Story = StoryObj<CheckboxProps>
 const statefulComponentRenderer = (props: CheckboxProps) => {
   const {
     description,
-    descriptionA11y,
     error,
-    errorA11y,
     header,
-    headerA11y,
     hint,
-    hintA11y,
     indeterminate,
     label,
-    labelA11y,
     required,
     tile,
   } = props
@@ -63,45 +58,37 @@ const statefulComponentRenderer = (props: CheckboxProps) => {
     <Checkbox
       checked={checked}
       description={description}
-      descriptionA11y={descriptionA11y}
       error={error}
-      errorA11y={errorA11y}
       header={header}
-      headerA11y={headerA11y}
       hint={hint}
-      hintA11y={hintA11y}
       indeterminate={indeterminate}
       label={label}
-      labelA11y={labelA11y}
       onPress={() => setChecked(!checked)}
       required={required}
       tile={tile}
     />
   )
 }
 
-const header = 'Label Header',
-  headerA11y = 'Accessibility override for header',
-  hint = 'Hint text',
-  hintA11y = 'Accessibility override for hint',
-  error = 'Error text',
-  errorA11y = 'Accessibility override for error',
-  label = 'Label',
-  labelA11y = 'Accessibility override for label',
-  description = 'Checkbox description',
-  descriptionA11y = 'Accessibility override for description'
+const header = 'Header'
+const hint = { text: 'Hint text', a11yLabel: 'Accessibility override for hint' }
+const error = {
+  text: 'Error text',
+  a11yLabel: 'Accessibility override for error',
+}
+const label = { text: 'Label', a11yLabel: 'Accessibility override for label' }
+const description = {
+  text: 'Description',
+  a11yLabel: 'Accessibility override for description',
+}
 
 export const _Default: Story = {
   render: statefulComponentRenderer,
   args: {
     header,
-    headerA11y,
     hint,
-    hintA11y,
     label,
-    labelA11y,
     description,
-    descriptionA11y,
     required: true,
   },
 }
@@ -111,36 +98,26 @@ export const __Tile: Story = {
   args: {
     tile: true,
     header,
-    headerA11y,
     hint,
-    hintA11y,
     label,
-    labelA11y,
     description,
-    descriptionA11y,
   },
 }
 
 export const ___CheckboxOnly: Story = {
   render: statefulComponentRenderer,
   args: {
     label,
-    labelA11y,
   },
 }
 
 export const ____Error: Story = {
   render: statefulComponentRenderer,
   args: {
     header,
-    headerA11y,
     hint,
-    hintA11y,
     error,
-    errorA11y,
     label,
-    labelA11y,
     description,
-    descriptionA11y,
   },
 }