"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ResponsiveColumns = exports.FitToContent = exports.EqualWidths = exports.ColumnSpanning = void 0;

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

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

var _default = {
  title: 'Utilities/Layout Grid',
  parameters: {
    docs: {
      source: {
        type: 'dynamic'
      }
    }
  }
}; // an example for responsive layout grid -- referenced in doc site

exports.default = _default;

var EqualWidths = function EqualWidths() {
  return /*#__PURE__*/_react.default.createElement("section", {
    className: "ds-l-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-row"
  }, ['Equal', 'Equal', 'Equal', 'Equal'].map(function (content) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "ds-l-col utility-example",
      key: content
    }, content);
  })));
};

exports.EqualWidths = EqualWidths;

var ColumnSpanning = function ColumnSpanning() {
  return /*#__PURE__*/_react.default.createElement("section", {
    className: "ds-l-container"
  }, ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'].map(function (numbers) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "ds-l-row",
      key: numbers
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "ds-l-col--".concat(numbers, " utility-example"),
      key: numbers
    }, "ds-l-col--", numbers));
  }));
};

exports.ColumnSpanning = ColumnSpanning;

var FitToContent = function FitToContent() {
  return /*#__PURE__*/_react.default.createElement("section", {
    className: "ds-l-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-row"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--auto utility-example"
  }, "Short content"), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--auto utility-example"
  }, "This is medium content"), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--auto utility-example"
  }, "This is very long content that fits the container")));
};

exports.FitToContent = FitToContent;

var ResponsiveColumns = function ResponsiveColumns() {
  return /*#__PURE__*/_react.default.createElement("section", {
    className: "ds-l-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-row"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2 utility-example"
  }, "A"), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2 utility-example"
  }, "B"), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2 utility-example"
  }, "C"), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2 utility-example"
  }, "D"), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2 utility-example"
  }, "E"), /*#__PURE__*/_react.default.createElement("div", {
    className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2 utility-example"
  }, "F")));
};

exports.ResponsiveColumns = ResponsiveColumns;