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

marketing blocks

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Container } from '@lote-design-system/core';
import { Caravan, QuoteRight1 } from '../svg'; // => Dependent styled-components
// Our main component depends upon the following styled-components

const Testimonial = styled.div.withConfig({
  displayName: "Testimonial1__Testimonial",
  componentId: "fsreum-0"
})(["padding:96px 0;"]);
const ContainerModify = styled(Container).withConfig({
  displayName: "Testimonial1__ContainerModify",
  componentId: "fsreum-1"
})(["max-width:", ";"], ({
  theme
}) => theme.maxContainerWidth);
const TestimonialBrandLogo = styled.div.withConfig({
  displayName: "Testimonial1__TestimonialBrandLogo",
  componentId: "fsreum-2"
})(["display:flex;align-items:center;justify-content:center;margin-bottom:22px;"]);
const Brand = styled.span.withConfig({
  displayName: "Testimonial1__Brand",
  componentId: "fsreum-3"
})(["margin-right:8px;> svg,> img{width:36px;height:36px;}"]);
const Text = styled.span.withConfig({
  displayName: "Testimonial1__Text",
  componentId: "fsreum-4"
})(["font-size:16px;font-weight:700;color:", ";"], ({
  theme: {
    colors
  }
}) => colors.secondary);
const Blockquote = styled.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%);}"], ({
  theme: {
    colors
  }
}) => colors.text.title, ({
  theme: {
    colors
  }
}) => colors.text.dividers);
const TestimonialInfo = styled.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;}"]);
const BlockquoteInfoList = styled.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:'/';}}}"], ({
  theme: {
    colors
  }
}) => colors.text.title, ({
  theme
}) => theme.mediaQueries.sm, ({
  theme: {
    colors
  }
}) => 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.
 */

const brandShape = {
  logo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
};
const defaultBrandSchema = {
  logo: /*#__PURE__*/React.createElement(Caravan, {
    color: "#3a3838"
  }),
  text: /*#__PURE__*/React.createElement("span", null, "Bloom", /*#__PURE__*/React.createElement("span", {
    style: {
      color: '#01A1FF'
    }
  }, "station"))
};
const propTypes = {
  /** The brand logo for the testimonial, default it will from the ui-kit. */
  brand: PropTypes.shape(brandShape).isRequired,

  /** The quote for the testimonial. */
  quote: PropTypes.string.isRequired,

  /** Quote Author. */
  author: PropTypes.string.isRequired,

  /** Author Image. */
  authorImage: PropTypes.string.isRequired,

  /** Author Designation. */
  designation: PropTypes.string,

  /** Author Company. */
  company: PropTypes.string
};
const 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
 */

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 logo {*} - A brand logo
 * @param text {string} - A brand name text
 * @return {{logo: *, text: {string}}} - Returns the object
 */


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

export const Testimonial1 = props => {
  const {
    brand,
    quote,
    author,
    authorImage,
    designation,
    company
  } = props,
        attributes = _objectWithoutProperties(props, ["brand", "quote", "author", "authorImage", "designation", "company"]);

  const modifyBrand = modifiedBrand(brand);
  return /*#__PURE__*/React.createElement(Testimonial, attributes, /*#__PURE__*/React.createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TestimonialBrandLogo, null, /*#__PURE__*/React.createElement(Brand, null, renderLogo(modifyBrand.logo)), modifyBrand.text ? /*#__PURE__*/React.createElement(Text, null, modifyBrand.text) : null), /*#__PURE__*/React.createElement(Blockquote, null, /*#__PURE__*/React.createElement("p", null, "\u201C", quote, "\u201C"), /*#__PURE__*/React.createElement(QuoteRight1, null)), /*#__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))))));
};
Testimonial1.propTypes = propTypes;
Testimonial1.defaultProps = defaultProps;