create a LinkTypeWrapper (#709)

- AboutCard requires both internal and external links
- LinkTypeWrapper allows the component to specify link type
- add tests

client/src/components/AboutCard/AboutCard.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import {Grid} from '@trussworks/react-uswds';
+import LinkTypeWrapper from '../LinkTypeWrapper';
 
 // the "body" section is the child object to allow for html versus just text
 interface AboutCardProps {
   imgSrc: string;
   header: string;
   size?: 'small' | 'large';
-  actionText?: string;
-  actionUrl?: string;
-  actionOpenInNewTab?: boolean;
+  linkText?: string;
+  url?: string;
+  openUrlNewTab?: boolean;
   className?: string;
+  internal?:boolean;
 }
 
 const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
@@ -54,16 +56,13 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
               <h3>{props.header}</h3>
               <p>{props.children}</p>
               <div className={'j40-aboutcard-sm-link'}>
-                {props.actionOpenInNewTab ?
-                  <a
-                    className={'j40-aboutcard-link'}
-                    href={props.actionUrl}
-                    target="_blank"
-                    rel="noreferrer">{props.actionText}</a> :
-                  <a
-                    className={'j40-aboutcard-link'}
-                    href={props.actionUrl}>{props.actionText}</a>
-                }
+                <LinkTypeWrapper
+                  linkText={props.linkText}
+                  internal={props.internal}
+                  url={props.url}
+                  openUrlNewTab={props.openUrlNewTab}
+                  className={'j40-aboutcard-link'}
+                />
               </div>
             </Grid>
           </Grid>

client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap

@@ -39,10 +39,7 @@ exports[`rendering of the AboutCard checks if component renders 1`] = `
           >
             <a
               class="j40-aboutcard-link"
-              href="#"
-            >
-              Test Action
-            </a>
+            />
           </div>
         </div>
       </div>

client/src/components/LinkTypeWrapper/__snapshots__/linkTypeWrapper.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`testing all link types tests external links new tab 1`] = `
+<DocumentFragment>
+  <a
+    href="www.usds.gov"
+  >
+    test link text
+  </a>
+</DocumentFragment>
+`;
+
+exports[`testing all link types tests external links same tab 1`] = `
+<DocumentFragment>
+  <a
+    href="www.usds.gov"
+    rel="noreferrer"
+    target="_blank"
+  >
+    test link text
+  </a>
+</DocumentFragment>
+`;
+
+exports[`testing all link types tests internal links 1`] = `
+<DocumentFragment>
+  <a
+    href="/en/methodology"
+  >
+    test link text
+  </a>
+</DocumentFragment>
+`;

client/src/components/LinkTypeWrapper/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {Link} from 'gatsby-plugin-intl';
+
+interface ILinkTypeWrapper {
+    linkText?: string;
+    internal?: boolean;
+    url?: string;
+    openUrlNewTab?: boolean;
+    className?: string;
+  }
+
+// eslint-disable-next-line valid-jsdoc
+/**
+ * This function wraps the two types of links we have. Internal links and
+ * external links. Internal links should use the <Link> component, while
+ * eternal links can use the standard <a> tag. This function allows the
+ * instance to choose the type of link along with the props necessary to
+ * set new tabs, classes.
+ *
+ * @param props
+ * @returns
+ */
+const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
+  if (props.internal) {
+    return (
+      <Link to={`${props.url}`}>
+        {props.linkText}
+      </Link>
+    );
+  } else {
+    return props.openUrlNewTab ?
+    <a
+      className={props.className}
+      href={props.url}
+      target="_blank"
+      rel="noreferrer">{props.linkText}
+    </a> :
+    <a
+      className={props.className}
+      href={props.url}>{props.linkText}
+    </a>;
+  }
+};
+
+export default LinkTypeWrapper;

client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import LinkTypeWrapper from './index';
+import {LocalizedComponent} from '../../test/testHelpers';
+
+describe('testing all link types', () => {
+  it('tests internal links', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <LinkTypeWrapper
+            linkText={'test link text'}
+            internal={true}
+            url={'/methodology'}
+            openUrlNewTab={false}
+          />
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('tests external links same tab', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <LinkTypeWrapper
+            linkText={'test link text'}
+            internal={false}
+            url={'www.usds.gov'}
+            openUrlNewTab={true}
+          />
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('tests external links new tab', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <LinkTypeWrapper
+            linkText={'test link text'}
+            internal={false}
+            url={'www.usds.gov'}
+            openUrlNewTab={false}
+          />
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});