Card

============ TODO

1. ~Typings
2. State
3. Story
4. Styled
5. RenderProps
6. exports / index
7. ExpandableCard component

============ REUSED

1. Button
2. Accordion?
3. List
4. ?

============ ORDER

1. Card Header

• Title (eh)
• Button(details [v])

1. Children

============ OUTLINE

renderProps (extends of Props)

• renderCard
  • where we rendering the main card
• renderToggleButton
  • used to toggle the card (open / close) state
• renderCloseButton
  • used to close the card state
• renderChildren
  • used to render default children of the card (base view / closed view)

PROPS

• className?: string
• children?: ReactNode
• expandableChildren?: ReactNode

STATES

• isExpanded?: boolean
  • confirms that the card is opened or not
• isConfirming?: boolean
  • ex: when the overlay opens the

if ExpandableCard handles List for card then we may need to split up the cards as molecule and organisms? How do we able to render different DOM elements for each child?