"use strict";

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

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

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

var _index2 = require("./td/index");

var _index3 = require("./th/index");

var _index4 = require("./tr/index");

var _index5 = require("../../../primitives/index");

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

var _index7 = require("../../typography/index");

var _table = _interopRequireDefault(require("./table.mdx"));

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

var _default = {
  title: 'Components/Layout Containers/Responsive Table 🔬',
  component: _index.Table,
  parameters: {
    docs: {
      page: _table["default"]
    }
  }
};
exports["default"] = _default;
var headerData = [{
  key: 1,
  content: 'Name'
}, {
  key: 2,
  content: 'Age'
}, {
  key: 3,
  content: 'Email'
}];
var rowData = [{
  name: 'Jason',
  age: '23',
  email: 'jason@wealthsimple.com',
  key: 1
}, {
  name: 'Alex',
  age: '19',
  email: 'alex@wealthsimple.com',
  key: 2
}, {
  name: 'Emily',
  age: '21',
  email: 'emily@wealthsimple.com',
  key: 3
}, {
  name: 'Udara',
  age: '42',
  email: 'udara@wealthsimple.com',
  key: 4
}];

var Normal = function Normal() {
  var headers = headerData.map(function (headerItem) {
    return /*#__PURE__*/_react["default"].createElement(_index3.Th, {
      key: headerItem.key
    }, headerItem.content);
  });
  var rows = rowData.map(function (rowItem) {
    return /*#__PURE__*/_react["default"].createElement(_index4.Tr, {
      key: rowItem.key
    }, /*#__PURE__*/_react["default"].createElement(_index2.Td, null, /*#__PURE__*/_react["default"].createElement(_index7.Span, {
      fontSize: "f1",
      colorName: "greyscale-black"
    }, rowItem.name)), /*#__PURE__*/_react["default"].createElement(_index2.Td, null, /*#__PURE__*/_react["default"].createElement(_index7.Span, {
      fontSize: "f1",
      colorName: "greyscale-black"
    }, rowItem.age)), /*#__PURE__*/_react["default"].createElement(_index2.Td, null, /*#__PURE__*/_react["default"].createElement(_index7.Link, {
      href: "mailto:".concat(rowItem.email),
      target: "_blank",
      colorName: "greyscale-black"
    }, /*#__PURE__*/_react["default"].createElement(_index7.Span, {
      fontSize: "f1"
    }, rowItem.email))));
  });
  return /*#__PURE__*/_react["default"].createElement(_index5.Box, {
    colorName: "background",
    spacing: "p3"
  }, /*#__PURE__*/_react["default"].createElement(_index6.Card, null, /*#__PURE__*/_react["default"].createElement(_index.Table, {
    headers: headers,
    rows: rows,
    thWidth: 30
  })));
};

exports.Normal = Normal;

var NoPadding = function NoPadding() {
  var headers = headerData.map(function (headerItem) {
    return /*#__PURE__*/_react["default"].createElement(_index3.Th, {
      key: headerItem.key,
      padded: false
    }, headerItem.content);
  });
  var rows = rowData.map(function (rowItem) {
    return /*#__PURE__*/_react["default"].createElement(_index4.Tr, {
      key: rowItem.key
    }, /*#__PURE__*/_react["default"].createElement(_index2.Td, {
      padded: false
    }, /*#__PURE__*/_react["default"].createElement(_index7.Span, {
      fontSize: "f1",
      colorName: "greyscale-black"
    }, rowItem.name)), /*#__PURE__*/_react["default"].createElement(_index2.Td, {
      padded: false
    }, /*#__PURE__*/_react["default"].createElement(_index7.Span, {
      fontSize: "f1",
      colorName: "greyscale-black"
    }, rowItem.age)), /*#__PURE__*/_react["default"].createElement(_index2.Td, {
      padded: false
    }, /*#__PURE__*/_react["default"].createElement(_index7.Link, {
      href: "mailto:".concat(rowItem.email),
      target: "_blank",
      colorName: "greyscale-black"
    }, /*#__PURE__*/_react["default"].createElement(_index7.Span, {
      fontSize: "f1"
    }, rowItem.email))));
  });
  return /*#__PURE__*/_react["default"].createElement(_index5.Box, {
    colorName: "background",
    spacing: "p3"
  }, /*#__PURE__*/_react["default"].createElement(_index6.Card, null, /*#__PURE__*/_react["default"].createElement(_index.Table, {
    headers: headers,
    rows: rows,
    thWidth: 30
  })));
};

exports.NoPadding = NoPadding;