import React from 'react';
import { FlexTable } from '../../..';
import docs from '../FlexTable.mdx';
import { StyledBackground } from './storiesShared';
export default {
  title: 'Molecules / FlexTable / With Different Rows',
  parameters: {
    component: FlexTable,
    docs: {
      page: docs
    }
  }
};
export var DefaultRows = function DefaultRows() {
  return React.createElement(StyledBackground, null, 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"
  }, "Default"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Default"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Default")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Default"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Default"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Default")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Default"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Default"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Default"))));
};
export var WithColoredSeparators = function WithColoredSeparators() {
  return React.createElement(StyledBackground, null, 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, {
    separatorColor: function separatorColor(t) {
      return t.color.menuAccent1;
    }
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Separator color set"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Separator color set"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Separator color set")), React.createElement(FlexTable.Row, {
    separatorColor: function separatorColor(t) {
      return t.color.menuAccent2;
    }
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Separator color set"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Separator color set"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Separator color set")), React.createElement(FlexTable.Row, {
    separatorColor: function separatorColor(t) {
      return t.color.menuAccent3;
    }
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Separator color set"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Separator color set"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Separator color set"))));
};
export var WithoutHoverHighlight = function WithoutHoverHighlight() {
  return React.createElement(StyledBackground, null, 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, {
    hoverHighlight: false
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "No hover highlight"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "No hover highlight"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "No hover highlight")), React.createElement(FlexTable.Row, {
    hoverHighlight: false
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "No hover highlight"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "No hover highlight"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "No hover highlight")), React.createElement(FlexTable.Row, {
    hoverHighlight: false
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "No hover highlight"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "No hover highlight"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "No hover highlight"))));
};
export var WithHiddenSeparator = function WithHiddenSeparator() {
  return React.createElement(StyledBackground, null, 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, {
    hideSeparator: true
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Separator hidden"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Separator hidden"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Separator hidden")), React.createElement(FlexTable.Row, {
    hideSeparator: true
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Separator hidden"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Separator hidden"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Separator hidden")), React.createElement(FlexTable.Row, {
    hideSeparator: true
  }, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Separator hidden"), React.createElement(FlexTable.Cell, {
    columnId: "column2"
  }, "Separator hidden"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Separator hidden"))));
};