"use strict";

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

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

var _layoutRecipes = _interopRequireDefault(require("./layout-recipes.mdx"));

var _box = require("./box.component");

var _text = require("../../core/typography/text");

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

var _grid = require("../../core/structures/grid");

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

var PageGridDecorator = function PageGridDecorator(Story) {
  return /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_grid.GridItem, {
    sm: 12,
    md: 8
  }, /*#__PURE__*/_react["default"].createElement(Story, null)), /*#__PURE__*/_react["default"].createElement(_grid.GridItem, {
    sm: 12,
    md: 4
  }, /*#__PURE__*/_react["default"].createElement(_text.Text, {
    spacing: ['p2', 'mb2'],
    fontSize: "f0"
  }, "This example uses Grid/GridItem to define the page level structure; the second grid item uses responsive layout props to define a nested set of columnar text items.")));
};

var _default = {
  title: 'Recipes/Layout',
  parameters: {
    docs: {
      page: _layoutRecipes["default"]
    }
  },
  decorators: [PageGridDecorator]
};
exports["default"] = _default;

var NestableResponsiveColumns = function NestableResponsiveColumns() {
  return /*#__PURE__*/_react["default"].createElement(_card.Card, {
    stacked: {
      sm: 'column',
      md: 'row'
    },
    spacing: {
      sm: ['pv1', 'ph2'],
      md: ['ph1', 'pv2']
    }
  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
    grow: {
      md: 1
    },
    basis: {
      md: 0
    },
    spacing: {
      sm: 'pv1',
      md: 'ph1'
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.anim id est laborum."), /*#__PURE__*/_react["default"].createElement(_box.Box, {
    grow: {
      md: 1
    },
    basis: {
      md: 0
    },
    spacing: {
      sm: 'pv1',
      md: 'ph1'
    }
  }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."), /*#__PURE__*/_react["default"].createElement(_box.Box, {
    grow: {
      md: 1
    },
    basis: {
      md: 0
    },
    spacing: {
      sm: 'pv1',
      md: 'ph1'
    }
  }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."));
};

exports.NestableResponsiveColumns = NestableResponsiveColumns;