@lote-design-system/marketing-blocks/main/components/marketing/footers/Footer5.js

marketing blocks

"use strict";

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

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

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 _icons = _interopRequireDefault(require("@lote-design-system/icons"));

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

// => Dependent styled-components
// Our main component depends upon the following styled-components
var Footer = _styledComponents["default"].footer.withConfig({
  displayName: "Footer5__Footer",
  componentId: "sc-1jeuxqx-0"
})(["background-color:#fff;padding:64px 0;"]);

var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Footer5__ContainerModify",
  componentId: "sc-1jeuxqx-1"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});

var FooterContent = _styledComponents["default"].div.withConfig({
  displayName: "Footer5__FooterContent",
  componentId: "sc-1jeuxqx-2"
})(["", "{text-align:center;}", "{display:flex;align-items:center;justify-content:space-between;}"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.mediaQueries.sm;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.md;
});

var ListInline = _styledComponents["default"].ul.withConfig({
  displayName: "Footer5__ListInline",
  componentId: "sc-1jeuxqx-3"
})(["margin:0;padding-left:0;list-style:none;> li{display:inline-block;> a{display:inline-block;padding:8px 12px;color:", ";transition:color 0.3s linear;&:hover{color:", ";}> svg{width:18px;height:18px;}}}> li:not(:last-child){margin-right:8px;}"], function (_ref4) {
  var colors = _ref4.theme.colors;
  return colors.text.secondary;
}, function (_ref5) {
  var colors = _ref5.theme.colors;
  return colors.primary;
});

var CopyrightText = _styledComponents["default"].p.withConfig({
  displayName: "Footer5__CopyrightText",
  componentId: "sc-1jeuxqx-4"
})(["color:", ";font-size:14px;font-weight:500;margin-bottom:8px;", "{margin-bottom:0;}"], function (_ref6) {
  var colors = _ref6.theme.colors;
  return colors.text.secondary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.mediaQueries.md;
}); // <= End Dependent styled-components


var socialLinkSchema = [{
  id: 1,
  href: '/',
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "facebook"
  })
}, {
  id: 2,
  href: '/',
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "instagram"
  })
}, {
  id: 3,
  href: '/',
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "twitter"
  })
}, {
  id: 4,
  href: '/',
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "github"
  })
}, {
  id: 5,
  href: '/',
  icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
    name: "linkedin"
  })
}];
var socialLinkShape = {
  id: _propTypes["default"].number.isRequired,
  href: _propTypes["default"].string.isRequired,
  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired
};
var propTypes = {
  /** Copyright text. */
  copyrightText: _propTypes["default"].string.isRequired,

  /** Array of social links */
  socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape(socialLinkShape)).isRequired
};
var defaultProps = {
  copyrightText: '© 2020 UI-Kit, Inc. All rights reserved.',
  socialLinks: socialLinkSchema
};
/**
 * 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["default"], {
      name: icon
    });
  } else {
    return null;
  }
};

var Footer5 = function Footer5(props) {
  var copyrightText = props.copyrightText,
      socialLinks = props.socialLinks,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["copyrightText", "socialLinks"]);
  return /*#__PURE__*/_react["default"].createElement(Footer, attributes, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(FooterContent, null, /*#__PURE__*/_react["default"].createElement(CopyrightText, null, copyrightText), Array.isArray(socialLinks) && socialLinks.length > 0 && /*#__PURE__*/_react["default"].createElement(ListInline, null, socialLinks.map(function (_ref8) {
    var id = _ref8.id,
        href = _ref8.href,
        icon = _ref8.icon;
    return /*#__PURE__*/_react["default"].createElement("li", {
      key: id
    }, /*#__PURE__*/_react["default"].createElement("a", {
      href: href
    }, renderIcon(icon)));
  })))));
};

exports.Footer5 = Footer5;
Footer5.propTypes = propTypes;
Footer5.defaultProps = defaultProps;