Merge pull request #361 from department-of-veterans-affairs/feature/2…

…63-narin-theme-setup-components [Feature] Add useTheme hook. Update Link and Alert to use themes
department-of-veterans-affairs · Jul 1, 2024 · 7820e8d · 7820e8d
2 parents c11366f + 4f9a1b2
commit 7820e8d
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 129 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.19.0",
+  "version": "0.19.1-alpha.1",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {
@@ -40,7 +40,7 @@
   "homepage": "https://department-of-veterans-affairs.github.io/va-mobile-library",
   "dependencies": {
     "@department-of-veterans-affairs/mobile-assets": "0.12.0",
-    "@department-of-veterans-affairs/mobile-tokens": "0.12.0",
+    "@department-of-veterans-affairs/mobile-tokens": "0.13.0",
     "@os-team/i18next-react-native-language-detector": "^1.0.31",
     "i18next": "^23.8.2",
     "react-i18next": "^14.0.5",

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
@@ -1,4 +1,3 @@
-import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import {
   Insets,
   Pressable,
@@ -10,7 +9,7 @@ import {
 } from 'react-native'
 import React, { FC, useState } from 'react'
 
-import { BaseColor, useColorScheme } from '../../utils'
+import { BaseColor, useColorScheme, useTheme } from '../../utils'
 import { Button, ButtonProps, ButtonVariants } from '../Button/Button'
 import { Icon, IconProps } from '../Icon/Icon'
 import { Spacer } from '../Spacer/Spacer'
@@ -76,6 +75,7 @@ export const Alert: FC<AlertProps> = ({
   testID,
 }) => {
   const colorScheme = useColorScheme()
+  const theme = useTheme()
   const fontScale = useWindowDimensions().fontScale
   const isDarkMode = colorScheme === 'dark'
   const [expanded, setExpanded] = useState(
@@ -103,56 +103,27 @@ export const Alert: FC<AlertProps> = ({
 
   switch (variant) {
     case 'info':
-      backgroundColor = Colors.vadsColorFeedbackSurfaceInfoOnLight
-      borderColor = Colors.vadsColorFeedbackBorderInfoOnLight
+      backgroundColor = theme.vadsColorFeedbackSurfaceInfo
+      borderColor = theme.vadsColorFeedbackBorderInfo
       iconName = 'Info'
-
-      if (isDarkMode) {
-        backgroundColor = Colors.vadsColorFeedbackSurfaceInfoOnDark
-        borderColor = Colors.vadsColorFeedbackBorderInfoOnDark
-      }
       break
     case 'success':
-      backgroundColor = Colors.vadsColorFeedbackSurfaceSuccessOnLight
-      borderColor = Colors.vadsColorFeedbackBorderSuccessOnLight
+      backgroundColor = theme.vadsColorFeedbackSurfaceSuccess
+      borderColor = theme.vadsColorFeedbackBorderSuccess
       iconName = 'CheckCircle'
-
-      if (isDarkMode) {
-        backgroundColor = Colors.vadsColorFeedbackSurfaceSuccessOnDark
-        borderColor = Colors.vadsColorFeedbackBorderSuccessOnDark
-      }
       break
     case 'warning':
-      backgroundColor = Colors.vadsColorFeedbackSurfaceWarningOnLight
-      borderColor = Colors.vadsColorFeedbackBorderWarningOnLight
+      backgroundColor = theme.vadsColorFeedbackSurfaceWarning
+      borderColor = theme.vadsColorFeedbackBorderWarning
       iconName = 'Warning'
-
-      if (isDarkMode) {
-        backgroundColor = Colors.vadsColorFeedbackSurfaceWarningOnDark
-        borderColor = Colors.vadsColorFeedbackBorderWarningOnDark
-      }
       break
     case 'error':
-      backgroundColor = Colors.vadsColorFeedbackSurfaceErrorOnLight
-      borderColor = Colors.vadsColorFeedbackBorderErrorOnLight
+      backgroundColor = theme.vadsColorFeedbackSurfaceError
+      borderColor = theme.vadsColorFeedbackBorderError
       iconName = 'Error'
-
-      if (isDarkMode) {
-        backgroundColor = Colors.vadsColorFeedbackSurfaceErrorOnDark
-        borderColor = Colors.vadsColorFeedbackBorderErrorOnDark
-      }
       break
   }
 
-  if (primaryButton && isDarkMode) {
-    primaryButton.buttonType = ButtonVariants.Base
-  }
-  if (secondaryButton) {
-    secondaryButton.buttonType = isDarkMode
-      ? ButtonVariants.BaseSecondary
-      : ButtonVariants.Secondary
-  }
-
   const contentBox: ViewStyle = {
     backgroundColor: backgroundColor,
     borderLeftColor: borderColor,

diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
@@ -1,11 +1,11 @@
-import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import {
   Pressable,
   PressableStateCallbackType,
   Text,
   TextStyle,
   ViewStyle,
 } from 'react-native'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import React from 'react'
 
 import { useColorScheme } from '../../utils'
@@ -58,80 +58,80 @@ export const Button: React.FC<ButtonProps> = ({
 
   switch (buttonType) {
     case ButtonVariants.Base:
-      bgColor = Colors.vadsColorActionSurfaceBaseOnLight
-      bgColorPressed = Colors.vadsColorActionSurfaceBaseActiveOnLight
-      textColor = Colors.vadsColorForegroundInverseOnLight
-      textColorPressed = Colors.vadsColorForegroundInverseOnLight
+      bgColor = colors.vadsColorActionSurfaceBaseOnLight
+      bgColorPressed = colors.vadsColorActionSurfaceBaseActiveOnLight
+      textColor = colors.vadsColorForegroundInverseOnLight
+      textColorPressed = colors.vadsColorForegroundInverseOnLight
 
       if (isDarkMode) {
-        bgColor = Colors.vadsColorActionSurfaceBaseOnDark
-        bgColorPressed = Colors.vadsColorActionSurfaceBaseActiveOnDark
-        textColor = Colors.vadsColorForegroundInverseOnDark
-        textColorPressed = Colors.vadsColorForegroundInverseOnDark
+        bgColor = colors.vadsColorActionSurfaceBaseOnDark
+        bgColorPressed = colors.vadsColorActionSurfaceBaseActiveOnDark
+        textColor = colors.vadsColorForegroundInverseOnDark
+        textColorPressed = colors.vadsColorForegroundInverseOnDark
       }
       break
     case ButtonVariants.BaseSecondary:
       bgColor = 'transparent'
       bgColorPressed = 'transparent'
-      borderColor = Colors.vadsColorActionBorderBaseOnLight
-      borderColorPressed = Colors.vadsColorActionBorderBaseActiveOnLight
-      textColor = Colors.vadsColorActionForegroundBaseOnLight
-      textColorPressed = Colors.vadsColorActionForegroundBaseActiveOnLight
+      borderColor = colors.vadsColorActionBorderBaseOnLight
+      borderColorPressed = colors.vadsColorActionBorderBaseActiveOnLight
+      textColor = colors.vadsColorActionForegroundBaseOnLight
+      textColorPressed = colors.vadsColorActionForegroundBaseActiveOnLight
       borderWidth = 2
 
       if (isDarkMode) {
-        borderColor = Colors.vadsColorActionBorderBaseOnDark
-        borderColorPressed = Colors.vadsColorActionBorderBaseActiveOnDark
-        textColor = Colors.vadsColorActionForegroundBaseOnDark
-        textColorPressed = Colors.vadsColorActionForegroundBaseActiveOnDark
+        borderColor = colors.vadsColorActionBorderBaseOnDark
+        borderColorPressed = colors.vadsColorActionBorderBaseActiveOnDark
+        textColor = colors.vadsColorActionForegroundBaseOnDark
+        textColorPressed = colors.vadsColorActionForegroundBaseActiveOnDark
       }
       break
     case ButtonVariants.Destructive:
-      bgColor = Colors.vadsColorActionSurfaceDestructiveOnLight
-      bgColorPressed = Colors.vadsColorActionSurfaceDestructiveActiveOnLight
-      textColor = Colors.vadsColorForegroundInverseOnLight
-      textColorPressed = Colors.vadsColorForegroundInverseOnLight
+      bgColor = colors.vadsColorActionSurfaceDestructiveOnLight
+      bgColorPressed = colors.vadsColorActionSurfaceDestructiveActiveOnLight
+      textColor = colors.vadsColorForegroundInverseOnLight
+      textColorPressed = colors.vadsColorForegroundInverseOnLight
 
       if (isDarkMode) {
-        bgColor = Colors.vadsColorActionSurfaceDestructiveOnDark
-        bgColorPressed = Colors.vadsColorActionSurfaceDestructiveActiveOnDark
-        textColor = Colors.vadsColorForegroundInverseOnDark
-        textColorPressed = Colors.vadsColorForegroundInverseOnDark
+        bgColor = colors.vadsColorActionSurfaceDestructiveOnDark
+        bgColorPressed = colors.vadsColorActionSurfaceDestructiveActiveOnDark
+        textColor = colors.vadsColorForegroundInverseOnDark
+        textColorPressed = colors.vadsColorForegroundInverseOnDark
       }
       break
     case ButtonVariants.Secondary:
       bgColor = 'transparent'
       bgColorPressed = 'transparent'
-      borderColor = Colors.vadsColorActionBorderDefaultOnLight
-      borderColorPressed = Colors.vadsColorActionBorderDefaultActiveOnLight
-      textColor = Colors.vadsColorActionForegroundDefaultOnLight
-      textColorPressed = Colors.vadsColorActionForegroundDefaultActiveOnLight
+      borderColor = colors.vadsColorActionBorderDefaultOnLight
+      borderColorPressed = colors.vadsColorActionBorderDefaultActiveOnLight
+      textColor = colors.vadsColorActionForegroundDefaultOnLight
+      textColorPressed = colors.vadsColorActionForegroundDefaultActiveOnLight
       borderWidth = 2
 
       if (isDarkMode) {
-        borderColor = Colors.vadsColorActionBorderDefaultOnDark
-        borderColorPressed = Colors.vadsColorActionBorderDefaultActiveOnDark
-        textColor = Colors.vadsColorActionForegroundDefaultOnDark
-        textColorPressed = Colors.vadsColorActionForegroundDefaultActiveOnDark
+        borderColor = colors.vadsColorActionBorderDefaultOnDark
+        borderColorPressed = colors.vadsColorActionBorderDefaultActiveOnDark
+        textColor = colors.vadsColorActionForegroundDefaultOnDark
+        textColorPressed = colors.vadsColorActionForegroundDefaultActiveOnDark
       }
       break
     case ButtonVariants.White:
-      bgColor = Colors.vadsColorBaseLightest
-      bgColorPressed = Colors.uswdsSystemColorGray30
-      textColor = Colors.vadsColorBlack
-      textColorPressed = Colors.vadsColorBlack
+      bgColor = colors.vadsColorBaseLightest
+      bgColorPressed = colors.uswdsSystemColorGray30
+      textColor = colors.vadsColorBlack
+      textColorPressed = colors.vadsColorBlack
       break
     default:
-      bgColor = Colors.vadsColorActionSurfaceDefaultOnLight
-      bgColorPressed = Colors.vadsColorActionSurfaceDefaultActiveOnLight
-      textColor = Colors.vadsColorForegroundInverseOnLight
-      textColorPressed = Colors.vadsColorForegroundInverseOnLight
+      bgColor = colors.vadsColorActionSurfaceDefaultOnLight
+      bgColorPressed = colors.vadsColorActionSurfaceDefaultActiveOnLight
+      textColor = colors.vadsColorForegroundInverseOnLight
+      textColorPressed = colors.vadsColorForegroundInverseOnLight
 
       if (isDarkMode) {
-        bgColor = Colors.vadsColorActionSurfaceDefaultOnDark
-        bgColorPressed = Colors.vadsColorActionSurfaceDefaultActiveOnDark
-        textColor = Colors.vadsColorForegroundInverseOnDark
-        textColorPressed = Colors.vadsColorForegroundInverseOnDark
+        bgColor = colors.vadsColorActionSurfaceDefaultOnDark
+        bgColorPressed = colors.vadsColorActionSurfaceDefaultActiveOnDark
+        textColor = colors.vadsColorForegroundInverseOnDark
+        textColorPressed = colors.vadsColorForegroundInverseOnDark
       }
   }
 

diff --git a/packages/components/src/components/Icon/Icon.tsx b/packages/components/src/components/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 import { ColorValue, useWindowDimensions } from 'react-native'
-import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import { SvgProps } from 'react-native-svg'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import React, { FC } from 'react'
 
 import { IconMap } from './iconList'
@@ -80,9 +80,13 @@ export const Icon: FC<IconProps> = ({
   if (typeof fill === 'object') {
     fill = isDarkMode ? fill.dark : fill.light
   } else if (fill === 'default') {
-    fill = isDarkMode ? Colors.vadsColorActionForegroundDefaultOnDark : Colors.vadsColorActionForegroundDefaultOnLight
+    fill = isDarkMode
+      ? colors.vadsColorActionForegroundDefaultOnDark
+      : colors.vadsColorActionForegroundDefaultOnLight
   } else if (fill === 'base') {
-    fill = isDarkMode ? Colors.vadsColorForegroundDefaultOnDark : Colors.vadsColorForegroundDefaultOnLight
+    fill = isDarkMode
+      ? colors.vadsColorForegroundDefaultOnDark
+      : colors.vadsColorForegroundDefaultOnLight
   }
 
   let iconProps: SvgProps = { fill }

diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx
@@ -1,4 +1,3 @@
-import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import {
   Pressable,
   PressableProps,
@@ -20,7 +19,7 @@ import {
 } from '../../utils/OSfunctions'
 import { Icon, IconProps } from '../Icon/Icon'
 import { t } from 'i18next'
-import { useColorScheme } from '../../utils'
+import { useTheme } from '../../utils'
 
 // Convenience type to default type-specific props to not existing/being optional
 type nullTypeSpecifics = {
@@ -141,9 +140,8 @@ export const Link: FC<LinkProps> = ({
   TTYnumber,
   url,
 }) => {
-  const colorScheme = useColorScheme()
+  const theme = useTheme()
   const fontScale = useWindowDimensions().fontScale
-  const isDarkMode = colorScheme === 'dark'
   const launchExternalLink = useExternalLink()
 
   let _icon: IconProps | 'no icon'
@@ -225,14 +223,10 @@ export const Link: FC<LinkProps> = ({
 
   switch (variant) {
     case 'base':
-      linkColor = isDarkMode 
-        ? Colors.vadsColorForegroundDefaultOnDark 
-        : Colors.vadsColorForegroundDefaultOnLight
+      linkColor = theme.vadsColorForegroundDefault
       break
     default:
-      linkColor = isDarkMode 
-        ? Colors.vadsColorActionForegroundDefaultOnDark 
-        : Colors.vadsColorActionForegroundDefaultOnLight
+      linkColor = theme.vadsColorActionForegroundDefault
   }
 
   const iconViewStyle: ViewStyle = {
@@ -277,9 +271,7 @@ export const Link: FC<LinkProps> = ({
       flexDirection: 'row',
       alignItems: 'center',
       backgroundColor: pressed
-        ? isDarkMode
-          ? Colors.vadsColorSurfaceSecondaryOnDark
-          : Colors.vadsColorSurfaceSecondaryOnLight
+        ? theme.vadsColorSurfaceSecondary
         : 'transparent',
     }),
     testOnly_pressed: testOnlyPressed,

diff --git a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx b/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx
@@ -8,9 +8,9 @@ import {
 } from 'react-native'
 import React, { useEffect } from 'react'
 
-import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import { Icon, IconProps } from '../Icon/Icon'
 import { Spacer } from '../Spacer/Spacer'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import { useColorScheme } from '../../utils'
 
 export type LoadingIndicatorProps = {
@@ -68,8 +68,8 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
     width: 50,
     height: 50,
     fill: isDarkMode
-      ? Colors.vadsColorActionForegroundDefaultOnDark
-      : Colors.vadsColorActionForegroundDefaultOnLight,
+      ? colors.vadsColorActionForegroundDefaultOnDark
+      : colors.vadsColorActionForegroundDefaultOnLight,
   }
 
   const textStyle: TextStyle = {
@@ -78,8 +78,8 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
     lineHeight: 30,
     textAlign: 'center',
     color: isDarkMode
-      ? Colors.vadsColorForegroundDefaultOnDark
-      : Colors.vadsColorForegroundDefaultOnLight,
+      ? colors.vadsColorForegroundDefaultOnDark
+      : colors.vadsColorForegroundDefaultOnLight,
   }
 
   return (

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,5 +1,5 @@
-import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC, useEffect } from 'react'
 import styled from 'styled-components/native'
@@ -60,13 +60,13 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   let textColor: string, activeBgColor: string, inactiveBgColor: string
 
   if (colorScheme === 'light') {
-    textColor = Colors.vadsColorForegroundDefaultOnLight
-    activeBgColor = Colors.vadsSegmentedControlColorSurfaceSelectedOnLight
-    inactiveBgColor = Colors.vadsColorSurfaceSecondaryOnLight
+    textColor = colors.vadsColorForegroundDefaultOnLight
+    activeBgColor = colors.vadsSegmentedControlColorSurfaceSelectedOnLight
+    inactiveBgColor = colors.vadsColorSurfaceSecondaryOnLight
   } else {
-    textColor = Colors.vadsColorForegroundDefaultOnDark
-    activeBgColor = Colors.vadsSegmentedControlColorSurfaceSelectedOnDark
-    inactiveBgColor = Colors.vadsColorSurfaceSecondaryOnDark
+    textColor = colors.vadsColorForegroundDefaultOnDark
+    activeBgColor = colors.vadsSegmentedControlColorSurfaceSelectedOnDark
+    inactiveBgColor = colors.vadsColorSurfaceSecondaryOnDark
   }
 
   const viewStyle: ViewStyle = {