"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithMinMax = exports.SimpleCssGrid = exports.ShownOnSmallScreenSizesHiddenOnMd = exports.ShownOnMdHiddenOnSmallScreens = exports.ItemsWithDifferentPlacements = exports.CssGridWithObjectAsGutterAndCustomSizedColumns = exports.CssGridWithDifferentLayoutsForDifferentScreenSizes = exports.CssGridWithDifferentGutterOnDifferentScreenSizes = exports.CssGridWithCustomTemplateColumns = exports.CssGridWithCustomGutter = exports.ConditionallyHiddenWrongWayShown = exports.ConditionallyHiddenWrongWayHidden = exports.ConditionallyHiddenGoodWayShown = exports.ConditionallyHiddenGoodWayHidden = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _addonActions = require("@storybook/addon-actions");
var _CssGrid = _interopRequireDefault(require("./CssGrid.mdx"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var StyledContent = _styledComponents.default.div.withConfig({
  displayName: "CssGridstories__StyledContent",
  componentId: "sc-1pgrjiv-0"
})(["box-sizing:border-box;border:1px solid black;background-color:#eee;height:100%;"]);
var Content = function Content(_ref) {
  var children = _ref.children;
  return _react.default.createElement(StyledContent, null, children);
};
var ComponentThatDoesSomethingOnMount = function ComponentThatDoesSomethingOnMount() {
  (0, _react.useEffect)((0, _addonActions.action)('mounted'), []);
  return _react.default.createElement(_react.default.Fragment, null, "This item is mounted and stays mounted no matter what. However, it\u2018d be hidden with css");
};
var ComponentThatLogsRender = function ComponentThatLogsRender(_ref2) {
  var children = _ref2.children;
  (0, _addonActions.action)('Rendered!')();
  return children;
};
var _default = exports.default = {
  title: 'Atoms / CssGrid',
  parameters: {
    docs: {
      page: _CssGrid.default
    }
  }
};
var SimpleCssGrid = exports.SimpleCssGrid = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      areas: [['header', 'header', 'header'], ['menu', 'content', 'ads'], ['footer', 'footer', 'footer']],
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['1fr', '1fr', '1fr']
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "header"
    }, _react.default.createElement(Content, null, "Header")), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, "Content")), _react.default.createElement(_.CssGrid.Item, {
      area: "menu"
    }, _react.default.createElement(Content, null, "Menu")), _react.default.createElement(_.CssGrid.Item, {
      area: "ads"
    }, _react.default.createElement(Content, null, "Ads")), _react.default.createElement(_.CssGrid.Item, {
      area: "footer"
    }, _react.default.createElement(Content, null, "Footer")));
  },
  name: 'Simple CssGrid'
};
var CssGridWithCustomGutter = exports.CssGridWithCustomGutter = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      gutter: 0,
      areas: [['left', 'top', 'sidebar'], ['left', 'content', 'sidebar'], ['left', 'content', 'sidebar']],
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['1fr', '1fr', '1fr']
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, "Top")), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, "Content")), _react.default.createElement(_.CssGrid.Item, {
      area: "sidebar"
    }, _react.default.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with custom gutter'
};
var CssGridWithDifferentGutterOnDifferentScreenSizes = exports.CssGridWithDifferentGutterOnDifferentScreenSizes = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      gutter: {
        row: 5,
        col: 5
      },
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'top', 'content'], ['left', 'top', 'content']],
      md: {
        templateRows: ['auto', 'auto'],
        templateColumns: ['1fr'],
        areas: [['left', 'top', 'content'], ['left', 'top', 'content']],
        gutter: {
          row: 0,
          col: 0
        }
      }
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatDoesSomethingOnMount, null))), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatLogsRender, null, "Content"))), _react.default.createElement(_.CssGrid.Item, {
      area: "non-existing"
    }, _react.default.createElement(Content, null, "something that doesn't exist")));
  },
  name: 'Different gutter on different screen sizes'
};
var CssGridWithObjectAsGutterAndCustomSizedColumns = exports.CssGridWithObjectAsGutterAndCustomSizedColumns = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      gutter: {
        row: 6,
        col: 4
      },
      templateColumns: ['1fr', '2fr', '1fr'],
      templateRows: ['1fr', '1fr', '1fr'],
      areas: [['left', 'top', 'messages'], ['left', 'top', 'order'], ['left', 'top', 'sidebar'], ['left', 'top', 'sidebar'], ['left', 'content', 'sidebar']]
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, "Top")), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, "Content")), _react.default.createElement(_.CssGrid.Item, {
      area: "messages"
    }, _react.default.createElement(Content, null, "Messages")), _react.default.createElement(_.CssGrid.Item, {
      area: "order"
    }, _react.default.createElement(Content, null, "Order")), _react.default.createElement(_.CssGrid.Item, {
      area: "sidebar"
    }, _react.default.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with object as gutter and custom sized columns'
};
var CssGridWithCustomTemplateColumns = exports.CssGridWithCustomTemplateColumns = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: [3, 6, 3],
      templateRows: ['1fr', '1fr', '1fr'],
      areas: [['left', 'top', 'sidebar'], ['left', 'content', 'sidebar'], ['left', 'content', 'sidebar']]
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, "Top")), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, "Content")), _react.default.createElement(_.CssGrid.Item, {
      area: "sidebar"
    }, _react.default.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with custom templateColumns'
};
var CssGridWithDifferentLayoutsForDifferentScreenSizes = exports.CssGridWithDifferentLayoutsForDifferentScreenSizes = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: [6, 6],
      templateRows: ['1fr', '1fr', '1fr'],
      areas: [['top', 'top'], ['left', 'sidebar'], ['content', 'sidebar']],
      sm: {
        templateColumns: [3, 6, 3],
        templateRows: ['auto', '1fr', '1fr'],
        areas: [['left', 'top', 'sidebar'], ['left', 'content', 'sidebar'], ['left', 'content', 'sidebar']]
      }
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, "Top")), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, "Content")), _react.default.createElement(_.CssGrid.Item, {
      area: "sidebar"
    }, _react.default.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with different layouts for different screen sizes'
};
var WithMinMax = exports.WithMinMax = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: ['1fr', 'minmax(30ch, 2fr)', '1fr'],
      areas: [['left', 'top', 'sidebar'], ['left', 'content', 'sidebar']]
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, "Top")), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, "Content")), _react.default.createElement(_.CssGrid.Item, {
      area: "sidebar"
    }, _react.default.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with minmax()'
};
var ShownOnMdHiddenOnSmallScreens = exports.ShownOnMdHiddenOnSmallScreens = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'content', 'content'], ['left', 'content', 'content']],
      md: {
        templateRows: ['auto', 'auto'],
        templateColumns: ['1fr'],
        areas: [['left'], ['top'], ['content']]
      }
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatDoesSomethingOnMount, null))), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatLogsRender, null, "Content"))), _react.default.createElement(_.CssGrid.Item, {
      area: "non-existing"
    }, _react.default.createElement(Content, null, "something that doesn't exist")));
  },
  name: 'Shown on md+, hidden on small screens'
};
var ShownOnSmallScreenSizesHiddenOnMd = exports.ShownOnSmallScreenSizesHiddenOnMd = {
  render: function render() {
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'top', 'top'], ['left', 'content', 'content']],
      md: {
        templateRows: ['auto', 'auto'],
        templateColumns: ['1fr'],
        areas: [['left'], ['content']]
      }
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatDoesSomethingOnMount, null))), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatLogsRender, null, "Content"))), _react.default.createElement(_.CssGrid.Item, {
      area: "non-existing"
    }, _react.default.createElement(Content, null, "something that doesn't exist")));
  },
  name: 'Shown on small screen sizes, hidden on md+'
};
var ConditionallyHiddenGoodWayHidden = exports.ConditionallyHiddenGoodWayHidden = {
  render: function render() {
    var isHidden = true;
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: isHidden ? ['auto', 'auto'] : ['auto'],
      areas: isHidden ? [['left', 'top', 'top'], ['left', 'content', 'content']] : [['left', 'content', 'content']]
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatDoesSomethingOnMount, null))), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatLogsRender, null, "Content"))));
  },
  name: 'Conditionally hidden: good way [hidden]'
};
var ConditionallyHiddenGoodWayShown = exports.ConditionallyHiddenGoodWayShown = {
  render: function render() {
    var isHidden = false;
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: isHidden ? ['auto', 'auto'] : ['auto'],
      areas: isHidden ? [['left', 'top', 'top'], ['left', 'content', 'content']] : [['left', 'content', 'content']]
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatDoesSomethingOnMount, null))), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatLogsRender, null, "Content"))));
  },
  name: 'Conditionally hidden: good way [shown]'
};
var ConditionallyHiddenWrongWayHidden = exports.ConditionallyHiddenWrongWayHidden = {
  render: function render() {
    var isHidden = true;
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'top', 'top'], ['left', 'content', 'content']]
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), !isHidden && _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatDoesSomethingOnMount, null))), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatLogsRender, null, "Content"))));
  },
  name: 'Conditionally hidden: WRONG way [hidden]'
};
var ConditionallyHiddenWrongWayShown = exports.ConditionallyHiddenWrongWayShown = {
  render: function render() {
    var isHidden = false;
    return _react.default.createElement(_.CssGrid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'top', 'top'], ['left', 'content', 'content']]
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "left"
    }, _react.default.createElement(Content, null, "Left")), !isHidden && _react.default.createElement(_.CssGrid.Item, {
      area: "top"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatDoesSomethingOnMount, null))), _react.default.createElement(_.CssGrid.Item, {
      area: "content"
    }, _react.default.createElement(Content, null, _react.default.createElement(ComponentThatLogsRender, null, "Content"))));
  },
  name: 'Items with different placements'
};
var BgContent = _styledComponents.default.div.withConfig({
  displayName: "CssGridstories__BgContent",
  componentId: "sc-1pgrjiv-1"
})(["background-color:", ";"], function (p) {
  return p.theme.color.background;
});
var ItemsWithDifferentPlacements = exports.ItemsWithDifferentPlacements = function ItemsWithDifferentPlacements() {
  return _react.default.createElement(_.CssGrid.Container, {
    templateColumns: ['100px', '100px', '100px', '100px'],
    templateRows: ['100px', '100px', '100px'],
    areas: [['alignStart', 'alignCenter', 'alignStretch', 'alignEnd'], ['justifyStart', 'justifyCenter', 'justifyStretch', 'justifyEnd'], ['placeStart', 'placeCenter', 'placeStretch', 'placeEnd']]
  }, _react.default.createElement(_.CssGrid.Item, {
    area: "alignStart",
    align: "start"
  }, _react.default.createElement(BgContent, null, "left")), _react.default.createElement(_.CssGrid.Item, {
    area: "alignCenter",
    align: "center"
  }, _react.default.createElement(BgContent, null, "center")), _react.default.createElement(_.CssGrid.Item, {
    area: "alignStretch",
    align: "stretch"
  }, _react.default.createElement(BgContent, null, "stretch")), _react.default.createElement(_.CssGrid.Item, {
    area: "alignEnd",
    align: "end"
  }, _react.default.createElement(BgContent, null, "end")), _react.default.createElement(_.CssGrid.Item, {
    area: "justifyStart",
    justify: "start"
  }, _react.default.createElement(BgContent, null, "left")), _react.default.createElement(_.CssGrid.Item, {
    area: "justifyCenter",
    justify: "center"
  }, _react.default.createElement(BgContent, null, "center")), _react.default.createElement(_.CssGrid.Item, {
    area: "justifyStretch",
    justify: "stretch"
  }, _react.default.createElement(BgContent, null, "stretch")), _react.default.createElement(_.CssGrid.Item, {
    area: "justifyEnd",
    justify: "end"
  }, _react.default.createElement(BgContent, null, "end")), _react.default.createElement(_.CssGrid.Item, {
    area: "placeStart",
    place: "start"
  }, _react.default.createElement(BgContent, null, "left")), _react.default.createElement(_.CssGrid.Item, {
    area: "placeCenter",
    place: "center"
  }, _react.default.createElement(BgContent, null, "center")), _react.default.createElement(_.CssGrid.Item, {
    area: "placeStretch",
    place: "stretch"
  }, _react.default.createElement(BgContent, null, "stretch")), _react.default.createElement(_.CssGrid.Item, {
    area: "placeEnd",
    place: "end"
  }, _react.default.createElement(BgContent, null, "end")));
};