@lote-design-system/marketing-blocks
Version:
250 lines (237 loc) • 8.86 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 { rem } from 'polished';
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: "Feature3__ContainerModify",
componentId: "crmly4-0"
})(["max-width:", ";"], ({
theme
}) => theme.maxContainerWidth);
const Feature = styled.div.withConfig({
displayName: "Feature3__Feature",
componentId: "crmly4-1"
})(["padding:", " ", ";", "{padding:", " ", ";}", "{padding-top:", ";padding-bottom:", ";}"], rem(48), rem(16), ({
theme
}) => theme.mediaQueries.sm, rem(64), rem(32), ({
theme
}) => theme.mediaQueries.md, rem(96), rem(96));
const FeatureHeader = styled.div.withConfig({
displayName: "Feature3__FeatureHeader",
componentId: "crmly4-2"
})(["text-align:center;margin-bottom:", ";> ", "{max-width:640px;}", "{margin-bottom:", ";}"], rem(48), Container, ({
theme
}) => theme.mediaQueries.md, rem(64));
const FeatureTitle = styled.p.withConfig({
displayName: "Feature3__FeatureTitle",
componentId: "crmly4-3"
})(["font-size:", ";color:", ";font-weight:400;margin-bottom:", ";"], rem(20), ({
theme: {
colors
}
}) => colors.primary, rem(8));
const FeatureSubtitle = styled.h1.withConfig({
displayName: "Feature3__FeatureSubtitle",
componentId: "crmly4-4"
})(["position:relative;font-size:", ";font-weight:700;color:", ";padding-bottom:", ";margin-bottom:", ";", ";"], rem(40), ({
theme: {
colors
}
}) => colors.text.title, rem(24), rem(16), ({
separator
}) => {
if (separator) {
return 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;}"], ({
theme: {
palettes
}
}) => palettes.primary[0], ''
/* Bottom */
, ''
/* Left */
, ({
theme: {
palettes
}
}) => palettes.primary[5], ''
/* Bottom */
, ''
/* Right */
);
}
});
const FeatureBody = styled.div.withConfig({
displayName: "Feature3__FeatureBody",
componentId: "crmly4-5"
})([""]); // Card
const CardSvgWrapper = styled.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;}"], ({
theme: {
palettes
}
}) => palettes.primary[0], ({
theme: {
palettes
}
}) => palettes.primary[5], rem(4));
const Card = styled.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;}}"], rem(64), CardSvgWrapper, ({
theme: {
palettes
}
}) => palettes.primary[5]);
const CardBody = styled.div.withConfig({
displayName: "Feature3__CardBody",
componentId: "crmly4-8"
})(["display:flex;"]); // First Part
const PartA = styled.div.withConfig({
displayName: "Feature3__PartA",
componentId: "crmly4-9"
})(["flex:0 0 auto;margin-right:", ";"], rem(16)); // Second Part
const PartB = styled.div.withConfig({
displayName: "Feature3__PartB",
componentId: "crmly4-10"
})(["flex:1 1 auto;text-align:left;"]);
const CardHeading = styled.h1.withConfig({
displayName: "Feature3__CardHeading",
componentId: "crmly4-11"
})(["font-size:", ";font-weight:600;margin-bottom:", ";color:", ";"], rem(18), rem(4), ({
theme: {
colors
}
}) => colors.text.title);
const CardParagraph = styled.p.withConfig({
displayName: "Feature3__CardParagraph",
componentId: "crmly4-12"
})(["font-size:", ";margin-bottom:0;color:", ";"], rem(14), ({
theme: {
colors
}
}) => colors.text.primary); // <= End Dependent styled-components
const featureSchema = [{
id: 1,
icon: /*#__PURE__*/React.createElement(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.createElement(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.createElement(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.createElement(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.createElement(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.createElement(Icon, {
name: "film"
}),
title: 'Huge Revenues',
description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is a versatile.'
}];
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
};
const propTypes = {
/** The title for the feature section. */
title: PropTypes.string.isRequired,
/** The subtitle for the feature section. */
subtitle: PropTypes.string.isRequired,
/** An array of features. */
features: PropTypes.arrayOf(PropTypes.shape(featureShape)).isRequired,
/** The separator will be displayed at the bottom of the feature section. */
separator: PropTypes.bool
};
const 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
*/
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;
}
};
/**
* 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) {
// 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.createElement(FeatureBody, null, /*#__PURE__*/React.createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/React.createElement(Row, null, data.map(feature => {
return /*#__PURE__*/React.createElement(Column, {
key: feature.id,
lg: 4
}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardBody, null, /*#__PURE__*/React.createElement(PartA, null, /*#__PURE__*/React.createElement(CardSvgWrapper, null, renderIcon(feature.icon))), /*#__PURE__*/React.createElement(PartB, null, /*#__PURE__*/React.createElement(CardHeading, null, feature.title), /*#__PURE__*/React.createElement(CardParagraph, null, feature.description)))));
}))));
} else {
return null;
}
};
export const Feature3 = props => {
const {
title,
subtitle,
features,
separator
} = props,
attributes = _objectWithoutProperties(props, ["title", "subtitle", "features", "separator"]);
return /*#__PURE__*/React.createElement(Feature, attributes, /*#__PURE__*/React.createElement(FeatureHeader, null, /*#__PURE__*/React.createElement(Container, {
fluid: true
}, /*#__PURE__*/React.createElement(FeatureTitle, null, title), /*#__PURE__*/React.createElement(FeatureSubtitle, {
separator: separator
}, subtitle))), renderBody(features));
};
Feature3.propTypes = propTypes;
Feature3.defaultProps = defaultProps;