VerticalStack

VerticalStack.css

.root {
  display: grid;
}

.gap10 {
  grid-gap: 10px;
}

.gap20 {
  grid-gap: 20px;
}

.gap30 {
  grid-gap: 30px;
}

.gap40 {
  grid-gap: 40px;
}

.gap50 {
  grid-gap: 50px;
}

VerticalStack.js

// @flow

import * as React from 'react'
import cx from 'classnames'

import styles from './VerticalStack.css'

type VerticalStackProps = {|
  gap?: 10 | 20 | 30 | 40 | 50,
  children: React.Node,
|}

export const VerticalStack = (props: VerticalStackProps) => {
  const { children, gap = 10 } = props
  const classes = cx(styles.root, {
    [styles[`gap${String(gap)}`]]: gap > 0,
  })

  return (
    <div className={classes}>
      {React.Children.map(
        children,
        child => <div>{child}</div>,
      )}
    </div>
  )
}