UNPKG

@massds/mayflower-react

Version:

React versions of Mayflower design system UI components

60 lines 3.03 kB
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); } /** * CalloutLink module. * @module @massds/mayflower-react/CalloutLink * @requires module:@massds/mayflower-assets/scss/02-molecules/callout-link * @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"; // eslint-disable-next-line import/no-unresolved import IconArrow from "../Icon/IconArrow.mjs"; const CalloutLink = calloutLink => { const calloutLinkTheme = calloutLink.theme ? " ma__callout-link--" + calloutLink.theme : ''; const classNames = "ma__callout-link" + calloutLinkTheme; return /*#__PURE__*/React.createElement("div", { className: classNames }, /*#__PURE__*/React.createElement("a", _extends({ href: calloutLink.href, title: calloutLink.info }, calloutLink.anchorAttributes), (calloutLink.eyebrow || calloutLink.time) && /*#__PURE__*/React.createElement("div", { className: "ma__callout-link__header" }, /*#__PURE__*/React.createElement("span", { className: "ma__callout-link__eyebrow" }, calloutLink.eyebrow), /*#__PURE__*/React.createElement("span", { className: "ma__callout-link__time" }, calloutLink.time)), /*#__PURE__*/React.createElement("span", { className: "ma__callout-link__container" }, /*#__PURE__*/React.createElement("span", { className: "ma__callout-link__text" }, /*#__PURE__*/React.createElement("span", null, calloutLink.text), /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement(IconArrow, { height: ".8em", width: ".8em" }))), calloutLink.emphasized && /*#__PURE__*/React.createElement("span", { className: "ma__callout-link__emphasized" }, calloutLink.emphasized), calloutLink.description && /*#__PURE__*/React.createElement("p", { className: "ma__callout-link__description" }, calloutLink.description))); }; CalloutLink.propTypes = process.env.NODE_ENV !== "production" ? { /** The heading text */ text: PropTypes.string.isRequired, /** The link the callout is going to */ href: PropTypes.string.isRequired, /** All other attributes of the a tag */ anchorAttributes: PropTypes.object, /** Add more information about the link */ info: PropTypes.string, /** Add description text under the title text */ description: PropTypes.string, /** Adds and eyebrow to the callout link */ eyebrow: PropTypes.string, /** Adds a time note to the top left of the card */ time: PropTypes.string, /** Adds emphasized text below the title link */ emphasized: PropTypes.string, /** Change the theme of the callout link, option are default (blue) and white */ theme: PropTypes.oneOf(['', 'white']) } : {}; export default CalloutLink;