Merge pull request #1909 from fedspendingtransparency/FDG-10777

FDG 10777 Add External Link Banner to Social Share Clicks

Author: chasls2

src/components/modal/redirect-modal/redirect-modal.module.scss

@@ -72,3 +72,12 @@
   width: 1.25rem;
   color: $content-section-background;
 }
+
+@media screen and (max-width: $breakpoint-sm - 1) {
+  .redirectBody {
+    padding: 1rem;
+  }
+  .titleText {
+    font-size: $font-size-28;
+  }
+}

src/components/social-share/social-share-dropdown/social-share-dropdown.spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import SocialShareDropdown from './social-share-dropdown';
+import { RecoilRoot } from 'recoil';
 
 const testCopy = {
   title: 'test',
@@ -42,11 +43,14 @@ describe('exchange rates banner', () => {
   });
 
   it('closes the dropdown when a social button is clicked', () => {
-    render(<SocialShareDropdown copy={testCopy} pageName="" />);
-    const shareBtn = screen.getByRole('button', { name: 'Share' });
-
+    const { getByRole } = render(
+      <RecoilRoot>
+        <SocialShareDropdown copy={testCopy} pageName="" />
+      </RecoilRoot>
+    );
+    const shareBtn = getByRole('button', { name: 'Share' });
     userEvent.click(shareBtn);
-    const facebookBtn = screen.getByRole('button', { name: 'facebook' });
+    const facebookBtn = getByRole('button', { name: 'facebook' });
     userEvent.click(facebookBtn);
 
     act(() => {

src/components/social-share/social-share-helper.js

@@ -0,0 +1,22 @@
+export const socialUrls = {
+  facebook: `https://www.facebook.com/sharer/sharer.php?u=`,
+  twitter: `https://twitter.com/intent/tweet?url=`,
+  reddit: `http://www.reddit.com/submit?url=`,
+  linkedin: `https://www.linkedin.com/shareArticle?mini=true&url=`,
+};
+
+export const getLinkedInParams = (site, url, title) => {
+  return socialUrls[site] + encodeURIComponent(url) + '&title=' + encodeURIComponent(title);
+};
+
+export const getFacebookParams = (site, url) => {
+  return socialUrls[site] + encodeURIComponent(url);
+};
+
+export const getTwitterParams = (site, url, title) => {
+  return socialUrls[site] + encodeURIComponent(url) + '&title=' + encodeURIComponent(title);
+};
+
+export const getRedditParams = (site, url, title) => {
+  return socialUrls[site] + encodeURIComponent(url) + '&title=' + encodeURIComponent(title);
+};

src/components/social-share/social-share.module.scss

@@ -59,6 +59,14 @@
   }
 }
 
+.customShareButton {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 0.75rem;
+  cursor: pointer;
+}
+
 @media screen and (max-width: $breakpoint-lg - 1) {
   .horizontalShareButtonContainer {
     margin-right: 1.5rem;

src/components/social-share/social-share.spec.js

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import { SocialShareComponent } from './social-share';
 import { breakpointLg, breakpointSm } from '../../../../variables.module.scss';
 import Analytics from '../../utils/analytics/analytics';
+import { RecoilRoot } from 'recoil';
 
 jest.mock('./variables.module.scss', content => ({
   ...content,
@@ -79,7 +80,11 @@ describe('Social Share component', () => {
   it('calls the appropriate analytics for Explainer pages event when buttons are clicked on', () => {
     const spy = jest.spyOn(Analytics, 'event');
     window.open = jest.fn();
-    const { getByRole } = render(<SocialShareComponent copy={testCopy} pageName={'Debt'} width={breakpointSm} explainer />);
+    const { getByRole } = render(
+      <RecoilRoot>
+        <SocialShareComponent copy={testCopy} pageName={'Debt'} width={breakpointSm} explainer />
+      </RecoilRoot>
+    );
 
     const facebookButton = getByRole('button', { name: 'facebook' });
     const twitterButton = getByRole('button', { name: 'twitter' });
@@ -131,7 +136,11 @@ describe('Social Share component', () => {
   it('calls the appropriate XR Converter analytics event when buttons are clicked on', () => {
     const spy = jest.spyOn(Analytics, 'event');
     window.open = jest.fn();
-    const { getByRole } = render(<SocialShareComponent copy={testCopy} pageName={'Exchange Rates Converter'} width={breakpointSm} />);
+    const { getByRole } = render(
+      <RecoilRoot>
+        <SocialShareComponent copy={testCopy} pageName={'Exchange Rates Converter'} width={breakpointSm} />
+      </RecoilRoot>
+    );
 
     const facebookButton = getByRole('button', { name: 'facebook' });
     const twitterButton = getByRole('button', { name: 'twitter' });

src/components/social-share/social-share.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { SyntheticEvent } from 'react';
 import {
   socialShareContent,
   shareButton,
@@ -9,20 +9,21 @@ import {
   listShareButton,
   listSocialShareContent,
   headerText,
+  customShareButton,
 } from './social-share.module.scss';
 import { withWindowSize } from 'react-fns';
 import { pxToNumber } from '../../helpers/styles-helper/styles-helper';
 import { breakpointLg } from '../../variables.module.scss';
-import { FacebookShareButton, TwitterShareButton, LinkedinShareButton, RedditShareButton, EmailShareButton } from 'react-share';
-import globalConstants from '../../helpers/constants';
 import Analytics from '../../utils/analytics/analytics';
 import ShareButtonContent from './share-button-content/share-button-content';
 import { FunctionComponent } from 'react';
 import { ISocialShareComponent } from '../../models/ISocialShareComponent';
 import SocialMetaData from './social-metadata/social-metadata';
 import Heading from '../heading/heading';
-
-const baseUrl = globalConstants.BASE_SITE_URL;
+import { redirectModalState } from '../../components/modal/redirect-modal/redirect-modal-helper';
+import { useSetRecoilState } from 'recoil';
+import { getLinkedInParams, getFacebookParams, getTwitterParams, getRedditParams } from './social-share-helper';
+import { EmailShareButton } from 'react-share';
 
 const analyticsClickHandler = (page: string, social: string, explainer: boolean) => {
   let gaCategory: string;
@@ -53,6 +54,7 @@ export const SocialShareComponent: FunctionComponent<ISocialShareComponent> = ({
   explainer,
 }) => {
   const { title, description, body, emailSubject, emailBody, url, image } = copy;
+  const setModal = useSetRecoilState(redirectModalState);
 
   let contentStyle = socialShareContent;
   let containerStyle = shareButtonContainer;
@@ -75,42 +77,73 @@ export const SocialShareComponent: FunctionComponent<ISocialShareComponent> = ({
     }
   };
 
+  const openModal = (e: SyntheticEvent, url: string) => {
+    e.preventDefault();
+    setModal({
+      open: true,
+      url,
+      after: () => {
+        window.open(url, '_blank', 'noreferrer, noopener, width=650,height=600');
+      },
+    });
+  };
+
   return (
     <>
       <SocialMetaData image={image} title={title} description={description} url={url} />
-      <div className={`${contentStyle} socialShareContent`}>
+      <div className={`${contentStyle} socialShareContent facebook`}>
         {displayStyle === 'responsive' && width >= pxToNumber(breakpointLg) && (
           <Heading headingLevel={headerLevel} className={headerText}>
             Share this page
           </Heading>
         )}
         <div className={containerStyle}>
-          <FacebookShareButton className={`${buttonStyle} facebookShare`} url={url} quote={body} beforeOnClick={() => handleClick('Facebook')}>
+          <button
+            className={`${buttonStyle} ${customShareButton} facebookShare`}
+            aria-label={'facebook'}
+            onClick={e => {
+              handleClick('Facebook');
+              openModal(e, getFacebookParams('facebook', url));
+            }}
+          >
             <ShareButtonContent name="facebook" width={width} displayStyle={displayStyle} />
-          </FacebookShareButton>
+          </button>
         </div>
         <div className={containerStyle}>
-          <TwitterShareButton className={`${buttonStyle} twitterShare`} url={url} title={body} beforeOnClick={() => handleClick('Twitter')}>
+          <button
+            className={`${buttonStyle} ${customShareButton} twitterShare`}
+            aria-label={'twitter'}
+            onClick={e => {
+              handleClick('Twitter');
+              openModal(e, getTwitterParams('twitter', url, title));
+            }}
+          >
             <ShareButtonContent name="twitter" width={width} displayStyle={displayStyle} />
-          </TwitterShareButton>
+          </button>
         </div>
         <div className={containerStyle}>
-          <LinkedinShareButton
-            className={`${buttonStyle} linkedInShare`}
-            url={url}
-            title={title}
-            summary={body}
-            source={baseUrl}
-            windowHeight={650}
-            beforeOnClick={() => handleClick('LinkedIn')}
+          <button
+            className={`${buttonStyle} ${customShareButton} linkedInShare`}
+            aria-label={'linkedin'}
+            onClick={e => {
+              handleClick('LinkedIn');
+              openModal(e, getLinkedInParams('linkedin', url, title));
+            }}
           >
             <ShareButtonContent name="linkedin" width={width} displayStyle={displayStyle} />
-          </LinkedinShareButton>
+          </button>
         </div>
         <div className={containerStyle}>
-          <RedditShareButton className={`${buttonStyle} redditShare`} url={url} title={title} beforeOnClick={() => handleClick('Reddit')}>
+          <button
+            className={`${buttonStyle} ${customShareButton} redditShare`}
+            aria-label={'reddit'}
+            onClick={e => {
+              handleClick('Reddit');
+              openModal(e, getRedditParams('reddit', url, title));
+            }}
+          >
             <ShareButtonContent name="reddit" width={width} displayStyle={displayStyle} />
-          </RedditShareButton>
+          </button>
         </div>
         <div className={containerStyle}>
           <EmailShareButton

src/layouts/insight/insight.spec.js

@@ -108,7 +108,7 @@ describe('Insights Template', () => {
       value: 400,
     });
 
-    const { findByRole, queryByRole, getByTestId } = render(<InsightPageLayout pageContext={mockPageContext} />, {
+    const { findByRole, queryByRole, findByTestId, getByTestId } = render(<InsightPageLayout pageContext={mockPageContext} />, {
       wrapper,
     });
 

src/pages/americas-finance-guide/americas-finance-guide.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import AmericasFinanceGuide from './index';
 import { useStaticQuery } from 'gatsby';
-import { RecoilRoot } from "recoil";
+import { RecoilRoot } from 'recoil';
 
 Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1200 });
 
@@ -40,15 +40,15 @@ describe('Americas Finance Guide', () => {
   });
 
   it('renders the top container', async () => {
-    const { getByTestId } = render(<AmericasFinanceGuide width={100} />, {wrapper: RecoilRoot});
+    const { getByTestId } = render(<AmericasFinanceGuide width={100} />, { wrapper: RecoilRoot });
 
     expect(getByTestId('topContainer')).toBeInTheDocument();
     expect(getByTestId('quoteContainer')).toBeInTheDocument();
     expect(getByTestId('bottomContainer')).toBeInTheDocument();
   });
 
   it('renders the Social Share', () => {
-    const { getByRole } = render(<AmericasFinanceGuide width={100} />, {wrapper: RecoilRoot});
+    const { getByRole } = render(<AmericasFinanceGuide width={100} />, { wrapper: RecoilRoot });
 
     const facebook = getByRole('button', { name: 'facebook' });
     const twitter = getByRole('button', { name: 'twitter' });