Skip to content

Commit

Permalink
fix(sociallinks): update link props
Browse files Browse the repository at this point in the history 
BREAKING CHANGE will not render social links unless array is passed in
  • Loading branch information
AlasdairSwan committed May 7, 2019
1 parent 5aae6e8 commit 8b19433
Show file tree
Hide file tree
Showing 6 changed files with 407 additions and 254 deletions.
59 changes: 53 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,5 +106,12 @@
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__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"
}
}
59 changes: 52 additions & 7 deletions src/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -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: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
screenReaderText: 'Like edX on Facebook',
},
{
title: 'Twitter',
url: 'https://www.twitter.com',
icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
screenReaderText: 'Follow edX on Twitter',
},
{
title: 'Youtube',
url: 'https://www.youtube.com',
icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
screenReaderText: 'Subscribe to the edX YouTube channel',
},
{
title: 'LinkedIn',
url: 'https://www.linkedin.com',
icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
screenReaderText: 'Follow edX on LinkedIn',
},
{
title: 'Google+',
url: 'https://plus.google.com',
icon: <FontAwesomeIcon icon={faGooglePlusSquare} className="social-icon" size="2x" />,
screenReaderText: 'Follow edX on Google+',
},
{
title: 'Reddit',
url: 'https://reddit.com',
icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
screenReaderText: 'Subscribe to the edX subreddit',
},
];

const App = () => (
<IntlProvider locale="en">
<SiteFooter
Expand All @@ -17,15 +67,10 @@ 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}
/>
</IntlProvider>
);
Expand Down
71 changes: 52 additions & 19 deletions src/lib/components/SiteFooter/SiteFooter.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
screenReaderText: 'Like edX on Facebook',
},
{
title: 'Twitter',
url: 'https://www.twitter.com',
icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
screenReaderText: 'Follow edX on Twitter',
},
{
title: 'Youtube',
url: 'https://www.youtube.com',
icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
screenReaderText: 'Subscribe to the edX YouTube channel',
},
{
title: 'LinkedIn',
url: 'https://www.linkedin.com',
icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
screenReaderText: 'Follow edX on LinkedIn',
},
{
title: 'Google+',
url: 'https://plus.google.com',
icon: <FontAwesomeIcon icon={faGooglePlusSquare} className="social-icon" size="2x" />,
screenReaderText: 'Follow edX on Google+',
},
{
title: 'Reddit',
url: 'https://reddit.com',
icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
screenReaderText: 'Subscribe to the edX subreddit',
},
];

const completeSiteFooterComponent = mockHandleAllTrackEvents =>
(
<IntlProvider locale="en">
Expand All @@ -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}
Expand Down Expand Up @@ -54,16 +99,9 @@ describe('<SiteFooter />', () => {
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}
/>
</IntlProvider>
)).toJSON();
Expand All @@ -83,12 +121,7 @@ describe('<SiteFooter />', () => {
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()}
Expand Down
Loading

0 comments on commit 8b19433

Please sign in to comment.