@lote-design-system/marketing-blocks/module/components/marketing/newsletter/Newsletter2.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 { Container, Row, Column, Button, Input } from '@lote-design-system/core'; // => Dependent styled-components
// Our main component depends upon the following styled-components

const Newsletter = styled.div.withConfig({
  displayName: "Newsletter2__Newsletter",
  componentId: "tbkh8i-0"
})(["background-color:", ";padding:96px 0;"], ({
  theme: {
    colors
  }
}) => colors.text.title);
const ContainerModify = styled(Container).withConfig({
  displayName: "Newsletter2__ContainerModify",
  componentId: "tbkh8i-1"
})(["max-width:", ";"], ({
  theme
}) => theme.maxContainerWidth);
const ColumnModify = styled(Column).withConfig({
  displayName: "Newsletter2__ColumnModify",
  componentId: "tbkh8i-2"
})(["margin-bottom:30px;", "{margin-bottom:0;}"], ({
  theme
}) => theme.mediaQueries.lg);
const NewsletterHeading = styled.h1.withConfig({
  displayName: "Newsletter2__NewsletterHeading",
  componentId: "tbkh8i-3"
})(["color:#fff;font-size:32px;font-weight:700;margin-bottom:8px;"]);
const NewsletterDescription = styled.p.withConfig({
  displayName: "Newsletter2__NewsletterDescription",
  componentId: "tbkh8i-4"
})(["font-size:14px;color:#fff;margin-bottom:0;"]);
const NewsletterGroup = styled.div.withConfig({
  displayName: "Newsletter2__NewsletterGroup",
  componentId: "tbkh8i-5"
})(["> input{margin-bottom:12px;}", "{display:flex;flex-wrap:wrap;align-items:stretch;> input{position:relative;flex:1 1 auto;width:1%;margin-bottom:0;}}"], ({
  theme
}) => theme.mediaQueries.sm);
const GroupAppend = styled.div.withConfig({
  displayName: "Newsletter2__GroupAppend",
  componentId: "tbkh8i-6"
})(["> button{width:100%;}", "{display:flex;margin-left:16px;}"], ({
  theme
}) => theme.mediaQueries.sm);
const NewsletterButton = styled(Button).withConfig({
  displayName: "Newsletter2__NewsletterButton",
  componentId: "tbkh8i-7"
})(["font-weight:700;"]);
const NewsletterPolicy = styled.p.withConfig({
  displayName: "Newsletter2__NewsletterPolicy",
  componentId: "tbkh8i-8"
})(["font-size:14px;color:#fff;margin-top:12px;margin-bottom:0;a{color:#fff;text-decoration:underline;&:hover{text-decoration:none;}}"]); // <= 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. */
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

  /** The policy text for the Newsletter. */
  policyText: 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: 'Sign up for our newsletter',
  description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of satisfaction.',
  policyText: /*#__PURE__*/React.createElement("span", null, "We care about the protection of your data. Read our", ' ', /*#__PURE__*/React.createElement("a", {
    href: "/"
  }, "Privacy Policy.")),
  input: {
    placeholder: 'Enter your email'
  },
  button: {
    text: 'Notify me',
    variation: 'fill'
  }
};
export const Newsletter2 = props => {
  const {
    majorText,
    description,
    policyText,
    input,
    button
  } = props,
        attributes = _objectWithoutProperties(props, ["majorText", "description", "policyText", "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(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(ColumnModify, {
    lg: 6
  }, /*#__PURE__*/React.createElement(NewsletterHeading, null, majorText), /*#__PURE__*/React.createElement(NewsletterDescription, null, description)), /*#__PURE__*/React.createElement(ColumnModify, {
    lg: 6
  }, /*#__PURE__*/React.createElement(NewsletterGroup, null, /*#__PURE__*/React.createElement(Input, _extends({
    type: "text",
    placeholder: placeholder,
    autoComplete: "off"
  }, inputMore)), /*#__PURE__*/React.createElement(GroupAppend, null, /*#__PURE__*/React.createElement(NewsletterButton, _extends({
    type: "button",
    color: color,
    variation: variation
  }, buttonMore), text))), /*#__PURE__*/React.createElement(NewsletterPolicy, null, policyText)))));
};
Newsletter2.propTypes = propTypes;
Newsletter2.defaultProps = defaultProps;