vcc-ui/es/components/spacer/stories.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Flex } from '../flex';
import { Button } from '../button';
import { Spacer } from './';
storiesOf('Layout/Spacer', module).addWithJSX('Default', function () {
  return React.createElement(Flex, null, React.createElement(Button, null, "Hello"), React.createElement(Spacer, null), React.createElement(Button, null, "World"));
}).addWithJSX('Flex Direction', function () {
  return React.createElement(Flex, {
    extend: {
      flexDirection: 'row'
    }
  }, React.createElement(Button, null, "Hello"), React.createElement(Spacer, null), React.createElement(Button, null, "World"));
}).addWithJSX('Multiple sizes', function () {
  return React.createElement(Flex, {
    extend: {
      flexDirection: 'row'
    }
  }, React.createElement(Button, null, "First"), React.createElement(Spacer, {
    size: {
      default: 2,
      '@media (min-width: 768px)': 8
    }
  }), React.createElement(Button, null, "Second"), React.createElement(Spacer, {
    size: 4
  }), React.createElement(Button, null, "Third"));
});