@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
60 lines • 3.03 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); }
/**
* 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;