@navinc/base-react-components/src/list.js

Nav's Pattern Library

import React from 'react'
import propTypes from 'prop-types'

import styled from 'styled-components'
import { defaultSize, getFromSize } from './copy'

export const ListItem = styled.li`
  color: ${({ light, theme }) => (light ? theme.neutral400 : theme.neutral500)};
  font-family: postgrotesk, Roboto, Helvetica, sans-serif;
  font-size: ${getFromSize('fontSize')};
  font-weight: ${({ bold }) => (bold ? 'bold' : 'normal')};
  line-height: ${getFromSize('lineHeight')};
`
ListItem.displayName = 'ListItem'

ListItem.propTypes = {
  bold: propTypes.bool,
  light: propTypes.bool,
  size: propTypes.string,
}
ListItem.defaultProps = {
  size: defaultSize,
}

export const List = ({ element = 'ul', children, ...rest }) => {
  const HTMLElement = element
  return (
    <HTMLElement element={element} {...rest}>
      {children}
    </HTMLElement>
  )
}

List.propTypes = {
  element: propTypes.string,
}