@massds/mayflower-react/dist/SocialLinks/index.mjs

React versions of Mayflower design system UI components

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/**
 * SocialLinks module.
 * @module @massds/mayflower-react/SocialLinks
 * @requires module:@massds/mayflower-assets/scss/02-molecules/social-links
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames"; // eslint-disable-next-line import/no-unresolved

import IconFacebook from "../Icon/IconFacebook.mjs"; // eslint-disable-next-line import/no-unresolved

import IconTwitter from "../Icon/IconTwitter.mjs"; // eslint-disable-next-line import/no-unresolved

import IconLinkedin from "../Icon/IconLinkedin.mjs"; // eslint-disable-next-line import/no-unresolved

import IconYoutube from "../Icon/IconYoutube.mjs"; // eslint-disable-next-line import/no-unresolved

import IconInstagram from "../Icon/IconInstagram.mjs";

const SocialLinks = socialLinks => {
  var _classNames;

  const linkClasses = classNames((_classNames = {
    'ma__social-links__link': true
  }, _classNames["ma__social-links__link--" + socialLinks.theme + "--inverted"] = socialLinks.theme && socialLinks.inverted, _classNames["ma__social-links__link--" + socialLinks.theme] = socialLinks.theme && !socialLinks.inverted, _classNames));
  return /*#__PURE__*/React.createElement("section", {
    className: "ma__social-links"
  }, socialLinks.label && /*#__PURE__*/React.createElement("span", {
    className: "ma__social-links__label"
  }, socialLinks.label), /*#__PURE__*/React.createElement("ul", {
    className: "ma__social-links__items"
  }, socialLinks.items.map((socialLink, i) =>
  /*#__PURE__*/

  /* eslint-disable-next-line react/no-array-index-key */
  React.createElement(SocialLink, _extends({}, socialLink, {
    linkClasses: linkClasses,
    key: "socialLink_" + i,
    index: i
  })))));
};

const SocialLink = socialLink => {
  const icons = {
    facebook: IconFacebook,
    twitter: IconTwitter,
    linkedin: IconLinkedin,
    youtube: IconYoutube,
    instagram: IconInstagram
  };
  const IconComponent = socialLink.linkType ? icons[socialLink.linkType] : null;
  return /*#__PURE__*/React.createElement("li", {
    className: "ma__social-links__item"
  }, /*#__PURE__*/React.createElement("a", {
    href: socialLink.href,
    className: socialLink.linkClasses,
    "data-social-share": socialLink.linkType,
    "aria-label": socialLink.altText
  }, /*#__PURE__*/React.createElement(IconComponent, null)));
};

SocialLink.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The URL for the link */
  href: PropTypes.string.isRequired,

  /** The type of social link and the icon name */
  linkType: PropTypes.oneOf(['facebook', 'twitter', 'linkedin', 'youtube', 'instagram']).isRequired,

  /** Alt text for accessibility */
  altText: PropTypes.string.isRequired
} : {};
SocialLinks.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The optional label for the social links */
  label: PropTypes.string,

  /** Whether the social media icons are inverted and have a background */
  inverted: PropTypes.bool,

  /** The color theme of the social media icons */
  theme: PropTypes.oneOf(['c-primary', 'c-primary-alt']),

  /** The social links to display */
  items: PropTypes.arrayOf(PropTypes.shape(SocialLink.propTypes)).isRequired
} : {};
SocialLinks.defaultProps = {
  label: '',
  theme: 'c-primary',
  inverted: true
};
export default SocialLinks;