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;
+  linkText?: string;
-  actionUrl?: string;
+  url?: string;
-  actionOpenInNewTab?: boolean;
+  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 ?
+                <LinkTypeWrapper
-                  <a
+                  linkText={props.linkText}
-                    className={'j40-aboutcard-link'}
+                  internal={props.internal}
-                    href={props.actionUrl}
+                  url={props.url}
-                    target="_blank"
+                  openUrlNewTab={props.openUrlNewTab}
-                    rel="noreferrer">{props.actionText}</a> :
+                  className={'j40-aboutcard-link'}
-                  <a
+                />
-                    className={'j40-aboutcard-link'}
-                    href={props.actionUrl}>{props.actionText}</a>
-                }
               </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();
+  });
+});

client/src/pages/index.tsx

@@ -171,8 +171,10 @@ const IndexPage = ({location}: IndexPageProps) => {
               size={'small'}
               imgSrc={accountBalanceIcon}
               header={'Federal program managers'}
-              actionText={'Go to data & methodology'}
+              linkText={'Go to data & methodology'}
-              actionUrl={'./methodology'}>
+              url={'/methodology'}
+              internal={true}
+            >
               Download the screening tool’s draft list of communities of focus.
               Explore data that may be useful to your program, and provide
               feedback on the tool.
@@ -182,8 +184,10 @@ const IndexPage = ({location}: IndexPageProps) => {
               size={'small'}
               imgSrc={groupsIcon}
               header={'Community members'}
-              actionText={'Explore the tool'}
+              linkText={'Explore the tool'}
-              actionUrl={'./cejst'}>
+              url={'/cejst'}
+              internal={true}
+            >
               Explore data about communities of focus in your area, and help
               provide feedback on the tool.
             </AboutCard>
@@ -198,8 +202,10 @@ const IndexPage = ({location}: IndexPageProps) => {
             size={'small'}
             imgSrc={commentIcon}
             header={'Send feedback'}
-            actionText={'Email: screeningtool.feedback@usds.gov'}
+            linkText={'Email: screeningtool.feedback@usds.gov'}
-            actionUrl={'mailto:screeningtool.feedback@usds.gov'}>
+            url={'mailto:screeningtool.feedback@usds.gov'}
+            internal={false}
+          >
             Have ideas about how this tool can be improved to better
             reflect the on-the-ground experiences of your community?
           </AboutCard>
@@ -208,9 +214,11 @@ const IndexPage = ({location}: IndexPageProps) => {
             size={'small'}
             imgSrc={githubIcon}
             header={'Join the open source community'}
-            actionText={'Check it out on GitHub'}
+            linkText={'Check it out on GitHub'}
-            actionUrl={'https://github.com/usds/justice40-tool'}
+            url={'https://github.com/usds/justice40-tool'}
-            actionOpenInNewTab={true}>
+            openUrlNewTab={true}
+            internal={false}
+          >
             The screening tool’s code is open source, which means it is
             available for the public to view and contribute to. Anyone
             can view and contribute on GitHub.