Rename VAButton to Button. Refactor styling to use switch statement. …

…Remove empty files. Commit root yarn.lock
department-of-veterans-affairs · Nov 9, 2023 · 6bac3e2 · 6bac3e2
1 parent 47d78c5
commit 6bac3e2
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 85 deletions.
diff --git a/packages/components/.storybook/native/storybook.requires.js b/packages/components/.storybook/native/storybook.requires.js
@@ -6,57 +6,57 @@ import {
   addParameters,
   addArgsEnhancer,
   clearDecorators,
-} from "@storybook/react-native";
+} from '@storybook/react-native'
 
 global.STORIES = [
   {
-    titlePrefix: "",
-    directory: "./src/components",
-    files: "**/*.stories.mdx",
+    titlePrefix: '',
+    directory: './src/components',
+    files: '**/*.stories.mdx',
     importPathMatcher:
-      "^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$",
+      '^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$',
   },
   {
-    titlePrefix: "",
-    directory: "./src/components",
-    files: "**/*.stories.@(js|jsx|ts|tsx)",
+    titlePrefix: '',
+    directory: './src/components',
+    files: '**/*.stories.@(js|jsx|ts|tsx)',
     importPathMatcher:
-      "^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$",
+      '^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$',
   },
-];
+]
 
-import "@storybook/addon-ondevice-controls/register";
-import "@storybook/addon-ondevice-actions/register";
+import '@storybook/addon-ondevice-controls/register'
+import '@storybook/addon-ondevice-actions/register'
 
-import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";
+import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs'
 
-import { decorators, parameters } from "./preview";
+import { decorators, parameters } from './preview'
 
 if (decorators) {
   if (__DEV__) {
     // stops the warning from showing on every HMR
-    require("react-native").LogBox.ignoreLogs([
-      "`clearDecorators` is deprecated and will be removed in Storybook 7.0",
-    ]);
+    require('react-native').LogBox.ignoreLogs([
+      '`clearDecorators` is deprecated and will be removed in Storybook 7.0',
+    ])
   }
   // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
-  clearDecorators();
-  decorators.forEach((decorator) => addDecorator(decorator));
+  clearDecorators()
+  decorators.forEach((decorator) => addDecorator(decorator))
 }
 
 if (parameters) {
-  addParameters(parameters);
+  addParameters(parameters)
 }
 
 try {
-  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
+  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer))
 } catch {}
 
 const getStories = () => {
   return {
-    "./src/components/SegmentedControl/SegmentedControl.stories.tsx": require("../../src/components/SegmentedControl/SegmentedControl.stories.tsx"),
-    "./src/components/VAButton/VAButton.stories.tsx": require("../../src/components/VAButton/VAButton.stories.tsx"),
-  };
-};
+    './src/components/SegmentedControl/SegmentedControl.stories.tsx': require('../../src/components/SegmentedControl/SegmentedControl.stories.tsx'),
+    './src/components/Button/Button.stories.tsx': require('../../src/components/Button/Button.stories.tsx'),
+  }
+}
 
-configure(getStories, module, false);
+configure(getStories, module, false)
diff --git a/.../components/VAButton/VAButton.stories.tsx → .../src/components/Button/Button.stories.tsx b/.../components/VAButton/VAButton.stories.tsx → .../src/components/Button/Button.stories.tsx
@@ -1,11 +1,11 @@
+import { Button, ButtonProps, ButtonVariants } from './Button'
 import { Meta, StoryObj } from '@storybook/react-native'
-import { VAButton, VAButtonProps, VAButtonVariants } from './VAButton'
 import { View } from 'react-native'
 import React from 'react'
 
-const meta: Meta<VAButtonProps> = {
-  title: 'VAButton',
-  component: VAButton,
+const meta: Meta<ButtonProps> = {
+  title: 'Button',
+  component: Button,
   argTypes: {
     onPress: {
       action: 'onPress event',
@@ -29,7 +29,7 @@ const meta: Meta<VAButtonProps> = {
 
 export default meta
 
-type Story = StoryObj<VAButtonProps>
+type Story = StoryObj<ButtonProps>
 
 export const Primary: Story = {
   storyName: 'Primary',
@@ -42,15 +42,15 @@ export const Primary: Story = {
 export const Secondary: Story = {
   storyName: 'Secondary',
   args: {
-    buttonType: VAButtonVariants.Secondary,
+    buttonType: ButtonVariants.Secondary,
     label: 'Button text',
   },
 }
 
 export const Destructive: Story = {
   storyName: 'Destructive',
   args: {
-    buttonType: VAButtonVariants.Destructive,
+    buttonType: ButtonVariants.Destructive,
     label: 'Button text',
   },
 }
diff --git a/...src/components/VAButton/VAButton.test.tsx → ...nts/src/components/Button/Button.test.tsx b/...src/components/VAButton/VAButton.test.tsx → ...nts/src/components/Button/Button.test.tsx
@@ -5,16 +5,16 @@ import React from 'react'
 import 'jest-styled-components'
 import { ReactTestInstance } from 'react-test-renderer'
 
-import { VAButton } from './VAButton'
+import { Button } from './Button'
 
-describe('VAButton', () => {
+describe('Button', () => {
   let component: RenderAPI
   let testInstance: ReactTestInstance
 
   const onPressSpy = jest.fn()
 
   const initializeTestInstance = (): void => {
-    component = render(<VAButton label="Button text" onPress={onPressSpy} />)
+    component = render(<Button label="Button text" onPress={onPressSpy} />)
 
     testInstance = component.UNSAFE_root
   }

diff --git a/...ents/src/components/VAButton/VAButton.tsx → ...mponents/src/components/Button/Button.tsx b/...ents/src/components/VAButton/VAButton.tsx → ...mponents/src/components/Button/Button.tsx
@@ -12,40 +12,39 @@ import React from 'react'
 
 import { webStorybookColorScheme } from '../../utils'
 
-export enum VAButtonVariants {
+export enum ButtonVariants {
   Primary,
   Secondary,
   Destructive,
   White,
 }
 
-export type VAButtonProps = {
-  /** text appearing in the button */
+export type ButtonProps = {
+  /** Text appearing in the button */
   label: string
-  /** function called when button is pressed */
+  /** Handler function called when button is pressed */
   onPress: () => void
-  /** optional accessibility state */
-  accessibilityState?: AccessibilityState
-  /** text to use as the accessibility hint */
+  /** Optional text to use as the accessibility hint */
   a11yHint?: string
-  /** specifies button styling type. defaults to primary if none specified  */
-  buttonType?: VAButtonVariants
-  /** a string value used to set the buttons testID/accessibility label */
+  /** Optional accessibility override label */
+  a11yLabel?: string
+  /** Optional button variant. Defaults to primary if none specified  */
+  buttonType?: ButtonVariants
+  /** Optional test ID for test suites */
   testID?: string
 }
 
-export const VAButton: React.FC<VAButtonProps> = ({
+export const Button: React.FC<ButtonProps> = ({
   label,
   onPress,
-  accessibilityState,
   a11yHint,
+  a11yLabel,
   buttonType,
   testID,
 }) => {
   const colorScheme = webStorybookColorScheme() || useColorScheme()
-  const isDestructive = buttonType === VAButtonVariants.Destructive
-  const isSecondary = buttonType === VAButtonVariants.Secondary
-  const isWhite = buttonType === VAButtonVariants.White
+  const isDarkMode = colorScheme === 'dark'
+  const isSecondary = buttonType === ButtonVariants.Secondary
 
   let bgColor: string,
     bgColorPressed: string,
@@ -54,45 +53,49 @@ export const VAButton: React.FC<VAButtonProps> = ({
     borderColor: string = 'none',
     borderColorPressed: string = 'none'
 
-  if (isWhite) {
-    // This is a one-off, mobile app only variant. Colors are not tokenized
-    bgColor = DesignTokens.colorWhite
-    bgColorPressed = '#ffffffb3'
-    textColor = '#003e73'
-  } else if (colorScheme === 'light') {
-    bgColor = DesignTokens.colorUswdsSystemColorBlueVivid60
-    bgColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80
-    textColor = DesignTokens.colorGrayLightest
-    textColorPressed = DesignTokens.colorGrayLightest
-
-    if (isDestructive) {
+  switch (buttonType) {
+    case ButtonVariants.Destructive:
       bgColor = DesignTokens.colorUswdsSystemColorRedVivid60
       bgColorPressed = DesignTokens.colorUswdsSystemColorRedVivid80
-    } else if (isSecondary) {
+      textColor = DesignTokens.colorGrayLightest
+      textColorPressed = DesignTokens.colorGrayLightest
+
+      if (isDarkMode) {
+        bgColor = DesignTokens.colorUswdsSystemColorRedVivid40
+        bgColorPressed = DesignTokens.colorSecondaryLightest
+        textColor = DesignTokens.colorBlack
+        textColorPressed = DesignTokens.colorBlack
+      }
+      break
+    case ButtonVariants.Secondary:
       bgColor = DesignTokens.colorWhite
       bgColorPressed = DesignTokens.colorWhite
       borderColor = DesignTokens.colorUswdsSystemColorBlueVivid60
       borderColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80
       textColor = DesignTokens.colorUswdsSystemColorBlueVivid60
       textColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80
-    }
-  } else {
-    bgColor = DesignTokens.colorUswdsSystemColorBlueVivid30
-    bgColorPressed = DesignTokens.colorPrimaryAltLightest
-    textColor = DesignTokens.colorBlack
-    textColorPressed = DesignTokens.colorBlack
 
-    if (isDestructive) {
-      bgColor = DesignTokens.colorUswdsSystemColorRedVivid40
-      bgColorPressed = DesignTokens.colorSecondaryLightest
-    } else if (isSecondary) {
-      bgColor = DesignTokens.colorBlack
-      bgColorPressed = DesignTokens.colorBlack
-      borderColor = DesignTokens.colorUswdsSystemColorBlueVivid60
-      borderColorPressed = DesignTokens.colorWhite
-      textColor = DesignTokens.colorUswdsSystemColorBlueVivid30
-      textColorPressed = DesignTokens.colorWhite
-    }
+      if (isDarkMode) {
+        bgColor = DesignTokens.colorBlack
+        bgColorPressed = DesignTokens.colorBlack
+        borderColor = DesignTokens.colorUswdsSystemColorBlueVivid60
+        borderColorPressed = DesignTokens.colorWhite
+        textColor = DesignTokens.colorUswdsSystemColorBlueVivid30
+        textColorPressed = DesignTokens.colorWhite
+      }
+      break
+    default:
+      bgColor = DesignTokens.colorUswdsSystemColorBlueVivid60
+      bgColorPressed = DesignTokens.colorUswdsSystemColorBlueWarmVivid80
+      textColor = DesignTokens.colorGrayLightest
+      textColorPressed = DesignTokens.colorGrayLightest
+
+      if (isDarkMode) {
+        bgColor = DesignTokens.colorUswdsSystemColorBlueVivid30
+        bgColorPressed = DesignTokens.colorPrimaryAltLightest
+        textColor = DesignTokens.colorBlack
+        textColorPressed = DesignTokens.colorBlack
+      }
   }
 
   /**
@@ -140,9 +143,9 @@ export const VAButton: React.FC<VAButtonProps> = ({
       style={getBackgroundStyle}
       onPress={onPress}
       accessibilityHint={a11yHint}
-      accessibilityRole="button"
+      role="button"
       accessible={true}
-      accessibilityState={accessibilityState || {}}
+      aria-label={a11yLabel}
       testID={testID || label}
     >
       {({ pressed }: PressableStateCallbackType) => (

diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
@@ -8,4 +8,4 @@ if (expoApp && App.initiateExpo) {
 
 // Export components here so they are exported through npm
 export { SegmentedControl } from './components/SegmentedControl/SegmentedControl'
-export { VAButton, VAButtonVariants } from './components/VAButton/VAButton'
+export { Button, ButtonVariants } from './components/Button/Button'
diff --git a/packages/tokens/src/tokens.json b/packages/tokens/src/tokens.json
diff --git a/packages/tokens/src/tokens.tsx b/packages/tokens/src/tokens.tsx
diff --git a/yarn.lock b/yarn.lock
@@ -2766,7 +2766,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@department-of-veterans-affairs/[email protected], @department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens":
+"@department-of-veterans-affairs/mobile-tokens@npm:0.1.0":
+  version: 0.1.0
+  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.1.0"
+  checksum: 4d44c25ed247254b39df746b4de9d518d80c8624d973d5277a11a9f9d011155a59cf24aee0dc9aaae493db409a60b75b00f1a05dc5f18317efaf64f5f472ff99
+  languageName: node
+  linkType: hard
+
+"@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: