Add testIDs prop to SegmentedControl

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.0.18",
+  "version": "0.0.22",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {
@@ -38,7 +38,7 @@
   },
   "homepage": "https://department-of-veterans-affairs.github.io/va-mobile-library",
   "dependencies": {
-    "@department-of-veterans-affairs/mobile-tokens": "0.0.7",
+    "@department-of-veterans-affairs/mobile-tokens": "0.0.10",
     "@os-team/i18next-react-native-language-detector": "^1.0.28",
     "i18next": "^23.4.3",
     "react-i18next": "^13.0.3",

packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -52,6 +52,7 @@ export const twoSegments: Story = {
       'You have 3 unread messages. Review messages in your inbox',
       'Review your folders',
     ],
+    testIDs: ['test-id-1', 'test-id-2'],
   },
   parameters: {
     design: [

packages/components/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,4 +1,4 @@
-import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
+import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens'
 import {
   Text,
   TextStyle,
@@ -27,6 +27,8 @@ export type SegmentedControlProps = {
   a11yLabels?: string[]
   /** Optional array of segment accessibility hints */
   a11yHints?: string[]
+  /** Optional array of test IDs for test suites */
+  testIDs?: string[]
 }
 
 type SegmentProps = {
@@ -52,6 +54,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   selected,
   a11yLabels,
   a11yHints,
+  testIDs,
 }) => {
   const { t } = useTranslation()
   const colorScheme = useColorScheme()
@@ -63,13 +66,13 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   let textColor: string, activeBgColor: string, inactiveBgColor: string
 
   if (colorScheme === 'light') {
-    textColor = Colors.grayDark
-    activeBgColor = Colors.white
-    inactiveBgColor = Colors.grayLighter
+    textColor = DesignTokens.colorGrayDark
+    activeBgColor = DesignTokens.colorWhite
+    inactiveBgColor = DesignTokens.colorGrayLighter
   } else {
-    textColor = Colors.grayLightest
-    activeBgColor = Colors.grayMedium
-    inactiveBgColor = Colors.grayDark
+    textColor = DesignTokens.colorGrayLightest
+    activeBgColor = DesignTokens.colorGrayMedium
+    inactiveBgColor = DesignTokens.colorGrayDark
   }
 
   const viewStyle: ViewStyle = {
@@ -125,6 +128,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
         accessibilityValue={accessibilityValue}
         accessibilityRole={'tab'}
         accessibilityState={{ selected: isSelected }}
+        testID={testIDs?.[index]}
       >
         <Text allowFontScaling={false} style={textStyle}>
           {label}

packages/components/yarn.lock

@@ -2829,7 +2829,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.20.0
     "@babel/plugin-proposal-export-namespace-from": ^7.18.9
-    "@department-of-veterans-affairs/mobile-tokens": 0.0.7
+    "@department-of-veterans-affairs/mobile-tokens": 0.0.10
     "@expo/webpack-config": ^18.1.2
     "@os-team/i18next-react-native-language-detector": ^1.0.28
     "@react-native-async-storage/async-storage": ^1.19.0
@@ -2882,10 +2882,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@department-of-veterans-affairs/mobile-tokens@npm:0.0.7":
-  version: 0.0.7
-  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.0.7"
-  checksum: eb1f4c756a3408a6219aaa8465aec5a2d1d926e1a49271574847c8668afe2082f8dafd21ee451becd12409262d7697c41a7ba61490a077662a14710218205b1e
+"@department-of-veterans-affairs/mobile-tokens@npm:0.0.10":
+  version: 0.0.10
+  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.0.10"
+  checksum: 7590c87fb87e72891fe270f9dc53be8af3d0471d43cd448ead234b40d3f1fd5612740f049c121062c2beffd2597e81fa4e705e808bf3dc3110c33fbc1213f928
   languageName: node
   linkType: hard
 

packages/tokens/config.json

@@ -9,13 +9,12 @@
       "prefix": "",
       "files": [
         {
-          "destination": "js/colors.js",
-          "format": "javascript/es6",
-          "filter": {
-            "attributes": {
-              "category": "color"
-            }
-          }
+          "destination": "js/tokens.js",
+          "format": "javascript/es6"
+        },
+        {
+          "format": "typescript/es6-declarations",
+          "destination": "index.d.ts"
         }
       ]
     }

packages/tokens/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "VA Design System Mobile Token Library",
-  "main": "src/index.ts",
+  "main": "dist/js/tokens.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "style-dictionary build",
     "prepack": "style-dictionary build",