@lote-design-system/marketing-blocks/module/components/marketing/ctas/Cta3.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 { 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: "Cta3__Cta",
  componentId: "o4bcwr-0"
})(["background-color:#fff;padding:96px 64px;text-align:center;"]);
const CtaText = styled(Text).withConfig({
  displayName: "Cta3__CtaText",
  componentId: "o4bcwr-1"
})(["color:", ";font-weight:700;margin-bottom:24px;> span{display:block;}"], ({
  theme: {
    colors
  }
}) => colors.secondary);
const CtaGroup = styled.div.withConfig({
  displayName: "Cta3__CtaGroup",
  componentId: "o4bcwr-2"
})(["> a{padding:12px 30px;font-size:20px;display:block;width:100%;}> a:not(:last-child){margin-right:0;margin-bottom:8px;}", "{display:inline-flex;vertical-align:middle;> a{flex:1 1 auto;display:inline-block;width:auto;}> a:not(:last-child){margin-right:16px;margin-bottom:0;}}"], ({
  theme
}) => theme.mediaQueries.md); // <= End Dependent styled-components

const linkShape = {
  id: PropTypes.number.isRequired,
  href: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  variation: PropTypes.string.isRequired,
  color: PropTypes.string
};
const linkSchema = [{
  id: 1,
  href: '/',
  text: 'Get Started',
  variation: 'fill',
  color: 'primary'
}, {
  id: 2,
  href: '/',
  text: 'Sign up',
  variation: 'primarySubtle'
}];
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,

  /** Links appear on the Cta. */
  links: PropTypes.arrayOf(PropTypes.shape(linkShape))
};
const defaultProps = {
  majorText: 'Ready to dive in?',
  minorText: 'Start your free trial today.',
  links: linkSchema
};
/**
 * Render Links for the Cta
 * @param data {Array} - Links schema for the Cta
 * @return {null|*} - Returns the JSX or null
 */

const renderLinks = data => {
  if (Array.isArray(data) && data.length > 0) {
    return /*#__PURE__*/React.createElement(CtaGroup, null, data.map(({
      id,
      href,
      text,
      variation,
      color
    }) => {
      return /*#__PURE__*/React.createElement(Button, {
        key: id,
        href: href,
        variation: variation,
        color: color
      }, text);
    }));
  } else {
    return null;
  }
};

export const Cta3 = props => {
  const {
    majorText,
    minorText,
    links
  } = props,
        attributes = _objectWithoutProperties(props, ["majorText", "minorText", "links"]);

  return /*#__PURE__*/React.createElement(Cta, attributes, /*#__PURE__*/React.createElement(CtaText, {
    fSize: 48
  }, /*#__PURE__*/React.createElement("span", null, majorText), /*#__PURE__*/React.createElement("span", null, minorText)), renderLinks(links));
};
Cta3.propTypes = propTypes;
Cta3.defaultProps = defaultProps;