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); }
import React from 'react';
import { Button, Flag, Flexbox, FlexTable, OldIcon, Typography } from '../../..';
import { ICON_COLUMN_DEFAULT_FLEX_PROPS } from '../shared/constants';
import docs from '../FlexTable.mdx';
export default {
  title: 'Molecules / FlexTable / With different table props',
  parameters: {
    component: FlexTable,
    docs: {
      page: docs
    }
  }
};
export var Default = function Default() {
  return React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), React.createElement(FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), React.createElement(FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 3-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 3-3")));
};
export var WithTitle = function WithTitle() {
  return React.createElement(FlexTable, {
    id: "table-with-title",
    title: "A Title"
  }, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), React.createElement(FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), React.createElement(FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")));
};
var CustomTitle = function CustomTitle(_ref) {
  var country = _ref.country,
    name = _ref.name,
    shortName = _ref.shortName;
  return React.createElement(Flexbox, {
    container: true,
    alignItems: "baseline",
    gap: 1
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Flag, {
    country: country,
    size: "s"
  })), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, {
    type: "secondary",
    weight: "bold"
  }, name)), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.label;
    }
  }, "(", shortName, ")")));
};
export var WithCustomTitle = function WithCustomTitle() {
  return React.createElement(FlexTable, {
    id: "custom-title",
    title: React.createElement(CustomTitle, {
      country: "SE",
      name: "Ericsson Corporation",
      shortName: "ERICSSON"
    })
  }, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), React.createElement(FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), React.createElement(FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")));
};
export var WithFooter = function WithFooter() {
  return React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), React.createElement(FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), React.createElement(FlexTable.Header, {
    columnId: "column3"
  }, "Header 3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 3-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 3-3")), React.createElement(FlexTable.FooterRow, null, React.createElement(FlexTable.Footer, {
    columnId: "column1"
  }, "Footer 1"), React.createElement(FlexTable.Footer, {
    columnId: "column2"
  }, "Footer 2"), React.createElement(FlexTable.Footer, {
    columnId: "column3"
  }, "Footer 3")));
};
export var WithActionsColumn = function WithActionsColumn() {
  return React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), React.createElement(FlexTable.Header, {
    columnId: "column2"
  }, "Header 2"), React.createElement(FlexTable.Header, {
    columnId: "column3"
  }, "Header 3"), React.createElement(FlexTable.Header, _extends({
    columnId: "actionsColumn"
  }, ICON_COLUMN_DEFAULT_FLEX_PROPS))), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 1-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 1-3"), React.createElement(FlexTable.Cell, _extends({
    columnId: "actionsColumn"
  }, ICON_COLUMN_DEFAULT_FLEX_PROPS), React.createElement(Button, {
    variant: "neutral"
  }, React.createElement(OldIcon.ThreeDots, null)))), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 2-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 2-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3"), React.createElement(FlexTable.Cell, _extends({
    columnId: "actionsColumn"
  }, ICON_COLUMN_DEFAULT_FLEX_PROPS), React.createElement(Button, {
    variant: "neutral"
  }, React.createElement(OldIcon.ThreeDots, null)))), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Cell 3-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 3-3"), React.createElement(FlexTable.Cell, _extends({
    columnId: "actionsColumn"
  }, ICON_COLUMN_DEFAULT_FLEX_PROPS), React.createElement(Button, {
    variant: "neutral"
  }, React.createElement(OldIcon.ThreeDots, null)))));
};