@lote-design-system/marketing-blocks/main/components/marketing/testimonial/Testimonial1.js

marketing blocks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Testimonial1 = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _core = require("@lote-design-system/core");

var _svg = require("../svg");

// => Dependent styled-components
// Our main component depends upon the following styled-components
var Testimonial = _styledComponents["default"].div.withConfig({
  displayName: "Testimonial1__Testimonial",
  componentId: "fsreum-0"
})(["padding:96px 0;"]);

var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Testimonial1__ContainerModify",
  componentId: "fsreum-1"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});

var TestimonialBrandLogo = _styledComponents["default"].div.withConfig({
  displayName: "Testimonial1__TestimonialBrandLogo",
  componentId: "fsreum-2"
})(["display:flex;align-items:center;justify-content:center;margin-bottom:22px;"]);

var Brand = _styledComponents["default"].span.withConfig({
  displayName: "Testimonial1__Brand",
  componentId: "fsreum-3"
})(["margin-right:8px;> svg,> img{width:36px;height:36px;}"]);

var Text = _styledComponents["default"].span.withConfig({
  displayName: "Testimonial1__Text",
  componentId: "fsreum-4"
})(["font-size:16px;font-weight:700;color:", ";"], function (_ref2) {
  var colors = _ref2.theme.colors;
  return colors.secondary;
});

var Blockquote = _styledComponents["default"].blockquote.withConfig({
  displayName: "Testimonial1__Blockquote",
  componentId: "fsreum-5"
})(["max-width:720px;margin:0 auto 22px;position:relative;text-align:center;font-size:20px;color:", ";> p{margin-bottom:0;}> svg{position:absolute;width:60px;height:60px;color:", ";left:50%;top:50%;transform:translate(-50%,-50%);}"], function (_ref3) {
  var colors = _ref3.theme.colors;
  return colors.text.title;
}, function (_ref4) {
  var colors = _ref4.theme.colors;
  return colors.text.dividers;
});

var TestimonialInfo = _styledComponents["default"].div.withConfig({
  displayName: "Testimonial1__TestimonialInfo",
  componentId: "fsreum-6"
})(["display:flex;align-items:center;justify-content:center;> img{display:block;width:50px;height:50px;border-radius:50%;background-color:#f7f7f7;margin-right:1rem;}"]);

var BlockquoteInfoList = _styledComponents["default"].ol.withConfig({
  displayName: "Testimonial1__BlockquoteInfoList",
  componentId: "fsreum-7"
})(["list-style:none;padding-left:0;margin-bottom:0;> li{font-size:14px;font-weight:700;color:", ";}", "{display:flex;flex-wrap:wrap;> li + li{padding-left:8px;&:before{display:inline-block;padding-right:8px;color:", ";content:'/';}}}"], function (_ref5) {
  var colors = _ref5.theme.colors;
  return colors.text.title;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.mediaQueries.sm;
}, function (_ref7) {
  var colors = _ref7.theme.colors;
  return colors.primary;
}); // <= End Dependent styled-components

/*
 * 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])
};
var defaultBrandSchema = {
  logo: /*#__PURE__*/_react["default"].createElement(_svg.Caravan, {
    color: "#3a3838"
  }),
  text: /*#__PURE__*/_react["default"].createElement("span", null, "Bloom", /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      color: '#01A1FF'
    }
  }, "station"))
};
var propTypes = {
  /** The brand logo for the testimonial, default it will from the ui-kit. */
  brand: _propTypes["default"].shape(brandShape).isRequired,

  /** The quote for the testimonial. */
  quote: _propTypes["default"].string.isRequired,

  /** Quote Author. */
  author: _propTypes["default"].string.isRequired,

  /** Author Image. */
  authorImage: _propTypes["default"].string.isRequired,

  /** Author Designation. */
  designation: _propTypes["default"].string,

  /** Author Company. */
  company: _propTypes["default"].string
};
var defaultProps = {
  brand: defaultBrandSchema,
  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.',
  author: 'Alexandra Suda',
  authorImage: 'https://i.imgur.com/F80hD1h.jpg',
  designation: 'CEO',
  company: 'Bloomstation'
};
/**
 * 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 logo {*} - A brand logo
 * @param text {string} - A brand name text
 * @return {{logo: *, text: {string}}} - Returns the object
 */


var modifiedBrand = function modifiedBrand(_ref8) {
  var logo = _ref8.logo,
      text = _ref8.text;

  if (typeof logo === 'string' && !logo.length > 0) {
    return {
      logo: /*#__PURE__*/_react["default"].createElement(_svg.Caravan, {
        color: "#3a3838"
      }),
      text: text
    };
  } else {
    return {
      logo: logo,
      text: text
    };
  }
};

var Testimonial1 = function Testimonial1(props) {
  var brand = props.brand,
      quote = props.quote,
      author = props.author,
      authorImage = props.authorImage,
      designation = props.designation,
      company = props.company,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["brand", "quote", "author", "authorImage", "designation", "company"]);
  var modifyBrand = modifiedBrand(brand);
  return /*#__PURE__*/_react["default"].createElement(Testimonial, attributes, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(TestimonialBrandLogo, null, /*#__PURE__*/_react["default"].createElement(Brand, null, renderLogo(modifyBrand.logo)), modifyBrand.text ? /*#__PURE__*/_react["default"].createElement(Text, null, modifyBrand.text) : null), /*#__PURE__*/_react["default"].createElement(Blockquote, null, /*#__PURE__*/_react["default"].createElement("p", null, "\u201C", quote, "\u201C"), /*#__PURE__*/_react["default"].createElement(_svg.QuoteRight1, null)), /*#__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))))));
};

exports.Testimonial1 = Testimonial1;
Testimonial1.propTypes = propTypes;
Testimonial1.defaultProps = defaultProps;