@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
89 lines (88 loc) • 4.68 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _IconFacebookLogo = _interopRequireDefault(require("../Icon/IconFacebookLogo.js"));
var _IconXLogo = _interopRequireDefault(require("../Icon/IconXLogo.js"));
var _IconLinkedinLogo = _interopRequireDefault(require("../Icon/IconLinkedinLogo.js"));
var _IconYoutubeLogo = _interopRequireDefault(require("../Icon/IconYoutubeLogo.js"));
var _IconInstagramLogo = _interopRequireDefault(require("../Icon/IconInstagramLogo.js"));
var _IconVimeoLogo = _interopRequireDefault(require("../Icon/IconVimeoLogo.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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
*/ // eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
var SocialLinks = function SocialLinks(socialLinks) {
var _classNames;
var linkClasses = (0, _classnames["default"])((_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["default"].createElement("section", {
className: "ma__social-links"
}, socialLinks.label && /*#__PURE__*/_react["default"].createElement("span", {
className: "ma__social-links__label"
}, socialLinks.label), /*#__PURE__*/_react["default"].createElement("ul", {
className: "ma__social-links__items"
}, socialLinks.items.map(function (socialLink, i) {
return /*#__PURE__*/ /* eslint-disable-next-line react/no-array-index-key */_react["default"].createElement(SocialLink, _extends({}, socialLink, {
linkClasses: linkClasses,
key: "socialLink_" + i,
index: i
}));
})));
};
var SocialLink = function SocialLink(socialLink) {
var icons = {
facebook: _IconFacebookLogo["default"],
twitter: _IconXLogo["default"],
linkedin: _IconLinkedinLogo["default"],
youtube: _IconYoutubeLogo["default"],
instagram: _IconInstagramLogo["default"],
vimeo: _IconVimeoLogo["default"]
};
var IconComponent = socialLink.linkType ? icons[socialLink.linkType] : null;
return /*#__PURE__*/_react["default"].createElement("li", {
className: "ma__social-links__item"
}, /*#__PURE__*/_react["default"].createElement("a", {
href: socialLink.href,
className: socialLink.linkClasses,
"data-social-share": socialLink.linkType,
"aria-label": socialLink.altText
}, /*#__PURE__*/_react["default"].createElement(IconComponent, null)));
};
SocialLink.propTypes = process.env.NODE_ENV !== "production" ? {
/** The URL for the link */
href: _propTypes["default"].string.isRequired,
/** The type of social link and the icon name */
linkType: _propTypes["default"].oneOf(['facebook', 'twitter', 'linkedin', 'youtube', 'instagram', 'vimeo']).isRequired,
/** Alt text for accessibility */
altText: _propTypes["default"].string.isRequired
} : {};
SocialLinks.propTypes = process.env.NODE_ENV !== "production" ? {
/** The optional label for the social links */
label: _propTypes["default"].string,
/** Whether the social media icons are inverted and have a background */
inverted: _propTypes["default"].bool,
/** The color theme of the social media icons */
theme: _propTypes["default"].oneOf(['c-primary', 'c-primary-alt']),
/** The social links to display */
items: _propTypes["default"].arrayOf(_propTypes["default"].shape(SocialLink.propTypes)).isRequired
} : {};
SocialLinks.defaultProps = {
label: '',
theme: 'c-primary',
inverted: true
};
var _default = exports["default"] = SocialLinks;
module.exports = exports.default;