@lote-design-system/marketing-blocks
Version:
321 lines (282 loc) • 13.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Feature1 = 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 = _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: "Feature1__ContainerModify",
componentId: "sc-1pv1iql-0"
})(["max-width:", ";"], function (_ref) {
var theme = _ref.theme;
return theme.maxContainerWidth;
});
var SectionFeature = _styledComponents["default"].div.withConfig({
displayName: "Feature1__SectionFeature",
componentId: "sc-1pv1iql-1"
})(["background-color:", ";padding:96px 0;"], function (_ref2) {
var theme = _ref2.theme;
return theme.colors.white;
});
var FeatureContent = _styledComponents["default"].div.withConfig({
displayName: "Feature1__FeatureContent",
componentId: "sc-1pv1iql-2"
})(["text-align:center;margin-bottom:64px;"]);
var FeatureSubtitle = _styledComponents["default"].p.withConfig({
displayName: "Feature1__FeatureSubtitle",
componentId: "sc-1pv1iql-3"
})(["color:", ";font-size:18px;margin-top:0;margin-bottom:8px;"], function (_ref3) {
var theme = _ref3.theme;
return theme.colors.text.secondary;
});
var FeatureHeading = _styledComponents["default"].h3.withConfig({
displayName: "Feature1__FeatureHeading",
componentId: "sc-1pv1iql-4"
})(["font-size:32px;color:", ";font-weight:700;margin-top:16px;margin-bottom:0;"], function (_ref4) {
var theme = _ref4.theme;
return theme.colors.secondary;
});
var FeatureWave = _styledComponents["default"].span.withConfig({
displayName: "Feature1__FeatureWave",
componentId: "sc-1pv1iql-5"
})(["margin-top:8px;color:", ";"], function (_ref5) {
var theme = _ref5.theme;
return theme.colors.primary;
});
var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
displayName: "Feature1__ColumnModify",
componentId: "sc-1pv1iql-6"
})(["margin-bottom:64px;"]);
var CardWrapper = _styledComponents["default"].div.withConfig({
displayName: "Feature1__CardWrapper",
componentId: "sc-1pv1iql-7"
})(["height:100%;"]);
var Card = _styledComponents["default"].div.withConfig({
displayName: "Feature1__Card",
componentId: "sc-1pv1iql-8"
})(["position:relative;display:flex;height:100%;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border-radius:4px;text-align:center;transition:transform 0.5s ease;box-shadow:", ";transform:translateY(0);&:hover{transform:translateY(-10px);}"], function (_ref6) {
var theme = _ref6.theme;
return theme.boxShadows.xl;
});
var CardBody = _styledComponents["default"].div.withConfig({
displayName: "Feature1__CardBody",
componentId: "sc-1pv1iql-9"
})(["padding:32px 32px 64px;"]);
var CardSvg = _styledComponents["default"].div.withConfig({
displayName: "Feature1__CardSvg",
componentId: "sc-1pv1iql-10"
})(["color:", ";> svg{width:64px;height:64px;}"], function (_ref7) {
var colors = _ref7.theme.colors;
return colors.primary;
});
var CardContent = _styledComponents["default"].div.withConfig({
displayName: "Feature1__CardContent",
componentId: "sc-1pv1iql-11"
})([""]);
var CardTitle = _styledComponents["default"].h5.withConfig({
displayName: "Feature1__CardTitle",
componentId: "sc-1pv1iql-12"
})(["font-family:", ";font-size:24px;color:", ";font-weight:700;margin-top:16px;margin-bottom:0;"], function (_ref8) {
var theme = _ref8.theme;
return theme.fonts.heading;
}, function (_ref9) {
var theme = _ref9.theme;
return theme.colors.secondary;
});
var CardText = _styledComponents["default"].p.withConfig({
displayName: "Feature1__CardText",
componentId: "sc-1pv1iql-13"
})(["color:", ";font-size:14px;margin-top:8px;margin-bottom:0;"], function (_ref10) {
var theme = _ref10.theme;
return theme.colors.text.primary;
});
var CardLink = _styledComponents["default"].div.withConfig({
displayName: "Feature1__CardLink",
componentId: "sc-1pv1iql-14"
})(["position:absolute;left:0;right:0;bottom:0;transform:translateY(calc(50px / 2));display:flex;justify-content:center;align-items:center;"]);
var CardAnchorModify = (0, _styledComponents["default"])(_core.Button).withConfig({
displayName: "Feature1__CardAnchorModify",
componentId: "sc-1pv1iql-15"
})(["width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;svg{width:16px;height:16px;}"]);
var FeatureUnderText = _styledComponents["default"].div.withConfig({
displayName: "Feature1__FeatureUnderText",
componentId: "sc-1pv1iql-16"
})(["margin-top:32px;font-size:16px;color:", ";text-align:center;a{position:relative;display:inline-block;color:", ";text-decoration:underline;transition:color 0.3s ease-in-out;&:hover{color:", ";}}"], function (_ref11) {
var theme = _ref11.theme;
return theme.colors.text.primary;
}, function (_ref12) {
var theme = _ref12.theme;
return theme.palettes.primary[5];
}, function (_ref13) {
var theme = _ref13.theme;
return theme.palettes.primary[6];
}); // <= 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.",
link: {
icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
name: "arrow-right"
}),
href: '/',
variation: 'fill'
}
}, {
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.",
link: {
icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
name: "arrow-right"
}),
href: '/',
variation: 'fill'
}
}, {
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.",
link: {
icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
name: "arrow-right"
}),
href: '/',
variation: 'fill'
}
}];
var linkShape = {
icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
variation: _propTypes["default"].string.isRequired,
color: _propTypes["default"].string,
href: _propTypes["default"].string
};
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,
link: _propTypes["default"].shape(linkShape).isRequired
};
var propTypes = {
/** The Major words for the feature section. */
majorWords: _propTypes["default"].string.isRequired,
/** The Minor words for the feature section. */
minorWords: _propTypes["default"].string.isRequired,
/** The subtext for the feature section. */
subText: _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]),
/** The CTA text will appear below the feature section. */
ctaText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node])
};
var defaultProps = {
majorWords: 'A single platform for all sales',
minorWords: 'channels worldwide',
subText: 'Learn more about Product unique features',
features: featureSchema,
separator: /*#__PURE__*/_react["default"].createElement("svg", {
viewBox: "0 0 126 70",
width: "126px",
height: "70px"
}, /*#__PURE__*/_react["default"].createElement("path", {
fill: "currentColor",
d: "M.5 34.17h37.7v1.05H.5zm65.02-9.95c2.39.78 5.37 0 7.19 1.71s1.65 4.64 2.17 7.11 1.33 4.9.89 7.38c-.46 2.68-1.23 5.67-3.44 7.24s-5.22 1-7.91.79a19.9 19.9 0 01-6.09-2c-1.83-.79-3.79-1.38-5.15-2.86a12.07 12.07 0 01-2.45-5.4 12.39 12.39 0 01-.38-6.09c.54-2.05 2.08-3.57 3.38-5.24 1.55-2 2.53-5 5-5.51s4.41 2.09 6.79 2.87zm22.28 9.95h37.7v1.05H87.8z"
})),
ctaText: /*#__PURE__*/_react["default"].createElement("span", null, "Some things just feel impossible to build in a performant way.", ' ', /*#__PURE__*/_react["default"].createElement("a", {
href: "/"
}, "Click Here!"))
};
/**
* 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
}, /*#__PURE__*/_react["default"].createElement(CardWrapper, null, /*#__PURE__*/_react["default"].createElement(Card, null, /*#__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)), /*#__PURE__*/_react["default"].createElement(CardLink, null, /*#__PURE__*/_react["default"].createElement(CardAnchorModify, {
href: feature.link.href,
color: feature.link.color,
variation: feature.link.variation,
noBase: true
}, renderIcon(feature.link.icon)))))));
}));
} else {
return null;
}
};
var Feature1 = function Feature1(props) {
var majorWords = props.majorWords,
minorWords = props.minorWords,
subText = props.subText,
features = props.features,
separator = props.separator,
ctaText = props.ctaText,
attributes = (0, _objectWithoutProperties2["default"])(props, ["majorWords", "minorWords", "subText", "features", "separator", "ctaText"]);
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(FeatureSubtitle, null, subText), /*#__PURE__*/_react["default"].createElement(FeatureHeading, null, /*#__PURE__*/_react["default"].createElement("div", null, majorWords), /*#__PURE__*/_react["default"].createElement("div", null, minorWords)), separator ? renderSVG(separator) : null))), renderBody(features), ctaText ? /*#__PURE__*/_react["default"].createElement(FeatureUnderText, null, ctaText) : null));
};
exports.Feature1 = Feature1;
Feature1.propTypes = propTypes;
Feature1.defaultProps = defaultProps;