@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 getSpacingToken from "../common/getSpacingToken";
import { getLineHeightToken } from "./ListItem";
import ListContext from "./ListContext";
const getSizeToken = ({
  theme,
  size
}) => {
  const sizeTokens = {
    [SIZES.SMALL]: theme.orbit.fontSizeTextSmall,
    [SIZES.NORMAL]: theme.orbit.fontSizeTextNormal,
    [SIZES.LARGE]: theme.orbit.fontSizeTextLarge
  };
  if (!size) return null;
  return sizeTokens[size];
};
const getTypeToken = ({
  theme,
  type
}) => {
  const typeTokens = {
    [TYPES.PRIMARY]: theme.orbit.colorTextPrimary,
    [TYPES.SECONDARY]: theme.orbit.colorTextSecondary
  };
  if (!type) return null;
  return typeTokens[type];
};
const StyledList = styled.ul.withConfig({
  displayName: "List__StyledList",
  componentId: "sc-cesfjx-0"
})(["", ";"], ({
  theme
}) => css(["display:flex;width:100%;flex-direction:column;font-family:", ";font-size:", ";line-height:", ";color:", ";list-style:none;padding:0;margin:0;margin-bottom:", ";"], theme.orbit.fontFamily, getSizeToken, getLineHeightToken, getTypeToken, getSpacingToken));
StyledList.defaultProps = {
  theme: defaultTheme
};
const List = ({
  children,
  size = SIZES.NORMAL,
  type = TYPES.PRIMARY,
  dataTest,
  id,
  spaceAfter
}) => {
  const value = React.useMemo(() => ({
    size,
    type
  }), [size, type]);
  return /*#__PURE__*/React.createElement(StyledList, {
    type: type,
    size: size,
    "data-test": dataTest,
    id: id,
    spaceAfter: spaceAfter
  }, /*#__PURE__*/React.createElement(ListContext.Provider, {
    value: value
  }, children));
};
export default List;
export { default as ListItem } from "./ListItem";