AA-214 social buttons (#127)

- social sharing buttons for linkedin and email

src/courseware/course/celebration/SocialIcons.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
+  EmailIcon,
+  EmailShareButton,
   FacebookIcon,
   FacebookShareButton,
+  LinkedinIcon,
+  LinkedinShareButton,
   TwitterIcon,
   TwitterShareButton,
 } from 'react-share';
@@ -39,9 +43,17 @@ function SocialIcons({ courseId, intl }) {
 
   return (
     <div className="social-icons">
+      <LinkedinShareButton
+        beforeOnClick={() => logClick('linkedin')}
+        url={marketingUrl}
+      >
+        <LinkedinIcon round size={32} />
+        <span className="sr-only">{intl.formatMessage(messages.shareService, { service: 'LinkedIn' })}</span>
+      </LinkedinShareButton>
       { twitterAccount && (
         <TwitterShareButton
           beforeOnClick={() => logClick('twitter')}
+          className="ml-2"
           hashtags={['mooc']}
           title={intl.formatMessage(messages.social, { platform: `@${twitterAccount}`, title })}
           url={marketingUrl}
@@ -59,6 +71,16 @@ function SocialIcons({ courseId, intl }) {
         <FacebookIcon round size={32} />
         <span className="sr-only">{intl.formatMessage(messages.shareService, { service: 'Facebook' })}</span>
       </FacebookShareButton>
+      <EmailShareButton
+        beforeOnClick={() => logClick('email')}
+        body={intl.formatMessage(messages.emailBody)}
+        className="ml-2"
+        subject={intl.formatMessage(messages.emailSubject, { platform: getConfig().SITE_NAME, title })}
+        url={marketingUrl}
+      >
+        <EmailIcon round size={32} />
+        <span className="sr-only">{intl.formatMessage(messages.shareEmail)}</span>
+      </EmailShareButton>
     </div>
   );
 }

src/courseware/course/celebration/messages.js

@@ -13,6 +13,16 @@ const messages = defineMessages({
     id: 'learning.celebration.earned',
     defaultMessage: 'You earned it!',
   },
+  emailBody: {
+    id: 'learning.celebration.emailBody',
+    defaultMessage: 'What are you spending your time learning?',
+    description: 'Body when sharing course progress via email',
+  },
+  emailSubject: {
+    id: 'learning.celebration.emailSubject',
+    defaultMessage: "I'm on my way to completing {title} online with @edxonline!",
+    description: 'Subject when sharing course progress via email',
+  },
   forward: {
     id: 'learning.celebration.forward',
     defaultMessage: 'Keep going',
@@ -22,6 +32,10 @@ const messages = defineMessages({
     id: 'learning.celebration.share',
     defaultMessage: 'Take a moment to celebrate and share your progress.',
   },
+  shareEmail: {
+    id: 'learning.celebration.share.email',
+    defaultMessage: 'Share your progress via email.',
+  },
   shareService: {
     id: 'learning.celebration.share.service',
     defaultMessage: 'Share your progress on {service}.',