Merge branch 'main' into 6870-nr-vabutton

department-of-veterans-affairs · Nov 8, 2023 · 2cdfa2c · 2cdfa2c
2 parents 69a34b2 + dcd6cf9
commit 2cdfa2c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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)<SegmentProps>`
+const Segment = styled(Pressable)<SegmentProps>`
   border-radius: 8px;
   padding-vertical: 7px;
   width: ${(props) => props.widthPct};
@@ -124,11 +124,12 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
         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]}>
         <Text allowFontScaling={false} style={textStyle}>
           {label}
@@ -139,7 +140,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
 
   return (
     <ComponentWrapper>
-      <View style={viewStyle} accessibilityRole="tablist">
+      <View style={viewStyle} role="tablist">
         {labels.map((label, index) => buildSegment(label, index))}
       </View>
     </ComponentWrapper>

diff --git 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<ViewStyle> {
+  if (styles) {
+    return ({ pressed }) => [{ opacity: pressed ? 0.2 : 1, ...styles }]
+  }
+
+  return ({ pressed }) => [{ opacity: pressed ? 0.2 : 1 }]
+}