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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.IconContainer = exports.Item = exports.getLineHeightToken = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

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

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

var _CircleSmall = _interopRequireDefault(require("../../icons/CircleSmall"));

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

var _CarrierLogo = require("../../CarrierLogo");

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

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

var _ListContext = _interopRequireDefault(require("../ListContext"));

const _excluded = ["type", "theme"];

const getLineHeightToken = ({
  theme,
  size
}) => {
  const lineHeightTokens = {
    [_consts.SIZES.SMALL]: theme.orbit.lineHeightTextSmall,
    [_consts.SIZES.NORMAL]: theme.orbit.lineHeightTextNormal,
    [_consts.SIZES.LARGE]: theme.orbit.lineHeightTextLarge
  };
  return lineHeightTokens[size];
};

exports.getLineHeightToken = getLineHeightToken;

const getSizeTokenLabel = ({
  theme,
  size
}) => {
  const sizeTokens = {
    [_consts.SIZES.SMALL]: theme.orbit.fontSizeTextSmall,
    [_consts.SIZES.NORMAL]: theme.orbit.fontSizeTextSmall,
    [_consts.SIZES.LARGE]: theme.orbit.fontSizeTextNormal
  };
  return sizeTokens[size];
};

const getIconSizeFromType = ({
  theme,
  type
}) => {
  const tokens = {
    [_consts.TYPES.PRIMARY]: (0, _styledComponents.css)(["height:", ";width:", ";"], theme.orbit.heightIconSmall, theme.orbit.widthIconSmall),
    [_consts.TYPES.SECONDARY]: (0, _styledComponents.css)(["height:", ";width:", ";"], theme.orbit.heightIconSmall, theme.orbit.widthIconSmall)
  };
  return tokens[type];
};

const Item = (0, _styledComponents.default)((_ref) => {
  let {
    type,
    theme
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return /*#__PURE__*/React.createElement("li", props);
}).withConfig({
  displayName: "ListItem__Item",
  componentId: "sc-1vmzvju-0"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["font-family:", ";display:flex;flex-direction:row;margin-bottom:", ";&:last-child,&:last-of-type{margin:0;}", "{line-height:inherit;font-size:inherit;}"], theme.orbit.fontFamily, theme.orbit.spaceXXSmall, _Text.StyledText)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

exports.Item = Item;
Item.defaultProps = {
  theme: _defaultTheme.default
};

const IconContainer = _styledComponents.default.div.withConfig({
  displayName: "ListItem__IconContainer",
  componentId: "sc-1vmzvju-1"
})(["", ""], ({
  theme,
  size
}) => (0, _styledComponents.css)(["display:flex;align-items:center;margin:", ";flex:0 0 auto;height:", ";", "{", ";img{", ";}}svg{", ";}"], (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceXSmall} 0 0`), getLineHeightToken({
  theme,
  size
}), _CarrierLogo.StyledCarrierLogo, getIconSizeFromType, getIconSizeFromType, getIconSizeFromType)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


exports.IconContainer = IconContainer;
IconContainer.defaultProps = {
  theme: _defaultTheme.default
};

const StyledLabel = _styledComponents.default.div.withConfig({
  displayName: "ListItem__StyledLabel",
  componentId: "sc-1vmzvju-2"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["font-family:", ";font-weight:", ";color:", ";font-size:", ";"], theme.orbit.fontFamily, theme.orbit.fontWeightNormal, theme.orbit.colorTextSecondary, getSizeTokenLabel));

const StyledSpan = _styledComponents.default.span.withConfig({
  displayName: "ListItem__StyledSpan",
  componentId: "sc-1vmzvju-3"
})(["width:100%;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const ListItem = ({
  label,
  children,
  icon = /*#__PURE__*/React.createElement(_CircleSmall.default, null),
  dataTest
}) => {
  const {
    size,
    type
  } = React.useContext(_ListContext.default);
  return /*#__PURE__*/React.createElement(Item, {
    "data-test": dataTest,
    type: type
  }, icon && /*#__PURE__*/React.createElement(IconContainer, {
    type: type,
    size: size
  }, icon), /*#__PURE__*/React.createElement(StyledSpan, null, label && /*#__PURE__*/React.createElement(StyledLabel, {
    size: size
  }, label), children));
};

var _default = ListItem;
exports.default = _default;