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

marketing blocks

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Cta3 = 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"));

var _core = require("@lote-design-system/core");

// => Dependent styled-components
// Our main component depends upon the following styled-components
var Cta = _styledComponents["default"].div.withConfig({
  displayName: "Cta3__Cta",
  componentId: "o4bcwr-0"
})(["background-color:#fff;padding:96px 64px;text-align:center;"]);

var CtaText = (0, _styledComponents["default"])(_core.Text).withConfig({
  displayName: "Cta3__CtaText",
  componentId: "o4bcwr-1"
})(["color:", ";font-weight:700;margin-bottom:24px;> span{display:block;}"], function (_ref) {
  var colors = _ref.theme.colors;
  return colors.secondary;
});

var CtaGroup = _styledComponents["default"].div.withConfig({
  displayName: "Cta3__CtaGroup",
  componentId: "o4bcwr-2"
})(["> a{padding:12px 30px;font-size:20px;display:block;width:100%;}> a:not(:last-child){margin-right:0;margin-bottom:8px;}", "{display:inline-flex;vertical-align:middle;> a{flex:1 1 auto;display:inline-block;width:auto;}> a:not(:last-child){margin-right:16px;margin-bottom:0;}}"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.mediaQueries.md;
}); // <= End Dependent styled-components


var linkShape = {
  id: _propTypes["default"].number.isRequired,
  href: _propTypes["default"].string.isRequired,
  text: _propTypes["default"].string.isRequired,
  variation: _propTypes["default"].string.isRequired,
  color: _propTypes["default"].string
};
var linkSchema = [{
  id: 1,
  href: '/',
  text: 'Get Started',
  variation: 'fill',
  color: 'primary'
}, {
  id: 2,
  href: '/',
  text: 'Sign up',
  variation: 'primarySubtle'
}];
var propTypes = {
  /** The Major text for the Cta. */
  majorText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,

  /** The Minor text for the Cta. */
  minorText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,

  /** Links appear on the Cta. */
  links: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape))
};
var defaultProps = {
  majorText: 'Ready to dive in?',
  minorText: 'Start your free trial today.',
  links: linkSchema
};
/**
 * Render Links for the Cta
 * @param data {Array} - Links schema for the Cta
 * @return {null|*} - Returns the JSX or null
 */

var renderLinks = function renderLinks(data) {
  if (Array.isArray(data) && data.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(CtaGroup, null, data.map(function (_ref3) {
      var id = _ref3.id,
          href = _ref3.href,
          text = _ref3.text,
          variation = _ref3.variation,
          color = _ref3.color;
      return /*#__PURE__*/_react["default"].createElement(_core.Button, {
        key: id,
        href: href,
        variation: variation,
        color: color
      }, text);
    }));
  } else {
    return null;
  }
};

var Cta3 = function Cta3(props) {
  var majorText = props.majorText,
      minorText = props.minorText,
      links = props.links,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["majorText", "minorText", "links"]);
  return /*#__PURE__*/_react["default"].createElement(Cta, attributes, /*#__PURE__*/_react["default"].createElement(CtaText, {
    fSize: 48
  }, /*#__PURE__*/_react["default"].createElement("span", null, majorText), /*#__PURE__*/_react["default"].createElement("span", null, minorText)), renderLinks(links));
};

exports.Cta3 = Cta3;
Cta3.propTypes = propTypes;
Cta3.defaultProps = defaultProps;