@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
101 lines • 3.38 kB
JavaScript
import * as React 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
};
if (!size) return null;
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)
};
if (!type) return null;
return tokens[type];
};
export const Item = styled(({
...props
}) => /*#__PURE__*/React.createElement("li", props)).withConfig({
displayName: "ListItem__Item",
componentId: "sc-1ehu2u0-0"
})(["", ""], ({
theme
}) => 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, StyledText));
Item.defaultProps = {
theme: defaultTheme
};
export const IconContainer = styled.div.withConfig({
displayName: "ListItem__IconContainer",
componentId: "sc-1ehu2u0-1"
})(["", ""], ({
theme,
size
}) => css(["display:flex;align-items:center;margin:", ";flex:0 0 auto;height:", ";", "{", ";img{", ";}}svg{", ";}"], rtlSpacing(`0 ${theme.orbit.spaceXSmall} 0 0`), getLineHeightToken({
theme,
size
}), StyledCarrierLogo, getIconSizeFromType, getIconSizeFromType, getIconSizeFromType));
IconContainer.defaultProps = {
theme: defaultTheme
};
const StyledLabel = styled.div.withConfig({
displayName: "ListItem__StyledLabel",
componentId: "sc-1ehu2u0-2"
})(["", ""], ({
theme
}) => css(["font-family:", ";font-weight:", ";color:", ";font-size:", ";"], theme.orbit.fontFamily, theme.orbit.fontWeightNormal, theme.orbit.colorTextSecondary, getSizeTokenLabel));
const StyledSpan = styled.span.withConfig({
displayName: "ListItem__StyledSpan",
componentId: "sc-1ehu2u0-3"
})(["width:100%;"]);
StyledLabel.defaultProps = {
theme: defaultTheme
};
const ListItem = ({
label,
children,
icon = /*#__PURE__*/React.createElement(CircleSmall, null),
dataTest
}) => {
const {
size,
type
} = React.useContext(ListContext);
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));
};
export default ListItem;