@appearhere/bloom/components/SocialLinks/SocialLinks.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';

import templateHelper from '../../utils/templateHelper/templateHelper';
import noop from '../../utils/noop';
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,
    className,
    variant,
    linkClassName,
    onClick,
  } = props;

  const encodedUri = encodeURI(uri);
  const encodedTwitterTweet = encodeURI(twitterTweet).replace('#', '%23');
  const encodedVia = encodeURI(twitterVia);

  return (
    <div className={ cx(css.root, css[variant], className) }>
      { platforms
          .map(platform => (
            <div
              className={ css.linkItem }
              key={ `${platform.name}-${encodedUri}` }
            >
              <a
                className={ cx(css.link, linkClassName) }
                href={ platform.shareUrl({
                  uri: encodedUri,
                  twitterTweet: encodedTwitterTweet,
                  twitterVia: encodedVia,
                }) }
                onClick={ (e) => { onClick(e, { platform, encodedUri }); } }
                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,
  })),
  className: PropTypes.string,
  variant: PropTypes.oneOf(['light', 'dark']),
  linkClassName: PropTypes.string,
  onClick: PropTypes.func,
};

SocialLinks.defaultProps = {
  excludes: emptyArr,
  accessibilityLabel: 'Share on',
  platforms: defaultPlatforms,
  variant: 'light',
  onClick: noop,
  twitterTweet: '',
  twitterVia: '',
};

export default SocialLinks;