@lote-design-system/marketing-blocks
Version:
247 lines (234 loc) • 10.5 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import Icon from '@lote-design-system/icons';
import { Container, Row, Column } from '@lote-design-system/core'; // => Dependent styled-components
// Our main component depends upon the following styled-components
const ContainerModify = styled(Container).withConfig({
displayName: "Feature2__ContainerModify",
componentId: "sc-15ieq2k-0"
})(["max-width:", ";"], ({
theme
}) => theme.maxContainerWidth);
const SectionFeature = styled.div.withConfig({
displayName: "Feature2__SectionFeature",
componentId: "sc-15ieq2k-1"
})(["padding:96px 0;background-color:", ";"], ({
theme
}) => theme.colors.white);
const FeatureContent = styled.div.withConfig({
displayName: "Feature2__FeatureContent",
componentId: "sc-15ieq2k-2"
})(["text-align:center;margin-bottom:64px;"]);
const FeatureSubtitle = styled.p.withConfig({
displayName: "Feature2__FeatureSubtitle",
componentId: "sc-15ieq2k-3"
})(["color:", ";font-size:18px;margin-bottom:0;"], ({
theme
}) => theme.colors.text.secondary);
const FeatureHeading = styled.h3.withConfig({
displayName: "Feature2__FeatureHeading",
componentId: "sc-15ieq2k-4"
})(["font-size:48px;color:", ";font-weight:700;margin-bottom:16px;"], ({
theme
}) => theme.colors.secondary);
const FeatureWave = styled.span.withConfig({
displayName: "Feature2__FeatureWave",
componentId: "sc-15ieq2k-5"
})(["color:", ";"], ({
theme
}) => theme.palettes.primary[5]);
const ColumnModify = styled(Column).withConfig({
displayName: "Feature2__ColumnModify",
componentId: "sc-15ieq2k-6"
})(["margin-bottom:32px;"]); // Card Properties
const CardSvg = styled.div.withConfig({
displayName: "Feature2__CardSvg",
componentId: "sc-15ieq2k-7"
})(["color:", ";> svg{width:64px;height:64px;}"], ({
theme
}) => theme.palettes.primary[5]);
const CardContent = styled.div.withConfig({
displayName: "Feature2__CardContent",
componentId: "sc-15ieq2k-8"
})([""]);
const CardTitle = styled.h5.withConfig({
displayName: "Feature2__CardTitle",
componentId: "sc-15ieq2k-9"
})(["font-family:", ";font-size:24px;color:", ";font-weight:700;margin-top:16px;margin-bottom:0;"], ({
theme
}) => theme.fonts.heading, ({
theme
}) => theme.colors.secondary);
const CardText = styled.p.withConfig({
displayName: "Feature2__CardText",
componentId: "sc-15ieq2k-10"
})(["color:", ";font-size:14px;margin-top:8px;margin-bottom:0;"], ({
theme
}) => theme.colors.text.primary);
const Card = styled.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;}}", ""], ({
theme
}) => theme.boxShadows.xl, ({
theme
}) => theme.palettes.primary[5], ({
theme
}) => theme.palettes.primary[6], ''
/* hover */
, CardSvg, CardTitle, CardText, props => {
if (props.active) {
return css(["&:before{opacity:1;}", "{color:#fff;}", "{color:#fff;}", "{color:#fff;}"], CardSvg, CardTitle, CardText);
}
});
const CardBody = styled.div.withConfig({
displayName: "Feature2__CardBody",
componentId: "sc-15ieq2k-12"
})(["padding:48px 32px 64px;"]); // <= End Dependent styled-components
const featureSchema = [{
id: 1,
icon: /*#__PURE__*/React.createElement(Icon, {
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.createElement(Icon, {
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.createElement(Icon, {
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.createElement(Icon, {
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.createElement(Icon, {
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.createElement(Icon, {
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."
}];
const featureShape = {
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
active: PropTypes.bool
};
const propTypes = {
/** The Major words for the feature section. */
title: PropTypes.string.isRequired,
/** The Minor words for the feature section. */
subTitle: PropTypes.string.isRequired,
/** An array of features Note: Only 3 feature can be included in this section UI. */
features: PropTypes.arrayOf(PropTypes.shape(featureShape)).isRequired,
/** The separator will be displayed at the bottom of the feature section. */
separator: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
};
const defaultProps = {
title: 'Fasten your seat belts',
subTitle: 'The unique features of the app are waiting for you',
features: featureSchema,
separator: /*#__PURE__*/React.createElement("svg", {
viewBox: "0 0 126 70",
width: "126px",
height: "70px"
}, /*#__PURE__*/React.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
*/
const renderIcon = icon => {
if (React.isValidElement(icon)) {
return icon;
} else if (typeof icon === 'string' && icon.length > 0) {
return /*#__PURE__*/React.createElement(Icon, {
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
*/
const renderSVG = svg => {
if (React.isValidElement(svg)) {
return /*#__PURE__*/React.createElement(FeatureWave, null, svg);
} else if (typeof svg === 'string' && svg.length > 0) {
return /*#__PURE__*/React.createElement(FeatureWave, null, /*#__PURE__*/React.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
*/
const renderBody = data => {
if (Array.isArray(data) && data.length > 0) {
return /*#__PURE__*/React.createElement(Row, null, data.map(feature => {
return /*#__PURE__*/React.createElement(ColumnModify, {
key: feature.id,
lg: 4,
md: 6,
sm: 6
}, /*#__PURE__*/React.createElement(Card, {
active: feature.active
}, /*#__PURE__*/React.createElement(CardBody, null, /*#__PURE__*/React.createElement(CardSvg, null, renderIcon(feature.icon)), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(CardTitle, null, feature.title), /*#__PURE__*/React.createElement(CardText, null, feature.description)))));
}));
} else {
return null;
}
};
export const Feature2 = props => {
const {
title,
subTitle,
features,
separator
} = props,
attributes = _objectWithoutProperties(props, ["title", "subTitle", "features", "separator"]);
return /*#__PURE__*/React.createElement(SectionFeature, attributes, /*#__PURE__*/React.createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
lg: 12
}, /*#__PURE__*/React.createElement(FeatureContent, null, /*#__PURE__*/React.createElement(FeatureHeading, null, title), /*#__PURE__*/React.createElement(FeatureSubtitle, null, subTitle), separator ? renderSVG(separator) : null))), renderBody(features)));
};
Feature2.propTypes = propTypes;
Feature2.defaultProps = defaultProps;