@kiwicom/orbit-components/lib/NavigationList/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "NavigationListItem", {
  enumerable: true,
  get: function get() {
    return _NavigationListItem.default;
  }
});
exports.default = void 0;

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

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

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

var _Text = _interopRequireDefault(require("../Text"));

var _ButtonLink = require("../ButtonLink");

var _consts = require("../ButtonLink/consts");

var _getTypeToken = _interopRequireDefault(require("../ButtonLink/helpers/getTypeToken"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _rtl = require("../utils/rtl");

var _consts2 = _interopRequireDefault(require("./consts"));

var _NavigationListSeparator = _interopRequireWildcard(require("./components/NavigationListSeparator"));

var _isType = require("./helpers/isType");

var _NavigationListItem = _interopRequireDefault(require("./NavigationListItem"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var StyledNavigationListContent = (0, _styledComponents.default)(function (_ref) {
  var type = _ref.type,
      theme = _ref.theme,
      props = _objectWithoutProperties(_ref, ["type", "theme"]);

  return React.createElement("ul", props);
}).withConfig({
  displayName: "NavigationList__StyledNavigationListContent",
  componentId: "riks1e-0"
})(["display:flex;width:100%;flex-direction:", ";list-style:none;padding:0;", ";", ";"], function (_ref2) {
  var type = _ref2.type;
  return (0, _isType.isNavigation)(type) ? "column" : "row";
}, function (_ref3) {
  var type = _ref3.type;
  return (0, _isType.isInline)(type) && (0, _styledComponents.css)(["", "{padding:0 ", ";:hover{color:", "!important;}}"], _ButtonLink.StyledButtonLink, function (_ref4) {
    var theme = _ref4.theme;
    return theme.orbit.spaceXSmall;
  }, function (_ref5) {
    var theme = _ref5.theme;
    return (0, _getTypeToken.default)(_consts.TOKENS.colorTextButtonHover)({
      theme: theme,
      type: _consts.TYPES.PRIMARY
    });
  });
}, function (_ref6) {
  var type = _ref6.type;
  return (0, _isType.isNavigation)(type) ? (0, _styledComponents.css)(["margin:", ";"], function (_ref7) {
    var theme = _ref7.theme;
    return (0, _rtl.rtlSpacing)("0 0 ".concat(theme.orbit.spaceLarge, " 0"));
  }) : (0, _styledComponents.css)(["margin:0;"]);
});
StyledNavigationListContent.defaultProps = {
  theme: _defaultTheme.default
};
var StyledNavigationList = (0, _styledComponents.default)(function (_ref8) {
  var theme = _ref8.theme,
      type = _ref8.type,
      props = _objectWithoutProperties(_ref8, ["theme", "type"]);

  return React.createElement("div", props);
}).withConfig({
  displayName: "NavigationList__StyledNavigationList",
  componentId: "riks1e-1"
})(["display:flex;flex-direction:column;width:100%;", ";"], function (_ref9) {
  var type = _ref9.type;
  return (0, _isType.isNavigation)(type) ? (0, _styledComponents.css)(["padding:", ";:last-child{padding-bottom:0;", "{display:none;}", "{margin:0;}}"], function (_ref10) {
    var theme = _ref10.theme;
    return (0, _rtl.rtlSpacing)("0 0 ".concat(theme.orbit.spaceLarge, " 0"));
  }, _NavigationListSeparator.StyledNavigationListSeparator, StyledNavigationListContent) : (0, _styledComponents.css)(["> *{margin-", ":4px;}"], _rtl.right);
});
StyledNavigationList.defaultProps = {
  theme: _defaultTheme.default
};

var StyledNavigationListTitle = _styledComponents.default.div.withConfig({
  displayName: "NavigationList__StyledNavigationListTitle",
  componentId: "riks1e-2"
})(["padding:0 ", ";", ";"], function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.spaceMedium;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["padding:0 ", ";"], function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.spaceXLarge;
})));

StyledNavigationListTitle.defaultProps = {
  theme: _defaultTheme.default
};
var StyledNavigationListChild = (0, _styledComponents.default)(function (_ref13) {
  var theme = _ref13.theme,
      type = _ref13.type,
      props = _objectWithoutProperties(_ref13, ["theme", "type"]);

  return React.createElement("li", props);
}).withConfig({
  displayName: "NavigationList__StyledNavigationListChild",
  componentId: "riks1e-3"
})(["", ";"], function (_ref14) {
  var type = _ref14.type;
  return (0, _isType.isInline)(type) && (0, _styledComponents.css)(["margin-", ":4px;:last-child{margin:0;}"], _rtl.right);
});

var NavigationList = function NavigationList(_ref15) {
  var children = _ref15.children,
      title = _ref15.title,
      dataTest = _ref15.dataTest,
      _ref15$type = _ref15.type,
      type = _ref15$type === void 0 ? _consts2.default.NAVIGATION : _ref15$type;
  return React.createElement(StyledNavigationList, {
    "data-test": dataTest,
    type: type
  }, title && React.createElement(StyledNavigationListTitle, null, React.createElement(_Text.default, {
    type: "secondary",
    weight: "bold",
    uppercase: true,
    size: "small",
    spaceAfter: "normal"
  }, title)), React.createElement(StyledNavigationListContent, {
    type: type
  }, React.Children.map(children, function (item) {
    return React.createElement(StyledNavigationListChild, {
      type: type
    }, React.isValidElement(item) ? React.cloneElement(item) : item);
  })), (0, _isType.isNavigation)(type) && React.createElement(_NavigationListSeparator.default, null));
};

var _default = NavigationList;
exports.default = _default;