From 8b1943356e6ccb80d95fcf4e06aa94a11daf791b Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Tue, 7 May 2019 11:44:09 -0400 Subject: [PATCH] fix(sociallinks): update link props BREAKING CHANGE will not render social links unless array is passed in --- package-lock.json | 59 +++- package.json | 7 + src/index.jsx | 59 +++- .../components/SiteFooter/SiteFooter.test.jsx | 71 +++-- .../__snapshots__/SiteFooter.test.jsx.snap | 288 +++++++++++++----- src/lib/components/SiteFooter/index.jsx | 177 ++--------- 6 files changed, 407 insertions(+), 254 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7669e9289..099b73e3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1452,6 +1452,52 @@ "sanitize-html": "1.20.0" } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.17.tgz", + "integrity": "sha512-DEYsEb/iiGVoMPQGjhG2uOylLVuMzTxOxysClkabZ5n80Q3oFDWGnshCLKvOvKoeClsgmKhWVrnnqvsMI1cAbw==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.17", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.17.tgz", + "integrity": "sha512-TORMW/wIX2QyyGBd4XwHGPir4/0U18Wxf+iDBAUW3EIJ0/VC/ZMpJOiyiCe1f8g9h0PPzA7sqVtl8JtTUtm4uA==", + "requires": { + "@fortawesome/fontawesome-common-types": "0.2.17" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.1.tgz", + "integrity": "sha512-NN5Nap2D5e7Lusa5uarAUkcaO7PMbme5wmUF8kofZzPUZR753zDg/UFffi+LLE2Mi9zRXCJEYmIRfMON9SxLPg==", + "requires": { + "@fortawesome/fontawesome-common-types": "0.2.17" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.8.1.tgz", + "integrity": "sha512-U+tFjDyQpVdD0UPWoKRBVLhh0J1/q3iaWDrnxNMJKuKRmerc4d0jfiZdM2X7agOTcG7amvcllRBiWCu2FwYlMA==", + "requires": { + "@fortawesome/fontawesome-common-types": "0.2.17" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.1.tgz", + "integrity": "sha512-FUcxR75PtMOo3ihRHJOZz64IsWIVdWgB2vCMLJjquTv487wVVCMH5H5gWa72et2oI9lKKD2jvjQ+y+7mxhscVQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "0.2.17" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz", + "integrity": "sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==", + "requires": { + "humps": "2.0.1", + "prop-types": "15.6.2" + } + }, "@marionebl/sander": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/@marionebl/sander/-/sander-0.6.1.tgz", @@ -10498,6 +10544,11 @@ } } }, + "humps": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz", + "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=" + }, "husky": { "version": "0.14.3", "resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz", @@ -12132,8 +12183,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "3.12.1", @@ -12668,7 +12718,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "4.0.0" } @@ -17038,8 +17087,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -19947,7 +19995,6 @@ "version": "15.6.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "dev": true, "requires": { "loose-envify": "1.4.0", "object-assign": "4.1.1" diff --git a/package.json b/package.json index a299d6c19..9904b9172 100644 --- a/package.json +++ b/package.json @@ -106,5 +106,12 @@ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", "\\.(css|scss)$": "identity-obj-proxy" } + }, + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.17", + "@fortawesome/free-brands-svg-icons": "^5.8.1", + "@fortawesome/free-regular-svg-icons": "^5.8.1", + "@fortawesome/free-solid-svg-icons": "^5.8.1", + "@fortawesome/react-fontawesome": "^0.1.4" } } diff --git a/src/index.jsx b/src/index.jsx index cc06f080e..72731f3fd 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,11 +1,61 @@ import React from 'react'; import { render } from 'react-dom'; import { IntlProvider } from 'react-intl'; + +import { + faFacebookSquare, + faTwitterSquare, + faYoutubeSquare, + faLinkedin, + faGooglePlusSquare, + faRedditSquare, +} from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + import SiteFooter from './lib'; import './index.scss'; - import FooterLogo from './edx-footer.png'; + +const socialLinks = [ + { + title: 'Facebook', + url: 'https://www.facebook.com', + icon: , + screenReaderText: 'Like edX on Facebook', + }, + { + title: 'Twitter', + url: 'https://www.twitter.com', + icon: , + screenReaderText: 'Follow edX on Twitter', + }, + { + title: 'Youtube', + url: 'https://www.youtube.com', + icon: , + screenReaderText: 'Subscribe to the edX YouTube channel', + }, + { + title: 'LinkedIn', + url: 'https://www.linkedin.com', + icon: , + screenReaderText: 'Follow edX on LinkedIn', + }, + { + title: 'Google+', + url: 'https://plus.google.com', + icon: , + screenReaderText: 'Follow edX on Google+', + }, + { + title: 'Reddit', + url: 'https://reddit.com', + icon: , + screenReaderText: 'Subscribe to the edX subreddit', + }, +]; + const App = () => ( ( openSourceUrl="https://www.example.com/open" termsOfServiceUrl="https://www.example.com/terms-of-service" privacyPolicyUrl="https://www.example.com/privacy-policy" - facebookUrl="https://www.facebook.com" - twitterUrl="https://www.twitter.com" - youTubeUrl="https://www.youtube.com" - linkedInUrl="https://www.linkedin.com" - googlePlusUrl="https://plus.google.com" - redditUrl="https://reddit.com" appleAppStoreUrl="https://store.apple.com" googlePlayUrl="https://play.google.com" handleAllTrackEvents={() => {}} + socialLinks={socialLinks} /> ); diff --git a/src/lib/components/SiteFooter/SiteFooter.test.jsx b/src/lib/components/SiteFooter/SiteFooter.test.jsx index cbf6cda81..583671db8 100644 --- a/src/lib/components/SiteFooter/SiteFooter.test.jsx +++ b/src/lib/components/SiteFooter/SiteFooter.test.jsx @@ -3,9 +3,59 @@ import renderer from 'react-test-renderer'; import { mount } from 'enzyme'; import { IntlProvider } from 'react-intl'; +import { + faFacebookSquare, + faTwitterSquare, + faYoutubeSquare, + faLinkedin, + faGooglePlusSquare, + faRedditSquare, +} from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + import FooterLogo from '../../../edx-footer.png'; import SiteFooter, { EVENT_NAMES } from './index'; + +const socialLinks = [ + { + title: 'Facebook', + url: 'https://www.facebook.com', + icon: , + screenReaderText: 'Like edX on Facebook', + }, + { + title: 'Twitter', + url: 'https://www.twitter.com', + icon: , + screenReaderText: 'Follow edX on Twitter', + }, + { + title: 'Youtube', + url: 'https://www.youtube.com', + icon: , + screenReaderText: 'Subscribe to the edX YouTube channel', + }, + { + title: 'LinkedIn', + url: 'https://www.linkedin.com', + icon: , + screenReaderText: 'Follow edX on LinkedIn', + }, + { + title: 'Google+', + url: 'https://plus.google.com', + icon: , + screenReaderText: 'Follow edX on Google+', + }, + { + title: 'Reddit', + url: 'https://reddit.com', + icon: , + screenReaderText: 'Subscribe to the edX subreddit', + }, +]; + const completeSiteFooterComponent = mockHandleAllTrackEvents => ( @@ -18,12 +68,7 @@ const completeSiteFooterComponent = mockHandleAllTrackEvents => openSourceUrl="https://www.example.com/open" termsOfServiceUrl="https://www.example.com/terms-of-service" privacyPolicyUrl="https://www.example.com/privacy-policy" - facebookUrl="https://www.facebook.com" - twitterUrl="https://www.twitter.com" - youTubeUrl="https://www.youtube.com" - linkedInUrl="https://www.linkedin.com" - redditUrl="https://reddit.com" - googlePlusUrl="https://plus.google.com" + socialLinks={socialLinks} appleAppStoreUrl="https://store.apple.com" googlePlayUrl="https://play.google.com" handleAllTrackEvents={mockHandleAllTrackEvents} @@ -54,16 +99,9 @@ describe('', () => { openSourceUrl="https://www.example.com/open" termsOfServiceUrl="https://www.example.com/terms-of-service" privacyPolicyUrl="https://www.example.com/privacy-policy" - facebookUrl="https://www.facebook.com" - twitterUrl="https://www.twitter.com" - youTubeUrl="https://www.youtube.com" - linkedInUrl="https://www.linkedin.com" - redditUrl="https://reddit.com" - googlePlusUrl="https://plus.google.com" appleAppStoreUrl="https://store.apple.com" googlePlayUrl="https://play.google.com" handleAllTrackEvents={jest.fn()} - showSocialLinks={false} /> )).toJSON(); @@ -83,12 +121,7 @@ describe('', () => { openSourceUrl="https://www.example.com/open" termsOfServiceUrl="https://www.example.com/terms-of-service" privacyPolicyUrl="https://www.example.com/privacy-policy" - facebookUrl="https://www.facebook.com" - twitterUrl="https://www.twitter.com" - youTubeUrl="https://www.youtube.com" - linkedInUrl="https://www.linkedin.com" - redditUrl="https://reddit.com" - googlePlusUrl="https://plus.google.com" + socialLinks={socialLinks} appleAppStoreUrl="https://store.apple.com" googlePlayUrl="https://play.google.com" handleAllTrackEvents={jest.fn()} diff --git a/src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap b/src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap index cb9cae513..c3061505e 100644 --- a/src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap +++ b/src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap @@ -219,15 +219,27 @@ exports[` renders correctly does not render mobile links 1`] = ` target="_blank" title="Facebook" > - + - Like example on Facebook + Like edX on Facebook @@ -239,15 +251,27 @@ exports[` renders correctly does not render mobile links 1`] = ` target="_blank" title="Twitter" > - + - Follow example on Twitter + Follow edX on Twitter @@ -259,15 +283,27 @@ exports[` renders correctly does not render mobile links 1`] = ` target="_blank" title="Youtube" > - + - Subscribe to the example YouTube channel + Subscribe to the edX YouTube channel @@ -279,15 +315,27 @@ exports[` renders correctly does not render mobile links 1`] = ` target="_blank" title="LinkedIn" > - + - Follow example on LinkedIn + Follow edX on LinkedIn @@ -299,15 +347,27 @@ exports[` renders correctly does not render mobile links 1`] = ` target="_blank" title="Google+" > - + - Follow example on Google+ + Follow edX on Google+ @@ -319,15 +379,27 @@ exports[` renders correctly does not render mobile links 1`] = ` target="_blank" title="Reddit" > - + - Subscribe to the example subreddit + Subscribe to the edX subreddit @@ -819,15 +891,27 @@ exports[` renders correctly renders with social and mobile links 1 target="_blank" title="Facebook" > - + - Like example on Facebook + Like edX on Facebook @@ -839,15 +923,27 @@ exports[` renders correctly renders with social and mobile links 1 target="_blank" title="Twitter" > - + - Follow example on Twitter + Follow edX on Twitter @@ -859,15 +955,27 @@ exports[` renders correctly renders with social and mobile links 1 target="_blank" title="Youtube" > - + - Subscribe to the example YouTube channel + Subscribe to the edX YouTube channel @@ -879,15 +987,27 @@ exports[` renders correctly renders with social and mobile links 1 target="_blank" title="LinkedIn" > - + - Follow example on LinkedIn + Follow edX on LinkedIn @@ -899,15 +1019,27 @@ exports[` renders correctly renders with social and mobile links 1 target="_blank" title="Google+" > - + - Follow example on Google+ + Follow edX on Google+ @@ -919,15 +1051,27 @@ exports[` renders correctly renders with social and mobile links 1 target="_blank" title="Reddit" > - + - Subscribe to the example subreddit + Subscribe to the edX subreddit diff --git a/src/lib/components/SiteFooter/index.jsx b/src/lib/components/SiteFooter/index.jsx index e91f994ea..ad8f0a409 100644 --- a/src/lib/components/SiteFooter/index.jsx +++ b/src/lib/components/SiteFooter/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; -import { Hyperlink, Icon } from '@edx/paragon'; +import { Hyperlink } from '@edx/paragon'; import messages from './SiteFooter.messages'; const EVENT_NAMES = { @@ -40,140 +40,6 @@ class SiteFooter extends React.Component { return `${this.props.marketingSiteBaseUrl}${path}`; } - renderSocialLinks() { - const { - intl, - siteName, - showSocialLinks, - facebookUrl, - twitterUrl, - youTubeUrl, - linkedInUrl, - googlePlusUrl, - redditUrl, - } = this.props; - let socialLinks = null; - if (showSocialLinks) { - socialLinks = ( -
    - {/* TODO: Use Paragon HyperLink with Icon. */} - {/* Would need to add rel to paragon if we still need it. */} -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
- ); - } - return socialLinks; - } - renderMobileLinks() { const { intl, @@ -225,6 +91,7 @@ class SiteFooter extends React.Component { privacyPolicyUrl, contactUrl, supportUrl, + socialLinks, } = this.props; return (