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 | diff --git a/packages/components/package.json b/packages/components/package.json index ad954252..bf597633 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", 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..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 = { @@ -63,3 +71,17 @@ 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, +): (pressed: PressableStateCallbackType) => StyleProp { + if (styles) { + return ({ pressed }) => [{ opacity: pressed ? 0.2 : 1, ...styles }] + } + + return ({ pressed }) => [{ opacity: pressed ? 0.2 : 1 }] +}