@jaak/primitives/lib/List/List.js

JAAK UI primitives

import React from 'react'
import styled from 'styled-components'

import { boxModelTypes, cssTypes, listTypes } from '../types'
import { boxModel, css, list } from '../util'

/**
 * @namespace StyledList
 * @desc styled-component 💅
 * @return {Function} React component
 */
const StyledList = styled.ul`
  ${boxModel};
  ${css};
  ${list};
`

/**
 * @namespace ListItem
 * @desc Primitive styled-component 💅
 * @return {Function} React component
 */
const ListItem = styled.li``

/**
 * @namespace List
 * @desc Primitive component
 * @param {Object} props - Component props
 * @param {Object} props.children - Child components
 * @return {Function} React component
 */
const List = ({ children, ...props }) => (
  <StyledList {...props}>
    {React.Children.map(children, c => <ListItem {...props}>{c}</ListItem>)}
  </StyledList>
)

/**
 * @name defaultProps
 * @memberof List
 * @desc Primitive's default properties
 */
List.defaultProps = {
  listStyle: 'none',
  margin: [0],
  padding: [0],
  size: ['auto'],
}

/**
 * @name propTypes
 * @memberof List
 * @desc Primitive's prop type definitions
 */
List.propTypes = {
  ...boxModelTypes,
  ...cssTypes,
  ...listTypes,
}

/** @component */
export default List