"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

var _ = require(".");

var _Box = require("../Box");

var _FullGrid = require("../FullGrid");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Grid', module);
stories.add('with columns', function () {
  return __jsx(_.Grid, {
    columns: [2, null, 3],
    spacing: "spacing"
  }, __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }));
});
stories.add('with autofit and min child width', function () {
  return __jsx(_.Grid, {
    minChildWidth: "300px",
    spacing: "spacing-xs"
  }, __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }));
});
stories.add('responsive columns', function () {
  return __jsx(_FullGrid.FullGrid, {
    templateColumns: {
      base: '1fr',
      sm: '1fr 1fr 1fr'
    },
    columnGap: "40px"
  }, __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }));
});
stories.add('responsive columns 2', function () {
  return __jsx(_FullGrid.FullGrid, {
    templateColumns: ['1fr', '1fr 1fr 1fr'],
    columnGap: "40px"
  }, __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }), __jsx(_Box.Box, {
    bg: "tomato",
    height: "200px"
  }));
});
//# sourceMappingURL=examples.js.map