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

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import {
  UnorderedList as UnorderedListComponent,
  OrderedList as OrderedListComponent,
  ListItem as ListItemComponent,
} from './list.js'
import readme from './list.readme.md'

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

export default {
  title: 'General/List',
  parameters: {
    readme: { content: readme },
  },
}

export const UnorderedList = (args) => (
  <UnorderedListComponent {...args}>
    <ListItemComponent bold>First Li Child</ListItemComponent>
    <ListItemComponent light>Second Li Child</ListItemComponent>
    <ListItemComponent size="sm">Third Li Child</ListItemComponent>
    <ListItemComponent>Fourth Li Child</ListItemComponent>
  </UnorderedListComponent>
)

export const OrderedList = (args) => (
  <OrderedListComponent {...args}>
    <ListItemComponent bold>First Li Child</ListItemComponent>
    <ListItemComponent light>Second Li Child</ListItemComponent>
    <ListItemComponent size="sm">Third Li Child</ListItemComponent>
    <ListItemComponent>Fourth Li Child</ListItemComponent>
  </OrderedListComponent>
)

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',
}