"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TruncateWithTooltipTable = exports.TruncateWithTooltipDefault = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Molecules / TruncateWithTooltip',
  parameters: {
    component: _.TruncateWithTooltip
  }
};
var StyledBackground = _styledComponents.default.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 = _styledComponents.default.div.withConfig({
  displayName: "TruncateWithTooltipstories__StyledDiv",
  componentId: "sc-1pvd4mn-1"
})(["max-width:", "px;"], function (p) {
  return p.theme.spacing.unit(35);
});
var TruncateWithTooltipDefault = exports.TruncateWithTooltipDefault = function TruncateWithTooltipDefault() {
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledDiv, null, _react.default.createElement(_.TruncateWithTooltip, {
    position: "bottom",
    label: "Hover over this truncated text"
  }, _react.default.createElement(_.Typography, {
    type: "primary"
  }, "Hover over this truncated text"))), _react.default.createElement(_.Box, {
    mt: 5
  }, _react.default.createElement(_.TruncateWithTooltip, {
    position: "bottom",
    label: "If not truncated no tooltip will show"
  }, _react.default.createElement(_.Typography, {
    type: "primary"
  }, "If not truncated no tooltip will show"))));
};
var TruncateWithTooltipTable = exports.TruncateWithTooltipTable = function TruncateWithTooltipTable() {
  return _react.default.createElement(StyledBackground, null, _react.default.createElement(_.Typography, {
    type: "title3"
  }, "Table With Different Alignments"), _react.default.createElement(_.FlexTable, null, _react.default.createElement(_.FlexTable.HeaderRow, null, _react.default.createElement(_.FlexTable.Header, {
    columnId: "column1"
  }, "Truncated Header Truncated Header Truncated Header"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column2",
    justifyContent: "flex-start"
  }, "Left"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Right"), _react.default.createElement(_.FlexTable.Header, {
    columnId: "column4",
    justifyContent: "center"
  }, "Center")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 1-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-start"
  }, "Cell 1-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Truncated Cell Truncated Cell Truncated Cell"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 1-4")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Truncated Cell Truncated Cell Truncated Cell"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-start"
  }, "Cell 2-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 2-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 2-4")), _react.default.createElement(_.FlexTable.Row, null, _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column1"
  }, "Cell 3-1"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column2",
    justifyContent: "flex-start"
  }, "Cell 3-2"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column3",
    justifyContent: "flex-end"
  }, "Cell 3-3"), _react.default.createElement(_.FlexTable.Cell, {
    columnId: "column4",
    justifyContent: "center"
  }, "Cell 3-4"))));
};