Merge branch 'main' into dependabot/npm_and_yarn/npm_and_yarn-d0a20a266e

department-of-veterans-affairs · Dec 13, 2024 · 71b9711 · 71b9711
2 parents 9e90ed7 + d9bc60e
commit 71b9711
Show file tree

Hide file tree

Showing 23 changed files with 2,317 additions and 1,698 deletions.
diff --git a/documentation/CHANGELOG.md b/documentation/CHANGELOG.md
@@ -1,5 +1,67 @@
 # Changelog
 
+## [tokens-v0.23.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.23.0) (2024-12-12)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/tokens-v0.22.0...tokens-v0.23.0)
+
+**Closed issues:**
+
+- DS - RadioButton Accessibility Review [\#524](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/524)
+
+**Merged pull requests:**
+
+- \[Tokens\] Add new tokens [\#610](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/610) ([jessicawoodin](https://github.com/jessicawoodin))
+
+## [tokens-v0.22.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.22.0) (2024-12-11)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/tokens-v0.21.0...tokens-v0.22.0)
+
+**Closed issues:**
+
+- DS - Typography - Apply tokens to components in Figma [\#558](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/558)
+- DS -Publish Text component to Figma & Doc Site [\#552](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/552)
+- \[Design Tokens\] Colors: Add new feedback tokens to VADS [\#541](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/541)
+- Radio Button - Publish component to Figma and Doc Site [\#195](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/195)
+
+**Merged pull requests:**
+
+- \[Bug\] Typography – Fix heading bottom margin [\#606](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/606) ([narin](https://github.com/narin))
+
+## [tokens-v0.21.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.21.0) (2024-12-09)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/components-v0.28.0...tokens-v0.21.0)
+
+**Closed issues:**
+
+- DS - Update Expo to v52 [\#597](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/597)
+- DS - Text Component Accessibility Review [\#551](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/551)
+- DS - Text Component Visual QA [\#550](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/550)
+- DS - ZenHub to GitHub Projects Transition [\#536](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/536)
+- DS - RadioButton Visual QA [\#523](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/523)
+- DS - RadioButton Component Storybook [\#522](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/522)
+- DS - RadioButton Component Implementation [\#521](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/521)
+
+**Merged pull requests:**
+
+- \[Tokens\] Update css-library to 0.16.0 to get feedback tokens [\#601](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/601) ([narin](https://github.com/narin))
+- \[CU\] Update Expo to SDK 52 [\#600](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/600) ([narin](https://github.com/narin))
+
+## [components-v0.28.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/components-v0.28.0) (2024-12-03)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/components-v0.27.1...components-v0.28.0)
+
+**Closed issues:**
+
+- DS - Text Component Analytics Support [\#553](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/553)
+- DS - Text Component Storybook [\#549](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/549)
+- DS - Text Component Implementation [\#548](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/548)
+- DS - RadioButton Component Analytics Support [\#525](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/525)
+- \[Design Tokens\] Typography: Create documentation [\#409](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/409)
+
+**Merged pull requests:**
+
+- \[Feature\] Create Radio Button Component [\#586](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/586) ([TimRoe](https://github.com/TimRoe))
+
 ## [components-v0.27.1](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/components-v0.27.1) (2024-11-15)
 
 [Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/tokens-v0.20.0...components-v0.27.1)

diff --git a/packages/components/app.json b/packages/components/app.json
@@ -1,5 +1,6 @@
 {
   "expo": {
+    "newArchEnabled": true,
     "scheme": "mobile-components",
     "web": {
       "bundler": "metro"

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.27.1",
+  "version": "0.28.1-alpha.1",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {
@@ -39,33 +39,32 @@
   },
   "homepage": "https://department-of-veterans-affairs.github.io/va-mobile-library",
   "dependencies": {
-    "@os-team/i18next-react-native-language-detector": "^1.0.34",
     "i18next": "^23.12.2",
     "react-i18next": "^15.0.0",
-    "react-native-svg": "15.2.0",
+    "react-native-svg": "15.8.0",
     "react-native-toast-notifications": "^3.4.0",
     "styled-components": "^6.1.12"
   },
   "peerDependencies": {
     "@department-of-veterans-affairs/mobile-assets": "^0.14.0",
-    "@department-of-veterans-affairs/mobile-tokens": "^0.20.0",
+    "@department-of-veterans-affairs/mobile-tokens": "^0.21.0",
     "react": "^18.2.0",
     "react-native": ">=0.71.7",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-safe-area-context": "^4.10.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
+    "@babel/core": "^7.25.2",
     "@babel/plugin-transform-react-jsx": "^7.24.7",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
     "@department-of-veterans-affairs/mobile-assets": "0.14.0",
-    "@department-of-veterans-affairs/mobile-tokens": "0.20.0",
-    "@expo/metro-runtime": "~3.2.1",
+    "@department-of-veterans-affairs/mobile-tokens": "0.21.0",
+    "@expo/metro-runtime": "~4.0.0",
     "@expo/webpack-config": "~19.0.1",
     "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-community/datetimepicker": "8.0.1",
-    "@react-native-community/slider": "4.5.2",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/slider": "4.5.5",
     "@storybook/addon-actions": "7.6.20",
     "@storybook/addon-controls": "7.6.20",
     "@storybook/addon-designs": "^7.0.9",
@@ -82,34 +81,34 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/react-native": "^12.5.1",
     "@types/jest": "^29.5.12",
-    "@types/react": "~18.2.79",
+    "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^18.3.0",
     "@types/styled-components-react-native": "^5.2.5",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "babel-plugin-react-native-web": "^0.19.12",
     "copy-webpack-plugin": "^12.0.2",
-    "expo": "^51.0.22",
-    "expo-constants": "~16.0.2",
-    "expo-font": "~12.0.9",
-    "expo-linking": "~6.3.1",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
+    "expo": "~52.0.14",
+    "expo-constants": "~17.0.3",
+    "expo-font": "~13.0.1",
+    "expo-linking": "~7.0.3",
+    "expo-splash-screen": "~0.29.13",
+    "expo-status-bar": "~2.0.0",
     "gh-pages": "^6.1.1",
     "jest": "^29.7.0",
-    "jest-expo": "~51.0.3",
+    "jest-expo": "~52.0.2",
     "jest-styled-components": "^7.2.0",
     "metro-react-native-babel-preset": "^0.77.0",
-    "react": "^18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.3",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
     "react-native-svg-transformer": "^1.5.0",
-    "react-native-web": "~0.19.12",
+    "react-native-web": "~0.19.13",
     "react-test-renderer": "^18.3.1",
     "storybook": "7.6.20",
     "storybook-dark-mode": "^3.0.3",

diff --git a/packages/components/src/components/Checkbox/Checkbox.tsx b/packages/components/src/components/Checkbox/Checkbox.tsx
@@ -1,37 +1,10 @@
-import {
-  Pressable,
-  StyleProp,
-  View,
-  ViewStyle,
-  useWindowDimensions,
-} from 'react-native'
-import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
-import { useTranslation } from 'react-i18next'
 import React, { FC } from 'react'
 
-import { CheckboxRadioProps, FormElementProps } from '../../types/forms'
+import { CheckboxRadio } from '../shared/CheckboxRadio'
+import { CheckboxRadioProps } from '../../types/forms'
 import { ComponentWrapper } from '../../wrapper'
-import {
-  Description,
-  Error,
-  Header,
-  Hint,
-  Label,
-  fontLabel,
-} from '../shared/FormText'
-import { Icon, IconProps } from '../Icon/Icon'
-import { Spacer } from '../Spacer/Spacer'
-import { getA11yLabel, useTheme } from '../../utils'
 
-export type CheckboxProps = FormElementProps &
-  CheckboxRadioProps & {
-    /** True to make checkbox appear as checked */
-    checked?: boolean
-    /** True to apply indeterminate icon to checkbox */
-    indeterminate?: boolean
-  }
-
-export const Checkbox: FC<CheckboxProps> = ({
+export const Checkbox: FC<CheckboxRadioProps> = ({
   a11yListPosition,
   checked,
   label,
@@ -45,115 +18,24 @@ export const Checkbox: FC<CheckboxProps> = ({
   testID,
   tile,
 }) => {
-  const theme = useTheme()
-  const { t } = useTranslation()
-  const fontScale = useWindowDimensions().fontScale
-
-  /**
-   * Container styling
-   */
-  let containerStyle: ViewStyle = {
-    width: '100%',
-  }
-
-  if (error) {
-    containerStyle = {
-      ...containerStyle,
-      borderLeftWidth: spacing.vadsSpace2xs,
-      borderColor: theme.vadsColorFormsBorderError,
-      paddingLeft: spacing.vadsSpaceMd,
-    }
+  const props = {
+    a11yListPosition,
+    checked,
+    description,
+    error,
+    header,
+    hint,
+    indeterminate,
+    label,
+    onPress,
+    required,
+    testID,
+    tile,
   }
 
-  /**
-   * Pressable styling
-   */
-  const pressableBaseStyle: StyleProp<ViewStyle> = {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  }
-
-  const tileStyle: ViewStyle = {
-    ...pressableBaseStyle,
-    borderWidth: 2,
-    borderRadius: 4,
-    padding: spacing.vadsSpaceSm,
-    paddingRight: spacing.vadsSpaceMd,
-    borderColor: checked
-      ? theme.vadsColorFormsBorderActive
-      : theme.vadsColorFormsBorderSubtle,
-    backgroundColor: checked
-      ? theme.vadsColorFormsSurfaceActive
-      : theme.vadsColorSurfaceDefault,
-  }
-
-  /**
-   * Icon
-   */
-  const iconViewStyle: ViewStyle = {
-    // Below keeps icon aligned with first row of text, centered, and scalable
-    alignSelf: 'flex-start',
-    // TODO: Replace lineHeight with typography token
-    minHeight: fontLabel.lineHeight * fontScale,
-    alignItems: 'center',
-    justifyContent: 'center',
-  }
-
-  const iconProps: IconProps = {
-    name: indeterminate
-      ? 'IndeterminateCheckBox'
-      : checked
-        ? 'CheckBox'
-        : 'CheckBoxOutlineBlank',
-    fill:
-      checked || indeterminate
-        ? theme.vadsColorFormsForegroundActive
-        : theme.vadsColorFormsBorderDefault,
-  }
-
-  const _icon = (
-    <View style={iconViewStyle}>
-      <Icon {...iconProps} />
-    </View>
-  )
-
-  /**
-   * Combined a11yLabel on Pressable required for Android Talkback
-   */
-  const a11yLabel =
-    getA11yLabel(label) +
-    (required ? ', ' + t('required') : '') +
-    (description ? `, ${getA11yLabel(description)}` : '')
-
   return (
     <ComponentWrapper>
-      <View style={containerStyle} testID={testID}>
-        <Header text={header} />
-        {header && <Spacer size="xs" />}
-
-        <Hint text={hint} />
-        {hint && <Spacer size="xs" />}
-
-        <Error text={error} />
-        {error && <Spacer size="xs" />}
-
-        <Pressable
-          onPress={onPress}
-          style={tile ? tileStyle : pressableBaseStyle}
-          aria-checked={indeterminate ? 'mixed' : checked}
-          aria-valuetext={a11yListPosition}
-          aria-label={a11yLabel}
-          role="checkbox">
-          {_icon}
-          <Spacer size="xs" horizontal />
-          <View style={{ flexShrink: 1 }}>
-            <Label text={label} error={error} required={required} />
-            {description && <Spacer size="xs" />}
-            <Description text={description} />
-          </View>
-        </Pressable>
-      </View>
+      <CheckboxRadio {...props} />
     </ComponentWrapper>
   )
 }
diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -37,7 +37,7 @@ export type CheckboxGroupProps = FormElementProps & {
 /**
  * ### Managing checked item state
  * The state of the selected checkbox items should be provided to CheckboxGroup via the `selectedItems` prop and updated
- *  using the `onSelectionChange` callback. When a checkbox is tapped, the provided `onSelectionChange` callback
+ * using the `onSelectionChange` callback. When a checkbox is tapped, the provided `onSelectionChange` callback
  * function is fired and passed an array of the newly `selectedItems`, which can be used to update the parent
  * component's state, whether that be redux, zustand, useState, or any other state management methods. Here is a basic
  * example using the `useState` hook to store the state of the `selectedItems`: