@lote-design-system/marketing-blocks/main/components/marketing/heros/Hero3.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.Hero3 = void 0;

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

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 _polished = require("polished");

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

// => Dependent styled-components
// Our main component depends upon the following styled-components

/**
 * Returns the bgAttachment value
 * @param attachment {boolean} - The attachment parameter
 * @return {string} - Returns the value
 */
var getAttachmentVal = function getAttachmentVal(attachment) {
  return attachment ? 'fixed' : 'scroll';
};

var BackgroundImage = _styledComponents["default"].div.withConfig({
  displayName: "Hero3__BackgroundImage",
  componentId: "i4fgdu-0"
})(["", ";"], function (_ref) {
  var bgImage = _ref.bgImage,
      bgAttachment = _ref.bgAttachment,
      invert = _ref.invert;

  // Default `inverted` is undefined, so dark layer will render
  if (invert) {
    return (0, _styledComponents.css)(["background-image:linear-gradient( 180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100% ),linear-gradient( to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100% ),url(", ");background-position:center center;background-repeat:no-repeat;background-attachment:", ";background-color:#f8f8f8;background-size:cover;"], bgImage, getAttachmentVal(bgAttachment));
  } else {
    return (0, _styledComponents.css)(["position:relative;background:url(", ") no-repeat center center ", " #f8f8f8;background-size:cover;&:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.55);}"], bgImage, getAttachmentVal(bgAttachment));
  }
});

var HeroBody = _styledComponents["default"].div.withConfig({
  displayName: "Hero3__HeroBody",
  componentId: "i4fgdu-1"
})(["padding:", " 0;flex-grow:1;flex-shrink:0;align-items:center;display:flex;"], (0, _polished.rem)(192));

var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Hero3__ContainerModify",
  componentId: "i4fgdu-2"
})(["max-width:", ";text-align:center;flex-grow:1;flex-shrink:1;margin:0 auto;position:relative;width:auto;"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.maxContainerWidth;
});
var HeroTitle = (0, _styledComponents["default"])(_core.Text).withConfig({
  displayName: "Hero3__HeroTitle",
  componentId: "i4fgdu-3"
})(["max-width:992px;margin:0 auto ", ";font-weight:700;line-height:1.2;color:#fff;span{display:block;&:last-child{color:", ";}}"], (0, _polished.rem)(16), function (_ref3) {
  var colors = _ref3.theme.colors;
  return colors.primary;
});

var HeroDescription = _styledComponents["default"].p.withConfig({
  displayName: "Hero3__HeroDescription",
  componentId: "i4fgdu-4"
})(["color:#fff;max-width:660px;margin:0 auto ", ";font-size:20px;"], (0, _polished.rem)(16));

var HeroLinkWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Hero3__HeroLinkWrapper",
  componentId: "i4fgdu-5"
})(["display:flex;align-items:center;justify-content:center;flex-wrap:wrap;"]);

var HeroLink = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Hero3__HeroLink",
  componentId: "i4fgdu-6"
})(["&{padding:", " ", ";font-weight:500;display:block;width:100%;margin:8px;}", "{width:auto;display:inline-block;}"], (0, _polished.rem)(16), (0, _polished.rem)(48), function (_ref4) {
  var theme = _ref4.theme;
  return theme.mediaQueries.sm;
}); // <= End Dependent styled-components

var linkSchema = [{
  id: 1,
  href: '/signin',
  text: 'Signup',
  variation: 'whiteSecondary'
}, {
  id: 2,
  href: '/signup',
  text: 'Signin',
  variation: 'fill'
}];
var linkShape = {
  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
  href: _propTypes["default"].string.isRequired,
  text: _propTypes["default"].string.isRequired,
  variation: _propTypes["default"].string.isRequired,
  color: _propTypes["default"].string
};
var propTypes = {
  /** The Major words for the hero section. */
  majorWords: _propTypes["default"].string.isRequired,

  /** The Minor words for the hero section. */
  minorWords: _propTypes["default"].string.isRequired,

  /** The description for the hero section. */
  description: _propTypes["default"].string.isRequired,

  /** The link below the description. */
  links: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape)).isRequired,

  /** It src for the background-image. */
  backgroundImageSource: _propTypes["default"].string.isRequired,

  /** The background-attachment sets whether a background image scrolls with the
      rest of the page, or is fixed.*/
  backgroundImageAttachment: _propTypes["default"].bool,

  /** Add layers will make your background image darker or whiter. */
  inverted: _propTypes["default"].bool
};
var defaultProps = {
  majorWords: 'Web Design Platform',
  minorWords: 'for All Creatives',
  description: 'When you design with us, every stroke gets code generated ready to go live. CMS, IDE and Analytics are integrated for seamless customizations. Cross-team collaboration is built along every step.',
  links: linkSchema,
  backgroundImageSource: 'https://images.unsplash.com/photo-1433838552652-f9a46b332c40',
  backgroundImageAttachment: true,
  inverted: true
};

var Hero3 = function Hero3(props) {
  var majorWords = props.majorWords,
      minorWords = props.minorWords,
      description = props.description,
      links = props.links,
      backgroundImageSource = props.backgroundImageSource,
      backgroundImageAttachment = props.backgroundImageAttachment,
      inverted = props.inverted,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["majorWords", "minorWords", "description", "links", "backgroundImageSource", "backgroundImageAttachment", "inverted"]);
  return /*#__PURE__*/_react["default"].createElement(BackgroundImage, (0, _extends2["default"])({
    bgImage: backgroundImageSource,
    bgAttachment: backgroundImageAttachment,
    invert: inverted
  }, attributes), /*#__PURE__*/_react["default"].createElement(HeroBody, null, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(HeroTitle, {
    fSize: 64
  }, /*#__PURE__*/_react["default"].createElement("span", null, majorWords), /*#__PURE__*/_react["default"].createElement("span", null, minorWords)), /*#__PURE__*/_react["default"].createElement(HeroDescription, null, description), Array.isArray(links) && links.length > 0 ? /*#__PURE__*/_react["default"].createElement(HeroLinkWrapper, null, links.map(function (link) {
    return /*#__PURE__*/_react["default"].createElement(HeroLink, {
      key: link.id,
      href: link.href,
      color: link.color,
      variation: link.variation
    }, link.text);
  })) : null)));
};

exports.Hero3 = Hero3;
Hero3.propTypes = propTypes;
Hero3.defaultProps = defaultProps;