var _examples$SIMPLE_EXAM;

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); }

/*
Copyright (c) 2018 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import { styled } from '../styles/index.js';
import { Button } from '../button/index.js';
import { StatefulTooltip, TRIGGER_TYPE, PLACEMENT } from './index.js';
import examples from './examples-list.js';
var Centered = styled('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  height: '90vh',
  lineHeight: 1.5
});
Centered.displayName = "Centered";
var FakeLink = styled('span', function (props) {
  return {
    borderBottom: "1px dotted ".concat(props.$theme.colors.primary500),
    color: props.$theme.colors.primary500
  };
});
FakeLink.displayName = "FakeLink";
var Paragraph = styled('p', function (props) {
  return {
    margin: '0 0 8px',
    ':last-child': {
      marginBottom: '0px'
    }
  };
});
Paragraph.displayName = "Paragraph";
var Anchor = styled('a', function (props) {
  return {
    color: 'white'
  };
});
Anchor.displayName = "Anchor";
var Grid = 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 = styled('div', function (_ref) {
  var row = _ref.row,
      col = _ref.col;
  return {
    gridColumnStart: col,
    gridRowStart: row,
    textAlign: 'center'
  };
});
GridItem.displayName = "GridItem";
export default (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, examples.SIMPLE_EXAMPLE, function Story1() {
  return React.createElement(Centered, null, React.createElement("div", {
    style: {
      maxWidth: '360px'
    }
  }, "You can use tooltips in many places, including inline text", ' ', React.createElement(StatefulTooltip, {
    accessibilityType: 'tooltip',
    content: "Tooltips display short messages."
  }, React.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, examples.MULTILINE, function Story2() {
  return React.createElement(Centered, null, React.createElement("div", null, React.createElement(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.createElement(FakeLink, {
    tabIndex: "0"
  }, "Hover Me"))));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.COMPLEX_CONTENT, function Story3() {
  return React.createElement(Centered, null, React.createElement("div", null, React.createElement(StatefulTooltip, {
    content: React.createElement("div", null, React.createElement(Paragraph, null, "Tooltips also support rendering arbitrary content."), React.createElement(Paragraph, null, "This in includes paragraphs,", ' ', React.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.createElement(FakeLink, {
    tabIndex: "0"
  }, "Hover Me"))));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.VIA_CLICK, function Story4() {
  return React.createElement(Centered, null, React.createElement("div", null, React.createElement(StatefulTooltip, {
    triggerType: TRIGGER_TYPE.click,
    content: "Bonjour!"
  }, React.createElement(Button, null, "Click Me"))));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.PLACEMENTS, function Story5() {
  var sharedProps = {
    triggerType: TRIGGER_TYPE.click,
    content: 'Bonjour!'
  };
  return React.createElement(Centered, null, React.createElement(Grid, null, React.createElement(GridItem, {
    row: 1,
    col: 2
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.topLeft
  }), React.createElement(Button, null, "TL"))), React.createElement(GridItem, {
    row: 1,
    col: 3
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.top
  }), React.createElement(Button, null, "Top"))), React.createElement(GridItem, {
    row: 1,
    col: 4
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.topRight
  }), React.createElement(Button, null, "TR"))), React.createElement(GridItem, {
    row: 2,
    col: 1
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.leftTop
  }), React.createElement(Button, null, "LT"))), React.createElement(GridItem, {
    row: 3,
    col: 1
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.left
  }), React.createElement(Button, null, "Left"))), React.createElement(GridItem, {
    row: 4,
    col: 1
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.leftBottom
  }), React.createElement(Button, null, "LB"))), React.createElement(GridItem, {
    row: 5,
    col: 2
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.bottomLeft
  }), React.createElement(Button, null, "BL"))), React.createElement(GridItem, {
    row: 5,
    col: 3
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.bottom
  }), React.createElement(Button, null, "Bottom"))), React.createElement(GridItem, {
    row: 5,
    col: 4
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.bottomRight
  }), React.createElement(Button, null, "BR"))), React.createElement(GridItem, {
    row: 2,
    col: 5
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.rightTop
  }), React.createElement(Button, null, "RT"))), React.createElement(GridItem, {
    row: 3,
    col: 5
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.right
  }), React.createElement(Button, null, "Right"))), React.createElement(GridItem, {
    row: 4,
    col: 5
  }, React.createElement(StatefulTooltip, _extends({}, sharedProps, {
    placement: PLACEMENT.rightBottom
  }), React.createElement(Button, null, "RB")))));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.STYLE_OVERRIDES, function Story6() {
  return React.createElement(Centered, null, React.createElement(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.createElement(FakeLink, {
    tabIndex: "0"
  }, "Hover Me")));
}), _examples$SIMPLE_EXAM);