@lote-design-system/marketing-blocks/main/components/marketing/ctas/Cta1.js

marketing blocks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Cta1 = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

// => Dependent styled-components
// Our main component depends upon the following styled-components
var CtaItem = _styledComponents["default"].div.withConfig({
  displayName: "Cta1__CtaItem",
  componentId: "sc-1y2ax8c-0"
})(["text-align:center;"]);

var CtaContent = _styledComponents["default"].div.withConfig({
  displayName: "Cta1__CtaContent",
  componentId: "sc-1y2ax8c-1"
})(["background-color:", ";padding:24px 46px;align-items:center;justify-content:center;display:flex;flex-direction:column;", "{flex-direction:row;}"], function (_ref) {
  var theme = _ref.theme;
  return theme.colors.white;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.mediaQueries.md;
});

var CtaBadge = _styledComponents["default"].div.withConfig({
  displayName: "Cta1__CtaBadge",
  componentId: "sc-1y2ax8c-2"
})(["background-color:", ";color:#fff;display:inline-block;font-size:14px;border-radius:22px;padding:8px 20px;margin:8px;"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.primary;
});

var CtaText = _styledComponents["default"].p.withConfig({
  displayName: "Cta1__CtaText",
  componentId: "sc-1y2ax8c-3"
})(["margin:0;color:", ";font-size:16px;a{color:", ";transition:color 0.5s ease;text-decoration:underline;&:hover{color:", ";}}"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.text.primary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.primary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palettes.primary[6];
}); // <= End Dependent styled-components


var propTypes = {
  /** The text for the Cta. */
  ctaText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,

  /** The text for the Badge. */
  badgeText: _propTypes["default"].string
};
var defaultProps = {
  ctaText: /*#__PURE__*/_react["default"].createElement("span", null, "We are offering a", /*#__PURE__*/_react["default"].createElement("strong", {
    style: {
      margin: '0 4px'
    }
  }, "14-days trail"), ". Please", /*#__PURE__*/_react["default"].createElement("a", {
    href: "/",
    style: {
      margin: '0 4px'
    }
  }, "Purchase Stack"), "for $18 USD."),
  badgeText: 'Hot Sale'
};
/**
 * The text for the Badge.
 * @param text {string} - The text will appear on the badge
 * @return {null|*}
 */

var renderBadge = function renderBadge(text) {
  if (typeof text === 'string' && text.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(CtaItem, null, /*#__PURE__*/_react["default"].createElement(CtaBadge, null, text));
  } else {
    return null;
  }
};
/**
 * Render text on the Cta.
 * @param text {*} - The text appear on the Cta
 * @return {null|*}
 */


var renderText = function renderText(text) {
  if (text) {
    return /*#__PURE__*/_react["default"].createElement(CtaItem, null, /*#__PURE__*/_react["default"].createElement(CtaText, null, text));
  } else {
    return null;
  }
};

var Cta1 = function Cta1(props) {
  var ctaText = props.ctaText,
      badgeText = props.badgeText,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["ctaText", "badgeText"]);
  return /*#__PURE__*/_react["default"].createElement(CtaContent, attributes, renderBadge(badgeText), renderText(ctaText));
};

exports.Cta1 = Cta1;
Cta1.propTypes = propTypes;
Cta1.defaultProps = defaultProps;