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

marketing blocks

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Newsletter1 = 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: "Newsletter1__Newsletter",
  componentId: "cedehb-0"
})(["background-color:#fff;padding:96px 64px;"]);

var NewsletterHeading = (0, _styledComponents["default"])(_core.Text).withConfig({
  displayName: "Newsletter1__NewsletterHeading",
  componentId: "cedehb-1"
})(["color:", ";font-weight:700;margin-bottom:24px;> span{display:block;}> span:last-child{color:", ";}"], function (_ref) {
  var colors = _ref.theme.colors;
  return colors.secondary;
}, function (_ref2) {
  var colors = _ref2.theme.colors;
  return colors.primary;
});

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

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

var NewsletterButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Newsletter1__NewsletterButton",
  componentId: "cedehb-4"
})(["font-weight:700;"]); // <= 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. */
  minorText: _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: 'Receive news and any answer?',
  minorText: 'Sign up for our newsletter.',
  input: {
    placeholder: 'Enter your email'
  },
  button: {
    text: 'Notify me',
    variation: 'fill'
  }
};

var Newsletter1 = function Newsletter1(props) {
  var majorText = props.majorText,
      minorText = props.minorText,
      input = props.input,
      button = props.button,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["majorText", "minorText", "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(NewsletterHeading, {
    fSize: 48
  }, /*#__PURE__*/_react["default"].createElement("span", null, majorText), /*#__PURE__*/_react["default"].createElement("span", null, minorText)), /*#__PURE__*/_react["default"].createElement(NewsletterGroup, null, /*#__PURE__*/_react["default"].createElement(_core.Input, (0, _extends2["default"])({
    type: "text",
    placeholder: input.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))));
};

exports.Newsletter1 = Newsletter1;
Newsletter1.propTypes = propTypes;
Newsletter1.defaultProps = defaultProps;