@kiwicom/orbit-components/es/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.

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

import * as React from "react";
import styled, { css } from "styled-components";
import { warning } from "@adeira/js";
import transition from "../../utils/transition";
import { right, left, rtlSpacing } from "../../utils/rtl";
import defaultTheme from "../../defaultTheme";
import STATES from "./consts";
import mq from "../../utils/mediaQuery";
import getCssState from "./helpers/getCssState";
const StyledNavigationListItem = styled((_ref) => {
  let {
    selected,
    theme,
    asComponent,
    dataTest,
    selectable
  } = _ref,
      props = _objectWithoutProperties(_ref, ["selected", "theme", "asComponent", "dataTest", "selectable"]);

  const 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{", ";}"], ({
  theme,
  selected,
  selectable
}) => selectable && selected ? theme.orbit.paletteProductNormal : theme.orbit.paletteInkNormal, ({
  theme
}) => rtlSpacing(`0 0 0 ${theme.orbit.spaceLarge}`), mq.largeMobile(css(["height:32px;padding:", ";"], ({
  theme
}) => rtlSpacing(`0 0 0 ${theme.orbit.spaceXXLarge}`))), transition(["background-color", "box-shadow", "color"], "fast", "ease-in-out"), ({
  theme,
  selected,
  selectable
}) => selectable && selected && css([":after{display:block;position:absolute;", ":0;content:\"\";background-color:", ";height:100%;width:3px;top:0;}"], left, theme.orbit.paletteProductNormal), getCssState(STATES.HOVER), getCssState(STATES.FOCUS));
StyledNavigationListItem.defaultProps = {
  theme: defaultTheme
};
const StyledNavigationListItemWrapper = styled.div.withConfig({
  displayName: "NavigationListItem__StyledNavigationListItemWrapper",
  componentId: "sc-1pgpqbz-1"
})(["display:flex;align-items:center;"]);
const StyledNavigationListItemIcon = styled.div.withConfig({
  displayName: "NavigationListItem__StyledNavigationListItemIcon",
  componentId: "sc-1pgpqbz-2"
})(["display:flex;align-items:center;margin-", ":", ";height:", ";svg{height:", ";width:", ";}"], right, ({
  theme,
  hasMargin
}) => hasMargin && theme.orbit.spaceXSmall, ({
  theme
}) => theme.orbit.lineHeightTextNormal, ({
  theme
}) => theme.orbit.widthIconSmall, ({
  theme
}) => theme.orbit.heightIconSmall);
StyledNavigationListItemIcon.defaultProps = {
  theme: defaultTheme
};
const StyledNavigationListItemContent = styled.div.withConfig({
  displayName: "NavigationListItem__StyledNavigationListItemContent",
  componentId: "sc-1pgpqbz-3"
})(["font-family:", ";font-size:", ";font-weight:", ";line-height:20px;"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.fontWeightMedium);
StyledNavigationListItemContent.defaultProps = {
  theme: defaultTheme
}; // eslint-disable-next-line react/button-has-type

const DefaultComponent = props => React.createElement("button", props);

const NavigationListItem = ({
  icon,
  children,
  ariaLabel,
  selectable = false,
  selected,
  href,
  external,
  onClick,
  asComponent = DefaultComponent,
  dataTest,
  tabIndex
}) => {
  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)));
};

export default NavigationListItem;