@lote-design-system/marketing-blocks
Version:
274 lines (238 loc) • 10.9 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Testimonial2 = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _core = require("@lote-design-system/core");
var _svg = require("../svg");
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) { (0, _defineProperty2["default"])(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; }
// => Dependent styled-components
// Our main component depends upon the following styled-components
var TestimonialContent = _styledComponents["default"].div.withConfig({
displayName: "Testimonial2__TestimonialContent",
componentId: "sc-1de3ofd-0"
})(["background-color:", ";position:relative;padding:96px 32px;", ";"], function (_ref) {
var theme = _ref.theme;
return theme.palettes.primary[7];
}, function (_ref2) {
var border = _ref2.border;
if (border) {
return (0, _styledComponents.css)(["", "{border-right:2px solid ", ";}"], function (_ref3) {
var theme = _ref3.theme;
return theme.mediaQueries.lg;
}, function (_ref4) {
var theme = _ref4.theme;
return theme.palettes.primary[8];
});
}
});
var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
displayName: "Testimonial2__ContainerModify",
componentId: "sc-1de3ofd-1"
})(["max-width:", ";", "{padding-left:0;padding-right:0;}"], function (_ref5) {
var theme = _ref5.theme;
return theme.maxContainerWidth;
}, function (_ref6) {
var theme = _ref6.theme;
return theme.mediaQueries.lg;
});
var RowModify = (0, _styledComponents["default"])(_core.Row).withConfig({
displayName: "Testimonial2__RowModify",
componentId: "sc-1de3ofd-2"
})(["", "{margin-left:0;margin-right:0;}"], function (_ref7) {
var theme = _ref7.theme;
return theme.mediaQueries.lg;
});
var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
displayName: "Testimonial2__ColumnModify",
componentId: "sc-1de3ofd-3"
})(["margin-bottom:30px;", "{margin-bottom:0;padding-right:0;padding-left:0;}"], function (_ref8) {
var theme = _ref8.theme;
return theme.mediaQueries.lg;
});
var TestimonialBrandLogo = _styledComponents["default"].div.withConfig({
displayName: "Testimonial2__TestimonialBrandLogo",
componentId: "sc-1de3ofd-4"
})(["display:flex;align-items:center;margin-bottom:22px;"]);
var Brand = _styledComponents["default"].span.withConfig({
displayName: "Testimonial2__Brand",
componentId: "sc-1de3ofd-5"
})(["margin-right:8px;> svg{width:36px;height:36px;}"]);
var Text = _styledComponents["default"].span.withConfig({
displayName: "Testimonial2__Text",
componentId: "sc-1de3ofd-6"
})(["font-size:16px;font-weight:700;color:", ";", ";"], function (_ref9) {
var colors = _ref9.theme.colors;
return colors.primary;
}, function (_ref10) {
var color = _ref10.color;
if (color) {
return (0, _styledComponents.css)(["&{color:", ";}"], color);
}
});
var Blockquote = _styledComponents["default"].blockquote.withConfig({
displayName: "Testimonial2__Blockquote",
componentId: "sc-1de3ofd-7"
})(["max-width:540px;margin-bottom:22px;font-size:20px;color:#fff;> p{margin-bottom:0;}"]);
var TestimonialInfo = _styledComponents["default"].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;}"]);
var BlockquoteInfoList = _styledComponents["default"].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:", ";}"], function (_ref11) {
var colors = _ref11.theme.colors;
return colors.primary;
});
var QuoteSvgWrapper = _styledComponents["default"].span.withConfig({
displayName: "Testimonial2__QuoteSvgWrapper",
componentId: "sc-1de3ofd-10"
})(["position:absolute;bottom:16px;right:46px;> svg{width:60px;height:60px;color:", ";}"], function (_ref12) {
var theme = _ref12.theme;
return theme.palettes.primary[8];
}); // <= End Dependent styled-components
var 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.';
var testimonialSchema = [{
id: 1,
brand: {
logo: /*#__PURE__*/_react["default"].createElement(_svg.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["default"].createElement(_svg.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.
*/
var brandShape = {
logo: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
color: _propTypes["default"].string
};
var testimonialShape = {
id: _propTypes["default"].number.isRequired,
brand: _propTypes["default"].shape(brandShape).isRequired,
quote: _propTypes["default"].string.isRequired,
author: _propTypes["default"].string.isRequired,
authorImage: _propTypes["default"].string.isRequired,
designation: _propTypes["default"].string,
company: _propTypes["default"].string
};
var propTypes = {
/** The testimonials data. */
testimonials: _propTypes["default"].arrayOf(_propTypes["default"].shape(testimonialShape)).isRequired
};
var 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
*/
var renderLogo = function renderLogo(logo) {
if (_react["default"].isValidElement(logo)) {
return logo;
} else if (typeof logo === 'string' && logo.length > 0) {
return /*#__PURE__*/_react["default"].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
*/
var modifiedBrand = function modifiedBrand(brand) {
if (brand && typeof brand.logo === 'string' && !brand.logo.length > 0) {
return _objectSpread(_objectSpread({}, brand), {}, {
logo: /*#__PURE__*/_react["default"].createElement(_svg.Caravan, {
color: "#01a1ff"
})
});
} else {
return brand;
}
};
/**
* Render schema for the Testimonial
* @param data {Array} - Schema for the testimonial
* @return {null|*}
*/
var renderBody = function renderBody(data) {
if (Array.isArray(data) && data.length > 0) {
var total = data.length;
return data.map(function (_ref13, index) {
var id = _ref13.id,
brand = _ref13.brand,
quote = _ref13.quote,
author = _ref13.author,
authorImage = _ref13.authorImage,
designation = _ref13.designation,
company = _ref13.company;
// Border manipulation
var bd = false;
if (index < total - 1) {
bd = true;
} // Brand manipulation
var modifyBrand = modifiedBrand(brand);
return /*#__PURE__*/_react["default"].createElement(ColumnModify, {
lg: 6,
key: id
}, /*#__PURE__*/_react["default"].createElement(TestimonialContent, {
border: bd
}, /*#__PURE__*/_react["default"].createElement(TestimonialBrandLogo, null, /*#__PURE__*/_react["default"].createElement(Brand, null, renderLogo(modifyBrand.logo)), modifyBrand.text ? /*#__PURE__*/_react["default"].createElement(Text, {
color: modifyBrand.color
}, modifyBrand.text) : null), /*#__PURE__*/_react["default"].createElement(Blockquote, null, /*#__PURE__*/_react["default"].createElement("p", null, "\u201C", quote, "\u201C")), /*#__PURE__*/_react["default"].createElement(TestimonialInfo, null, /*#__PURE__*/_react["default"].createElement("img", {
src: authorImage,
alt: author
}), /*#__PURE__*/_react["default"].createElement(BlockquoteInfoList, null, /*#__PURE__*/_react["default"].createElement("li", null, author), designation && /*#__PURE__*/_react["default"].createElement("li", null, designation, company ? ", ".concat(company) : null))), /*#__PURE__*/_react["default"].createElement(QuoteSvgWrapper, null, /*#__PURE__*/_react["default"].createElement(_svg.QuoteRight2, null))));
});
} else {
return null;
}
};
var Testimonial2 = function Testimonial2(props) {
var testimonials = props.testimonials,
attributes = (0, _objectWithoutProperties2["default"])(props, ["testimonials"]);
return /*#__PURE__*/_react["default"].createElement("div", attributes, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/_react["default"].createElement(RowModify, null, renderBody(testimonials))));
};
exports.Testimonial2 = Testimonial2;
Testimonial2.propTypes = propTypes;
Testimonial2.defaultProps = defaultProps;