Phrase share button feature.

src/components/App/App.reducer.js

@@ -23,7 +23,7 @@ const initialState = {
   },
   navigationSettings: {
     active: false,
-    copyShowActive: false,
+    shareShowActive: false,
     caBackButtonActive: false,
     quickUnlockActive: false,
     removeOutputActive: false,

src/components/App/__tests__/App.reducer.test.js

@@ -26,7 +26,7 @@ describe('reducer', () => {
       navigationSettings: {
         active: false,
         caBackButtonActive: false,
-        copyShowActive: false,
+        shareShowActive: false,
         quickUnlockActive: false,
         removeOutputActive: false,
         vocalizeFolders: false
@@ -47,7 +47,7 @@ describe('reducer', () => {
       navigationSettings: {
         active: false,
         caBackButtonActive: false,
-        copyShowActive: false,
+        shareShowActive: false,
         quickUnlockActive: false,
         removeOutputActive: false,
         vocalizeFolders: false

src/components/Board/Board.component.js

@@ -89,7 +89,7 @@ export class Board extends Component {
     displaySettings: {
       uiSize: 'Standard',
       labelPosition: 'Below',
-      copyShowActive: false,
+      shareShowActive: false,
       hideOutputActive: false
     },
     navigationSettings: {},

src/components/Board/Output/Output.container.js

@@ -182,6 +182,14 @@ export class OutputContainer extends Component {
     this.clearOutput();
   };
 
+  handlePhraseToShare = () => {
+    if (this.props.output.length) {
+      const labels = this.props.output.map(symbol => symbol.label);
+      return labels.join(' ');
+    }
+    return '';
+  };
+
   handleCopyClick = async () => {
     const { intl, showNotification } = this.props;
     const labels = this.props.output.map(symbol => symbol.label);
@@ -233,6 +241,7 @@ export class OutputContainer extends Component {
         symbols={this.state.translatedOutput}
         tabIndex={tabIndex}
         navigationSettings={navigationSettings}
+        phrase={this.handlePhraseToShare()}
       />
     );
   }

src/components/Board/Output/PhraseShare/PhraseShare.component.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+//import { Link } from 'react-router-dom';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { FormattedMessage } from 'react-intl';
+import CopyIcon from '@material-ui/icons/FilterNone';
+import CloseIcon from '@material-ui/icons/Close';
+import ShareButton from '../SymbolOutput/ShareButton';
+import IconButton from '../../../UI/IconButton';
+import Button from '@material-ui/core/Button';
+import {
+  FacebookShareButton,
+  FacebookIcon,
+  TwitterShareButton,
+  TwitterIcon,
+  EmailShareButton,
+  EmailIcon,
+  WhatsappShareButton,
+  WhatsappIcon,
+  RedditShareButton,
+  RedditIcon
+} from 'react-share';
+import withMobileDialog from '@material-ui/core/withMobileDialog';
+import messages from './PhraseShare.messages';
+
+import './PhraseShare.css';
+
+const PhraseShare = ({
+  label,
+  phrase,
+  intl,
+  open,
+  fullScreen,
+  onShareClick,
+  onShareClose,
+  onCopyPhrase,
+  style,
+  hidden
+}) => (
+  <React.Fragment>
+    <ShareButton
+      label={label}
+      color="inherit"
+      onClick={onShareClick}
+      style={style}
+      hidden={hidden}
+    />
+    <Dialog
+      open={open}
+      onClose={onShareClose}
+      fullScreen={fullScreen}
+      className="SharePhraseDialog__container"
+    >
+      <DialogTitle className="SharePhraseDialog__title">
+        <FormattedMessage {...messages.title} />
+
+        <IconButton
+          label={intl.formatMessage(messages.close)}
+          onClick={onShareClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent className="SharePhraseDialog__content">
+        <div className="SharePhraseDialog__socialIcons">
+          <Button onClick={onCopyPhrase} color="primary">
+            <div className="SharePhraseDialog__socialIcons__copyAction">
+              <div>
+                <CopyIcon />
+              </div>
+              <FormattedMessage {...messages.copyLink} />
+            </div>
+          </Button>
+          <Button>
+            <EmailShareButton
+              subject={intl.formatMessage(messages.subject)}
+              body={phrase}
+            >
+              <EmailIcon round />
+              <FormattedMessage id="email" {...messages.email} />
+            </EmailShareButton>
+          </Button>
+          <Button>
+            <FacebookShareButton
+              url={'https://app.cboard.io'}
+              quote={phrase}
+              onShareWindowClose={onShareClose}
+            >
+              <FacebookIcon round />
+              <FormattedMessage id="facebook" {...messages.facebook} />
+            </FacebookShareButton>
+          </Button>
+          <Button>
+            <TwitterShareButton
+              hashtags={['cboard', 'AAC']}
+              via={'cboard_io'}
+              url={phrase}
+              onShareWindowClose={onShareClose}
+            >
+              <TwitterIcon round />
+              <FormattedMessage id="twitter" {...messages.twitter} />
+            </TwitterShareButton>
+          </Button>
+          <Button>
+            <WhatsappShareButton url={phrase} onShareWindowClose={onShareClose}>
+              <WhatsappIcon round />
+              <FormattedMessage id="whatsapp" {...messages.whatsapp} />
+            </WhatsappShareButton>
+          </Button>
+          <Button>
+            <RedditShareButton
+              title={phrase}
+              url={'https://app.cboard.io'}
+              onShareWindowClose={onShareClose}
+            >
+              <RedditIcon round />
+              <FormattedMessage id="reddit" {...messages.reddit} />
+            </RedditShareButton>
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  </React.Fragment>
+);
+
+PhraseShare.defaultProps = {
+  open: false,
+  disabled: false,
+  onShareClose: () => {},
+  onCopyPhrase: () => {}
+};
+
+PhraseShare.propTypes = {
+  open: PropTypes.bool,
+  phrase: PropTypes.string.isRequired,
+  onShareClose: PropTypes.func,
+  onShareClick: PropTypes.func.isRequired,
+  onCopyPhrase: PropTypes.func
+};
+
+export default withMobileDialog()(PhraseShare);

src/components/Board/Output/PhraseShare/PhraseShare.css

@@ -0,0 +1,52 @@
+.SharePhraseDialog__container .SharePhraseDialog__title {
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 18px;
+  padding: 20px 24px 18px;
+  position: relative;
+}
+
+.SharePhraseDialog__container .SharePhraseDialog__title button {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  color: #000;
+}
+
+.SharePhraseDialog__container .SharePhraseDialog__ToggleStatusButton {
+  top: 0;
+}
+
+.SharePhraseDialog__socialIcons {
+  text-align: center;
+}
+
+.SharePhraseDialog__socialIcons > div {
+  display: flex;
+}
+
+.SharePhraseDialog__socialIcons > div {
+  margin-bottom: 10px;
+}
+
+.SharePhraseDialog__socialIcons button:disabled {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.SharePhraseDialog__socialIcons > div > button:not(:last-child) {
+  margin: 0 2px 0 0;
+}
+
+.SharePhraseDialog__socialIcons__copyAction div:first-child {
+  padding: 10px 0 4px;
+}
+
+.SharePhraseDialog__socialIcons__copyAction > span,
+.SharePhraseDialog__socialIcons .SocialMediaShareButton span {
+  padding: 3px 0 0;
+  font-size: 0.85rem;
+}
+
+.SharePhraseDialog__socialIcons__copyAction svg {
+  font-size: 3.42rem;
+}

src/components/Board/Output/PhraseShare/PhraseShare.messages.js

@@ -0,0 +1,49 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  title: {
+    id: 'cboard.components.PhraseShare.title',
+    defaultMessage: 'Share or copy your Phrase'
+  },
+  close: {
+    id: 'cboard.components.PhraseShare.close',
+    defaultMessage: 'Close'
+  },
+  copyLink: {
+    id: 'cboard.components.PhraseShare.copyPhrase',
+    defaultMessage: 'Copy phrase'
+  },
+  facebook: {
+    id: 'cboard.components.PhraseShare.facebook',
+    defaultMessage: 'Facebook'
+  },
+  twitter: {
+    id: 'cboard.components.PhraseShare.twitter',
+    defaultMessage: 'Twitter'
+  },
+  email: {
+    id: 'cboard.components.PhraseShare.email',
+    defaultMessage: 'Email'
+  },
+  subject: {
+    id: 'cboard.components.PhraseShare.subject',
+    defaultMessage: 'Check out this email from Cboard user!'
+  },
+  whatsapp: {
+    id: 'cboard.components.PhraseShare.whatsapp',
+    defaultMessage: 'Whatsapp'
+  },
+  reddit: {
+    id: 'cboard.components.PhraseShare.reddit',
+    defaultMessage: 'Reddit'
+  }
+  // subject: {
+  //   id: 'cboard.components.PhraseShare.subject',
+  //   defaultMessage: 'Check out this board from Cboard!'
+  // },
+  // body: {
+  //   id: 'cboard.components.PhraseShare.body',
+  //   defaultMessage:
+  //     'Hello! I want to share a communication board from the Cboard tool. Please find it at: {url}'
+  // }
+});

src/components/Board/Output/PhraseShare/index.js

@@ -0,0 +1,3 @@
+import PhraseShare from './PhraseShare.component';
+
+export default PhraseShare;

src/components/Board/Output/SymbolOutput/CopyButton/CopyButton.js → src/components/Board/Output/SymbolOutput/ShareButton/ShareButton.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
-import FileCopy from '@material-ui/icons/FileCopy';
+import ShareIcon from '@material-ui/icons/Share';
 import { Scannable } from 'react-scannable';
 
 const styles = {
@@ -17,7 +17,7 @@ const styles = {
   }
 };
 
-export class CopyButton extends Component {
+export class ShareButton extends Component {
   static propTypes = {
     /**
      * @ignore
@@ -34,17 +34,17 @@ export class CopyButton extends Component {
   render() {
     const { classes, theme, hidden, ...other } = this.props;
 
-    const copyIconStyle =
+    const shareIconStyle =
       theme.direction === 'ltr' ? null : { transform: 'scaleX(-1)' };
 
     return (
       <Scannable disabled={hidden}>
-        <IconButton aria-label="Copy" className={classes.button} {...other}>
-          <FileCopy className={classes.icon} style={copyIconStyle} />
+        <IconButton aria-label="share" className={classes.button} {...other}>
+          <ShareIcon className={classes.icon} style={shareIconStyle} />
         </IconButton>
       </Scannable>
     );
   }
 }
 
-export default withStyles(styles, { withTheme: true })(CopyButton);
+export default withStyles(styles, { withTheme: true })(ShareButton);

src/components/Board/Output/SymbolOutput/ShareButton/index.js

@@ -0,0 +1 @@
+export { default } from './ShareButton';