"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TablesWithDifferentSizesInMobile = exports.TablesWithDifferentFontSizes = exports.TablesWithDifferentDensities = exports.TablesWithDifferentColumnDistanceOnMobile = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("../../..");
var _FlexTable = _interopRequireDefault(require("../FlexTable.mdx"));
var _storiesShared = require("./storiesShared");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Molecules / FlexTable / With different size props',
  parameters: {
    component: _.FlexTable,
    docs: {
      page: _FlexTable.default
    }
  }
};
var TablesWithDifferentDensities = exports.TablesWithDifferentDensities = function TablesWithDifferentDensities() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Tables With Different Densities"), "\xA0", _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Default (Medium)"), _react.default.createElement(_.Box, {
    mb: 10
  }, _react.default.createElement(_.FlexTable, null, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")))), _react.default.createElement(_.Box, {
    mb: 10
  }, _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Small"), _react.default.createElement(_.FlexTable, {
    density: "s"
  }, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")))), _react.default.createElement(_.Box, {
    mb: 10
  }, _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Medium"), _react.default.createElement(_.FlexTable, null, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")))), _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Large"), _react.default.createElement(_.FlexTable, {
    density: "l"
  }, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3"))));
};
var TablesWithDifferentFontSizesExample = function TablesWithDifferentFontSizesExample() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Box, {
    mb: 10
  }, _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Default (Medium)"), _react.default.createElement(_.FlexTable, null, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")))), _react.default.createElement(_.Box, {
    mb: 10
  }, _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Small"), _react.default.createElement(_.FlexTable, {
    fontSize: "s"
  }, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")))), _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Medium"), _react.default.createElement(_.FlexTable, {
    fontSize: "m"
  }, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3"))));
};
var TablesWithDifferentFontSizes = exports.TablesWithDifferentFontSizes = function TablesWithDifferentFontSizes() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Tables With Different Font Sizes"), _react.default.createElement(TablesWithDifferentFontSizesExample, null));
};
var TablesWithDifferentSizesInMobile = exports.TablesWithDifferentSizesInMobile = function TablesWithDifferentSizesInMobile() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Tables With Different Sizes on mobile"), "\xA0", _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Small density and font on desktop, large on mobile"), _react.default.createElement(_.FlexTable, {
    density: "l",
    fontSize: "m",
    md: {
      density: 's',
      fontSize: 's'
    }
  }, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")), _react.default.createElement(_.FlexTable.FooterRow, null, _react.default.createElement(_.FlexTable.Footer, {
    columnId: "column1"
  }, "Footer 1"), _react.default.createElement(_.FlexTable.Footer, {
    columnId: "column2"
  }, "Footer 2"), _react.default.createElement(_.FlexTable.Footer, {
    columnId: "column3"
  }, "Footer 3"))));
};
var TablesWithDifferentColumnDistanceOnMobile = exports.TablesWithDifferentColumnDistanceOnMobile = function TablesWithDifferentColumnDistanceOnMobile() {
  return _react.default.createElement(_storiesShared.StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Tables With Different Column Distance on mobile"), _react.default.createElement(_.FlexTable, {
    columnDistance: 2,
    sm: {
      columnDistance: 10
    }
  }, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Header 2"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3"))));
};