/*
 * Copyright (c) 2018-present, Revolut LTD.
 *
 * This source code is licensed under the Apache 2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from 'react'

import { number, withKnobs } from '@storybook/addon-knobs'

import { Space } from '.'

export default {
  title: 'Space',
  component: Space,
  decorators: [withKnobs],
}

export const margins = () => (
  <Space mx={`${number('mx (em)', 1)}em`}>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
  </Space>
)

export const padding = () => (
  <Space px={`${number('px (em)', 1)}em`}>
    <div>
      <button>Button</button>
      <button>Button</button>
      <button>Button</button>
      <button>Button</button>
    </div>
  </Space>
)