import React from 'react';
import { Box, FlexTable, Typography } from '../../..';
import docs from '../FlexTable.mdx';
import { StyledBackground } from './storiesShared';
export default {
  title: 'Molecules / FlexTable / With different size props',
  parameters: {
    component: FlexTable,
    docs: {
      page: docs
    }
  }
};
export var TablesWithDifferentDensities = function TablesWithDifferentDensities() {
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Tables With Different Densities"), "\xA0", React.createElement(Typography, {
    type: "primary"
  }, "Default (Medium)"), React.createElement(Box, {
    mb: 10
  }, 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(Box, {
    mb: 10
  }, React.createElement(Typography, {
    type: "primary"
  }, "Small"), React.createElement(FlexTable, {
    density: "s"
  }, 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(Box, {
    mb: 10
  }, React.createElement(Typography, {
    type: "primary"
  }, "Medium"), 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(Typography, {
    type: "primary"
  }, "Large"), React.createElement(FlexTable, {
    density: "l"
  }, 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"))));
};
export var TablesWithDifferentFontSizes = function TablesWithDifferentFontSizes() {
  var TablesWithDifferentFontSizesExample = function TablesWithDifferentFontSizesExample() {
    return React.createElement(StyledBackground, null, React.createElement(Box, {
      mb: 10
    }, React.createElement(Typography, {
      type: "primary"
    }, "Default (Medium)"), 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(Box, {
      mb: 10
    }, React.createElement(Typography, {
      type: "primary"
    }, "Small"), React.createElement(FlexTable, {
      fontSize: "s"
    }, 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(Typography, {
      type: "primary"
    }, "Medium"), React.createElement(FlexTable, {
      fontSize: "m"
    }, 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"))));
  };
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Tables With Different Font Sizes"), React.createElement(TablesWithDifferentFontSizesExample, null));
};
export var TablesWithDifferentSizesInMobile = function TablesWithDifferentSizesInMobile() {
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Tables With Different Sizes on mobile"), "\xA0", React.createElement(Typography, {
    type: "primary"
  }, "Small density and font on desktop, large on mobile"), React.createElement(FlexTable, {
    density: "l",
    fontSize: "m",
    md: {
      density: 's',
      fontSize: 's'
    }
  }, 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.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 TablesWithDifferentColumnDistanceOnMobile = function TablesWithDifferentColumnDistanceOnMobile() {
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Tables With Different Column Distance on mobile"), React.createElement(FlexTable, {
    columnDistance: 2,
    sm: {
      columnDistance: 10
    }
  }, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Header 1"), React.createElement(FlexTable.Header, {
    columnId: "column2",
    justifyContent: "flex-end"
  }, "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",
    justifyContent: "flex-end"
  }, "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",
    justifyContent: "flex-end"
  }, "Cell 2-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3"
  }, "Cell 2-3"))));
};