From cbec66fc40a78970715fff2d6bef8724b3034efa Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Thu, 28 Sep 2023 09:27:42 -0700 Subject: [PATCH 1/6] Add testIDs prop to SegmentedControl --- .../components/SegmentedControl/SegmentedControl.stories.tsx | 1 + .../src/components/SegmentedControl/SegmentedControl.tsx | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx index eac22413..8c764316 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx +++ b/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: [ diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx index 5e5a8855..31aaa108 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx +++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx @@ -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 = ({ selected, a11yLabels, a11yHints, + testIDs, }) => { const { t } = useTranslation() const colorScheme = useColorScheme() @@ -125,6 +128,7 @@ export const SegmentedControl: FC = ({ accessibilityValue={accessibilityValue} accessibilityRole={'tab'} accessibilityState={{ selected: isSelected }} + testID={testIDs?.[index]} > {label} From 1a716f14af8e26d5b500f7945ac7f0f2a09bd59a Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Thu, 28 Sep 2023 11:59:39 -0700 Subject: [PATCH 2/6] Bump version to 0.0.19 and publish --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index 4e251e02..c2eaac22 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.0.18", + "version": "0.0.19", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From 8e2550a53ed5400fa44918b7a3ee79f2d6ab015f Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Fri, 29 Sep 2023 12:32:45 -0700 Subject: [PATCH 3/6] Re-add color to path --- packages/tokens/src/tokens/colors.json | 380 +++++++++++++------------ 1 file changed, 196 insertions(+), 184 deletions(-) diff --git a/packages/tokens/src/tokens/colors.json b/packages/tokens/src/tokens/colors.json index b5d81e5e..074f05f9 100644 --- a/packages/tokens/src/tokens/colors.json +++ b/packages/tokens/src/tokens/colors.json @@ -1,190 +1,202 @@ { - "white": { - "value": "#fff", - "attributes": { - "category": "color" - } - }, - "gray": { - "*": { - "value": "#5b616b", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#5b616b" - }, - "name": "color-gray", - "attributes": { - "category": "color", - "type": "gray", - "item": "*" - }, - "path": [ - "gray", - "*" - ] - }, - "dark": { - "value": "#323a45", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#323a45" - }, - "name": "color-gray-dark", - "attributes": { - "category": "color", - "type": "gray", - "item": "dark" - }, - "path": [ - "gray", - "dark" - ] - }, - "medium": { - "value": "#757575", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#757575" - }, - "name": "color-gray-medium", - "attributes": { - "category": "color", - "type": "gray", - "item": "medium" - }, - "path": [ - "gray", - "medium" - ] - }, - "light": { - "value": "#aeb0b5", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#aeb0b5" - }, - "name": "color-gray-light", - "attributes": { - "category": "color", - "type": "gray", - "item": "light" - }, - "path": [ - "gray", - "light" - ] - }, - "light-alt": { - "value": "#eeeeee", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#eeeeee" - }, - "name": "color-gray-light-alt", - "attributes": { - "category": "color", - "type": "gray", - "item": "light-alt" - }, - "path": [ - "gray", - "light-alt" - ] - }, - "lighter": { - "value": "#d6d7d9", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#d6d7d9" - }, - "name": "color-gray-lighter", - "attributes": { - "category": "color", - "type": "gray", - "item": "lighter" - }, - "path": [ - "gray", - "lighter" - ] - }, - "lightest": { - "value": "#f1f1f1", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#f1f1f1" - }, - "name": "color-gray-lightest", + "color": { + "white": { + "value": "#fff", "attributes": { - "category": "color", - "type": "gray", - "item": "lightest" - }, - "path": [ - "gray", - "lightest" - ] + "category": "color" + } }, - "warm-dark": { - "value": "#494440", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#494440" - }, - "name": "color-gray-warm-dark", - "attributes": { - "category": "color", - "type": "gray", - "item": "warm-dark" - }, - "path": [ - "gray", - "warm-dark" - ] - }, - "warm-light": { - "value": "#e4e2e0", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#e4e2e0" - }, - "name": "color-gray-warm-light", - "attributes": { - "category": "color", - "type": "gray", - "item": "warm-light" - }, - "path": [ - "gray", - "warm-light" - ] - }, - "cool-light": { - "value": "#dce4ef", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#dce4ef" - }, - "name": "color-gray-cool-light", - "attributes": { - "category": "color", - "type": "gray", - "item": "cool-light" - }, - "path": [ - "gray", - "cool-light" - ] + "gray": { + "*": { + "value": "#5b616b", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#5b616b" + }, + "name": "color-gray", + "attributes": { + "category": "color", + "type": "gray", + "item": "*" + }, + "path": [ + "color", + "gray", + "*" + ] + }, + "dark": { + "value": "#323a45", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#323a45" + }, + "name": "color-gray-dark", + "attributes": { + "category": "color", + "type": "gray", + "item": "dark" + }, + "path": [ + "color", + "gray", + "dark" + ] + }, + "medium": { + "value": "#757575", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#757575" + }, + "name": "color-gray-medium", + "attributes": { + "category": "color", + "type": "gray", + "item": "medium" + }, + "path": [ + "color", + "gray", + "medium" + ] + }, + "light": { + "value": "#aeb0b5", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#aeb0b5" + }, + "name": "color-gray-light", + "attributes": { + "category": "color", + "type": "gray", + "item": "light" + }, + "path": [ + "color", + "gray", + "light" + ] + }, + "light-alt": { + "value": "#eeeeee", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#eeeeee" + }, + "name": "color-gray-light-alt", + "attributes": { + "category": "color", + "type": "gray", + "item": "light-alt" + }, + "path": [ + "color", + "gray", + "light-alt" + ] + }, + "lighter": { + "value": "#d6d7d9", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#d6d7d9" + }, + "name": "color-gray-lighter", + "attributes": { + "category": "color", + "type": "gray", + "item": "lighter" + }, + "path": [ + "color", + "gray", + "lighter" + ] + }, + "lightest": { + "value": "#f1f1f1", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#f1f1f1" + }, + "name": "color-gray-lightest", + "attributes": { + "category": "color", + "type": "gray", + "item": "lightest" + }, + "path": [ + "color", + "gray", + "lightest" + ] + }, + "warm-dark": { + "value": "#494440", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#494440" + }, + "name": "color-gray-warm-dark", + "attributes": { + "category": "color", + "type": "gray", + "item": "warm-dark" + }, + "path": [ + "color", + "gray", + "warm-dark" + ] + }, + "warm-light": { + "value": "#e4e2e0", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#e4e2e0" + }, + "name": "color-gray-warm-light", + "attributes": { + "category": "color", + "type": "gray", + "item": "warm-light" + }, + "path": [ + "color", + "gray", + "warm-light" + ] + }, + "cool-light": { + "value": "#dce4ef", + "filePath": "tokens/color.json", + "isSource": true, + "original": { + "value": "#dce4ef" + }, + "name": "color-gray-cool-light", + "attributes": { + "category": "color", + "type": "gray", + "item": "cool-light" + }, + "path": [ + "color", + "gray", + "cool-light" + ] + } } } } From 103f0859cc332a662c1e531a806944f584c1d299 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Fri, 29 Sep 2023 12:33:21 -0700 Subject: [PATCH 4/6] Auto-generate TS typings. Change main file to dist/js/tokens.js --- packages/tokens/config.json | 13 ++++++------- packages/tokens/package.json | 5 +++-- packages/tokens/src/index.ts | 1 - 3 files changed, 9 insertions(+), 10 deletions(-) delete mode 100644 packages/tokens/src/index.ts diff --git a/packages/tokens/config.json b/packages/tokens/config.json index 304c244c..a1c65205 100644 --- a/packages/tokens/config.json +++ b/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" } ] } diff --git a/packages/tokens/package.json b/packages/tokens/package.json index fe6a1449..4905f10c 100644 --- a/packages/tokens/package.json +++ b/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", diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts deleted file mode 100644 index 81630a8a..00000000 --- a/packages/tokens/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * as Colors from '../dist/js/colors' From aa85257c99a782ddc08d573e3fda1cac846030a2 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Fri, 29 Sep 2023 12:33:47 -0700 Subject: [PATCH 5/6] Update token import and bump mobile-tokens version --- packages/components/package.json | 4 ++-- .../SegmentedControl/SegmentedControl.tsx | 14 +++++++------- packages/components/yarn.lock | 10 +++++----- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index c2eaac22..99861104 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.0.19", + "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", diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx index 31aaa108..3805c626 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx +++ b/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, @@ -66,13 +66,13 @@ export const SegmentedControl: FC = ({ 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 = { diff --git a/packages/components/yarn.lock b/packages/components/yarn.lock index 5fc1e0fc..dbc3d9a8 100644 --- a/packages/components/yarn.lock +++ b/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 From a2a1dd10c02ff2ca3314d2e7a6974de510e34689 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Fri, 29 Sep 2023 12:34:08 -0700 Subject: [PATCH 6/6] Update root yarn.lock --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index a3b7e561..86e5a381 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2156,7 +2156,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 @@ -2209,7 +2209,7 @@ __metadata: languageName: unknown linkType: soft -"@department-of-veterans-affairs/mobile-tokens@0.0.7, @department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens": +"@department-of-veterans-affairs/mobile-tokens@0.0.10, @department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens": version: 0.0.0-use.local resolution: "@department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens" dependencies: