var _excluded = ["data"];

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import Tooltip from './Tooltip';
import TooltipIcon from './TooltipIcon';
import Button from '../Button/Button';
export default {
  title: 'Components/Tooltip',
  component: Tooltip,
  argTypes: {
    children: {
      control: false
    },
    data: {
      table: {
        disable: true
      }
    },
    placement: {
      options: ['auto', 'auto-start', 'auto-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
      control: {
        type: 'select'
      }
    }
  }
};

var Template = function Template(_ref) {
  var data = _ref.data,
      args = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement("div", {
    className: "ds-u-display--flex ds-u-align-items--center ds-u-margin--7 ds-u-padding--7"
  }, data, /*#__PURE__*/React.createElement(Tooltip, args));
};

export var IconTrigger = Template.bind({});
IconTrigger.args = {
  data: /*#__PURE__*/React.createElement("p", {
    className: "ds-u-margin--0"
  }, "Tooltip with icon trigger"),
  ariaLabel: 'Label describing the subject of the tooltip',
  className: 'ds-c-tooltip__trigger-icon',
  title: 'Tooltip trigger uses <TooltipIcon> for the trigger content',
  children: /*#__PURE__*/React.createElement(TooltipIcon, null)
};
export var InlineTrigger = Template.bind({});
InlineTrigger.args = {
  data: /*#__PURE__*/React.createElement("span", null, "Tooltip with\xA0"),
  className: 'ds-c-tooltip__trigger-link',
  component: 'a',
  title: 'Tooltip trigger uses <a> for the trigger, styled with dotted underline',
  children: 'inline trigger'
};
export var InteractiveContent = Template.bind({});
InteractiveContent.args = {
  dialog: true,
  className: 'ds-c-button',
  component: 'button',
  title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
    className: "ds-u-margin--0"
  }, "Tooltip dialogs only activate on click and include a focus trap. Intended for tooltips with complex layout and ", /*#__PURE__*/React.createElement("a", {
    href: "/#"
  }, "interactive elements")), /*#__PURE__*/React.createElement(Button, {
    size: "small",
    className: "ds-u-margin-top--2",
    href: "https://dequeuniversity.com/library/aria/tooltip-dialog"
  }, "More info")),
  children: 'Tooltip with interactive content'
};
export var TooltipWithCloseButton = Template.bind({});
TooltipWithCloseButton.args = {
  dialog: true,
  title: /*#__PURE__*/React.createElement(React.Fragment, null, "Entering your Social Security Number helps the plan confirm with your state that you have Medicaid."),
  children: 'Tooltip trigger',
  contentHeading: 'Really long Heading for tooltip',
  showCloseButton: true,
  className: 'ds-c-button'
};