@kiwicom/orbit-components/lib/NavigationList/NavigationListItem/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
});
exports.default = void 0;

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

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

var _js = require("@adeira/js");

var _transition = _interopRequireDefault(require("../../utils/transition"));

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

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

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

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

var _getCssState = _interopRequireDefault(require("./helpers/getCssState"));

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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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 StyledNavigationListItem = (0, _styledComponents.default)(function (_ref) {
  var selected = _ref.selected,
      theme = _ref.theme,
      asComponent = _ref.asComponent,
      dataTest = _ref.dataTest,
      selectable = _ref.selectable,
      props = _objectWithoutProperties(_ref, ["selected", "theme", "asComponent", "dataTest", "selectable"]);

  var Component = props.href ? "a" : asComponent;
  return React.createElement(Component, _extends({
    "data-test": dataTest,
    type: !props.href ? "button" : undefined
  }, props));
}).withConfig({
  displayName: "NavigationListItem__StyledNavigationListItem",
  componentId: "sc-1pgpqbz-0"
})(["display:flex;text-decoration:none;position:relative;color:", ";cursor:pointer;border:0;outline:none;background-color:transparent;height:44px;padding:", ";", ";width:100%;transition:", ";", ";&:hover{", ";}&:focus{", ";}"], function (_ref2) {
  var theme = _ref2.theme,
      selected = _ref2.selected,
      selectable = _ref2.selectable;
  return selectable && selected ? theme.orbit.paletteProductNormal : theme.orbit.paletteInkNormal;
}, function (_ref3) {
  var theme = _ref3.theme;
  return (0, _rtl.rtlSpacing)("0 0 0 ".concat(theme.orbit.spaceLarge));
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["height:32px;padding:", ";"], function (_ref4) {
  var theme = _ref4.theme;
  return (0, _rtl.rtlSpacing)("0 0 0 ".concat(theme.orbit.spaceXXLarge));
})), (0, _transition.default)(["background-color", "box-shadow", "color"], "fast", "ease-in-out"), function (_ref5) {
  var theme = _ref5.theme,
      selected = _ref5.selected,
      selectable = _ref5.selectable;
  return selectable && selected && (0, _styledComponents.css)([":after{display:block;position:absolute;", ":0;content:\"\";background-color:", ";height:100%;width:3px;top:0;}"], _rtl.left, theme.orbit.paletteProductNormal);
}, (0, _getCssState.default)(_consts.default.HOVER), (0, _getCssState.default)(_consts.default.FOCUS));
StyledNavigationListItem.defaultProps = {
  theme: _defaultTheme.default
};

var StyledNavigationListItemWrapper = _styledComponents.default.div.withConfig({
  displayName: "NavigationListItem__StyledNavigationListItemWrapper",
  componentId: "sc-1pgpqbz-1"
})(["display:flex;align-items:center;"]);

var StyledNavigationListItemIcon = _styledComponents.default.div.withConfig({
  displayName: "NavigationListItem__StyledNavigationListItemIcon",
  componentId: "sc-1pgpqbz-2"
})(["display:flex;align-items:center;margin-", ":", ";height:", ";svg{height:", ";width:", ";}"], _rtl.right, function (_ref6) {
  var theme = _ref6.theme,
      hasMargin = _ref6.hasMargin;
  return hasMargin && theme.orbit.spaceXSmall;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.lineHeightTextNormal;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.widthIconSmall;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.heightIconSmall;
});

StyledNavigationListItemIcon.defaultProps = {
  theme: _defaultTheme.default
};

var StyledNavigationListItemContent = _styledComponents.default.div.withConfig({
  displayName: "NavigationListItem__StyledNavigationListItemContent",
  componentId: "sc-1pgpqbz-3"
})(["font-family:", ";font-size:", ";font-weight:", ";line-height:20px;"], function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.fontFamily;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.fontWeightMedium;
});

StyledNavigationListItemContent.defaultProps = {
  theme: _defaultTheme.default
}; // eslint-disable-next-line react/button-has-type

var DefaultComponent = function DefaultComponent(props) {
  return React.createElement("button", props);
};

var NavigationListItem = function NavigationListItem(_ref13) {
  var icon = _ref13.icon,
      children = _ref13.children,
      ariaLabel = _ref13.ariaLabel,
      _ref13$selectable = _ref13.selectable,
      selectable = _ref13$selectable === void 0 ? false : _ref13$selectable,
      selected = _ref13.selected,
      href = _ref13.href,
      external = _ref13.external,
      onClick = _ref13.onClick,
      _ref13$asComponent = _ref13.asComponent,
      asComponent = _ref13$asComponent === void 0 ? DefaultComponent : _ref13$asComponent,
      dataTest = _ref13.dataTest,
      tabIndex = _ref13.tabIndex;
  (0, _js.warning)(!(!children && !ariaLabel), "Warning: children or ariaLabel property is missing on NavigationListItem. Use ariaLabel property to add aria-label to be accessible for screen readers. More information https://orbit.kiwi/components/NavigationListItem/");
  return React.createElement(StyledNavigationListItem, {
    tabIndex: tabIndex,
    "aria-label": ariaLabel,
    onClick: onClick,
    selected: selected,
    selectable: selectable,
    asComponent: asComponent,
    href: href,
    dataTest: dataTest,
    rel: href && external ? "noopener noreferrer" : undefined,
    target: href && external ? "_blank" : undefined
  }, React.createElement(StyledNavigationListItemWrapper, null, icon && React.createElement(StyledNavigationListItemIcon, {
    hasMargin: !!children
  }, icon), children && React.createElement(StyledNavigationListItemContent, null, children)));
};

var _default = NavigationListItem;
exports.default = _default;