@lote-design-system/marketing-blocks
Version:
228 lines (218 loc) • 8.52 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled 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 Feature = styled.section.withConfig({
displayName: "Feature4__Feature",
componentId: "sc-1pfq8rc-0"
})(["padding:48px 16px;", "{padding:64px 32px;}", "{padding-top:96px;padding-bottom:96px;}"], ({
theme
}) => theme.mediaQueries.sm, ({
theme
}) => theme.mediaQueries.md);
const FeatureHeader = styled.div.withConfig({
displayName: "Feature4__FeatureHeader",
componentId: "sc-1pfq8rc-1"
})(["text-align:center;margin-bottom:48px;", "{margin-bottom:64px;}"], ({
theme
}) => theme.mediaQueries.md);
const FeatureContainer = styled(Container).withConfig({
displayName: "Feature4__FeatureContainer",
componentId: "sc-1pfq8rc-2"
})(["max-width:", ";"], ({
theme
}) => theme.maxContainerWidth);
const FeatureTitle = styled.p.withConfig({
displayName: "Feature4__FeatureTitle",
componentId: "sc-1pfq8rc-3"
})(["font-size:18px;color:", ";font-weight:400;margin-bottom:4px;"], ({
theme: {
colors
}
}) => colors.primary);
const FeatureSubtitle = styled.h1.withConfig({
displayName: "Feature4__FeatureSubtitle",
componentId: "sc-1pfq8rc-4"
})(["font-size:40px;font-weight:700;color:", ";margin-bottom:8px;"], ({
theme: {
colors
}
}) => colors.text.title);
const FeatureDescription = styled.p.withConfig({
displayName: "Feature4__FeatureDescription",
componentId: "sc-1pfq8rc-5"
})(["margin:0 auto 16px;max-width:720px;font-size:16px;color:", ";"], ({
theme: {
colors
}
}) => colors.text.primary);
const FeatureBody = styled.div.withConfig({
displayName: "Feature4__FeatureBody",
componentId: "sc-1pfq8rc-6"
})([""]);
const ColumnModify = styled(Column).withConfig({
displayName: "Feature4__ColumnModify",
componentId: "sc-1pfq8rc-7"
})(["margin-bottom:64px;"]);
const CardFeature = styled.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;"]);
const CardFeatureBody = styled.div.withConfig({
displayName: "Feature4__CardFeatureBody",
componentId: "sc-1pfq8rc-9"
})(["display:flex;"]);
const CardFeatureIconWrapper = styled.div.withConfig({
displayName: "Feature4__CardFeatureIconWrapper",
componentId: "sc-1pfq8rc-10"
})(["flex:0 0 auto;margin-right:16px;"]);
const CardFeatureSvgWrapper = styled.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;}"], ({
theme: {
colors
}
}) => colors.primary, ''
/* 4px */
);
const CardFeatureContent = styled.div.withConfig({
displayName: "Feature4__CardFeatureContent",
componentId: "sc-1pfq8rc-12"
})(["flex:1 1 auto;text-align:left;"]);
const CardHeading = styled.h1.withConfig({
displayName: "Feature4__CardHeading",
componentId: "sc-1pfq8rc-13"
})(["font-size:18px;font-weight:500;margin-bottom:4px;color:", ";"], ({
theme: {
colors
}
}) => colors.text.title);
const CardDescription = styled.p.withConfig({
displayName: "Feature4__CardDescription",
componentId: "sc-1pfq8rc-14"
})(["font-size:14px;margin-bottom:0;color:", ";"], ({
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,
/** The description for the feature section. */
description: PropTypes.string.isRequired,
/** An array of features. */
features: PropTypes.arrayOf(PropTypes.shape(featureShape)).isRequired
};
const 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
*/
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(FeatureContainer, {
fluid: true
}, /*#__PURE__*/React.createElement(Row, null, data.map(feature => {
return /*#__PURE__*/React.createElement(ColumnModify, {
key: feature.id,
lg: 6
}, /*#__PURE__*/React.createElement(CardFeature, null, /*#__PURE__*/React.createElement(CardFeatureBody, null, /*#__PURE__*/React.createElement(CardFeatureIconWrapper, null, /*#__PURE__*/React.createElement(CardFeatureSvgWrapper, null, renderIcon(feature.icon))), /*#__PURE__*/React.createElement(CardFeatureContent, null, /*#__PURE__*/React.createElement(CardHeading, null, feature.title), /*#__PURE__*/React.createElement(CardDescription, null, feature.description)))));
}))));
} else {
return null;
}
};
export const Feature4 = props => {
const {
title,
subtitle,
description,
features
} = props,
attributes = _objectWithoutProperties(props, ["title", "subtitle", "description", "features"]);
return /*#__PURE__*/React.createElement(Feature, attributes, /*#__PURE__*/React.createElement(FeatureHeader, null, /*#__PURE__*/React.createElement(FeatureContainer, {
fluid: true
}, /*#__PURE__*/React.createElement(FeatureTitle, null, title), /*#__PURE__*/React.createElement(FeatureSubtitle, null, subtitle), /*#__PURE__*/React.createElement(FeatureDescription, null, description))), renderBody(features));
};
Feature4.propTypes = propTypes;
Feature4.defaultProps = defaultProps;