From 58f4102d6f58c642f5dc51872b1422adaa82fb58 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Mon, 20 Sep 2021 06:55:08 -0700 Subject: [PATCH] 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 | 25 +++++----- .../__snapshots__/AboutCard.test.tsx.snap | 5 +- .../linkTypeWrapper.test.tsx.snap | 33 +++++++++++++ .../src/components/LinkTypeWrapper/index.tsx | 45 ++++++++++++++++++ .../LinkTypeWrapper/linkTypeWrapper.test.tsx | 46 +++++++++++++++++++ client/src/pages/index.tsx | 26 +++++++---- 6 files changed, 154 insertions(+), 26 deletions(-) create mode 100644 client/src/components/LinkTypeWrapper/__snapshots__/linkTypeWrapper.test.tsx.snap create mode 100644 client/src/components/LinkTypeWrapper/index.tsx create mode 100644 client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx diff --git a/client/src/components/AboutCard/AboutCard.tsx b/client/src/components/AboutCard/AboutCard.tsx index 881aad43..86affe33 100644 --- a/client/src/components/AboutCard/AboutCard.tsx +++ b/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) => { @@ -54,16 +56,13 @@ const AboutCard = (props: React.PropsWithChildren) => {

{props.header}

{props.children}

- {props.actionOpenInNewTab ? - {props.actionText} : - {props.actionText} - } +
diff --git a/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap b/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap index 52a5ab38..1a4b4a6c 100644 --- a/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap +++ b/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap @@ -39,10 +39,7 @@ exports[`rendering of the AboutCard checks if component renders 1`] = ` > - Test Action - + /> diff --git a/client/src/components/LinkTypeWrapper/__snapshots__/linkTypeWrapper.test.tsx.snap b/client/src/components/LinkTypeWrapper/__snapshots__/linkTypeWrapper.test.tsx.snap new file mode 100644 index 00000000..952206b2 --- /dev/null +++ b/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`] = ` + + + test link text + + +`; + +exports[`testing all link types tests external links same tab 1`] = ` + + + test link text + + +`; + +exports[`testing all link types tests internal links 1`] = ` + + + test link text + + +`; diff --git a/client/src/components/LinkTypeWrapper/index.tsx b/client/src/components/LinkTypeWrapper/index.tsx new file mode 100644 index 00000000..70545d34 --- /dev/null +++ b/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 component, while + * eternal links can use the standard 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 ( + + {props.linkText} + + ); + } else { + return props.openUrlNewTab ? + {props.linkText} + : + {props.linkText} + ; + } +}; + +export default LinkTypeWrapper; diff --git a/client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx b/client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx new file mode 100644 index 00000000..ad89e68b --- /dev/null +++ b/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( + + + , + ); + expect(asFragment()).toMatchSnapshot(); + }); + it('tests external links same tab', () => { + const {asFragment} = render( + + + , + ); + expect(asFragment()).toMatchSnapshot(); + }); + it('tests external links new tab', () => { + const {asFragment} = render( + + + , + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index ba325b55..8886c545 100644 --- a/client/src/pages/index.tsx +++ b/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'} - actionUrl={'./methodology'}> + linkText={'Go to data & 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'} - actionUrl={'./cejst'}> + linkText={'Explore the tool'} + url={'/cejst'} + internal={true} + > Explore data about communities of focus in your area, and help provide feedback on the tool. @@ -198,8 +202,10 @@ const IndexPage = ({location}: IndexPageProps) => { size={'small'} imgSrc={commentIcon} header={'Send feedback'} - actionText={'Email: screeningtool.feedback@usds.gov'} - actionUrl={'mailto:screeningtool.feedback@usds.gov'}> + linkText={'Email: 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? @@ -208,9 +214,11 @@ const IndexPage = ({location}: IndexPageProps) => { size={'small'} imgSrc={githubIcon} header={'Join the open source community'} - actionText={'Check it out on GitHub'} - actionUrl={'https://github.com/usds/justice40-tool'} - actionOpenInNewTab={true}> + linkText={'Check it out on GitHub'} + url={'https://github.com/usds/justice40-tool'} + 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.