@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/popup/popup.examples.js

@@ -1,340 +0,0 @@
-import React, {Component} from 'react';
-import classNames from 'classnames';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Popup from '@jetbrains/ring-ui/components/popup/popup';
-
-export default {
-  title: 'Components/Popup',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a popup.'
-  }
-};
-
-export const basic = () => {
-  const {Directions} = Popup.PopupProps;
-
-  const directionMap = {
-    topLeft: Directions.BOTTOM_RIGHT,
-    topRight: Directions.BOTTOM_LEFT,
-    bottomLeft: Directions.TOP_RIGHT,
-    bottomRight: Directions.TOP_LEFT
-  };
-
-  const directionKeys = Object.keys(directionMap);
-  const initialState = directionKeys.reduce((acc, key) => {
-    acc[key] = true;
-    return acc;
-  }, {});
-
-  class PopupDemo extends Component {
-    state = initialState;
-
-    renderPopup = key => (
-      <div className={classNames('anchor', key)} key={key}>
-        <Popup
-          hidden={!this.state[key]}
-          onCloseAttempt={() => this.setState({[key]: false})}
-          directions={[directionMap[key]]}
-        >
-          <span>Hello, world!</span>
-        </Popup>
-      </div>
-    );
-
-    showAgain = () =>
-      setTimeout(() => {
-        this.setState({bottomLeft: true});
-      });
-
-    render() {
-      return (
-        <div>
-          {directionKeys.map(this.renderPopup)}
-          <button className="button" type="button" onClick={this.showAgain}>
-            Show again
-          </button>
-        </div>
-      );
-    }
-  }
-
-  return <PopupDemo/>;
-};
-
-basic.storyName = 'basic';
-
-basic.parameters = {
-  hermione: {captureSelector: ['.topLeft', '.topRight', '.bottomLeft', '.bottomRight']},
-  a11y: {element: '.topLeft,.topRight,.bottomLeft,.bottomRight'},
-  storyStyles: `
-<style>
-  body {
-    overflow: hidden;
-  }
-
-  .button {
-    position: absolute;
-    left: 50px;
-    bottom: 50px;
-  }
-
-  .anchor {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-  }
-
-  .topLeft {
-    left: 0;
-    top: 0;
-    background-color: red;
-  }
-
-  .topRight {
-    right: 0;
-    top: 0;
-    background-color: blue;
-  }
-
-  .bottomLeft {
-    left: 0;
-    bottom: 0;
-    background-color: green;
-  }
-
-  .bottomRight {
-    right: 0;
-    bottom: 0;
-    background-color: orange;
-  }
-</style>
-      `
-};
-
-export const autoPositioning = () => {
-  const Directions = Popup.PopupProps.Directions;
-
-  const content = <span className="popup">This is a popup</span>;
-  const PopupDemo = (
-    <div>
-      <div className="message">
-        Popup should change open direction when reaching window borders
-        <Popup directions={[Directions.TOP_CENTER]}>{content}</Popup>
-      </div>
-      <div className="message vert">
-        Popup should change open direction when reaching window borders
-        <Popup directions={[Directions.RIGHT_CENTER]}>{content}</Popup>
-      </div>
-      <div className="anchor left">
-        Left side open popup
-        <Popup directions={[Directions.LEFT_BOTTOM, Directions.RIGHT_BOTTOM]}>{content}</Popup>
-      </div>
-      <div className="anchor right">
-        Right side open popup
-        <Popup directions={[Directions.RIGHT_BOTTOM, Directions.LEFT_BOTTOM]}>{content}</Popup>
-      </div>
-      <div className="anchor bottom">
-        Downside open popup
-        <Popup directions={[Directions.BOTTOM_RIGHT, Directions.TOP_LEFT]}>{content}</Popup>
-      </div>
-      <div className="anchor top">
-        Upside open popup
-        <Popup directions={[Directions.TOP_LEFT, Directions.BOTTOM_RIGHT]}>{content}</Popup>
-      </div>
-    </div>
-  );
-
-  return PopupDemo;
-};
-
-autoPositioning.storyName = 'auto-positioning';
-
-autoPositioning.parameters = {
-  hermione: {captureSelector: ['.left', '.right', '.bottom', '.top']},
-  a11y: {element: '.left,.right,.bottom,.top'},
-  storyStyles: `
-<style>
-  .message {
-    position: absolute;
-
-    top: 50%;
-    left: 300px;
-  }
-
-  .vert {
-    top: 20%;
-    width: 150px;
-  }
-
-  .anchor {
-    position: absolute;
-  }
-
-  .left {
-    left: 0;
-    top: 50px;
-  }
-
-  .right {
-    right: 0;
-    top: 50px;
-  }
-
-  .bottom {
-    left: 150px;
-    bottom: 0;
-  }
-
-  .top {
-    right: 150px;
-    top: 0;
-  }
-</style>
-      `
-};
-
-export const popupInAPopup = () => {
-  class PopupBox extends Component {
-    state = {hidden: false};
-
-    render() {
-      return (
-        <Popup {...this.state} onCloseAttempt={() => this.setState({hidden: true})}>
-          {this.props.children}
-        </Popup>
-      );
-    }
-  }
-
-  const PopupDemo = (
-    <div>
-      Parent popup anchor
-      <PopupBox>
-        <div className="parent-popup">
-          This is a parent popup
-          <PopupBox>
-            <div className="child-popup">This is a child popup</div>
-          </PopupBox>
-        </div>
-      </PopupBox>
-    </div>
-  );
-
-  return PopupDemo;
-};
-
-popupInAPopup.storyName = 'popup in a popup';
-
-popupInAPopup.parameters = {
-  hermione: {captureSelector: 'body'},
-  storyStyles: `
-<style>
-  body {
-    min-height: 400px !important;
-  }
-
-  .parent-popup {
-    width: 100px;
-    height: 100px;
-    text-align: center;
-  }
-
-  .child-popup {
-    background-color: red;
-    text-align: center;
-    margin: 8px;
-  }
-</style>
-      `
-};
-
-export const insideAScrollableContainer = () => (
-  // Scrollable
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-  <div className="container" tabIndex={0}>
-    <div className="example">
-      <div className="anchor">
-        Popup anchor
-        <Popup>Popup content</Popup>
-      </div>
-    </div>
-  </div>
-);
-
-insideAScrollableContainer.storyName = 'inside a scrollable container';
-
-insideAScrollableContainer.parameters = {
-  hermione: {skip: true},
-  storyStyles: `
-<style>
-    body {
-      margin: 0 !important;
-    }
-
-    .container {
-      height: 100vh;
-      overflow: auto;
-    }
-
-    .example {
-      height: 200vh;
-      display: inline-block;
-    }
-
-    .anchor {
-      display: inline-block;
-    }
-</style>
-      `
-};
-
-export const fitsScreen = () => {
-  const PopupDemo = (
-    <div className="anchorBottom">
-      Popup anchor on bottom
-      <Popup maxHeight={1380}>
-        <div className="popupContent">
-          <div>Popup top</div>
-          <div>popup bottom</div>
-        </div>
-      </Popup>
-    </div>
-  );
-
-  return PopupDemo;
-};
-
-fitsScreen.storyName = 'fits screen';
-
-fitsScreen.parameters = {
-  hermione: {captureSelector: 'body'},
-  storyStyles: `
-<style>
-    body {
-      margin: 0 !important;
-    }
-
-    html,
-    body {
-      height: 100%;
-    }
-
-    .popupContent {
-      height: 1300px;
-      padding: 8px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-
-    .anchorBottom {
-      position: absolute;
-      bottom: 20px;
-    }
-</style>
-      `
-};

package/components/popup/popup.test.js

@@ -1,242 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import {getRect, getStyles} from '../global/dom';
-import simulateCombo from '../../test-helpers/simulate-combo';
-
-import Popup from './popup';
-import {MinWidth} from './popup.consts';
-
-describe('Popup', () => {
-  const shallowPopup = props => shallow(<Popup {...{children: '', ...props}}/>);
-  const mountPopup = props => mount(<Popup {...{children: '', ...props}}/>);
-
-  it('should create component', () => {
-    const popup = shallowPopup();
-    popup.should.exist;
-  });
-
-  it('should allow pass DOM node as a target', () => {
-    const targetNode = document.createElement('div');
-    const instance = mountPopup({target: targetNode}).instance();
-    const popupElement = instance.popup;
-    targetNode.contains(popupElement).should.be.true;
-  });
-
-  it('should attempt to close by pressing esc', () => {
-    const onCloseAttempt = sandbox.stub();
-    mountPopup({onCloseAttempt});
-
-    simulateCombo('esc');
-
-    onCloseAttempt.should.have.been.called;
-  });
-
-  describe('close by pointer down', () => {
-    const downEvent = new PointerEvent('pointerdown', {
-      bubbles: true,
-      cancelable: false
-    });
-    let clock;
-
-    beforeEach(() => {
-      clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-    });
-
-    it('should attempt to close by pointer down outside the element', () => {
-      const onCloseAttempt = sandbox.stub();
-      mountPopup({onCloseAttempt});
-
-      clock.tick();
-      document.body.dispatchEvent(downEvent);
-      onCloseAttempt.should.have.been.called;
-    });
-
-    it('should pass event to onCloseAttempt callback when closing by document pointer down event', () => {
-      const onCloseAttempt = sandbox.stub();
-      mountPopup({onCloseAttempt});
-
-      clock.tick();
-      document.body.dispatchEvent(downEvent);
-      onCloseAttempt.should.have.been.calledWith(sinon.match({type: 'pointerdown'}));
-    });
-
-    it('should not close popup if popup hidden', () => {
-      const onCloseAttempt = sandbox.stub();
-      mountPopup({
-        hidden: true,
-        onCloseAttempt
-      });
-
-      clock.tick();
-      document.body.dispatchEvent(downEvent);
-      onCloseAttempt.should.not.have.been.called;
-    });
-
-    it('should be closed by pointer down event outside the element after show', () => {
-      const onCloseAttempt = sandbox.stub();
-      const wrapper = mountPopup({
-        onCloseAttempt
-      });
-
-      wrapper.setProps({hidden: false}, () => {
-        clock.tick();
-        document.body.dispatchEvent(downEvent);
-        onCloseAttempt.should.have.been.called;
-      });
-    });
-
-    it('shouldn\'t be closed by pointer down event inside the element', () => {
-      const onCloseAttempt = sandbox.stub();
-      const instance = mountPopup({onCloseAttempt}).instance();
-
-      clock.tick();
-      instance.popup.dispatchEvent(downEvent);
-      onCloseAttempt.should.not.have.been.called;
-    });
-  });
-
-  describe('positioning', () => {
-    let element;
-    beforeEach(() => {
-      sandbox.stub(window, 'requestAnimationFrame').callsFake(cb => cb());
-    });
-
-    afterEach(() => {
-      if (element && element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    });
-
-    it('top-left direction', () => {
-      element = document.createElement('div');
-      element.setAttribute(
-        'style',
-        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
-      );
-      document.body.append(element);
-
-      const instance = mountPopup({
-        directions: [Popup.PopupProps.Directions.TOP_LEFT],
-        anchorElement: element
-      }).instance();
-
-      const popupElement = instance.popup;
-      const elementOffset = getRect(element);
-
-      parseInt(getStyles(popupElement).left, 10).
-        should.equal(elementOffset.left + elementOffset.width - popupElement.clientWidth);
-      parseInt(getStyles(popupElement).top, 10).
-        should.equal(elementOffset.top - popupElement.clientHeight);
-    });
-
-    it('should limit top by sidePadding if opens to the top', () => {
-      const SIDE_PADDING = 8;
-      element = document.createElement('div');
-      element.setAttribute(
-        'style',
-        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
-      );
-      document.body.append(element);
-
-      const instance = mountPopup({
-        directions: [Popup.PopupProps.Directions.TOP_LEFT],
-        anchorElement: element,
-        sidePadding: SIDE_PADDING,
-        children: <div style={{height: '300px'}}>{'foo'}</div>
-      }).instance();
-
-      getStyles(instance.popup).top.should.equal(`${SIDE_PADDING}px`);
-    });
-
-    it('bottom-right corner', () => {
-      element = document.createElement('div');
-      element.setAttribute(
-        'style',
-        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
-      );
-      document.body.append(element);
-
-      const instance = mountPopup({
-        directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT],
-        anchorElement: element
-      }).instance();
-
-      const popupElement = instance.popup;
-      const elementOffset = getRect(element);
-
-      parseInt(getStyles(popupElement).left, 10).
-        should.equal(elementOffset.left);
-      parseInt(getStyles(popupElement).top, 10).
-        should.equal(elementOffset.top + elementOffset.height);
-    });
-
-    it('should add specified offset', () => {
-      const OFFSET = 10;
-      element = document.createElement('div');
-      element.setAttribute(
-        'style',
-        'position: absolute; top: 10px; left: 15px; width: 50px; height: 50px;'
-      );
-      document.body.append(element);
-
-      const instance = mountPopup({
-        directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT],
-        anchorElement: element,
-        left: OFFSET,
-        top: OFFSET
-      }).instance();
-
-      const popupElement = instance.popup;
-      const elementOffset = getRect(element);
-
-      parseInt(getStyles(popupElement).left, 10).
-        should.equal(elementOffset.left + OFFSET);
-      parseInt(getStyles(popupElement).top, 10).
-        should.equal(elementOffset.top + elementOffset.height + OFFSET);
-    });
-
-    it('Should support minWidth = MinWidth.TARGET', () => {
-      element = document.createElement('div');
-      element.setAttribute('style', 'width: 50px; padding-left: 20px;');
-      document.body.append(element);
-
-      const instance = mountPopup({
-        minWidth: MinWidth.TARGET,
-        anchorElement: element,
-        hidden: false
-      }).instance();
-
-      // eslint-disable-next-line no-magic-numbers
-      parseInt(getStyles(instance.popup).minWidth, 10).should.equal(70);
-      element.remove();
-    });
-
-    it('Should support minWidth = number in pixels if anchor width is less than minWidth', () => {
-      element = document.createElement('div');
-      element.setAttribute('style', 'width: 50px;');
-      document.body.append(element);
-
-      const WIDTH = 345;
-      const instance = mountPopup({
-        minWidth: WIDTH, hidden: false, anchorElement: element
-      }).instance();
-
-      parseInt(instance.popup.style.minWidth, 10).should.equal(WIDTH);
-    });
-
-    it('Should use width of anchor if it is bigger than minWidth', () => {
-      const WIDTH = 345;
-
-      element = document.createElement('div');
-      element.setAttribute('style', `width: ${WIDTH}px;`);
-      document.body.append(element);
-
-      const instance = mountPopup({
-        minWidth: 20, hidden: false, anchorElement: element
-      }).instance();
-
-      parseInt(instance.popup.style.minWidth, 10).should.equal(WIDTH);
-    });
-  });
-});