Merge pull request #162 from department-of-veterans-affairs/feature/1…

…18-roettger-CreateLinkComponent

[Feature] Create Link Component

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

@@ -56,6 +56,7 @@ const getStories = () => {
   return {
     "./src/components/Button/Button.stories.tsx": require("../../src/components/Button/Button.stories.tsx"),
     "./src/components/Icon/Icon.stories.tsx": require("../../src/components/Icon/Icon.stories.tsx"),
+    "./src/components/Link/Link.stories.tsx": require("../../src/components/Link/Link.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.5.1",
+  "version": "0.5.2-alpha.2",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

packages/components/src/components/Link/Link.stories.tsx

@@ -0,0 +1,168 @@
+import { Meta, StoryObj } from '@storybook/react-native'
+import { Platform, View } from 'react-native'
+import React from 'react'
+
+import { Link, LinkProps } from './Link'
+import { generateDocs } from '../../utils/storybook'
+
+const meta: Meta<LinkProps> = {
+  title: 'Link',
+  component: Link,
+  argTypes: {
+    onPress: {
+      action: 'onPress event',
+    },
+  },
+  parameters: {
+    docs: generateDocs({
+      name: 'Link',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Link',
+    }),
+  },
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<LinkProps>
+
+const startTime = new Date()
+const endTime = new Date(startTime.setMinutes(startTime.getMinutes() + 30))
+const location = {
+  lat: 33.7764681,
+  long: -118.1189664,
+  name: 'Tibor Rubin VA Medical Center',
+  address: {
+    street: '5901 E 7th St',
+    city: 'Long Beach',
+    state: 'CA',
+    zipCode: '90822',
+  },
+}
+const getLocation = (): string => {
+  const { lat, long, name, address } = location
+  if (Platform.OS === 'ios' && lat && long) {
+    return name || ''
+  } else if (
+    address?.street &&
+    address?.city &&
+    address?.state &&
+    address?.zipCode
+  ) {
+    return `${address.street} ${address.city}, ${address.state} ${address.zipCode}`
+  } else {
+    return name || ''
+  }
+}
+
+export const Calendar: Story = {
+  storyName: 'Calendar',
+  args: {
+    text: 'Add to calendar',
+    onPress: undefined, // Storybook sends a truthy function shell otherwise
+    type: 'calendar',
+    calendarData: {
+      title: 'Test',
+      startTime: startTime.getTime(),
+      endTime: endTime.getTime(),
+      location: getLocation(),
+      latitude: location.lat,
+      longitude: location.long,
+    },
+  },
+}
+
+export const Custom: Story = {
+  name: 'Custom Link w/o Icon',
+  args: {
+    text: 'Custom Link - no icon',
+    type: 'custom',
+    onPress: () => {
+      null
+    },
+  },
+}
+
+export const CustomWithIcon: Story = {
+  name: 'Custom Link with Icon',
+  args: {
+    text: 'Custom Link',
+    icon: { name: 'Truck' },
+    type: 'custom',
+    onPress: () => {
+      null
+    },
+  },
+}
+
+export const Directions: Story = {
+  storyName: 'Directions',
+  args: {
+    text: 'Get directions',
+    onPress: undefined, // Storybook sends a truthy function shell otherwise
+    type: 'directions',
+    locationData: {
+      name: 'VA Long Beach Healthcare System',
+      address: location.address,
+      latitude: location.lat,
+      longitude: location.long,
+    },
+    promptText: {
+      body: "You're navigating to your Maps app.",
+      cancel: 'No thanks',
+      confirm: "Let's go!",
+      title: 'Title override',
+    },
+    a11yLabel: 'Get directions with Maps app',
+    a11yHint: 'Opens maps app with directions to the location'
+  },
+}
+
+export const Phone: Story = {
+  args: {
+    text: 'Call number',
+    onPress: undefined, // Storybook sends a truthy function shell otherwise
+    type: 'call',
+    phoneNumber: '555',
+  },
+}
+
+export const PhoneTTY: Story = {
+  args: {
+    text: 'Call TTY number',
+    onPress: undefined, // Storybook sends a truthy function shell otherwise
+    type: 'call TTY',
+    TTYnumber: '711',
+  },
+}
+
+export const Text: Story = {
+  args: {
+    text: 'Text SMS number',
+    variant: 'base',
+    onPress: undefined, // Storybook sends a truthy function shell otherwise
+    type: 'text',
+    textNumber: '55555',
+  },
+}
+
+export const URL: Story = {
+  args: {
+    text: 'External link',
+    onPress: undefined, // Storybook sends a truthy function shell otherwise
+    type: 'url',
+    url: 'https://www.va.gov/',
+  },
+}