import React from 'react';
import styled from 'styled-components';
import { Typography, TruncateWithTooltip, Box, FlexTable } from '../..';
export default {
  title: 'Molecules / TruncateWithTooltip',
  parameters: {
    component: TruncateWithTooltip
  }
};
var StyledBackground = styled.div.withConfig({
  displayName: "TruncateWithTooltipstories__StyledBackground",
  componentId: "sc-1pvd4mn-0"
})(["background-color:", ";&:not(:last-of-type){margin-bottom:", "px;}"], function (p) {
  return p.theme.color.background;
}, function (p) {
  return p.theme.spacing.unit(10);
});
var StyledDiv = styled.div.withConfig({
  displayName: "TruncateWithTooltipstories__StyledDiv",
  componentId: "sc-1pvd4mn-1"
})(["max-width:", "px;"], function (p) {
  return p.theme.spacing.unit(35);
});
export var TruncateWithTooltipDefault = function TruncateWithTooltipDefault() {
  return React.createElement(React.Fragment, null, React.createElement(StyledDiv, null, React.createElement(TruncateWithTooltip, {
    position: "bottom",
    label: "Hover over this truncated text"
  }, React.createElement(Typography, {
    type: "primary"
  }, "Hover over this truncated text"))), React.createElement(Box, {
    mt: 5
  }, React.createElement(TruncateWithTooltip, {
    position: "bottom",
    label: "If not truncated no tooltip will show"
  }, React.createElement(Typography, {
    type: "primary"
  }, "If not truncated no tooltip will show"))));
};
export var TruncateWithTooltipTable = function TruncateWithTooltipTable() {
  return React.createElement(StyledBackground, null, React.createElement(Typography, {
    type: "title3"
  }, "Table With Different Alignments"), React.createElement(FlexTable, null, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
    columnId: "column1"
  }, "Truncated Header Truncated Header Truncated Header"), React.createElement(FlexTable.Header, {
    columnId: "column2",
    justifyContent: "flex-start"
  }, "Left"), React.createElement(FlexTable.Header, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Right"), React.createElement(FlexTable.Header, {
    columnId: "column4",
    justifyContent: "center"
  }, "Center")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-start"
  }, "Cell 1-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Truncated Cell Truncated Cell Truncated Cell"), React.createElement(FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 1-4")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Truncated Cell Truncated Cell Truncated Cell"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-start"
  }, "Cell 2-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 2-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 2-4")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), React.createElement(FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-start"
  }, "Cell 3-2"), React.createElement(FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 3-3"), React.createElement(FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 3-4"))));
};