@lote-design-system/marketing-blocks/main/components/marketing/banners/Banner3.js

marketing blocks

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

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

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

var _reactTransitionGroup = require("react-transition-group");

var _icons = require("@lote-design-system/icons");

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

var _lodash = require("lodash");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

// => Dependent styled-components
// Our main component depends upon the following styled-components
var BannerWrapper = _styledComponents["default"].div.withConfig({
  displayName: "Banner3__BannerWrapper",
  componentId: "o57zlb-0"
})(["", " ", ";position:fixed;z-index:1030;opacity:0;transition:opacity ", "s linear;"], function (_ref) {
  var status = _ref.status;

  if (status === 'entered') {
    return (0, _styledComponents.css)(["&{opacity:1;}"]);
  } else if (status === 'exited') {
    return (0, _styledComponents.css)(["&{display:none;}"]);
  }
}, function (_ref2) {
  var fixed = _ref2.fixed;

  if (fixed === 'top') {
    return (0, _styledComponents.css)(["position:fixed;top:0;right:0;left:0;"]);
  } else if (fixed === 'bottom') {
    return (0, _styledComponents.css)(["right:0;bottom:0;left:0;"]);
  } else {
    return (0, _styledComponents.css)([""]);
  }
}, function (_ref3) {
  var timeout = _ref3.timeout;
  return timeout / 1000;
});

var Banner = _styledComponents["default"].div.withConfig({
  displayName: "Banner3__Banner",
  componentId: "o57zlb-1"
})(["background-color:", ";padding:8px 24px;"], function (_ref4) {
  var colors = _ref4.theme.colors;
  return colors.primary;
});

var BannerContent = _styledComponents["default"].div.withConfig({
  displayName: "Banner3__BannerContent",
  componentId: "o57zlb-2"
})(["", "{display:flex;align-items:center;}"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.mediaQueries.md;
});

var BannerText = _styledComponents["default"].p.withConfig({
  displayName: "Banner3__BannerText",
  componentId: "o57zlb-3"
})(["color:#fff;font-size:16px;margin-bottom:8px;", "{margin-bottom:0;flex-grow:1;}", "{text-align:center;}"], function (_ref6) {
  var theme = _ref6.theme;
  return theme.mediaQueries.md;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.mediaQueries.lg;
}); // Side 2


var BannerSide2 = _styledComponents["default"].div.withConfig({
  displayName: "Banner3__BannerSide2",
  componentId: "o57zlb-4"
})(["", "{text-align:center;}", "{display:flex;align-items:center;}"], function (_ref8) {
  var theme = _ref8.theme;
  return theme.mediaQueries.md;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.mediaQueries.lg;
});

var BannerLearnLink = _styledComponents["default"].a.withConfig({
  displayName: "Banner3__BannerLearnLink",
  componentId: "o57zlb-5"
})(["position:relative;margin-left:16px;color:#fff;span:first-child{margin-right:8px;}&:after{content:'';position:absolute;width:100%;bottom:-6px;left:0;height:1px;background-color:#fff;transition:width 0.4s linear;}&:hover{&:after{width:0;}}"]);

var BannerCloseButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Banner3__BannerCloseButton",
  componentId: "o57zlb-6"
})(["width:46px;height:46px;padding:4px;font-size:18px;"]); // <= End Dependent styled-components

var TransitionPropTypeKeys = ['in', 'mountOnEnter', 'unmountOnExit', 'appear', 'enter', 'exit', 'timeout', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];
var propTypes = {
  /** If the banner is currently showing or not (default: true) */
  "in": _propTypes["default"].bool.isRequired,

  /** The link for the Banner appear on the right side. */
  link: _propTypes["default"].shape({
    href: _propTypes["default"].string.isRequired,
    text: _propTypes["default"].string.isRequired,
    variation: _propTypes["default"].string.isRequired,
    icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
    color: _propTypes["default"].string
  }),

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

  /** Position the banner at the top/bottom of the viewport. The Banner will use position: fixed,
   meaning they’re pulled from the normal flow of the DOM. */
  fixed: _propTypes["default"].oneOf(['top', 'bottom'])
};

var defaultProps = _objectSpread(_objectSpread({}, _reactTransitionGroup.Transition.defaultProps), {}, {
  /* Transition on the first mount set appear to true. */
  appear: true,

  /* Enable enter transitions. */
  enter: true,

  /* Enable exit transitions. */
  exit: true,

  /** Controls if the banner is currently showing or not (default: true) */
  "in": true,

  /* The duration of the transition, in milliseconds. */
  timeout: 900,
  link: {
    href: '/',
    text: 'Learn more',
    variation: 'white',
    icon: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "arrow-right"
    })
  },
  text: 'Big news! We’ re excited to announce a brand new product.',
  fixed: 'bottom'
});
/**
 * Returns the JSX or null for the icon.
 * @param icon {*} - The icon will React.element or a string
 * @return {null|*} - Returns the JSX or null
 */


var renderIcon = function renderIcon(icon) {
  if (_react["default"].isValidElement(icon)) {
    return icon;
  } else if (typeof icon === 'string' && icon.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: icon
    });
  } else {
    return null;
  }
};

var Banner3 = function Banner3(props) {
  var show = props["in"],
      icon = props.icon,
      link = props.link,
      text = props.text,
      fixed = props.fixed,
      timeout = props.timeout,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["in", "icon", "link", "text", "fixed", "timeout"]);

  var _useState = (0, _react.useState)(show),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      fadeIn = _useState2[0],
      setFadeIn = _useState2[1];

  var closeBanner = function closeBanner() {
    return setFadeIn(false);
  }; // pick Transition props


  var transitionProps = (0, _lodash.pick)(attributes, TransitionPropTypeKeys); // Remove Transition props

  var attr = (0, _lodash.omit)(attributes, TransitionPropTypeKeys);
  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.Transition, (0, _extends2["default"])({}, transitionProps, {
    "in": fadeIn,
    timeout: timeout
  }), function (status) {
    return /*#__PURE__*/_react["default"].createElement(BannerWrapper, (0, _extends2["default"])({
      status: status,
      fixed: fixed,
      timeout: timeout
    }, attr), /*#__PURE__*/_react["default"].createElement(Banner, null, /*#__PURE__*/_react["default"].createElement(BannerContent, null, /*#__PURE__*/_react["default"].createElement(BannerText, null, /*#__PURE__*/_react["default"].createElement("span", null, text), link && /*#__PURE__*/_react["default"].createElement(BannerLearnLink, {
      href: link.href,
      color: link.color,
      variation: link.variation
    }, /*#__PURE__*/_react["default"].createElement("span", null, link.text), /*#__PURE__*/_react["default"].createElement("span", null, renderIcon(link.icon)))), /*#__PURE__*/_react["default"].createElement(BannerSide2, null, /*#__PURE__*/_react["default"].createElement(BannerCloseButton, {
      color: "primary",
      variation: "fill",
      type: "button",
      onClick: closeBanner
    }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
      name: "x"
    }))))));
  });
};

exports.Banner3 = Banner3;
Banner3.propTypes = propTypes;
Banner3.defaultProps = defaultProps;