"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.basic = void 0;

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

var _utils = require("../../../.storybook/utils");

var _index = require("../../index");

var _typography = require("../typography");

var _GridItem = _interopRequireDefault(require("./GridItem"));

var _default = {
  component: _index.Grid,
  title: (0, _utils.addStoryInGroup)(_utils.LOW_LEVEL_BLOCKS, 'Grid')
};
exports.default = _default;

var basic = function basic(args) {
  return /*#__PURE__*/_react.default.createElement(_index.Box, null, /*#__PURE__*/_react.default.createElement(_typography.Heading3, null, "Grid Box"), /*#__PURE__*/_react.default.createElement(_index.Box, {
    borderColor: "neutral",
    borderWidth: 1,
    borderRadius: "rounded",
    backgroundColor: "neutral",
    backgroundTint: "light"
  }, /*#__PURE__*/_react.default.createElement(_index.Grid, args, /*#__PURE__*/_react.default.createElement(_GridItem.default, {
    area: "header"
  }, /*#__PURE__*/_react.default.createElement(_index.Box, {
    backgroundColor: "mint",
    backgroundTint: "lightest",
    borderColor: "mint",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      height: '100%'
    }
  })), /*#__PURE__*/_react.default.createElement(_GridItem.default, {
    area: "sidebar"
  }, /*#__PURE__*/_react.default.createElement(_index.Box, {
    backgroundColor: "teal",
    backgroundTint: "lightest",
    borderColor: "teal",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      height: '200px'
    }
  })), /*#__PURE__*/_react.default.createElement(_GridItem.default, {
    area: "content"
  }, /*#__PURE__*/_react.default.createElement(_index.Box, {
    backgroundColor: "gold",
    backgroundTint: "lightest",
    borderColor: "gold",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      height: '100%'
    }
  })), /*#__PURE__*/_react.default.createElement(_GridItem.default, {
    area: "footer"
  }, /*#__PURE__*/_react.default.createElement(_index.Box, {
    backgroundColor: "ruby",
    backgroundTint: "lightest",
    borderColor: "ruby",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      height: '100%'
    }
  })))));
};

exports.basic = basic;
basic.args = {
  areas: ['header header', 'sidebar content', 'footer footer'],
  rows: ['100px', '1fr', '50px'],
  columns: ['20%', '1fr'],
  gap: 0,
  columnGap: 0,
  rowGap: 0
};