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

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

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; }

import * as React from "react";
import styled, { css } from "styled-components";
import mq from "../utils/mediaQuery";
import Text from "../Text";
import { StyledButtonLink } from "../ButtonLink";
import { TOKENS, TYPES as BUTTON_TYPES } from "../ButtonLink/consts";
import getTypeToken from "../ButtonLink/helpers/getTypeToken";
import defaultTheme from "../defaultTheme";
import { rtlSpacing, right } from "../utils/rtl";
import TYPES from "./consts";
import NavigationListSeparator, { StyledNavigationListSeparator } from "./components/NavigationListSeparator";
import { isNavigation, isInline } from "./helpers/isType";
const StyledNavigationListContent = styled((_ref) => {
  let {
    type,
    theme
  } = _ref,
      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;", ";", ";"], ({
  type
}) => isNavigation(type) ? "column" : "row", ({
  type
}) => isInline(type) && css(["", "{padding:0 ", ";:hover{color:", "!important;}}"], StyledButtonLink, ({
  theme
}) => theme.orbit.spaceXSmall, ({
  theme
}) => getTypeToken(TOKENS.colorTextButtonHover)({
  theme,
  type: BUTTON_TYPES.PRIMARY
})), ({
  type
}) => isNavigation(type) ? css(["margin:", ";"], ({
  theme
}) => rtlSpacing(`0 0 ${theme.orbit.spaceLarge} 0`)) : css(["margin:0;"]));
StyledNavigationListContent.defaultProps = {
  theme: defaultTheme
};
const StyledNavigationList = styled((_ref2) => {
  let {
    theme,
    type
  } = _ref2,
      props = _objectWithoutProperties(_ref2, ["theme", "type"]);

  return React.createElement("div", props);
}).withConfig({
  displayName: "NavigationList__StyledNavigationList",
  componentId: "riks1e-1"
})(["display:flex;flex-direction:column;width:100%;", ";"], ({
  type
}) => isNavigation(type) ? css(["padding:", ";:last-child{padding-bottom:0;", "{display:none;}", "{margin:0;}}"], ({
  theme
}) => rtlSpacing(`0 0 ${theme.orbit.spaceLarge} 0`), StyledNavigationListSeparator, StyledNavigationListContent) : css(["> *{margin-", ":4px;}"], right));
StyledNavigationList.defaultProps = {
  theme: defaultTheme
};
const StyledNavigationListTitle = styled.div.withConfig({
  displayName: "NavigationList__StyledNavigationListTitle",
  componentId: "riks1e-2"
})(["padding:0 ", ";", ";"], ({
  theme
}) => theme.orbit.spaceMedium, mq.largeMobile(css(["padding:0 ", ";"], ({
  theme
}) => theme.orbit.spaceXLarge)));
StyledNavigationListTitle.defaultProps = {
  theme: defaultTheme
};
const StyledNavigationListChild = styled((_ref3) => {
  let {
    theme,
    type
  } = _ref3,
      props = _objectWithoutProperties(_ref3, ["theme", "type"]);

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

const NavigationList = ({
  children,
  title,
  dataTest,
  type = TYPES.NAVIGATION
}) => React.createElement(StyledNavigationList, {
  "data-test": dataTest,
  type: type
}, title && React.createElement(StyledNavigationListTitle, null, React.createElement(Text, {
  type: "secondary",
  weight: "bold",
  uppercase: true,
  size: "small",
  spaceAfter: "normal"
}, title)), React.createElement(StyledNavigationListContent, {
  type: type
}, React.Children.map(children, item => React.createElement(StyledNavigationListChild, {
  type: type
}, React.isValidElement(item) ? React.cloneElement(item) : item))), isNavigation(type) && React.createElement(NavigationListSeparator, null));

export default NavigationList;
export { default as NavigationListItem } from "./NavigationListItem";