@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
86 lines • 3.9 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, 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 IconFacebookLogo from "../Icon/IconFacebookLogo.mjs";
// eslint-disable-next-line import/no-unresolved
import IconXLogo from "../Icon/IconXLogo.mjs";
// eslint-disable-next-line import/no-unresolved
import IconLinkedinLogo from "../Icon/IconLinkedinLogo.mjs";
// eslint-disable-next-line import/no-unresolved
import IconYoutubeLogo from "../Icon/IconYoutubeLogo.mjs";
// eslint-disable-next-line import/no-unresolved
import IconInstagramLogo from "../Icon/IconInstagramLogo.mjs";
// eslint-disable-next-line import/no-unresolved
import IconVimeoLogo from "../Icon/IconVimeoLogo.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: IconFacebookLogo,
twitter: IconXLogo,
linkedin: IconLinkedinLogo,
youtube: IconYoutubeLogo,
instagram: IconInstagramLogo,
vimeo: IconVimeoLogo
};
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', 'vimeo']).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;