@kiwicom/orbit-components/es/List/ListItem/index.js

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

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { useContext } from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import CircleSmall from "../../icons/CircleSmall";
import { rtlSpacing } from "../../utils/rtl";
import { StyledCarrierLogo } from "../../CarrierLogo";
import { SIZES, TYPES } from "../consts";
import { StyledText } from "../../Text";
import ListContext from "../ListContext";
export var getLineHeightToken = function getLineHeightToken(_ref) {
  var _lineHeightTokens;

  var theme = _ref.theme,
      size = _ref.size;
  var lineHeightTokens = (_lineHeightTokens = {}, _defineProperty(_lineHeightTokens, SIZES.SMALL, theme.orbit.lineHeightTextSmall), _defineProperty(_lineHeightTokens, SIZES.NORMAL, theme.orbit.lineHeightTextNormal), _defineProperty(_lineHeightTokens, SIZES.LARGE, theme.orbit.lineHeightTextLarge), _lineHeightTokens);
  return lineHeightTokens[size];
};

var getSizeTokenLabel = function getSizeTokenLabel(_ref2) {
  var _sizeTokens;

  var theme = _ref2.theme,
      size = _ref2.size;
  var sizeTokens = (_sizeTokens = {}, _defineProperty(_sizeTokens, SIZES.SMALL, theme.orbit.fontSizeTextSmall), _defineProperty(_sizeTokens, SIZES.NORMAL, theme.orbit.fontSizeTextSmall), _defineProperty(_sizeTokens, SIZES.LARGE, theme.orbit.fontSizeTextNormal), _sizeTokens);
  return sizeTokens[size];
};

var getIconSizeFromType = function getIconSizeFromType(_ref3) {
  var _tokens;

  var theme = _ref3.theme,
      type = _ref3.type;
  var tokens = (_tokens = {}, _defineProperty(_tokens, TYPES.PRIMARY, css(["height:", ";width:", ";"], theme.orbit.heightIconSmall, theme.orbit.widthIconSmall)), _defineProperty(_tokens, TYPES.SECONDARY, css(["height:", ";width:", ";"], theme.orbit.heightIconSmall, theme.orbit.widthIconSmall)), _tokens);
  return tokens[type];
};

export var Item = styled(function (_ref4) {
  var type = _ref4.type,
      theme = _ref4.theme,
      props = _objectWithoutProperties(_ref4, ["type", "theme"]);

  return /*#__PURE__*/React.createElement("li", props);
}).withConfig({
  displayName: "ListItem__Item",
  componentId: "sc-1vswvev-0"
})(["font-family:", ";display:flex;flex-direction:row;margin-bottom:", ";&:last-child,&:last-of-type{margin:0;}", "{line-height:inherit;font-size:inherit;}"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.fontFamily;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.spaceXXSmall;
}, StyledText);
Item.defaultProps = {
  theme: defaultTheme
};
export var IconContainer = styled.div.withConfig({
  displayName: "ListItem__IconContainer",
  componentId: "sc-1vswvev-1"
})(["display:flex;align-items:center;margin:", ";flex:0 0 auto;height:", ";", "{", ";img{", ";}}svg{", ";}"], function (_ref7) {
  var theme = _ref7.theme;
  return rtlSpacing("0 ".concat(theme.orbit.spaceXSmall, " 0 0"));
}, function (_ref8) {
  var theme = _ref8.theme,
      size = _ref8.size;
  return getLineHeightToken({
    theme: theme,
    size: size
  });
}, StyledCarrierLogo, getIconSizeFromType, getIconSizeFromType, getIconSizeFromType);
IconContainer.defaultProps = {
  theme: defaultTheme
};
var StyledLabel = styled.div.withConfig({
  displayName: "ListItem__StyledLabel",
  componentId: "sc-1vswvev-2"
})(["font-family:", ";font-weight:", ";color:", ";font-size:", ";"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.fontFamily;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.fontWeightNormal;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.colorTextSecondary;
}, getSizeTokenLabel);
var StyledSpan = styled.span.withConfig({
  displayName: "ListItem__StyledSpan",
  componentId: "sc-1vswvev-3"
})(["width:100%;"]);
StyledLabel.defaultProps = {
  theme: defaultTheme
};

var ListItem = function ListItem(_ref12) {
  var label = _ref12.label,
      children = _ref12.children,
      _ref12$icon = _ref12.icon,
      icon = _ref12$icon === void 0 ? /*#__PURE__*/React.createElement(CircleSmall, null) : _ref12$icon,
      dataTest = _ref12.dataTest;

  var _useContext = useContext(ListContext),
      size = _useContext.size,
      type = _useContext.type;

  return /*#__PURE__*/React.createElement(Item, {
    "data-test": dataTest,
    type: type
  }, /*#__PURE__*/React.createElement(IconContainer, {
    type: type,
    size: size
  }, icon), /*#__PURE__*/React.createElement(StyledSpan, null, label && /*#__PURE__*/React.createElement(StyledLabel, {
    size: size
  }, label), children));
};

export default ListItem;