[Feature] Component Implementation - Button

packages/components/.storybook/native/storybook.requires.js

@@ -54,6 +54,7 @@ try {
 
 const getStories = () => {
   return {
+    "./src/components/Button/Button.stories.tsx": require("../../src/components/Button/Button.stories.tsx"),
     "./src/components/SegmentedControl/SegmentedControl.stories.tsx": require("../../src/components/SegmentedControl/SegmentedControl.stories.tsx"),
   };
 };

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.13",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {
@@ -39,7 +39,7 @@
   },
   "homepage": "https://department-of-veterans-affairs.github.io/va-mobile-library",
   "dependencies": {
-    "@department-of-veterans-affairs/mobile-tokens": "0.0.10",
+    "@department-of-veterans-affairs/mobile-tokens": "0.2.0",
     "@os-team/i18next-react-native-language-detector": "^1.0.28",
     "i18next": "^23.4.3",
     "react-i18next": "^13.0.3",
@@ -63,6 +63,7 @@
     "@react-native-community/slider": "^4.4.2",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-controls": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-ondevice-actions": "^6.5.4",

packages/components/src/components/Button/Button.stories.tsx

@@ -0,0 +1,87 @@
+import { Button, ButtonProps, ButtonVariants } from './Button'
+import { Meta, StoryObj } from '@storybook/react-native'
+import { View } from 'react-native'
+import { generateDocs } from '../../utils/storybook'
+import React from 'react'
+
+const meta: Meta<ButtonProps> = {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    onPress: {
+      action: 'onPress event',
+    },
+  },
+  parameters: {
+    docs: generateDocs({
+      name: 'Button',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/docs/Flagship%20design%20library/Components/Buttons%20and%20Links/VAButton/',
+    }),
+  },
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<ButtonProps>
+
+export const Base: Story = {
+  storyName: 'Base',
+  args: {
+    buttonType: ButtonVariants.Base,
+    label: 'Button text',
+    a11yLabel: 'A11y label override',
+  },
+}
+
+export const BaseSecondary: Story = {
+  storyName: 'Base Secondary',
+  args: {
+    buttonType: ButtonVariants.BaseSecondary,
+    label: 'Button text',
+  },
+}
+
+export const Destructive: Story = {
+  storyName: 'Destructive',
+  args: {
+    buttonType: ButtonVariants.Destructive,
+    label: 'Button text',
+  },
+}
+
+export const Primary: Story = {
+  storyName: 'Primary',
+  args: {
+    label: 'Button text',
+  },
+}
+
+export const Secondary: Story = {
+  storyName: 'Secondary',
+  args: {
+    buttonType: ButtonVariants.Secondary,
+    label: 'Button text',
+  },
+}
+
+export const White: Story = {
+  storyName: 'White',
+  args: {
+    buttonType: ButtonVariants.White,
+    label: 'Button text',
+  },
+}

packages/components/src/components/Button/Button.test.tsx

@@ -0,0 +1,271 @@
+import 'react-native'
+import { RenderAPI, fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+// Note: test renderer must be required after react-native.
+import 'jest-styled-components'
+
+import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens'
+
+import { Button, ButtonVariants } from './Button'
+
+describe('Button', () => {
+  let component: RenderAPI
+  const label = 'Button text'
+  const onPressSpy = jest.fn()
+
+  it('initializes correctly', async () => {
+    component = render(<Button label={label} onPress={onPressSpy} />)
+    expect(component).toBeTruthy()
+  })
+
+  it('should call onChange', async () => {
+    component = render(<Button label={label} onPress={onPressSpy} />)
+    fireEvent.press(component.getByRole('button'))
+    expect(onPressSpy).toBeCalled()
+  })
+
+  it('should render label', async () => {
+    component = render(<Button label={label} onPress={onPressSpy} />)
+    expect(component.findByText('Button text')).toBeTruthy()
+  })
+
+  it('should render Primary variant by default', async () => {
+    component = render(<Button label={label} onPress={onPressSpy} />)
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderWidth } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(
+      DesignTokens.colorUswdsSystemColorBlueVivid60,
+    )
+    expect(borderWidth).toEqual(0)
+    expect(color).toEqual(DesignTokens.colorGrayLightest)
+  })
+
+  it('should render Primary pressed variant', async () => {
+    component = render(
+      <Button label={label} onPress={onPressSpy} testOnlyPressed={true} />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderWidth } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(
+      DesignTokens.colorUswdsSystemColorBlueWarmVivid80,
+    )
+    expect(borderWidth).toEqual(0)
+    expect(color).toEqual(DesignTokens.colorGrayLightest)
+  })
+
+  it('should render Base variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.Base}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+
+    const { backgroundColor, borderWidth } = button.props.style
+    const { color } = text.props.style
+    expect(backgroundColor).toEqual(DesignTokens.colorGrayMedium)
+    expect(borderWidth).toEqual(0)
+    expect(color).toEqual(DesignTokens.colorGrayLightest)
+  })
+
+  it('should render Base pressed variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.Base}
+        testOnlyPressed={true}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderWidth } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(DesignTokens.colorUswdsSystemColorGray80)
+    expect(borderWidth).toEqual(0)
+    expect(color).toEqual(DesignTokens.colorGrayLightest)
+  })
+
+  it('should render Destructive variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.Destructive}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+
+    const { backgroundColor, borderWidth, borderColor } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(
+      DesignTokens.colorUswdsSystemColorRedVivid60,
+    )
+    expect(borderColor).toEqual('none')
+    expect(borderWidth).toEqual(0)
+    expect(color).toEqual(DesignTokens.colorGrayLightest)
+  })
+
+  it('should render Destructive pressed variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.Destructive}
+        testOnlyPressed={true}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderWidth } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(
+      DesignTokens.colorUswdsSystemColorRedVivid80,
+    )
+    expect(borderWidth).toEqual(0)
+    expect(color).toEqual(DesignTokens.colorGrayLightest)
+  })
+
+  it('should render White variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.White}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderWidth, borderColor } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(DesignTokens.colorGrayLightest)
+    expect(borderColor).toEqual('none')
+    expect(borderWidth).toEqual(0)
+    expect(color).toEqual(DesignTokens.colorBlack)
+  })
+
+  it('should render White pressed variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.White}
+        testOnlyPressed={true}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderWidth } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(DesignTokens.colorUswdsSystemColorGray30)
+    expect(borderWidth).toEqual(0)
+    expect(color).toEqual(DesignTokens.colorBlack)
+  })
+
+  it('should render Secondary variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.Secondary}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderWidth, borderColor } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(DesignTokens.colorWhite)
+    expect(borderColor).toEqual(DesignTokens.colorUswdsSystemColorBlueVivid60)
+    expect(borderWidth).toEqual(2)
+    expect(color).toEqual(DesignTokens.colorUswdsSystemColorBlueVivid60)
+  })
+
+  it('should render Secondary pressed variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.Secondary}
+        testOnlyPressed={true}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderColor, borderWidth } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(DesignTokens.colorWhite)
+    expect(borderColor).toEqual(
+      DesignTokens.colorUswdsSystemColorBlueWarmVivid80,
+    )
+    expect(borderWidth).toEqual(2)
+    expect(color).toEqual(DesignTokens.colorUswdsSystemColorBlueWarmVivid80)
+  })
+
+  it('should render BaseSecondary variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.BaseSecondary}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderWidth, borderColor } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(DesignTokens.colorWhite)
+    expect(borderColor).toEqual(DesignTokens.colorGrayMedium)
+    expect(borderWidth).toEqual(2)
+    expect(color).toEqual(DesignTokens.colorGrayMedium)
+  })
+
+  it('should render BaseSecondary pressed variant', async () => {
+    component = render(
+      <Button
+        label={label}
+        onPress={onPressSpy}
+        buttonType={ButtonVariants.BaseSecondary}
+        testOnlyPressed={true}
+      />,
+    )
+
+    const button = component.getByRole('button')
+    const text = component.getByText(label)
+    const { backgroundColor, borderColor, borderWidth } = button.props.style
+    const { color } = text.props.style
+
+    expect(backgroundColor).toEqual(DesignTokens.colorWhite)
+    expect(borderColor).toEqual(DesignTokens.colorUswdsSystemColorGray80)
+    expect(borderWidth).toEqual(2)
+    expect(color).toEqual(DesignTokens.colorUswdsSystemColorGray80)
+  })
+})