@lote-design-system/marketing-blocks/main/components/marketing/features/Feature4.js

marketing blocks

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Feature4 = 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 _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 Feature = _styledComponents["default"].section.withConfig({
  displayName: "Feature4__Feature",
  componentId: "sc-1pfq8rc-0"
})(["padding:48px 16px;", "{padding:64px 32px;}", "{padding-top:96px;padding-bottom:96px;}"], function (_ref) {
  var theme = _ref.theme;
  return theme.mediaQueries.sm;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.mediaQueries.md;
});

var FeatureHeader = _styledComponents["default"].div.withConfig({
  displayName: "Feature4__FeatureHeader",
  componentId: "sc-1pfq8rc-1"
})(["text-align:center;margin-bottom:48px;", "{margin-bottom:64px;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.md;
});

var FeatureContainer = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Feature4__FeatureContainer",
  componentId: "sc-1pfq8rc-2"
})(["max-width:", ";"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.maxContainerWidth;
});

var FeatureTitle = _styledComponents["default"].p.withConfig({
  displayName: "Feature4__FeatureTitle",
  componentId: "sc-1pfq8rc-3"
})(["font-size:18px;color:", ";font-weight:400;margin-bottom:4px;"], function (_ref5) {
  var colors = _ref5.theme.colors;
  return colors.primary;
});

var FeatureSubtitle = _styledComponents["default"].h1.withConfig({
  displayName: "Feature4__FeatureSubtitle",
  componentId: "sc-1pfq8rc-4"
})(["font-size:40px;font-weight:700;color:", ";margin-bottom:8px;"], function (_ref6) {
  var colors = _ref6.theme.colors;
  return colors.text.title;
});

var FeatureDescription = _styledComponents["default"].p.withConfig({
  displayName: "Feature4__FeatureDescription",
  componentId: "sc-1pfq8rc-5"
})(["margin:0 auto 16px;max-width:720px;font-size:16px;color:", ";"], function (_ref7) {
  var colors = _ref7.theme.colors;
  return colors.text.primary;
});

var FeatureBody = _styledComponents["default"].div.withConfig({
  displayName: "Feature4__FeatureBody",
  componentId: "sc-1pfq8rc-6"
})([""]);

var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Feature4__ColumnModify",
  componentId: "sc-1pfq8rc-7"
})(["margin-bottom:64px;"]);

var CardFeature = _styledComponents["default"].div.withConfig({
  displayName: "Feature4__CardFeature",
  componentId: "sc-1pfq8rc-8"
})(["position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;"]);

var CardFeatureBody = _styledComponents["default"].div.withConfig({
  displayName: "Feature4__CardFeatureBody",
  componentId: "sc-1pfq8rc-9"
})(["display:flex;"]);

var CardFeatureIconWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature4__CardFeatureIconWrapper",
  componentId: "sc-1pfq8rc-10"
})(["flex:0 0 auto;margin-right:16px;"]);

var CardFeatureSvgWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Feature4__CardFeatureSvgWrapper",
  componentId: "sc-1pfq8rc-11"
})(["width:60px;height:60px;background-color:", ";color:#fff;", " border-radius:0.25rem;display:inline-flex;justify-content:center;align-items:center;> svg{width:25px;height:25px;}"], function (_ref8) {
  var colors = _ref8.theme.colors;
  return colors.primary;
}, ''
/* 4px */
);

var CardFeatureContent = _styledComponents["default"].div.withConfig({
  displayName: "Feature4__CardFeatureContent",
  componentId: "sc-1pfq8rc-12"
})(["flex:1 1 auto;text-align:left;"]);

var CardHeading = _styledComponents["default"].h1.withConfig({
  displayName: "Feature4__CardHeading",
  componentId: "sc-1pfq8rc-13"
})(["font-size:18px;font-weight:500;margin-bottom:4px;color:", ";"], function (_ref9) {
  var colors = _ref9.theme.colors;
  return colors.text.title;
});

var CardDescription = _styledComponents["default"].p.withConfig({
  displayName: "Feature4__CardDescription",
  componentId: "sc-1pfq8rc-14"
})(["font-size:14px;margin-bottom:0;color:", ";"], function (_ref10) {
  var colors = _ref10.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,

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

  /** An array of features. */
  features: _propTypes["default"].arrayOf(_propTypes["default"].shape(featureShape)).isRequired
};
var defaultProps = {
  title: 'Our Features',
  subtitle: 'Awesome features of our Tools',
  description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication.',
  features: featureSchema
};
/**
 * 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(FeatureContainer, {
      fluid: true
    }, /*#__PURE__*/_react["default"].createElement(_core.Row, null, data.map(function (feature) {
      return /*#__PURE__*/_react["default"].createElement(ColumnModify, {
        key: feature.id,
        lg: 6
      }, /*#__PURE__*/_react["default"].createElement(CardFeature, null, /*#__PURE__*/_react["default"].createElement(CardFeatureBody, null, /*#__PURE__*/_react["default"].createElement(CardFeatureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(CardFeatureSvgWrapper, null, renderIcon(feature.icon))), /*#__PURE__*/_react["default"].createElement(CardFeatureContent, null, /*#__PURE__*/_react["default"].createElement(CardHeading, null, feature.title), /*#__PURE__*/_react["default"].createElement(CardDescription, null, feature.description)))));
    }))));
  } else {
    return null;
  }
};

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

exports.Feature4 = Feature4;
Feature4.propTypes = propTypes;
Feature4.defaultProps = defaultProps;