@kiwicom/orbit-components/src/List/ListItem/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

// @flow
import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../../defaultTokens";
import CircleSmall from "../../icons/CircleSmall";

import type { Props } from "./index";

export const Item = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: ${({ theme }) => theme.orbit.spaceXXSmall};

  &:last-child,
  &:last-of-type {
    margin: 0;
  }
`;

Item.defaultProps = {
  theme: defaultTokens,
};

const IconContainer = styled.div`
  display: flex;
  margin-right: ${({ theme }) => theme.orbit.spaceXSmall};
`;

IconContainer.defaultProps = {
  theme: defaultTokens,
};

const ListItem = ({ children, icon = <CircleSmall />, dataTest }: Props) => (
  <Item data-test={dataTest}>
    <IconContainer>{icon}</IconContainer>
    {children}
  </Item>
);

export default ListItem;