"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 _Flex = require("../Flex");

var _Image = require("../Image");

var _Tabs = require("../Tabs");

var _Text = require("../Text");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Lightbox', module);
stories.add('Default', function () {
  var images = ['http://placeimg.com/200/200', 'http://placeimg.com/250/250', 'http://placeimg.com/225/225'];
  return __jsx(_Box.Box, {
    maxWidth: "sm",
    mx: "auto",
    mt: 3
  }, __jsx(_.LightboxGalleryProvider, null, __jsx(_Box.Box, null, __jsx(_Box.Box, null, "Page content"), __jsx(_Flex.Flex, null, images.map(function (src) {
    return __jsx(_Image.Image, {
      src: src,
      withLightbox: true,
      htmlHeight: "150px"
    });
  })))));
});
stories.add('With skip', function () {
  var images = ['http://placeimg.com/200/200', 'http://placeimg.com/250/250', 'http://placeimg.com/350/350'];
  var imagesSecond = ['http://placeimg.com/300/300', 'http://placeimg.com/350/350'];
  return __jsx(_Box.Box, {
    maxWidth: "lg",
    mx: "auto",
    mt: 3
  }, __jsx(_.LightboxGalleryProvider, null, __jsx(_Text.Text, null, "Page 2 media items are skipped from showing in lightbox"), __jsx(_Tabs.Tabs, {
    size: "md",
    color: "pink",
    isFitted: true
  }, __jsx(_Tabs.TabList, null, __jsx(_Tabs.Tab, null, "Page 1"), __jsx(_Tabs.Tab, null, "Page 2")), __jsx(_Tabs.TabPanels, null, __jsx(_Tabs.TabPanel, null, __jsx(_Flex.Flex, null, images.map(function (src) {
    return __jsx(_Image.Image, {
      withLightbox: true,
      src: src
    });
  }))), __jsx(_Tabs.TabPanel, null, __jsx(_Flex.Flex, null, imagesSecond.map(function (src) {
    return __jsx(_Image.Image, {
      src: src
    });
  })))))));
});
stories.add('Large image list', function () {
  var images = ['http://placeimg.com/200/200', 'http://placeimg.com/250/250', 'http://placeimg.com/225/225', 'http://placeimg.com/235/235', 'http://placeimg.com/245/245', 'http://placeimg.com/255/255', 'http://placeimg.com/265/265', 'http://placeimg.com/275/275', 'http://placeimg.com/285/285', 'http://placeimg.com/295/295', 'http://placeimg.com/305/305', 'http://placeimg.com/315/315', 'http://placeimg.com/325/325', 'http://placeimg.com/335/335'];
  return __jsx(_Box.Box, {
    maxWidth: "sm",
    mx: "auto",
    mt: 3
  }, __jsx(_.LightboxGalleryProvider, null, __jsx(_Box.Box, null, __jsx(_Box.Box, null, "Page content"), __jsx(_Flex.Flex, {
    wrap: "wrap"
  }, images.map(function (src) {
    return __jsx(_Image.Image, {
      src: src,
      withLightbox: true,
      htmlHeight: "150px",
      key: src
    });
  })))));
});
//# sourceMappingURL=examples.js.map