import React, { PropTypes } from 'react';

import templateHelper from '../../utils/templateHelper/templateHelper';
import Icon from '../Icon/Icon';
import ScreenReadable from '../ScreenReadable/ScreenReadable';
import css from './SocialLinks.css';

const emptyArr = [];

export const defaultPlatforms = [{
  name: 'facebook',
  shareUrl: templateHelper`https://www.facebook.com/sharer/sharer.php?u=${'uri'}`,
}, {
  name: 'twitter',
  shareUrl: templateHelper`https://twitter.com/intent/tweet?text=${'twitterTweet'}&url=${'uri'}&via=${'twitterVia'}`,
}, {
  name: 'pintrest',
  shareUrl: templateHelper`https://www.pinterest.com/pin/create/button/?url=${'uri'}`,
}];

const SocialLinks = (props) => {
  const {
    uri,
    twitterTweet,
    twitterVia,
    accessibilityLabel,
    platforms,
  } = props;

  const encodedUri = encodeURI(uri);
  const encodedTwitterTweet = encodeURI(twitterTweet);
  const encodedVia = encodeURI(twitterVia);

  return (
    <div className={ css.root }>
      { platforms
          .map(platform => (
            <div
              className={ css.linkItem }
              key={ `${platform.name}-${encodedUri}` }
            >
              <a
                className={ css.link }
                href={ platform.shareUrl({
                  uri: encodedUri,
                  twitterTweet: encodedTwitterTweet,
                  twitterVia: encodedVia,
                }) }
                target="_blank"
                rel="noopener noreferrer"
              >
                <Icon name={ platform.name } />
                <ScreenReadable>{ accessibilityLabel } { platform.name }</ScreenReadable>
              </a>
            </div>
          ))
      }
    </div>
  );
};

SocialLinks.propTypes = {
  uri: PropTypes.string.isRequired,
  twitterTweet: PropTypes.string,
  twitterVia: PropTypes.string,
  accessibilityLabel: PropTypes.string,
  platforms: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string,
    shareUrl: PropTypes.func,
  })),
};

SocialLinks.defaultProps = {
  excludes: emptyArr,
  accessibilityLabel: 'Share on',
  platforms: defaultPlatforms,
};

export default SocialLinks;
@@ -34,16 +34,45 @@
 'react';
+%0Aimport cx from 'classnames';
 %0A%0Aimport
@@ -815,16 +815,31 @@
 tforms,%0A
+    className,%0A
   %7D = pr
@@ -1017,16 +1017,19 @@
 e=%7B 
+cx(
 css.root
  %7D%3E%0A
@@ -1024,16 +1024,28 @@
 css.root
+, className)
  %7D%3E%0A    
@@ -2050,15 +2050,46 @@
 nc,%0A
-
   %7D)),%0A
+  className: PropTypes.string,%0A
 %7D;%0A%0A

Add `className` prop support to `<SocialLinks />`