"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _index = require("../styles/index.js");

var _index2 = require("../button/index.js");

var _index3 = require("./index.js");

var _examplesList = _interopRequireDefault(require("./examples-list.js"));

var _examples$SIMPLE_EXAM;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || 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); }

var Centered = (0, _index.styled)('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  height: '90vh',
  lineHeight: 1.5
});
Centered.displayName = "Centered";
var FakeLink = (0, _index.styled)('span', function (props) {
  return {
    borderBottom: "1px dotted ".concat(props.$theme.colors.primary500),
    color: props.$theme.colors.primary500
  };
});
FakeLink.displayName = "FakeLink";
var Paragraph = (0, _index.styled)('p', function (props) {
  return {
    margin: '0 0 8px',
    ':last-child': {
      marginBottom: '0px'
    }
  };
});
Paragraph.displayName = "Paragraph";
var Anchor = (0, _index.styled)('a', function (props) {
  return {
    color: 'white'
  };
});
Anchor.displayName = "Anchor";
var Grid = (0, _index.styled)('div', {
  display: 'grid',
  gridTemplateColumns: '20% 20% 20% 20% 20%',
  gridTemplateRows: '20% 20% 20% 20% 20%',
  width: '380px',
  height: '250px'
});
Grid.displayName = "Grid";
var GridItem = (0, _index.styled)('div', function (_ref) {
  var row = _ref.row,
      col = _ref.col;
  return {
    gridColumnStart: col,
    gridRowStart: row,
    textAlign: 'center'
  };
});
GridItem.displayName = "GridItem";

var _default = (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.SIMPLE_EXAMPLE, function Story1() {
  return _react.default.createElement(Centered, null, _react.default.createElement("div", {
    style: {
      maxWidth: '360px'
    }
  }, "You can use tooltips in many places, including inline text", ' ', _react.default.createElement(_index3.StatefulTooltip, {
    accessibilityType: 'tooltip',
    content: "Tooltips display short messages."
  }, _react.default.createElement(FakeLink, {
    tabIndex: "0"
  }, "such as this")), ". Tooltips are essentially just a Popover with a few style tweaks, so you can use all the features that Popover supports."));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.MULTILINE, function Story2() {
  return _react.default.createElement(Centered, null, _react.default.createElement("div", null, _react.default.createElement(_index3.StatefulTooltip, {
    content: "Tooltips don't have a maximum width by default, but you can set one easily through the overrides prop. The default typography styles make multi-line text look great.",
    overrides: {
      Inner: {
        style: {
          maxWidth: '200px'
        }
      }
    }
  }, _react.default.createElement(FakeLink, {
    tabIndex: "0"
  }, "Hover Me"))));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.COMPLEX_CONTENT, function Story3() {
  return _react.default.createElement(Centered, null, _react.default.createElement("div", null, _react.default.createElement(_index3.StatefulTooltip, {
    content: _react.default.createElement("div", null, _react.default.createElement(Paragraph, null, "Tooltips also support rendering arbitrary content."), _react.default.createElement(Paragraph, null, "This in includes paragraphs,", ' ', _react.default.createElement(Anchor, {
      href: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
      target: "_blank",
      rel: "noopener noreferrer"
    }, "links"), ", and any other markup.")),
    overrides: {
      Inner: {
        style: {
          maxWidth: '200px'
        }
      }
    }
  }, _react.default.createElement(FakeLink, {
    tabIndex: "0"
  }, "Hover Me"))));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.VIA_CLICK, function Story4() {
  return _react.default.createElement(Centered, null, _react.default.createElement("div", null, _react.default.createElement(_index3.StatefulTooltip, {
    triggerType: _index3.TRIGGER_TYPE.click,
    content: "Bonjour!"
  }, _react.default.createElement(_index2.Button, null, "Click Me"))));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.PLACEMENTS, function Story5() {
  var sharedProps = {
    triggerType: _index3.TRIGGER_TYPE.click,
    content: 'Bonjour!'
  };
  return _react.default.createElement(Centered, null, _react.default.createElement(Grid, null, _react.default.createElement(GridItem, {
    row: 1,
    col: 2
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.topLeft
  }), _react.default.createElement(_index2.Button, null, "TL"))), _react.default.createElement(GridItem, {
    row: 1,
    col: 3
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.top
  }), _react.default.createElement(_index2.Button, null, "Top"))), _react.default.createElement(GridItem, {
    row: 1,
    col: 4
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.topRight
  }), _react.default.createElement(_index2.Button, null, "TR"))), _react.default.createElement(GridItem, {
    row: 2,
    col: 1
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.leftTop
  }), _react.default.createElement(_index2.Button, null, "LT"))), _react.default.createElement(GridItem, {
    row: 3,
    col: 1
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.left
  }), _react.default.createElement(_index2.Button, null, "Left"))), _react.default.createElement(GridItem, {
    row: 4,
    col: 1
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.leftBottom
  }), _react.default.createElement(_index2.Button, null, "LB"))), _react.default.createElement(GridItem, {
    row: 5,
    col: 2
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.bottomLeft
  }), _react.default.createElement(_index2.Button, null, "BL"))), _react.default.createElement(GridItem, {
    row: 5,
    col: 3
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.bottom
  }), _react.default.createElement(_index2.Button, null, "Bottom"))), _react.default.createElement(GridItem, {
    row: 5,
    col: 4
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.bottomRight
  }), _react.default.createElement(_index2.Button, null, "BR"))), _react.default.createElement(GridItem, {
    row: 2,
    col: 5
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.rightTop
  }), _react.default.createElement(_index2.Button, null, "RT"))), _react.default.createElement(GridItem, {
    row: 3,
    col: 5
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.right
  }), _react.default.createElement(_index2.Button, null, "Right"))), _react.default.createElement(GridItem, {
    row: 4,
    col: 5
  }, _react.default.createElement(_index3.StatefulTooltip, _extends({}, sharedProps, {
    placement: _index3.PLACEMENT.rightBottom
  }), _react.default.createElement(_index2.Button, null, "RB")))));
}), _defineProperty(_examples$SIMPLE_EXAM, _examplesList.default.STYLE_OVERRIDES, function Story6() {
  return _react.default.createElement(Centered, null, _react.default.createElement(_index3.StatefulTooltip, {
    initialState: {
      isOpen: true
    },
    showArrow: true,
    overrides: {
      Arrow: {
        style: {
          backgroundColor: 'lavender'
        }
      },
      Body: {
        style: {
          backgroundColor: 'lavender',
          borderRadius: 0
        }
      },
      Inner: {
        style: {
          backgroundColor: 'lavender',
          borderRadius: 0,
          color: '#8181a0',
          fontSize: '28px',
          lineHeight: 1.2,
          fontStyle: 'italic'
        }
      }
    },
    content: "Bonjour!"
  }, _react.default.createElement(FakeLink, {
    tabIndex: "0"
  }, "Hover Me")));
}), _examples$SIMPLE_EXAM);

exports.default = _default;