@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.

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 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 const getLineHeightToken = ({
  theme,
  size
}) => {
  const lineHeightTokens = {
    [SIZES.SMALL]: theme.orbit.lineHeightTextSmall,
    [SIZES.NORMAL]: theme.orbit.lineHeightTextNormal,
    [SIZES.LARGE]: theme.orbit.lineHeightTextLarge
  };
  return lineHeightTokens[size];
};

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

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

export const Item = styled((_ref) => {
  let {
    type,
    theme
  } = _ref,
      props = _objectWithoutProperties(_ref, ["type", "theme"]);

  return React.createElement("li", props);
}).withConfig({
  displayName: "ListItem__Item",
  componentId: "sc-1vswvev-0"
})(["font-family:", ";display:flex;flex-direction:row;align-items:flex-start;margin-bottom:", ";&:last-child,&:last-of-type{margin:0;}", "{line-height:inherit;font-size:inherit;}", ""], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.spaceXXSmall, StyledText, ({
  type,
  theme
}) => type === TYPES.SEPARATED && css(["border-bottom:1px solid ", ";padding:", ";&,", "{font-weight:", ";}:last-child{border-bottom:none;}"], theme.orbit.paletteCloudDark, theme.orbit.spaceXSmall, StyledText, theme.orbit.fontWeightMedium));
Item.defaultProps = {
  theme: defaultTheme
};
const IconContainer = styled.div.withConfig({
  displayName: "ListItem__IconContainer",
  componentId: "sc-1vswvev-1"
})(["display:flex;align-items:center;margin:", ";flex:0 0 auto;height:", ";", "{", ";img{", ";}}svg{", ";}"], ({
  theme,
  type
}) => rtlSpacing(`${type === TYPES.SEPARATED ? theme.orbit.spaceXXSmall : 0} ${theme.orbit.spaceXSmall} 0 0`), ({
  theme,
  type,
  size
}) => type === TYPES.SEPARATED ? theme.heightIconLarge : getLineHeightToken({
  theme,
  size
}), StyledCarrierLogo, getIconSizeFromType, getIconSizeFromType, getIconSizeFromType);
IconContainer.defaultProps = {
  theme: defaultTheme
};
const StyledLabel = styled.div.withConfig({
  displayName: "ListItem__StyledLabel",
  componentId: "sc-1vswvev-2"
})(["font-family:", ";font-weight:", ";color:", ";font-size:", ";"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontWeightNormal, ({
  theme
}) => theme.orbit.colorTextSecondary, getSizeTokenLabel);
const StyledSpan = styled.span.withConfig({
  displayName: "ListItem__StyledSpan",
  componentId: "sc-1vswvev-3"
})(["width:100%;"]);
StyledLabel.defaultProps = {
  theme: defaultTheme
};

const ListItem = ({
  label,
  children,
  icon = React.createElement(CircleSmall, null),
  dataTest
}) => {
  const {
    size,
    type
  } = useContext(ListContext);
  return React.createElement(Item, {
    "data-test": dataTest,
    type: type
  }, React.createElement(IconContainer, {
    type: type,
    size: size
  }, icon), React.createElement(StyledSpan, null, label && React.createElement(StyledLabel, {
    size: size
  }, label), children));
};

export default ListItem;