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

wix-style-react

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 */
import React from 'react';
import { storiesOf } from '@storybook/react';

import { getTestStoryKind } from '../storiesHierarchy';
import { storySettings, testStories } from './storySettings';

import Popover from '../../src/Popover';
import IconButton from '../../src/IconButton';
import More from '../../src/new-icons/More';

var kind = getTestStoryKind(storySettings);
var dataHook = 'story-popover-test';

var TestContainer = function TestContainer(_ref) {
  var children = _ref.children;
  return React.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 React.createElement(
    Popover,
    {
      shown: true,
      showArrow: true,
      placement: placement,
      appendTo: 'window',
      style: _extends({
        position: 'absolute'
      }, anchorStyles)
    },
    React.createElement(
      Popover.Element,
      null,
      React.createElement(
        IconButton,
        null,
        React.createElement(More, null)
      )
    ),
    React.createElement(
      Popover.Content,
      null,
      React.createElement('div', {
        style: {
          width: 168,
          height: 90
        }
      })
    )
  );
};

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

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

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