[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,11 +39,10 @@
   },
   "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",
-    "storybook-dark-mode": "^3.0.1",
     "styled-components": "^6.0.7"
   },
   "peerDependencies": {
@@ -63,6 +62,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",
@@ -101,6 +101,7 @@
     "react-native-web": "~0.19.6",
     "react-test-renderer": "^18.2.0",
     "storybook-addon-designs": "^6.3.1",
+    "storybook-dark-mode": "^3.0.1",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.6"
   },

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',
+  },
+}