"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MixinsStacking = exports.FullGrid = exports.OneColumnLayout = exports.TwoColumnLayout = exports["default"] = void 0;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lodash = require("lodash");

var _branding = require("../../../mixins/branding");

var _primitives = require("../../../primitives");

var _grid = require("./grid.component");

var _gridItem = require("./grid-item");

var _card = require("../card");

var _gridExamples = _interopRequireDefault(require("./grid.examples.mdx"));

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

var _default = {
  component: _grid.Grid,
  title: 'Examples/Layout/Grid',
  parameters: {
    docs: {
      page: _gridExamples["default"]
    }
  }
};
exports["default"] = _default;

var TwoColumnLayout = function TwoColumnLayout() {
  return /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    md: 7,
    lg: 8,
    xl: 9
  }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: ['p2', 'mb2']
  }, /*#__PURE__*/_react["default"].createElement("code", null, /*#__PURE__*/_react["default"].createElement("pre", null, '<GridItem sm={12} md={7} lg={8} xl={9}>')))), /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    md: 5,
    lg: 4,
    xl: 3
  }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: "p2"
  }, /*#__PURE__*/_react["default"].createElement("code", null, '<GridItem sm={12} md={5} lg={4} xl={3}>'))));
};

exports.TwoColumnLayout = TwoColumnLayout;

var OneColumnLayout = function OneColumnLayout() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    md: 6,
    lg: 4,
    xl: 6,
    offsetMd: 3,
    offsetLg: 4,
    offsetXl: 3
  }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: ['p2', 'mb2']
  }, /*#__PURE__*/_react["default"].createElement("code", null, '<GridItem sm={12} md={6} lg={4} xl={6} offsetMd={3} offsetLg={4} offsetXl={3}>')))), /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    md: 8,
    lg: 6,
    xl: 4,
    offsetMd: 2,
    offsetLg: 3,
    offsetXl: 4
  }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: "p2"
  }, /*#__PURE__*/_react["default"].createElement("code", null, '<GridItem sm={12} md={8} lg={6} xl={4} offsetMd={2} offsetLg={3} offsetXl={4}>')))));
};

exports.OneColumnLayout = OneColumnLayout;

var FullGrid = function FullGrid() {
  return /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, (0, _lodash.times)(12, function (i) {
    return /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
      key: "key-".concat(i),
      sm: 1
    }, /*#__PURE__*/_react["default"].createElement(_card.Card, {
      spacing: ['ph1', 'pv3', 'mv3']
    }));
  }));
};

exports.FullGrid = FullGrid;
var ChildBox = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "ChildBox",
  componentId: "sc-1j7w4kn-0"
})(["background:", ";border:solid ", " 1px;color:", ";height:25px;width:25px;"], (0, _branding.getPaletteColor)('brand-secondary-fg'), (0, _branding.getPaletteColor)('brand-secondary-bg'), (0, _branding.getPaletteColor)('brand-secondary-bg'));

var MixinsStacking = function MixinsStacking() {
  return /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 6,
    stacked: "row"
  }, /*#__PURE__*/_react["default"].createElement(ChildBox, {
    grow: 1
  }, "1"), /*#__PURE__*/_react["default"].createElement(ChildBox, {
    grow: 1
  }, "2"), /*#__PURE__*/_react["default"].createElement(ChildBox, {
    grow: 1
  }, "3")), /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 6,
    stacked: "column"
  }, /*#__PURE__*/_react["default"].createElement(ChildBox, null, "1"), /*#__PURE__*/_react["default"].createElement(ChildBox, null, "2"), /*#__PURE__*/_react["default"].createElement(ChildBox, null, "3")));
};

exports.MixinsStacking = MixinsStacking;