@lote-design-system/marketing-blocks
Version:
244 lines (228 loc) • 9.04 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Container, Row, Column } from '@lote-design-system/core';
import { Caravan, QuoteRight2 } from '../svg'; // => Dependent styled-components
// Our main component depends upon the following styled-components
const TestimonialContent = styled.div.withConfig({
displayName: "Testimonial2__TestimonialContent",
componentId: "sc-1de3ofd-0"
})(["background-color:", ";position:relative;padding:96px 32px;", ";"], ({
theme
}) => theme.palettes.primary[7], ({
border
}) => {
if (border) {
return css(["", "{border-right:2px solid ", ";}"], ({
theme
}) => theme.mediaQueries.lg, ({
theme
}) => theme.palettes.primary[8]);
}
});
const ContainerModify = styled(Container).withConfig({
displayName: "Testimonial2__ContainerModify",
componentId: "sc-1de3ofd-1"
})(["max-width:", ";", "{padding-left:0;padding-right:0;}"], ({
theme
}) => theme.maxContainerWidth, ({
theme
}) => theme.mediaQueries.lg);
const RowModify = styled(Row).withConfig({
displayName: "Testimonial2__RowModify",
componentId: "sc-1de3ofd-2"
})(["", "{margin-left:0;margin-right:0;}"], ({
theme
}) => theme.mediaQueries.lg);
const ColumnModify = styled(Column).withConfig({
displayName: "Testimonial2__ColumnModify",
componentId: "sc-1de3ofd-3"
})(["margin-bottom:30px;", "{margin-bottom:0;padding-right:0;padding-left:0;}"], ({
theme
}) => theme.mediaQueries.lg);
const TestimonialBrandLogo = styled.div.withConfig({
displayName: "Testimonial2__TestimonialBrandLogo",
componentId: "sc-1de3ofd-4"
})(["display:flex;align-items:center;margin-bottom:22px;"]);
const Brand = styled.span.withConfig({
displayName: "Testimonial2__Brand",
componentId: "sc-1de3ofd-5"
})(["margin-right:8px;> svg{width:36px;height:36px;}"]);
const Text = styled.span.withConfig({
displayName: "Testimonial2__Text",
componentId: "sc-1de3ofd-6"
})(["font-size:16px;font-weight:700;color:", ";", ";"], ({
theme: {
colors
}
}) => colors.primary, ({
color
}) => {
if (color) {
return css(["&{color:", ";}"], color);
}
});
const Blockquote = styled.blockquote.withConfig({
displayName: "Testimonial2__Blockquote",
componentId: "sc-1de3ofd-7"
})(["max-width:540px;margin-bottom:22px;font-size:20px;color:#fff;> p{margin-bottom:0;}"]);
const TestimonialInfo = styled.div.withConfig({
displayName: "Testimonial2__TestimonialInfo",
componentId: "sc-1de3ofd-8"
})(["display:flex;align-items:center;> img{display:block;width:50px;height:50px;border-radius:50%;background-color:#f7f7f7;margin-right:1rem;border:2px solid #fff;}"]);
const BlockquoteInfoList = styled.ol.withConfig({
displayName: "Testimonial2__BlockquoteInfoList",
componentId: "sc-1de3ofd-9"
})(["list-style:none;padding-left:0;margin-bottom:0;> li{font-size:14px;color:#fff;}> li + li{color:", ";}"], ({
theme: {
colors
}
}) => colors.primary);
const QuoteSvgWrapper = styled.span.withConfig({
displayName: "Testimonial2__QuoteSvgWrapper",
componentId: "sc-1de3ofd-10"
})(["position:absolute;bottom:16px;right:46px;> svg{width:60px;height:60px;color:", ";}"], ({
theme
}) => theme.palettes.primary[8]); // <= End Dependent styled-components
const quote = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.';
const testimonialSchema = [{
id: 1,
brand: {
logo: /*#__PURE__*/React.createElement(Caravan, {
color: "#01a1ff"
}),
text: 'Bloomstation'
},
quote: quote,
author: 'Alexandra Suda',
authorImage: 'https://i.imgur.com/F80hD1h.jpg',
designation: 'CEO',
company: 'Bloomstation'
}, {
id: 2,
brand: {
logo: /*#__PURE__*/React.createElement(Caravan, {
color: "#01a1ff"
}),
text: 'BlocksBoot'
},
quote: quote,
author: 'Aleksandr Solzhenitsyn',
authorImage: 'https://i.imgur.com/ILmHmHq.jpg',
designation: 'CEO',
company: 'BlocksBoot'
}];
/*
* We cannot set default theme colors for third party brand logos.
* A brand logo is made up of different colors. Therefore, it is better
* to set the brand logo as an `SVG` element that is already full of colors
* or can also be set in the form of an image element.
*/
const brandShape = {
logo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
color: PropTypes.string
};
const testimonialShape = {
id: PropTypes.number.isRequired,
brand: PropTypes.shape(brandShape).isRequired,
quote: PropTypes.string.isRequired,
author: PropTypes.string.isRequired,
authorImage: PropTypes.string.isRequired,
designation: PropTypes.string,
company: PropTypes.string
};
const propTypes = {
/** The testimonials data. */
testimonials: PropTypes.arrayOf(PropTypes.shape(testimonialShape)).isRequired
};
const defaultProps = {
testimonials: testimonialSchema
};
/**
* Returns the JSX or null for the logo.
* @param logo {*} - The logo will React.element or a path
* @return {null|*} - Returns the JSX or null
*/
const renderLogo = logo => {
if (React.isValidElement(logo)) {
return logo;
} else if (typeof logo === 'string' && logo.length > 0) {
return /*#__PURE__*/React.createElement("img", {
src: logo,
alt: "Brand Logo"
});
} else {
return null;
}
};
/**
* Modified Brand and return a new object.
* @param brand {object} - A brand object
* @return {object} - Returns the object
*/
const modifiedBrand = brand => {
if (brand && typeof brand.logo === 'string' && !brand.logo.length > 0) {
return _objectSpread(_objectSpread({}, brand), {}, {
logo: /*#__PURE__*/React.createElement(Caravan, {
color: "#01a1ff"
})
});
} else {
return brand;
}
};
/**
* Render schema for the Testimonial
* @param data {Array} - Schema for the testimonial
* @return {null|*}
*/
const renderBody = data => {
if (Array.isArray(data) && data.length > 0) {
const total = data.length;
return data.map(({
id,
brand,
quote,
author,
authorImage,
designation,
company
}, index) => {
// Border manipulation
let bd = false;
if (index < total - 1) {
bd = true;
} // Brand manipulation
const modifyBrand = modifiedBrand(brand);
return /*#__PURE__*/React.createElement(ColumnModify, {
lg: 6,
key: id
}, /*#__PURE__*/React.createElement(TestimonialContent, {
border: bd
}, /*#__PURE__*/React.createElement(TestimonialBrandLogo, null, /*#__PURE__*/React.createElement(Brand, null, renderLogo(modifyBrand.logo)), modifyBrand.text ? /*#__PURE__*/React.createElement(Text, {
color: modifyBrand.color
}, modifyBrand.text) : null), /*#__PURE__*/React.createElement(Blockquote, null, /*#__PURE__*/React.createElement("p", null, "\u201C", quote, "\u201C")), /*#__PURE__*/React.createElement(TestimonialInfo, null, /*#__PURE__*/React.createElement("img", {
src: authorImage,
alt: author
}), /*#__PURE__*/React.createElement(BlockquoteInfoList, null, /*#__PURE__*/React.createElement("li", null, author), designation && /*#__PURE__*/React.createElement("li", null, designation, company ? `, ${company}` : null))), /*#__PURE__*/React.createElement(QuoteSvgWrapper, null, /*#__PURE__*/React.createElement(QuoteRight2, null))));
});
} else {
return null;
}
};
export const Testimonial2 = props => {
const {
testimonials
} = props,
attributes = _objectWithoutProperties(props, ["testimonials"]);
return /*#__PURE__*/React.createElement("div", attributes, /*#__PURE__*/React.createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/React.createElement(RowModify, null, renderBody(testimonials))));
};
Testimonial2.propTypes = propTypes;
Testimonial2.defaultProps = defaultProps;