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

marketing blocks

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _icons = _interopRequireDefault(require("@lote-design-system/icons"));

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: "Cta4__Cta",
  componentId: "yasdrk-0"
})(["background-color:", ";"], function (_ref) {
  var colors = _ref.theme.colors;
  return colors.text.title;
});

var ColumnFirst = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Cta4__ColumnFirst",
  componentId: "yasdrk-1"
})(["padding-left:0;padding-right:0;"]);
var ColumnSecond = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Cta4__ColumnSecond",
  componentId: "yasdrk-2"
})([""]);

var BackgroundImage = _styledComponents["default"].div.withConfig({
  displayName: "Cta4__BackgroundImage",
  componentId: "yasdrk-3"
})(["", ";background-position:center center;background-repeat:no-repeat;background-size:cover;background-color:#f7f7f7;height:300px;", "{height:100%;}"], function (_ref2) {
  var bgImage = _ref2.bgImage;

  if (bgImage) {
    return (0, _styledComponents.css)(["background-image:url(", ");"], bgImage);
  }
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.lg;
});

var InfoWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Cta4__InfoWrapper",
  componentId: "yasdrk-4"
})(["padding-top:96px;padding-bottom:96px;", "{padding-top:128px;padding-bottom:128px;}"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.mediaQueries.lg;
});

var CtaMinorText = _styledComponents["default"].h4.withConfig({
  displayName: "Cta4__CtaMinorText",
  componentId: "yasdrk-5"
})(["font-size:16px;color:#fff;margin-bottom:8px;"]);

var CtaMajorText = (0, _styledComponents["default"])(_core.Text).withConfig({
  displayName: "Cta4__CtaMajorText",
  componentId: "yasdrk-6"
})(["font-weight:700;color:#fff;margin-bottom:8px;"]);

var CtaDescription = _styledComponents["default"].p.withConfig({
  displayName: "Cta4__CtaDescription",
  componentId: "yasdrk-7"
})(["font-size:16px;color:#fff;max-width:720px;margin-bottom:16px;"]);

var CtaLinkSvgWrapper = _styledComponents["default"].span.withConfig({
  displayName: "Cta4__CtaLinkSvgWrapper",
  componentId: "yasdrk-8"
})(["color:", ";margin-left:12px;transition:color 0.4s linear;"], function (_ref5) {
  var colors = _ref5.theme.colors;
  return colors.text.secondary;
});

var CtaLink = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Cta4__CtaLink",
  componentId: "yasdrk-9"
})(["font-weight:500;&:hover{> ", "{color:#fff;}}"], CtaLinkSvgWrapper); // <= End Dependent styled-components

var linkShape = {
  href: _propTypes["default"].string.isRequired,
  text: _propTypes["default"].string.isRequired,
  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
  variation: _propTypes["default"].string.isRequired,
  color: _propTypes["default"].string
};
var linkSchema = {
  href: '/',
  text: 'Visit the help center',
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "external-link"
  }),
  variation: 'white',
  color: 'primary'
};
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,

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

  /** Link appear on the Cta. */
  link: _propTypes["default"].shape(linkShape).isRequired,

  /** The source for the background image. */
  backgroundImage: _propTypes["default"].string.isRequired,

  /** The columns will move from left to right. */
  shift: _propTypes["default"].bool
};
var defaultProps = {
  majorText: "We're here to help",
  minorText: 'Planning, Stabilizing and Work',
  description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. Lorem Ipsum has been the industry standard dummy text ever since the 1500s and used by everywhere.',
  link: linkSchema,
  backgroundImage: 'https://i.imgur.com/fcLy370.jpg'
};
/**
 * Returns the JSX or null for the icon.
 * @param icon {*} - The icon will React.element or a string
 * @return {null|*} - Returns the JSX or null
 */

var renderIcon = function renderIcon(icon) {
  if (_react["default"].isValidElement(icon)) {
    return icon;
  } else if (typeof icon === 'string' && icon.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(_icons["default"], {
      name: icon
    });
  } else {
    return null;
  }
};
/**
 * Link appear on the Cta.
 * @param link {object} - Render link on the Cta.
 * @return {*}
 */


var renderLink = function renderLink(link) {
  var href = link.href,
      text = link.text,
      Icon = link.icon,
      variation = link.variation,
      color = link.color;
  return /*#__PURE__*/_react["default"].createElement(CtaLink, {
    href: href,
    variation: variation,
    color: color
  }, /*#__PURE__*/_react["default"].createElement("span", null, text), /*#__PURE__*/_react["default"].createElement(CtaLinkSvgWrapper, null, renderIcon(Icon)));
};

var Cta4 = function Cta4(props) {
  var shift = props.shift,
      majorText = props.majorText,
      minorText = props.minorText,
      description = props.description,
      link = props.link,
      backgroundImage = props.backgroundImage,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["shift", "majorText", "minorText", "description", "link", "backgroundImage"]);

  var Column1 = /*#__PURE__*/_react["default"].createElement(ColumnFirst, {
    lg: 6
  }, /*#__PURE__*/_react["default"].createElement(BackgroundImage, {
    bgImage: backgroundImage
  }));

  var Column2 = /*#__PURE__*/_react["default"].createElement(ColumnSecond, {
    lg: 6
  }, /*#__PURE__*/_react["default"].createElement(InfoWrapper, null, /*#__PURE__*/_react["default"].createElement(CtaMinorText, null, minorText), /*#__PURE__*/_react["default"].createElement(CtaMajorText, {
    fSize: 48
  }, majorText), /*#__PURE__*/_react["default"].createElement(CtaDescription, null, description), renderLink(link)));

  return /*#__PURE__*/_react["default"].createElement(Cta, attributes, /*#__PURE__*/_react["default"].createElement(_core.Container, {
    fluid: true
  }, shift ? /*#__PURE__*/_react["default"].createElement(_core.Row, null, Column2, Column1) : /*#__PURE__*/_react["default"].createElement(_core.Row, null, Column1, Column2)));
};

exports.Cta4 = Cta4;
Cta4.propTypes = propTypes;
Cta4.defaultProps = defaultProps;