@lote-design-system/marketing-blocks/module/components/marketing/ctas/Cta4.js

marketing blocks

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import Icon from '@lote-design-system/icons';
import { Container, Row, Column, Text, Button } from '@lote-design-system/core'; // => Dependent styled-components
// Our main component depends upon the following styled-components

const Cta = styled.div.withConfig({
  displayName: "Cta4__Cta",
  componentId: "yasdrk-0"
})(["background-color:", ";"], ({
  theme: {
    colors
  }
}) => colors.text.title);
const ColumnFirst = styled(Column).withConfig({
  displayName: "Cta4__ColumnFirst",
  componentId: "yasdrk-1"
})(["padding-left:0;padding-right:0;"]);
const ColumnSecond = styled(Column).withConfig({
  displayName: "Cta4__ColumnSecond",
  componentId: "yasdrk-2"
})([""]);
const BackgroundImage = styled.div.withConfig({
  displayName: "Cta4__BackgroundImage",
  componentId: "yasdrk-3"
})(["", ";background-position:center center;background-repeat:no-repeat;background-size:cover;background-color:#f7f7f7;height:300px;", "{height:100%;}"], ({
  bgImage
}) => {
  if (bgImage) {
    return css(["background-image:url(", ");"], bgImage);
  }
}, ({
  theme
}) => theme.mediaQueries.lg);
const InfoWrapper = styled.div.withConfig({
  displayName: "Cta4__InfoWrapper",
  componentId: "yasdrk-4"
})(["padding-top:96px;padding-bottom:96px;", "{padding-top:128px;padding-bottom:128px;}"], ({
  theme
}) => theme.mediaQueries.lg);
const CtaMinorText = styled.h4.withConfig({
  displayName: "Cta4__CtaMinorText",
  componentId: "yasdrk-5"
})(["font-size:16px;color:#fff;margin-bottom:8px;"]);
const CtaMajorText = styled(Text).withConfig({
  displayName: "Cta4__CtaMajorText",
  componentId: "yasdrk-6"
})(["font-weight:700;color:#fff;margin-bottom:8px;"]);
const CtaDescription = styled.p.withConfig({
  displayName: "Cta4__CtaDescription",
  componentId: "yasdrk-7"
})(["font-size:16px;color:#fff;max-width:720px;margin-bottom:16px;"]);
const CtaLinkSvgWrapper = styled.span.withConfig({
  displayName: "Cta4__CtaLinkSvgWrapper",
  componentId: "yasdrk-8"
})(["color:", ";margin-left:12px;transition:color 0.4s linear;"], ({
  theme: {
    colors
  }
}) => colors.text.secondary);
const CtaLink = styled(Button).withConfig({
  displayName: "Cta4__CtaLink",
  componentId: "yasdrk-9"
})(["font-weight:500;&:hover{> ", "{color:#fff;}}"], CtaLinkSvgWrapper); // <= End Dependent styled-components

const linkShape = {
  href: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  variation: PropTypes.string.isRequired,
  color: PropTypes.string
};
const linkSchema = {
  href: '/',
  text: 'Visit the help center',
  icon: /*#__PURE__*/React.createElement(Icon, {
    name: "external-link"
  }),
  variation: 'white',
  color: 'primary'
};
const propTypes = {
  /** The Major text for the Cta. */
  majorText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

  /** The Minor text for the Cta. */
  minorText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

  /** Description text for the Cta. */
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

  /** Link appear on the Cta. */
  link: PropTypes.shape(linkShape).isRequired,

  /** The source for the background image. */
  backgroundImage: PropTypes.string.isRequired,

  /** The columns will move from left to right. */
  shift: PropTypes.bool
};
const defaultProps = {
  majorText: `We're here to help`,
  minorText: 'Planning, Stabilizing and Work',
  description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. Lorem Ipsum has been the industry standard dummy text ever since the 1500s and used by everywhere.',
  link: linkSchema,
  backgroundImage: 'https://i.imgur.com/fcLy370.jpg'
};
/**
 * 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;
  }
};
/**
 * Link appear on the Cta.
 * @param link {object} - Render link on the Cta.
 * @return {*}
 */


const renderLink = link => {
  const {
    href,
    text,
    icon: Icon,
    variation,
    color
  } = link;
  return /*#__PURE__*/React.createElement(CtaLink, {
    href: href,
    variation: variation,
    color: color
  }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(CtaLinkSvgWrapper, null, renderIcon(Icon)));
};

export const Cta4 = props => {
  const {
    shift,
    majorText,
    minorText,
    description,
    link,
    backgroundImage
  } = props,
        attributes = _objectWithoutProperties(props, ["shift", "majorText", "minorText", "description", "link", "backgroundImage"]);

  const Column1 = /*#__PURE__*/React.createElement(ColumnFirst, {
    lg: 6
  }, /*#__PURE__*/React.createElement(BackgroundImage, {
    bgImage: backgroundImage
  }));
  const Column2 = /*#__PURE__*/React.createElement(ColumnSecond, {
    lg: 6
  }, /*#__PURE__*/React.createElement(InfoWrapper, null, /*#__PURE__*/React.createElement(CtaMinorText, null, minorText), /*#__PURE__*/React.createElement(CtaMajorText, {
    fSize: 48
  }, majorText), /*#__PURE__*/React.createElement(CtaDescription, null, description), renderLink(link)));
  return /*#__PURE__*/React.createElement(Cta, attributes, /*#__PURE__*/React.createElement(Container, {
    fluid: true
  }, shift ? /*#__PURE__*/React.createElement(Row, null, Column2, Column1) : /*#__PURE__*/React.createElement(Row, null, Column1, Column2)));
};
Cta4.propTypes = propTypes;
Cta4.defaultProps = defaultProps;