@lote-design-system/marketing-blocks/module/components/marketing/newsletter/Newsletter1.js

marketing blocks

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

const Newsletter = styled.div.withConfig({
  displayName: "Newsletter1__Newsletter",
  componentId: "cedehb-0"
})(["background-color:#fff;padding:96px 64px;"]);
const NewsletterHeading = styled(Text).withConfig({
  displayName: "Newsletter1__NewsletterHeading",
  componentId: "cedehb-1"
})(["color:", ";font-weight:700;margin-bottom:24px;> span{display:block;}> span:last-child{color:", ";}"], ({
  theme: {
    colors
  }
}) => colors.secondary, ({
  theme: {
    colors
  }
}) => colors.primary);
const NewsletterGroup = styled.div.withConfig({
  displayName: "Newsletter1__NewsletterGroup",
  componentId: "cedehb-2"
})(["> input{margin-bottom:12px;}", "{display:flex;flex-wrap:wrap;align-items:stretch;max-width:540px;> input{position:relative;flex:1 1 auto;width:1%;margin-bottom:0;}}"], ({
  theme
}) => theme.mediaQueries.sm);
const GroupAppend = styled.div.withConfig({
  displayName: "Newsletter1__GroupAppend",
  componentId: "cedehb-3"
})(["> button{width:100%;}", "{display:flex;margin-left:16px;}"], ({
  theme
}) => theme.mediaQueries.sm);
const NewsletterButton = styled(Button).withConfig({
  displayName: "Newsletter1__NewsletterButton",
  componentId: "cedehb-4"
})(["font-weight:700;"]); // <= End Dependent styled-components

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

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

  /** The input properties for the Newsletter. */
  input: PropTypes.shape({
    placeholder: PropTypes.string.isRequired
  }).isRequired,

  /** The button properties for the Newsletter. */
  button: PropTypes.shape({
    text: PropTypes.string.isRequired,
    variation: PropTypes.string.isRequired,
    color: PropTypes.string
  }).isRequired
};
const defaultProps = {
  majorText: 'Receive news and any answer?',
  minorText: 'Sign up for our newsletter.',
  input: {
    placeholder: 'Enter your email'
  },
  button: {
    text: 'Notify me',
    variation: 'fill'
  }
};
export const Newsletter1 = props => {
  const {
    majorText,
    minorText,
    input,
    button
  } = props,
        attributes = _objectWithoutProperties(props, ["majorText", "minorText", "input", "button"]);

  const {
    placeholder
  } = input,
        inputMore = _objectWithoutProperties(input, ["placeholder"]);

  const {
    variation,
    text,
    color
  } = button,
        buttonMore = _objectWithoutProperties(button, ["variation", "text", "color"]);

  return /*#__PURE__*/React.createElement(Newsletter, attributes, /*#__PURE__*/React.createElement(NewsletterHeading, {
    fSize: 48
  }, /*#__PURE__*/React.createElement("span", null, majorText), /*#__PURE__*/React.createElement("span", null, minorText)), /*#__PURE__*/React.createElement(NewsletterGroup, null, /*#__PURE__*/React.createElement(Input, _extends({
    type: "text",
    placeholder: input.placeholder,
    autoComplete: "off"
  }, inputMore)), /*#__PURE__*/React.createElement(GroupAppend, null, /*#__PURE__*/React.createElement(NewsletterButton, _extends({
    type: "button",
    color: color,
    variation: variation
  }, buttonMore), text))));
};
Newsletter1.propTypes = propTypes;
Newsletter1.defaultProps = defaultProps;