vcc-ui/lib/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.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _flex = require("../flex");

var _button = require("../button");

var _ = require("./");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _react2.storiesOf)('Layout/Spacer', module).addWithJSX('Default', function () {
  return _react.default.createElement(_flex.Flex, null, _react.default.createElement(_button.Button, null, "Hello"), _react.default.createElement(_.Spacer, null), _react.default.createElement(_button.Button, null, "World"));
}).addWithJSX('Flex Direction', function () {
  return _react.default.createElement(_flex.Flex, {
    extend: {
      flexDirection: 'row'
    }
  }, _react.default.createElement(_button.Button, null, "Hello"), _react.default.createElement(_.Spacer, null), _react.default.createElement(_button.Button, null, "World"));
}).addWithJSX('Multiple sizes', function () {
  return _react.default.createElement(_flex.Flex, {
    extend: {
      flexDirection: 'row'
    }
  }, _react.default.createElement(_button.Button, null, "First"), _react.default.createElement(_.Spacer, {
    size: {
      default: 2,
      '@media (min-width: 768px)': 8
    }
  }), _react.default.createElement(_button.Button, null, "Second"), _react.default.createElement(_.Spacer, {
    size: 4
  }), _react.default.createElement(_button.Button, null, "Third"));
});