design-system-govbr-rnp/dist/utilities/Grid/Grid.stories.js

## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.GridComponent = exports.ExampleComponent = exports.Container = void 0;
var _react = _interopRequireDefault(require("react"));
var _Grid = _interopRequireDefault(require("./Grid"));
var _Row = _interopRequireDefault(require("./Row"));
var _Col = _interopRequireDefault(require("./Col"));
var _Typography = _interopRequireDefault(require("../Typography/Typography"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _default = {
  title: "Utilities/CSS/Grid",
  component: _Grid.default,
  argTypes: {
    container: {
      name: "Container",
      type: {
        name: "string"
      },
      control: {
        type: "select",
        options: ["sm", "md", "lg", "xl", "fluid"]
      }
    },
    quantity: {
      name: "Amount of columns",
      type: {
        name: "number"
      },
      description: "Quantidade de colunas",
      control: {
        type: "select",
        options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      }
    },
    colSize: {
      name: "colSize",
      type: {
        name: "string",
        required: true
      }
    }
  }
};
exports.default = _default;
var TemplateContainer = function TemplateContainer(args) {
  return /*#__PURE__*/_react.default.createElement(_Grid.default, _extends({}, args, {
    style: {
      height: "140px",
      border: "1px solid #000"
    }
  }));
};
var Container = TemplateContainer.bind({});
exports.Container = Container;
Container.storyName = "Container";
Container.args = {
  container: "fluid"
};
Container.parameters = {
  controls: {
    exclude: ["Amount of columns", "colSize"]
  }
};
var colStyle = {
  background: "rgb(var(--orange-warm-vivid-10-rgb))",
  border: "1px solid rgb(var(--orange-warm-vivid-20-rgb))",
  boxSizing: "border-box",
  height: "140px"
};
var TemplateGrid = function TemplateGrid(args) {
  var items = [];
  for (var i = 0; i < args.quantity; i++) {
    items.push( /*#__PURE__*/_react.default.createElement(_Col.default, _extends({}, args, {
      style: colStyle
    })));
  }
  return /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: args.container
  }, /*#__PURE__*/_react.default.createElement(_Row.default, {
    rowSize: "d-flex flex-wrap"
  }, items.map(function (item) {
    return item;
  }, [])));
};
var GridComponent = TemplateGrid.bind({});
exports.GridComponent = GridComponent;
GridComponent.storyName = "Col";
GridComponent.args = {
  quantity: 12,
  colSize: "col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1",
  container: "xl"
};
var ExampleGrid = function ExampleGrid(args) {
  var items = [];
  for (var i = 0; i < args.quantity; i++) {
    items.push( /*#__PURE__*/_react.default.createElement(_Col.default, _extends({}, args, {
      style: colStyle
    })));
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    component: "h1",
    title: "Exemplo com tamanhos diferentes de coluna"
  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    component: "h4",
    title: "col-md-1 col-md-4 col-md-4 col-md-3"
  }), /*#__PURE__*/_react.default.createElement(_Grid.default, args, /*#__PURE__*/_react.default.createElement(_Row.default, _extends({}, args, {
    rowSize: "d-flex flex-wrap"
  }), /*#__PURE__*/_react.default.createElement(_Col.default, {
    colSize: "col-md-1",
    style: colStyle
  }), /*#__PURE__*/_react.default.createElement(_Col.default, {
    colSize: "col-md-4",
    style: colStyle
  }), /*#__PURE__*/_react.default.createElement(_Col.default, {
    colSize: "col-md-4",
    style: colStyle
  }), /*#__PURE__*/_react.default.createElement(_Col.default, {
    colSize: "col-md-3",
    style: colStyle
  }))), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    component: "h1",
    title: "Exemplo com tamanhos diferentes de coluna em diferentes resolu\xE7\xF5es"
  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    component: "h4",
    title: "col-sm-6 col-md-3 col-lg-3 | col-sm-6 col-md-3 col-lg-6 | col-sm-6 col-md-3 col-lg-2 | col-sm-6 col-md-3 col-lg-1"
  }), /*#__PURE__*/_react.default.createElement(_Grid.default, args, /*#__PURE__*/_react.default.createElement(_Row.default, _extends({}, args, {
    rowSize: "d-flex flex-wrap"
  }), /*#__PURE__*/_react.default.createElement(_Col.default, {
    colSize: "col-sm-6 col-md-3 col-lg-3",
    style: colStyle
  }), /*#__PURE__*/_react.default.createElement(_Col.default, {
    colSize: "col-sm-6 col-md-3 col-lg-6",
    style: colStyle
  }), /*#__PURE__*/_react.default.createElement(_Col.default, {
    colSize: "col-sm-6 col-md-3 col-lg-2",
    style: colStyle
  }), /*#__PURE__*/_react.default.createElement(_Col.default, {
    colSize: "col-sm-6 col-md-3 col-lg-1",
    style: colStyle
  }))));
};
var ExampleComponent = ExampleGrid.bind({});
exports.ExampleComponent = ExampleComponent;
ExampleComponent.storyName = "Example";
ExampleComponent.args = {
  quantity: 12,
  colSize: "col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1",
  container: "xl"
};
ExampleComponent.parameters = {
  controls: {
    exclude: ["Amount of columns", "colSize", "Container"]
  }
};