@lote-design-system/marketing-blocks/main/components/marketing/features/Feature2.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.Feature2 = 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 ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Feature2__ContainerModify",
  componentId: "sc-15ieq2k-0"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});

var SectionFeature = _styledComponents["default"].div.withConfig({
  displayName: "Feature2__SectionFeature",
  componentId: "sc-15ieq2k-1"
})(["padding:96px 0;background-color:", ";"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.white;
});

var FeatureContent = _styledComponents["default"].div.withConfig({
  displayName: "Feature2__FeatureContent",
  componentId: "sc-15ieq2k-2"
})(["text-align:center;margin-bottom:64px;"]);

var FeatureSubtitle = _styledComponents["default"].p.withConfig({
  displayName: "Feature2__FeatureSubtitle",
  componentId: "sc-15ieq2k-3"
})(["color:", ";font-size:18px;margin-bottom:0;"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.text.secondary;
});

var FeatureHeading = _styledComponents["default"].h3.withConfig({
  displayName: "Feature2__FeatureHeading",
  componentId: "sc-15ieq2k-4"
})(["font-size:48px;color:", ";font-weight:700;margin-bottom:16px;"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.secondary;
});

var FeatureWave = _styledComponents["default"].span.withConfig({
  displayName: "Feature2__FeatureWave",
  componentId: "sc-15ieq2k-5"
})(["color:", ";"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.palettes.primary[5];
});

var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Feature2__ColumnModify",
  componentId: "sc-15ieq2k-6"
})(["margin-bottom:32px;"]); // Card Properties

var CardSvg = _styledComponents["default"].div.withConfig({
  displayName: "Feature2__CardSvg",
  componentId: "sc-15ieq2k-7"
})(["color:", ";> svg{width:64px;height:64px;}"], function (_ref6) {
  var theme = _ref6.theme;
  return theme.palettes.primary[5];
});

var CardContent = _styledComponents["default"].div.withConfig({
  displayName: "Feature2__CardContent",
  componentId: "sc-15ieq2k-8"
})([""]);

var CardTitle = _styledComponents["default"].h5.withConfig({
  displayName: "Feature2__CardTitle",
  componentId: "sc-15ieq2k-9"
})(["font-family:", ";font-size:24px;color:", ";font-weight:700;margin-top:16px;margin-bottom:0;"], function (_ref7) {
  var theme = _ref7.theme;
  return theme.fonts.heading;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.colors.secondary;
});

var CardText = _styledComponents["default"].p.withConfig({
  displayName: "Feature2__CardText",
  componentId: "sc-15ieq2k-10"
})(["color:", ";font-size:14px;margin-top:8px;margin-bottom:0;"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.colors.text.primary;
});

var Card = _styledComponents["default"].div.withConfig({
  displayName: "Feature2__Card",
  componentId: "sc-15ieq2k-11"
})(["position:relative;z-index:1000;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border-radius:4px;text-align:center;box-shadow:", ";&:before{background-image:linear-gradient( 160deg,", " -1.24%,", " 86.22% );content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;z-index:-100;transition:opacity 0.5s linear;}", " &:hover{&:before{opacity:1;}", "{color:#fff;}", "{color:#fff;}", "{color:#fff;}}", ""], function (_ref10) {
  var theme = _ref10.theme;
  return theme.boxShadows.xl;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.palettes.primary[5];
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.palettes.primary[6];
}, ''
/* hover */
, CardSvg, CardTitle, CardText, function (props) {
  if (props.active) {
    return (0, _styledComponents.css)(["&:before{opacity:1;}", "{color:#fff;}", "{color:#fff;}", "{color:#fff;}"], CardSvg, CardTitle, CardText);
  }
});

var CardBody = _styledComponents["default"].div.withConfig({
  displayName: "Feature2__CardBody",
  componentId: "sc-15ieq2k-12"
})(["padding:48px 32px 64px;"]); // <= End Dependent styled-components


var featureSchema = [{
  id: 1,
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "rss"
  }),
  title: 'Faster Growth',
  description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."
}, {
  id: 2,
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "bar-chart"
  }),
  title: 'Linear Growth',
  description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
  active: true
}, {
  id: 3,
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "activity"
  }),
  title: 'J-Curve Growth',
  description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."
}, {
  id: 4,
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "git-merge"
  }),
  title: 'Excremental Growth',
  description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."
}, {
  id: 5,
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "shuffle"
  }),
  title: 'Constant Growth',
  description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."
}, {
  id: 6,
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "layers"
  }),
  title: 'Level field Growth',
  description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."
}];
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,
  active: _propTypes["default"].bool
};
var propTypes = {
  /** The Major words for the feature section. */
  title: _propTypes["default"].string.isRequired,

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

  /** An array of features Note: Only 3 feature can be included in this section UI. */
  features: _propTypes["default"].arrayOf(_propTypes["default"].shape(featureShape)).isRequired,

  /** The separator will be displayed at the bottom of the feature section. */
  separator: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node])
};
var defaultProps = {
  title: 'Fasten your seat belts',
  subTitle: 'The unique features of the app are waiting for you',
  features: featureSchema,
  separator: /*#__PURE__*/_react["default"].createElement("svg", {
    viewBox: "0 0 126 70",
    width: "126px",
    height: "70px"
  }, /*#__PURE__*/_react["default"].createElement("path", {
    d: "M119.37 44.09c-2.2 0-3.45-2.46-6.46-8.41-1.55-3.06-3-6-3.78-6.68-.77.71-2.24 3.62-3.79 6.68-3 6-4.26 8.41-6.46 8.41s-3.45-2.46-6.47-8.41c-1.55-3.06-3-6-3.79-6.67-.77.71-2.23 3.61-3.78 6.67-3 6-4.26 8.41-6.46 8.41s-3.46-2.46-6.47-8.41c-1.55-3.06-3-6-3.78-6.67-.77.71-2.24 3.61-3.79 6.67-3 6-4.27 8.41-6.47 8.41s-3.45-2.46-6.46-8.41c-1.55-3.06-3-6-3.78-6.68-.77.71-2.24 3.62-3.79 6.68-3 6-4.26 8.41-6.46 8.41s-3.45-2.46-6.47-8.41c-1.55-3.06-3-6-3.79-6.67-.77.71-2.23 3.61-3.78 6.67-3 6-4.26 8.41-6.46 8.41s-3.46-2.46-6.47-8.41c-1.55-3.06-3-6-3.78-6.67-.77.71-2.24 3.61-3.79 6.67L.16 34.32c3-5.95 4.27-8.41 6.47-8.41s3.45 2.46 6.46 8.41c1.55 3.06 3 6 3.79 6.68.76-.71 2.23-3.62 3.78-6.68 3-5.95 4.26-8.41 6.46-8.41s3.45 2.46 6.47 8.41c1.55 3.06 3 6 3.79 6.67.77-.71 2.23-3.61 3.78-6.67 3-5.95 4.26-8.41 6.47-8.41s3.45 2.46 6.46 8.41c1.55 3.06 3 6 3.78 6.67.77-.71 2.24-3.61 3.79-6.67 3-5.95 4.27-8.41 6.47-8.41s3.45 2.46 6.46 8.41c1.55 3.06 3 6 3.79 6.68.76-.71 2.23-3.62 3.78-6.68 3-5.95 4.26-8.41 6.46-8.41s3.45 2.46 6.47 8.41c1.55 3.06 3 6 3.79 6.67.77-.71 2.23-3.61 3.78-6.67 3-5.95 4.26-8.41 6.47-8.41s3.45 2.46 6.46 8.41c1.55 3.06 3 6 3.78 6.67.77-.71 2.24-3.61 3.79-6.67l2.68 1.36c-3.02 5.95-4.27 8.41-6.47 8.41z",
    fill: "currentColor"
  }))
};
/**
 * 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;
  }
};
/**
 * Returns the JSX or null for the svg.
 * @param svg {*|string} - The svg will React.element or a string
 * @return {null|*} - Returns the JSX or null
 */


var renderSVG = function renderSVG(svg) {
  if (_react["default"].isValidElement(svg)) {
    return /*#__PURE__*/_react["default"].createElement(FeatureWave, null, svg);
  } else if (typeof svg === 'string' && svg.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(FeatureWave, null, /*#__PURE__*/_react["default"].createElement("span", {
      dangerouslySetInnerHTML: {
        __html: svg
      }
    }));
  } 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) {
    return /*#__PURE__*/_react["default"].createElement(_core.Row, null, data.map(function (feature) {
      return /*#__PURE__*/_react["default"].createElement(ColumnModify, {
        key: feature.id,
        lg: 4,
        md: 6,
        sm: 6
      }, /*#__PURE__*/_react["default"].createElement(Card, {
        active: feature.active
      }, /*#__PURE__*/_react["default"].createElement(CardBody, null, /*#__PURE__*/_react["default"].createElement(CardSvg, null, renderIcon(feature.icon)), /*#__PURE__*/_react["default"].createElement(CardContent, null, /*#__PURE__*/_react["default"].createElement(CardTitle, null, feature.title), /*#__PURE__*/_react["default"].createElement(CardText, null, feature.description)))));
    }));
  } else {
    return null;
  }
};

var Feature2 = function Feature2(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(SectionFeature, attributes, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(_core.Row, null, /*#__PURE__*/_react["default"].createElement(_core.Column, {
    lg: 12
  }, /*#__PURE__*/_react["default"].createElement(FeatureContent, null, /*#__PURE__*/_react["default"].createElement(FeatureHeading, null, title), /*#__PURE__*/_react["default"].createElement(FeatureSubtitle, null, subTitle), separator ? renderSVG(separator) : null))), renderBody(features)));
};

exports.Feature2 = Feature2;
Feature2.propTypes = propTypes;
Feature2.defaultProps = defaultProps;