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

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

import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import { SIZES, TYPES } from "./consts";
import { StyledCarrierLogo } from "../CarrierLogo";
import getSpacingToken from "../common/getSpacingToken";
import { Item, IconContainer, StyledLabel } from "./ListItem";

const getSizeToken = ({
  theme,
  size
}) => {
  const sizeTokens = {
    [SIZES.SMALL]: theme.orbit.fontSizeTextSmall,
    [SIZES.NORMAL]: theme.orbit.fontSizeTextNormal,
    [SIZES.LARGE]: theme.orbit.fontSizeTextLarge
  };
  return sizeTokens[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 getTypeToken = ({
  theme,
  type
}) => {
  const typeTokens = {
    [TYPES.PRIMARY]: theme.orbit.colorTextPrimary,
    [TYPES.SECONDARY]: theme.orbit.colorTextSecondary
  };
  return typeTokens[type];
};

const getIconHeight = ({
  theme,
  size
}) => `${Math.floor(parseInt(getSizeToken({
  theme,
  size
}), 10) * theme.orbit.lineHeightText)}px`;

const StyledList = styled(({
  className,
  children,
  dataTest
}) => React.createElement("ul", {
  className: className,
  "data-test": dataTest
}, children)).withConfig({
  displayName: "List__StyledList",
  componentId: "iwilat-0"
})(["display:flex;width:100%;flex-direction:column;font-family:", ";font-size:", ";line-height:", ";color:", ";list-style:none;padding:0;margin:0;margin-bottom:", ";", "{height:", ";", "{height:", ";width:", ";img{height:", ";width:", ";}}svg{height:", ";width:", ";}}", " ", "{font-size:", ";}"], ({
  theme
}) => theme.orbit.fontfamily, getSizeToken, ({
  theme
}) => theme.orbit.lineHeightText, getTypeToken, getSpacingToken, IconContainer, getIconHeight, StyledCarrierLogo, ({
  theme
}) => theme.orbit.heightIconSmall, ({
  theme
}) => theme.orbit.widthIconSmall, ({
  theme
}) => theme.orbit.heightIconSmall, ({
  theme
}) => theme.orbit.widthIconSmall, ({
  theme
}) => theme.orbit.heightIconSmall, ({
  theme
}) => theme.orbit.widthIconSmall, ({
  type,
  theme
}) => type === TYPES.SEPARATED && css(["", "{border-bottom:1px solid #e8edf1;padding:", ";:last-child{border-bottom:none;}}"], Item, theme.orbit.spaceXSmall), StyledLabel, getSizeTokenLabel);
StyledList.defaultProps = {
  theme: defaultTheme
};

const List = ({
  children,
  size = SIZES.NORMAL,
  type = TYPES.PRIMARY,
  dataTest,
  spaceAfter
}) => React.createElement(StyledList, {
  type: type,
  size: size,
  dataTest: dataTest,
  spaceAfter: spaceAfter
}, children);

export default List;
export { default as ListItem } from "./ListItem";