@lote-design-system/marketing-blocks/main/components/marketing/newsletter/Newsletter2.js

marketing blocks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Newsletter2 = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _core = require("@lote-design-system/core");

// => Dependent styled-components
// Our main component depends upon the following styled-components
var Newsletter = _styledComponents["default"].div.withConfig({
  displayName: "Newsletter2__Newsletter",
  componentId: "tbkh8i-0"
})(["background-color:", ";padding:96px 0;"], function (_ref) {
  var colors = _ref.theme.colors;
  return colors.text.title;
});

var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Newsletter2__ContainerModify",
  componentId: "tbkh8i-1"
})(["max-width:", ";"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.maxContainerWidth;
});
var ColumnModify = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Newsletter2__ColumnModify",
  componentId: "tbkh8i-2"
})(["margin-bottom:30px;", "{margin-bottom:0;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.lg;
});

var NewsletterHeading = _styledComponents["default"].h1.withConfig({
  displayName: "Newsletter2__NewsletterHeading",
  componentId: "tbkh8i-3"
})(["color:#fff;font-size:32px;font-weight:700;margin-bottom:8px;"]);

var NewsletterDescription = _styledComponents["default"].p.withConfig({
  displayName: "Newsletter2__NewsletterDescription",
  componentId: "tbkh8i-4"
})(["font-size:14px;color:#fff;margin-bottom:0;"]);

var NewsletterGroup = _styledComponents["default"].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;}}"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.mediaQueries.sm;
});

var GroupAppend = _styledComponents["default"].div.withConfig({
  displayName: "Newsletter2__GroupAppend",
  componentId: "tbkh8i-6"
})(["> button{width:100%;}", "{display:flex;margin-left:16px;}"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.mediaQueries.sm;
});

var NewsletterButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Newsletter2__NewsletterButton",
  componentId: "tbkh8i-7"
})(["font-weight:700;"]);

var NewsletterPolicy = _styledComponents["default"].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


var propTypes = {
  /** The Major text for the Newsletter. */
  majorText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,

  /** The Minor text for the Newsletter. */
  description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,

  /** The policy text for the Newsletter. */
  policyText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,

  /** The input properties for the Newsletter. */
  input: _propTypes["default"].shape({
    placeholder: _propTypes["default"].string.isRequired
  }).isRequired,

  /** The button properties for the Newsletter. */
  button: _propTypes["default"].shape({
    text: _propTypes["default"].string.isRequired,
    variation: _propTypes["default"].string.isRequired,
    color: _propTypes["default"].string
  }).isRequired
};
var 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["default"].createElement("span", null, "We care about the protection of your data. Read our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
    href: "/"
  }, "Privacy Policy.")),
  input: {
    placeholder: 'Enter your email'
  },
  button: {
    text: 'Notify me',
    variation: 'fill'
  }
};

var Newsletter2 = function Newsletter2(props) {
  var majorText = props.majorText,
      description = props.description,
      policyText = props.policyText,
      input = props.input,
      button = props.button,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["majorText", "description", "policyText", "input", "button"]);
  var placeholder = input.placeholder,
      inputMore = (0, _objectWithoutProperties2["default"])(input, ["placeholder"]);
  var variation = button.variation,
      text = button.text,
      color = button.color,
      buttonMore = (0, _objectWithoutProperties2["default"])(button, ["variation", "text", "color"]);
  return /*#__PURE__*/_react["default"].createElement(Newsletter, attributes, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(_core.Row, null, /*#__PURE__*/_react["default"].createElement(ColumnModify, {
    lg: 6
  }, /*#__PURE__*/_react["default"].createElement(NewsletterHeading, null, majorText), /*#__PURE__*/_react["default"].createElement(NewsletterDescription, null, description)), /*#__PURE__*/_react["default"].createElement(ColumnModify, {
    lg: 6
  }, /*#__PURE__*/_react["default"].createElement(NewsletterGroup, null, /*#__PURE__*/_react["default"].createElement(_core.Input, (0, _extends2["default"])({
    type: "text",
    placeholder: placeholder,
    autoComplete: "off"
  }, inputMore)), /*#__PURE__*/_react["default"].createElement(GroupAppend, null, /*#__PURE__*/_react["default"].createElement(NewsletterButton, (0, _extends2["default"])({
    type: "button",
    color: color,
    variation: variation
  }, buttonMore), text))), /*#__PURE__*/_react["default"].createElement(NewsletterPolicy, null, policyText)))));
};

exports.Newsletter2 = Newsletter2;
Newsletter2.propTypes = propTypes;
Newsletter2.defaultProps = defaultProps;