"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithDirectionColumn = exports.WithCustomGap = exports.WithContainerAndItemProps = exports.WithConditionallyVisibleFlexItem = exports.WithConditionallyHiddenFlexItem = exports.WithBreakpointProps = exports.WidthAndHeightInPercentage = exports.WidthAndHeightInNumbers = exports.DifferentSizedItems = exports.DefaultStory = exports.ColumnSizedFlexboxes = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _2 = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var Content = _styledComponents.default.div.withConfig({
  displayName: "Flexboxstories__Content",
  componentId: "sc-103j0u1-0"
})(["box-sizing:border-box;border:1px solid black;background-color:#eee;height:100%;"]);
var meta = {
  component: _2.Flexbox,
  title: 'Atoms / Flexbox'
};
var _default = exports.default = meta;
var DefaultStory = exports.DefaultStory = {
  render: function render() {
    return _react.default.createElement(_2.Flexbox, {
      container: true
    }, _react.default.createElement(_2.Flexbox, {
      item: true
    }, _react.default.createElement(Content, null, "Col 1")), _react.default.createElement(_2.Flexbox, {
      item: true
    }, _react.default.createElement(Content, null, "Col 2")), _react.default.createElement(_2.Flexbox, {
      item: true
    }, _react.default.createElement(Content, null, "Col 3")));
  },
  name: 'Default'
};
var ColumnSizedFlexboxes = exports.ColumnSizedFlexboxes = function ColumnSizedFlexboxes() {
  return _react.default.createElement(_2.Flexbox, {
    container: true
  }, _react.default.createElement(_2.Flexbox, {
    item: true,
    size: 3
  }, _react.default.createElement(Content, null, "Col 1")), _react.default.createElement(_2.Flexbox, {
    item: true,
    size: 6
  }, _react.default.createElement(Content, null, "Col 2")), _react.default.createElement(_2.Flexbox, {
    item: true,
    size: 3
  }, _react.default.createElement(Content, null, "Col 3")));
};
var tenTimes = _toConsumableArray(Array(10)).map(function (_, i) {
  return i + 1;
});
var WithCustomGap = exports.WithCustomGap = function WithCustomGap() {
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_2.Typography, {
    type: "title3"
  }, "With gap as unit"), _react.default.createElement(_2.Flexbox, {
    container: true,
    gap: 5
  }, tenTimes.map(function (i) {
    return _react.default.createElement(Content, {
      key: "unit-".concat(i),
      style: {
        width: '200px'
      }
    }, i);
  })), _react.default.createElement(_2.Typography, {
    type: "title3"
  }, "With gap as string"), _react.default.createElement(_2.Flexbox, {
    container: true,
    gap: "10px 10vw",
    wrap: "wrap"
  }, tenTimes.map(function (i) {
    return _react.default.createElement(Content, {
      key: "string-".concat(i),
      style: {
        width: '200px'
      }
    }, i);
  })), _react.default.createElement(_2.Typography, {
    type: "title3"
  }, "With gap as object"), _react.default.createElement(_2.Flexbox, {
    container: true,
    gap: {
      column: 5,
      row: 10
    },
    wrap: "wrap"
  }, tenTimes.map(function (i) {
    return _react.default.createElement(Content, {
      key: "obj-".concat(i),
      style: {
        width: '200px'
      }
    }, i);
  })));
};
var WithDirectionColumn = exports.WithDirectionColumn = function WithDirectionColumn() {
  return _react.default.createElement(_2.Flexbox, {
    container: true,
    direction: "column"
  }, _react.default.createElement(_2.Flexbox, {
    item: true,
    order: 2
  }, _react.default.createElement(Content, null, "Col 1")), _react.default.createElement(_2.Flexbox, {
    item: true,
    order: 1
  }, _react.default.createElement(Content, null, "Col 2")), _react.default.createElement(_2.Flexbox, {
    item: true,
    order: 3
  }, _react.default.createElement(Content, null, "Col 3")));
};
var WithConditionallyHiddenFlexItem = exports.WithConditionallyHiddenFlexItem = function WithConditionallyHiddenFlexItem() {
  var showFirstItem = false;
  return _react.default.createElement(_2.Flexbox, {
    container: true
  }, showFirstItem && _react.default.createElement(_2.Flexbox, {
    item: true,
    order: 2
  }, _react.default.createElement(Content, null, "Col 1")), _react.default.createElement(_2.Flexbox, {
    item: true,
    order: 1
  }, _react.default.createElement(Content, null, "Col 2")));
};
var WithConditionallyVisibleFlexItem = exports.WithConditionallyVisibleFlexItem = function WithConditionallyVisibleFlexItem() {
  var showFirstItem = true;
  return _react.default.createElement(_2.Flexbox, {
    container: true
  }, showFirstItem && _react.default.createElement(_2.Flexbox, {
    item: true,
    order: 2
  }, _react.default.createElement(Content, null, "Col 1")), _react.default.createElement(_2.Flexbox, {
    item: true,
    order: 1
  }, _react.default.createElement(Content, null, "Col 2")));
};
var WithContainerAndItemProps = exports.WithContainerAndItemProps = function WithContainerAndItemProps() {
  return _react.default.createElement(_2.Flexbox, {
    container: true,
    gap: 5
  }, _react.default.createElement(_2.Flexbox, {
    container: true,
    item: true,
    direction: "column",
    gap: 5
  }, _react.default.createElement(_2.Flexbox, {
    item: true
  }, _react.default.createElement(Content, null, "First element here")), _react.default.createElement(_2.Flexbox, {
    item: true
  }, _react.default.createElement(Content, null, "Second element here"))), _react.default.createElement(_2.Flexbox, {
    item: true
  }, _react.default.createElement(Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus neque in venenatis faucibus. Fusce vitae maximus diam. Ut placerat lacus id porttitor tristique. Mauris in neque tempus, venenatis metus vitae, pellentesque massa. Etiam blandit lacus diam, dignissim posuere massa semper maximus. In pretium commodo nisl sed ultrices. Duis gravida diam ac nisl sodales mollis. Quisque iaculis semper mi, eu interdum elit molestie quis. Vivamus rutrum cursus interdum. Suspendisse vehicula quam mi, a efficitur ante egestas eget.")));
};
var WithBreakpointProps = exports.WithBreakpointProps = function WithBreakpointProps() {
  return _react.default.createElement(_2.Flexbox, {
    container: true,
    gap: 4,
    direction: "column",
    sm: {
      gap: 6
    },
    md: {
      gap: 6,
      direction: 'row'
    },
    lg: {
      gap: 10,
      direction: 'row'
    },
    xl: {
      gap: 10,
      direction: 'row'
    }
  }, _react.default.createElement(_2.Flexbox, {
    item: true
  }, _react.default.createElement(Content, null, "First element here")), _react.default.createElement(_2.Flexbox, {
    item: true
  }, _react.default.createElement(Content, null, "Second element here")), _react.default.createElement(_2.Flexbox, {
    item: true
  }, _react.default.createElement(Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus neque in venenatis faucibus. Fusce vitae maximus diam. Ut placerat lacus id porttitor tristique. Mauris in neque tempus, venenatis metus vitae, pellentesque massa. Etiam blandit lacus diam, dignissim posuere massa semper maximus. In pretium commodo nisl sed ultrices. Duis gravida diam ac nisl sodales mollis. Quisque iaculis semper mi, eu interdum elit molestie quis. Vivamus rutrum cursus interdum. Suspendisse vehicula quam mi, a efficitur ante egestas eget.")));
};
var GrowingDiv = _styledComponents.default.div.withConfig({
  displayName: "Flexboxstories__GrowingDiv",
  componentId: "sc-103j0u1-1"
})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:10px;box-sizing:border-box;border:1px solid black;background-color:#eee;"]);
var WidthAndHeightInNumbers = exports.WidthAndHeightInNumbers = {
  render: function render() {
    return _react.default.createElement("div", {
      style: {
        height: '500px'
      }
    }, _react.default.createElement(_2.Flexbox, {
      container: true,
      width: 100,
      height: 100,
      alignItems: "center",
      justifyContent: "space-between",
      gap: 5
    }, _react.default.createElement(_2.Flexbox, {
      item: true,
      height: "100%"
    }, _react.default.createElement(GrowingDiv, null, "One")), _react.default.createElement(_2.Flexbox, {
      item: true,
      height: "100%"
    }, _react.default.createElement(GrowingDiv, null, "Two")), _react.default.createElement(_2.Flexbox, {
      item: true,
      height: "100%"
    }, _react.default.createElement(GrowingDiv, null, "Three"))));
  }
};
var WidthAndHeightInPercentage = exports.WidthAndHeightInPercentage = {
  render: function render() {
    return _react.default.createElement("div", {
      style: {
        height: '500px'
      }
    }, _react.default.createElement(_2.Flexbox, {
      container: true,
      width: "50%",
      height: "50%",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 5
    }, _react.default.createElement(_2.Flexbox, {
      item: true,
      height: "100%"
    }, _react.default.createElement(GrowingDiv, null, "One")), _react.default.createElement(_2.Flexbox, {
      item: true,
      height: "100%"
    }, _react.default.createElement(GrowingDiv, null, "Two")), _react.default.createElement(_2.Flexbox, {
      item: true,
      height: "100%"
    }, _react.default.createElement(GrowingDiv, null, "Three"))));
  }
};
var DifferentSizedItems = exports.DifferentSizedItems = {
  render: function render() {
    return _react.default.createElement(_2.Flexbox, {
      container: true,
      width: 100,
      height: 100,
      alignItems: "center",
      justifyContent: "space-between",
      gap: 5
    }, _react.default.createElement(_2.Flexbox, {
      item: true,
      width: "100%",
      height: "100%"
    }, _react.default.createElement(GrowingDiv, null, "One")), _react.default.createElement(_2.Flexbox, {
      item: true,
      width: "66%",
      height: "66%"
    }, _react.default.createElement(GrowingDiv, null, "Two")), _react.default.createElement(_2.Flexbox, {
      item: true,
      width: "33%",
      height: "33%"
    }, _react.default.createElement(GrowingDiv, null, "Three")));
  }
};