#Space

<RedBox>
  <Space top="large x-small">
    <Input label="Input:" />
  </Space>
</RedBox>

const Component = ({ className = null, ...props }) => {
  const spacingClasses = createSpacingClasses(props)
  const cn = classnames('my-comoponent', spacingClasses, className)
  return <div className={cn} {...props} />
}
render(
  <RedBox>
    <Component top="small medium large">Space A</Component>
    <Component top>Space B</Component>
  </RedBox>,
)

<Input label="Input A:" right="small" />
<Input label="Input B:" />

<Vertical>
  <RedBox>
    <Space bottom="small">
      <>
        I have <code className="dnb-code">bottom="small"</code>
      </>
    </Space>
  </RedBox>
  <RedBox>
    <Space top="large">
      <>
        I have <code className="dnb-code">top="large"</code>
      </>
    </Space>
  </RedBox>
</Vertical>

<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px">
  <details>
    <summary>
      I have four <code className="dnb-code">2.5rem</code> margins!
    </summary>
    And this are my CSS classes:{' '}
    <code className="dnb-code">
      dnb-space dnb-space__top--large dnb-space__top--x-small
      dnb-space__right--large dnb-space__right--x-small
      dnb-space__bottom--large dnb-space__bottom--x-small
      dnb-space__left--large dnb-space__left--x-small
    </code>
  </details>
</Space>

const TestCase = (props) => {
  return (
    <CustomStyle {...props}>
      {listOfBoxes.map((v) => (
        <Space key={v} top={v}>
          <MagicBox />
        </Space>
      ))}
    </CustomStyle>
  )
}
const listOfBoxes = []
for (let i = 0, c = 0, l = 20; i <= l; i++) {
  listOfBoxes.push(String(c))
  c += 0.5
}
render(
  <div className="spacing-patterns">
    <P bottom>
      With <Code>dnb-core-style</Code>
    </P>
    <TestCase className="dnb-core-style" />

    <P top bottom>
      Without
    </P>
    <TestCase />
  </div>,
)