wix-style-react/dist/stories/Popover/testStory.js

wix-style-react

'use strict';

var _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; }; /* eslint-disable react/prop-types */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _storiesHierarchy = require('../storiesHierarchy');

var _storySettings = require('./storySettings');

var _Popover = require('../../src/Popover');

var _Popover2 = _interopRequireDefault(_Popover);

var _IconButton = require('../../src/IconButton');

var _IconButton2 = _interopRequireDefault(_IconButton);

var _More = require('../../src/new-icons/More');

var _More2 = _interopRequireDefault(_More);

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

var kind = (0, _storiesHierarchy.getTestStoryKind)(_storySettings.storySettings);
var dataHook = 'story-popover-test';

var TestContainer = function TestContainer(_ref) {
  var children = _ref.children;
  return _react2.default.createElement(
    'div',
    {
      'data-hook': dataHook,
      style: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: '#f0f4f7'
      }
    },
    children
  );
};

var PopoverAnchor = function PopoverAnchor(_ref2) {
  var anchorStyles = _ref2.anchorStyles,
      placement = _ref2.placement;
  return _react2.default.createElement(
    _Popover2.default,
    {
      shown: true,
      showArrow: true,
      placement: placement,
      appendTo: 'window',
      style: _extends({
        position: 'absolute'
      }, anchorStyles)
    },
    _react2.default.createElement(
      _Popover2.default.Element,
      null,
      _react2.default.createElement(
        _IconButton2.default,
        null,
        _react2.default.createElement(_More2.default, null)
      )
    ),
    _react2.default.createElement(
      _Popover2.default.Content,
      null,
      _react2.default.createElement('div', {
        style: {
          width: 168,
          height: 90
        }
      })
    )
  );
};

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.AUTO_POSITIONING, function () {
  return _react2.default.createElement(
    TestContainer,
    null,
    _react2.default.createElement(PopoverAnchor, {
      placement: 'auto',
      anchorStyles: {
        top: '50%',
        left: 36,
        transform: 'translateY(-50%)'
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      placement: 'auto',
      anchorStyles: {
        left: '50%',
        bottom: 36,
        transform: 'translateX(-50%)'
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      placement: 'auto',
      anchorStyles: {
        top: '50%',
        right: 36,
        transform: 'translateY(-50%)'
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      placement: 'auto',
      anchorStyles: {
        top: 36,
        left: '50%',
        transform: 'translateX(-50%)'
      }
    })
  );
});

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.ARROW_ADJUSTING, function () {
  return _react2.default.createElement(
    TestContainer,
    null,
    _react2.default.createElement(PopoverAnchor, {
      anchorStyles: {
        top: 18,
        left: 18
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      anchorStyles: {
        left: 18,
        bottom: 18
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      anchorStyles: {
        top: 18,
        right: 18
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      anchorStyles: {
        right: 18,
        bottom: 18
      }
    })
  );
});

(0, _react3.storiesOf)(kind, module).add(_storySettings.testStories.ARROW_EDGE_ADJUSTING, function () {
  return _react2.default.createElement(
    TestContainer,
    null,
    _react2.default.createElement(PopoverAnchor, {
      anchorStyles: {
        top: 0,
        left: 0
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      anchorStyles: {
        left: 0,
        bottom: 0
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      anchorStyles: {
        top: 0,
        right: 0
      }
    }),
    _react2.default.createElement(PopoverAnchor, {
      anchorStyles: {
        right: 0,
        bottom: 0
      }
    })
  );
});