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

React versions of Mayflower design system UI components

/**
 * 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", {
    href: calloutLink.href,
    title: calloutLink.info
  }, (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, null))), 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,

  /** 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;