From affa5d1e7ee09c5796b36f4c7250deb3b860d525 Mon Sep 17 00:00:00 2001 From: Tim R Date: Thu, 2 Nov 2023 14:55:27 -0500 Subject: [PATCH 1/5] Update README.md --- packages/components/README.md | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/components/README.md b/packages/components/README.md index 751edd37..84c0b006 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -29,6 +29,10 @@ cd va-mobile-library/packages/components ``` yarn ``` +then +``` +yarn tokensBuild +``` 5. Launch the app @@ -44,13 +48,14 @@ yarn ### Yarn Commands -| Command | Description | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| `start` | Starts Metro Bundler with options to run app on different platforms. **Note:** To run on web, use `yarn storybook:web` command below | -| `android ` | Run app on last used Android emulator/device | -| `ios` | Run app on last used iOS simulator/device | -| `storybook:build` | Generates static version of Storybook for deployment | -| `storybook:deploy` | Deploys Storybook to [`homepage`](https://department-of-veterans-affairs.github.io/va-mobile-library) in `package.json` | +| Command | Description | +| -------------------- | ----------- | +| `start` | Starts Metro Bundler with options to run app on different platforms. **Note:** To run on web, use `yarn storybook:web` command below | +| `android ` | Run app on last used Android emulator/device | +| `ios` | Run app on last used iOS simulator/device | +| `storybook:build` | Generates static version of Storybook for deployment | +| `storybook:deploy` | Deploys Storybook to [`homepage`](https://department-of-veterans-affairs.github.io/va-mobile-library) in `package.json` | | `storybook:generate` | Generates `.storybook/native/storybook.requires.js` which tells React Native where to find stores since it doesn't support dynamic imports | -| `storybook:watch` | Watches for newly created stories and regenerates `storybook.requires.js` | -| `storybook:web` | Builds and launches development server for web | +| `storybook:watch` | Watches for newly created stories and regenerates `storybook.requires.js` | +| `storybook:web` | Builds and launches development server for web | +| `tokensBuild` | Builds the tokens package so they are available locally for use by Storybook | From 82e91163717e9662768d20a72f38078ae6768816 Mon Sep 17 00:00:00 2001 From: Tim R Date: Thu, 2 Nov 2023 14:57:13 -0500 Subject: [PATCH 2/5] Adding new script --- packages/components/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index 814b414e..801c33e8 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -14,7 +14,8 @@ "storybook:watch": "sb-rn-watcher --config-path .storybook/native", "storybook:web": "STORYBOOK_WEB=true start-storybook --config-dir .storybook/web -p 6006 --no-version-updates", "test": "jest --coverage", - "test:watch": "jest --watch" + "test:watch": "jest --watch", + "tokensBuild": "cd ../tokens && yarn build" }, "repository": { "type": "git", From 826690f5b92e3f9083e22d199542ca158800072f Mon Sep 17 00:00:00 2001 From: Tim R Date: Mon, 6 Nov 2023 13:02:17 -0600 Subject: [PATCH 3/5] Ready for PR --- .../SegmentedControl/SegmentedControl.tsx | 13 +++++++------ packages/components/src/utils/index.tsx | 12 ++++++++++++ 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx index dc751a48..409157ea 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx +++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx @@ -1,8 +1,8 @@ import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens' import { + Pressable, Text, TextStyle, - TouchableOpacity, View, ViewStyle, useColorScheme, @@ -12,7 +12,7 @@ import React, { FC, useEffect } from 'react' import styled from 'styled-components/native' import { ComponentWrapper } from '../../wrapper' -import { webStorybookColorScheme } from '../../utils' +import { PressableOpacityStyle, webStorybookColorScheme } from '../../utils' /** * Props for {@link SegmentedControl} @@ -41,7 +41,7 @@ type SegmentProps = { widthPct: string } -const Segment = styled(TouchableOpacity)` +const Segment = styled(Pressable)` border-radius: 8px; padding-vertical: 7px; width: ${(props) => props.widthPct}; @@ -124,11 +124,12 @@ export const SegmentedControl: FC = ({ isSelected={isSelected} key={index} widthPct={`${100 / labels.length}%`} - accessibilityLabel={accessibilityLabel} + aria-label={accessibilityLabel} accessibilityHint={a11yHints ? a11yHints[index] : ''} accessibilityValue={accessibilityValue} - accessibilityRole={'tab'} + role={'tab'} accessibilityState={{ selected: isSelected }} + style={PressableOpacityStyle()} testID={testIDs?.[index]}> {label} @@ -139,7 +140,7 @@ export const SegmentedControl: FC = ({ return ( - + {labels.map((label, index) => buildSegment(label, index))} diff --git a/packages/components/src/utils/index.tsx b/packages/components/src/utils/index.tsx index e99dcd7b..9c683367 100644 --- a/packages/components/src/utils/index.tsx +++ b/packages/components/src/utils/index.tsx @@ -63,3 +63,15 @@ export function webStorybookColorScheme(): ColorSchemeName { const storybookDarkMode = require('storybook-dark-mode') return storybookDarkMode.useDarkMode() ? 'dark' : 'light' } + +/** + * Convenience function for handling TouchableOpacity styling on Pressable component + * @param styles - RN styling to apply to Pressable component besides on press opacity + */ +export function PressableOpacityStyle(styles?: ViewStyle) { + if (styles) { + return ({pressed}) => [{opacity: pressed ? 0.2 : 1, ...styles}] + } + + return ({pressed}) => [{opacity: pressed ? 0.2 : 1}] +} \ No newline at end of file From e1ca17ad5d19c02a8b861f7f42510b2524291093 Mon Sep 17 00:00:00 2001 From: Tim R Date: Mon, 6 Nov 2023 13:42:34 -0600 Subject: [PATCH 4/5] Unit tests fix --- packages/components/src/utils/index.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/components/src/utils/index.tsx b/packages/components/src/utils/index.tsx index 9c683367..2324f771 100644 --- a/packages/components/src/utils/index.tsx +++ b/packages/components/src/utils/index.tsx @@ -6,7 +6,15 @@ import { Subtitle, Title, } from '@storybook/addon-docs' -import { ColorSchemeName, Linking, Text, View } from 'react-native' +import { + ColorSchemeName, + Linking, + PressableStateCallbackType, + StyleProp, + Text, + View, + ViewStyle, +} from 'react-native' import React from 'react' type DocProps = { @@ -68,10 +76,12 @@ export function webStorybookColorScheme(): ColorSchemeName { * Convenience function for handling TouchableOpacity styling on Pressable component * @param styles - RN styling to apply to Pressable component besides on press opacity */ -export function PressableOpacityStyle(styles?: ViewStyle) { +export function PressableOpacityStyle( + styles?: ViewStyle, +): (pressed: PressableStateCallbackType) => StyleProp { if (styles) { - return ({pressed}) => [{opacity: pressed ? 0.2 : 1, ...styles}] + return ({ pressed }) => [{ opacity: pressed ? 0.2 : 1, ...styles }] } - return ({pressed}) => [{opacity: pressed ? 0.2 : 1}] -} \ No newline at end of file + return ({ pressed }) => [{ opacity: pressed ? 0.2 : 1 }] +} From dcd6cf9fcfc09d133756a0331c00a78cd7d5e818 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 8 Nov 2023 09:22:50 -0800 Subject: [PATCH 5/5] Version bump: components-v0.1.0 --- 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 801c33e8..cabeccf0 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.31", + "version": "0.1.0", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": {