@lote-design-system/marketing-blocks/module/components/marketing/ctas/Cta1.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'; // => Dependent styled-components
// Our main component depends upon the following styled-components

const CtaItem = styled.div.withConfig({
  displayName: "Cta1__CtaItem",
  componentId: "sc-1y2ax8c-0"
})(["text-align:center;"]);
const CtaContent = styled.div.withConfig({
  displayName: "Cta1__CtaContent",
  componentId: "sc-1y2ax8c-1"
})(["background-color:", ";padding:24px 46px;align-items:center;justify-content:center;display:flex;flex-direction:column;", "{flex-direction:row;}"], ({
  theme
}) => theme.colors.white, ({
  theme
}) => theme.mediaQueries.md);
const CtaBadge = styled.div.withConfig({
  displayName: "Cta1__CtaBadge",
  componentId: "sc-1y2ax8c-2"
})(["background-color:", ";color:#fff;display:inline-block;font-size:14px;border-radius:22px;padding:8px 20px;margin:8px;"], ({
  theme
}) => theme.colors.primary);
const CtaText = styled.p.withConfig({
  displayName: "Cta1__CtaText",
  componentId: "sc-1y2ax8c-3"
})(["margin:0;color:", ";font-size:16px;a{color:", ";transition:color 0.5s ease;text-decoration:underline;&:hover{color:", ";}}"], ({
  theme
}) => theme.colors.text.primary, ({
  theme
}) => theme.colors.primary, ({
  theme
}) => theme.palettes.primary[6]); // <= End Dependent styled-components

const propTypes = {
  /** The text for the Cta. */
  ctaText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

  /** The text for the Badge. */
  badgeText: PropTypes.string
};
const defaultProps = {
  ctaText: /*#__PURE__*/React.createElement("span", null, "We are offering a", /*#__PURE__*/React.createElement("strong", {
    style: {
      margin: '0 4px'
    }
  }, "14-days trail"), ". Please", /*#__PURE__*/React.createElement("a", {
    href: "/",
    style: {
      margin: '0 4px'
    }
  }, "Purchase Stack"), "for $18 USD."),
  badgeText: 'Hot Sale'
};
/**
 * The text for the Badge.
 * @param text {string} - The text will appear on the badge
 * @return {null|*}
 */

const renderBadge = text => {
  if (typeof text === 'string' && text.length > 0) {
    return /*#__PURE__*/React.createElement(CtaItem, null, /*#__PURE__*/React.createElement(CtaBadge, null, text));
  } else {
    return null;
  }
};
/**
 * Render text on the Cta.
 * @param text {*} - The text appear on the Cta
 * @return {null|*}
 */


const renderText = text => {
  if (text) {
    return /*#__PURE__*/React.createElement(CtaItem, null, /*#__PURE__*/React.createElement(CtaText, null, text));
  } else {
    return null;
  }
};

export const Cta1 = props => {
  const {
    ctaText,
    badgeText
  } = props,
        attributes = _objectWithoutProperties(props, ["ctaText", "badgeText"]);

  return /*#__PURE__*/React.createElement(CtaContent, attributes, renderBadge(badgeText), renderText(ctaText));
};
Cta1.propTypes = propTypes;
Cta1.defaultProps = defaultProps;