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

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import { List as ListComponent, ListItem as ListItemComponent } from './list.js'
import readme from './list.readme.md'

const StyledDiv = styled.div`
  padding: 24px;
`

export default {
  title: 'General/List',
  component: ListComponent,
  parameters: {
    info: { text: readme },
  },
}

export const List = (args) => (
  <ListComponent {...args}>
    <ListItemComponent bold>First Li Child</ListItemComponent>
    <ListItemComponent light>Second Li Child</ListItemComponent>
    <ListItemComponent size="sm">Third Li Child</ListItemComponent>
  </ListComponent>
)
List.argTypes = {
  element: {
    control: { type: 'select' },
    options: ['ul', 'ol'],
  },
}
List.args = {
  element: 'ol',
}

export const ListItem = (args) => (
  <StyledDiv>
    <ListItemComponent {...args} />
  </StyledDiv>
)

ListItem.argTypes = {
  size: {
    control: { type: 'select' },
    options: ['md', 'sm', 'xs', 'xxs'],
  },
}

ListItem.args = {
  bold: false,
  light: false,
  size: '',
  children: 'I am a ListItem (li) component',
}