@lote-design-system/marketing-blocks/main/components/marketing/features/Feature3.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.Feature3 = 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 _polished = require("polished");

var _icons = 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 ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Feature3__ContainerModify",
  componentId: "crmly4-0"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});

var Feature = _styledComponents["default"].div.withConfig({
  displayName: "Feature3__Feature",
  componentId: "crmly4-1"
})(["padding:", " ", ";", "{padding:", " ", ";}", "{padding-top:", ";padding-bottom:", ";}"], (0, _polished.rem)(48), (0, _polished.rem)(16), function (_ref2) {
  var theme = _ref2.theme;
  return theme.mediaQueries.sm;
}, (0, _polished.rem)(64), (0, _polished.rem)(32), function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.md;
}, (0, _polished.rem)(96), (0, _polished.rem)(96));

var FeatureHeader = _styledComponents["default"].div.withConfig({
  displayName: "Feature3__FeatureHeader",
  componentId: "crmly4-2"
})(["text-align:center;margin-bottom:", ";> ", "{max-width:640px;}", "{margin-bottom:", ";}"], (0, _polished.rem)(48), _core.Container, function (_ref4) {
  var theme = _ref4.theme;
  return theme.mediaQueries.md;
}, (0, _polished.rem)(64));

var FeatureTitle = _styledComponents["default"].p.withConfig({
  displayName: "Feature3__FeatureTitle",
  componentId: "crmly4-3"
})(["font-size:", ";color:", ";font-weight:400;margin-bottom:", ";"], (0, _polished.rem)(20), function (_ref5) {
  var colors = _ref5.theme.colors;
  return colors.primary;
}, (0, _polished.rem)(8));

var FeatureSubtitle = _styledComponents["default"].h1.withConfig({
  displayName: "Feature3__FeatureSubtitle",
  componentId: "crmly4-4"
})(["position:relative;font-size:", ";font-weight:700;color:", ";padding-bottom:", ";margin-bottom:", ";", ";"], (0, _polished.rem)(40), function (_ref6) {
  var colors = _ref6.theme.colors;
  return colors.text.title;
}, (0, _polished.rem)(24), (0, _polished.rem)(16), function (_ref7) {
  var separator = _ref7.separator;

  if (separator) {
    return (0, _styledComponents.css)(["&:before{position:absolute;content:'';height:4px;width:80px;background-color:", ";", " bottom:0;", " left:0;right:34px;margin:0 auto;}&:after{position:absolute;content:'';height:4px;width:32px;background-color:", ";", " bottom:0;", " right:0;left:94px;margin:0 auto;}"], function (_ref8) {
      var palettes = _ref8.theme.palettes;
      return palettes.primary[0];
    }, ''
    /* Bottom */
    , ''
    /* Left */
    , function (_ref9) {
      var palettes = _ref9.theme.palettes;
      return palettes.primary[5];
    }, ''
    /* Bottom */
    , ''
    /* Right */
    );
  }
});

var FeatureBody = _styledComponents["default"].div.withConfig({
  displayName: "Feature3__FeatureBody",
  componentId: "crmly4-5"
})([""]); // Card


var CardSvgWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature3__CardSvgWrapper",
  componentId: "crmly4-6"
})(["width:60px;height:60px;background-color:", ";color:", ";border-radius:", ";display:inline-flex;justify-content:center;align-items:center;transition:background-color 0.4s linear,color 0.4s linear;> svg{width:25px;height:25px;}"], function (_ref10) {
  var palettes = _ref10.theme.palettes;
  return palettes.primary[0];
}, function (_ref11) {
  var palettes = _ref11.theme.palettes;
  return palettes.primary[5];
}, (0, _polished.rem)(4));

var Card = _styledComponents["default"].div.withConfig({
  displayName: "Feature3__Card",
  componentId: "crmly4-7"
})(["position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;margin-bottom:", ";&:hover{", "{background-color:", ";color:#fff;}}"], (0, _polished.rem)(64), CardSvgWrapper, function (_ref12) {
  var palettes = _ref12.theme.palettes;
  return palettes.primary[5];
});

var CardBody = _styledComponents["default"].div.withConfig({
  displayName: "Feature3__CardBody",
  componentId: "crmly4-8"
})(["display:flex;"]); // First Part


var PartA = _styledComponents["default"].div.withConfig({
  displayName: "Feature3__PartA",
  componentId: "crmly4-9"
})(["flex:0 0 auto;margin-right:", ";"], (0, _polished.rem)(16)); // Second Part


var PartB = _styledComponents["default"].div.withConfig({
  displayName: "Feature3__PartB",
  componentId: "crmly4-10"
})(["flex:1 1 auto;text-align:left;"]);

var CardHeading = _styledComponents["default"].h1.withConfig({
  displayName: "Feature3__CardHeading",
  componentId: "crmly4-11"
})(["font-size:", ";font-weight:600;margin-bottom:", ";color:", ";"], (0, _polished.rem)(18), (0, _polished.rem)(4), function (_ref13) {
  var colors = _ref13.theme.colors;
  return colors.text.title;
});

var CardParagraph = _styledComponents["default"].p.withConfig({
  displayName: "Feature3__CardParagraph",
  componentId: "crmly4-12"
})(["font-size:", ";margin-bottom:0;color:", ";"], (0, _polished.rem)(14), function (_ref14) {
  var colors = _ref14.theme.colors;
  return colors.text.primary;
}); // <= End Dependent styled-components


var featureSchema = [{
  id: 1,
  icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "database"
  }),
  title: 'Supportive Faster Growth',
  description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is a versatile.'
}, {
  id: 2,
  icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "code"
  }),
  title: 'Blazing Fast',
  description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is a versatile.'
}, {
  id: 3,
  icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "clock"
  }),
  title: 'More Opportunities',
  description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is a versatile.'
}, {
  id: 4,
  icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "cast"
  }),
  title: 'Larger Profits',
  description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is a versatile.'
}, {
  id: 5,
  icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "filter"
  }),
  title: 'Better Customer Service',
  description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is a versatile.'
}, {
  id: 6,
  icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "film"
  }),
  title: 'Huge Revenues',
  description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is a versatile.'
}];
var featureShape = {
  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
  title: _propTypes["default"].string.isRequired,
  description: _propTypes["default"].string.isRequired
};
var propTypes = {
  /** The title for the feature section. */
  title: _propTypes["default"].string.isRequired,

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

  /** An array of features. */
  features: _propTypes["default"].arrayOf(_propTypes["default"].shape(featureShape)).isRequired,

  /** The separator will be displayed at the bottom of the feature section. */
  separator: _propTypes["default"].bool
};
var defaultProps = {
  title: 'Our Features',
  subtitle: 'Awesome features of our Tools',
  features: featureSchema,
  separator: true
};
/**
 * 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.Icon, {
      name: icon
    });
  } else {
    return null;
  }
};
/**
 * It will render the features of your schema.
 * @param data {Array} - An array of features schema.
 * @return {null|*} - Returns the JSX or null
 */


var renderBody = function renderBody(data) {
  if (Array.isArray(data) && data.length > 0) {
    // We will apply the default styled CSS to each icon, but if
    // the user has written custom CSS, then the old CSS will override
    // wth the new CSS.
    return /*#__PURE__*/_react["default"].createElement(FeatureBody, null, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
      fluid: true
    }, /*#__PURE__*/_react["default"].createElement(_core.Row, null, data.map(function (feature) {
      return /*#__PURE__*/_react["default"].createElement(_core.Column, {
        key: feature.id,
        lg: 4
      }, /*#__PURE__*/_react["default"].createElement(Card, null, /*#__PURE__*/_react["default"].createElement(CardBody, null, /*#__PURE__*/_react["default"].createElement(PartA, null, /*#__PURE__*/_react["default"].createElement(CardSvgWrapper, null, renderIcon(feature.icon))), /*#__PURE__*/_react["default"].createElement(PartB, null, /*#__PURE__*/_react["default"].createElement(CardHeading, null, feature.title), /*#__PURE__*/_react["default"].createElement(CardParagraph, null, feature.description)))));
    }))));
  } else {
    return null;
  }
};

var Feature3 = function Feature3(props) {
  var title = props.title,
      subtitle = props.subtitle,
      features = props.features,
      separator = props.separator,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["title", "subtitle", "features", "separator"]);
  return /*#__PURE__*/_react["default"].createElement(Feature, attributes, /*#__PURE__*/_react["default"].createElement(FeatureHeader, null, /*#__PURE__*/_react["default"].createElement(_core.Container, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(FeatureTitle, null, title), /*#__PURE__*/_react["default"].createElement(FeatureSubtitle, {
    separator: separator
  }, subtitle))), renderBody(features));
};

exports.Feature3 = Feature3;
Feature3.propTypes = propTypes;
Feature3.defaultProps = defaultProps;