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

package/components/tags-input/tags-input.test.js

@@ -1,234 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Select from '../select/select';
-
-import TagsInput from './tags-input';
-
-describe('Tags Input', () => {
-  const fakeTags = [{key: 1, label: 'test1'}];
-
-  const shallowTagsInput = props => shallow(<TagsInput tags={fakeTags} {...props}/>);
-  const mountTagsInput = props => mount(<TagsInput tags={fakeTags} {...props}/>);
-
-  describe('DOM', () => {
-    it('should render select in input_without_controls mode', () => {
-      shallowTagsInput().find(Select).should.have.prop('type', Select.Type.INPUT_WITHOUT_CONTROLS);
-    });
-
-    it('Should use passed className', () => {
-      const wrapper = shallowTagsInput({
-        className: 'test-class'
-      });
-      wrapper.should.have.className('test-class');
-    });
-  });
-
-
-  describe('Select', () => {
-    it('should auto open popup', () => {
-      const wrapper = mountTagsInput({autoOpen: true});
-      const instance = wrapper.instance();
-
-      instance.select._popup.isVisible().should.be.true;
-    });
-
-    it('Should add tag', () => {
-      const wrapper = mountTagsInput();
-      const instance = wrapper.instance();
-      instance.addTag({key: 2, label: 'test2'});
-      wrapper.state('tags').should.deep.contain({key: 2, label: 'test2'});
-    });
-
-    it('Should remove tag', async () => {
-      const wrapper = mountTagsInput();
-      const instance = wrapper.instance();
-      await instance.onRemoveTag(fakeTags[0]);
-      wrapper.state('tags').should.be.empty;
-    });
-
-    it('Should clear selected value after adding tag', () => {
-      const wrapper = mountTagsInput();
-      const instance = wrapper.instance();
-      sandbox.spy(instance.select, 'clear');
-      instance.addTag({key: 2, label: 'test2'});
-
-      instance.select.clear.should.have.been.called;
-    });
-
-    it('Should clear select input after adding tag', () => {
-      const wrapper = mountTagsInput();
-      const instance = wrapper.instance();
-      sandbox.spy(instance.select, 'filterValue');
-      instance.addTag({key: 2, label: 'test2'});
-
-      instance.select.filterValue.should.have.been.calledWith('');
-    });
-
-    it('Should copy tags to state on receiving props', () => {
-      const wrapper = shallowTagsInput();
-      const newTags = [{key: 4, label: 'test5'}];
-      wrapper.setProps({tags: newTags});
-      wrapper.state('tags').should.be.deep.equal(newTags);
-    });
-  });
-
-
-  describe('DataSource', () => {
-    it('Should call datasource and set suggestions returned', async () => {
-      const suggestions = [{key: 14, label: 'suggestion 14'}];
-      const dataSource = sandbox.spy(() => Promise.resolve(suggestions));
-      const wrapper = mountTagsInput({dataSource});
-      const instance = wrapper.instance();
-
-      await instance.loadSuggestions();
-      wrapper.state('suggestions').should.deep.equal(suggestions);
-    });
-
-    it('Should call datasource with query entered', () => {
-      const dataSource = sandbox.spy(() => Promise.resolve([]));
-      const wrapper = shallowTagsInput({dataSource});
-      const instance = wrapper.instance();
-      instance.loadSuggestions('testquery');
-
-      dataSource.should.have.been.calledWith({query: 'testquery'});
-    });
-
-    it('Should call datasource when arrow down pressed', () => {
-      const dataSource = sandbox.spy(() => Promise.resolve([]));
-      const wrapper = mountTagsInput({dataSource});
-      const instance = wrapper.instance();
-      instance.select.props.onBeforeOpen();
-
-      dataSource.should.have.been.calledWith({query: ''});
-    });
-  });
-
-
-  describe('Loading', () => {
-    it('Should turn on loading message immediately after initialization', () => {
-      const wrapper = mountTagsInput();
-      wrapper.should.have.state('loading', true);
-    });
-
-    it('Should turn on loading message while loading suggestions', async () => {
-      const dataSource = sandbox.spy(() => Promise.resolve([]));
-      const wrapper = mountTagsInput({dataSource});
-      const instance = wrapper.instance();
-
-      wrapper.should.have.state('loading', true);
-
-      await instance.loadSuggestions();
-      wrapper.should.have.state('loading', false);
-    });
-  });
-
-  it('Should drop existing tags from suggestions by key', () => {
-    const wrapper = mountTagsInput();
-    const instance = wrapper.instance();
-    const notAddedSuggestions = instance.filterExistingTags([
-      {key: 1, label: 'test1'},
-      {key: 2, label: 'test2'}
-    ]);
-
-    notAddedSuggestions.should.be.deep.equal([{key: 2, label: 'test2'}]);
-  });
-
-
-  describe('Shortcuts', () => {
-    describe('Keyboard handling', () => {
-      const getEventMock = keyboardKey => Object.assign({
-        key: keyboardKey,
-        preventDefault: sandbox.spy(),
-        target: {
-          matches: () => true
-        }
-      });
-
-      it('Should remove last tag on pressing backspace if input is empty', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        instance.getInputNode().value = '';
-        instance.handleKeyDown(getEventMock('Backspace'));
-
-        instance.onRemoveTag.should.have.been.calledWith(fakeTags[0]);
-      });
-
-      it('Should not tag on pressing backspace if input is not empty', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        instance.getInputNode().value = 'entered value';
-        instance.handleKeyDown(getEventMock('Backspace'));
-
-        instance.onRemoveTag.should.not.have.been.called;
-      });
-
-      it('should remove tag with DELETE key if tag is focused', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        wrapper.setState({
-          activeIndex: 0
-        });
-        instance.handleKeyDown(getEventMock('Delete'));
-        instance.onRemoveTag.should.have.been.calledWith(fakeTags[0]);
-      });
-
-      it('should remove tag with BACKSPACE key if tag is focused', () => {
-        const wrapper = mountTagsInput({
-          activeIndex: 0
-        });
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        instance.handleKeyDown(getEventMock('Backspace'));
-
-        instance.onRemoveTag.should.have.been.calledWith(fakeTags[0]);
-      });
-
-      it('should not remove tag with DELETE key if tag is not focused', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'onRemoveTag');
-        instance.handleKeyDown(getEventMock('Delete'));
-        instance.onRemoveTag.should.not.have.been.called;
-      });
-
-      it('should not navigate to the first tag from select input', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'selectTag');
-        instance.getInputNode();
-        instance.caret = {
-          getPosition: () => 1
-        };
-        instance.handleKeyDown(getEventMock('ArrowLeft'));
-
-        instance.selectTag.should.not.have.been.called;
-      });
-
-      it('should navigate to the first tag from select input', () => {
-        const wrapper = mountTagsInput();
-        const instance = wrapper.instance();
-        instance.caret = {
-          getPosition: sandbox.spy()
-        };
-        instance.handleKeyDown(getEventMock('ArrowLeft'));
-
-        wrapper.should.have.state('activeIndex', 0);
-      });
-
-      it('should navigate to the select input', () => {
-        const wrapper = mountTagsInput({
-          activeIndex: 0
-        });
-        const instance = wrapper.instance();
-        sandbox.spy(instance, 'setActiveIndex');
-        instance.handleKeyDown(getEventMock('ArrowRight'));
-
-        instance.setActiveIndex.should.not.have.been.calledWith(undefined);
-      });
-    });
-  });
-});

package/components/tags-list/tags-list.examples.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import TagsList from '@jetbrains/ring-ui/components/tags-list/tags-list';
-
-export default {
-  title: 'Components/Tags List',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a list of tags.'
-  }
-};
-
-export const basic = () => (
-  <TagsList
-    className="test-additional-class"
-    tags={[{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}]}
-  />
-);
-
-basic.storyName = 'basic';
-
-export const withIcons = () => (
-  <TagsList
-    tags={[
-      {key: 'test1', label: 'test1', rgTagIcon: checkmarkIcon},
-      {key: 'test2', label: 'test2'}
-    ]}
-  />
-);
-
-withIcons.storyName = 'with icons';
-
-export const disabled = () => (
-  <TagsList disabled tags={[{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}]}/>
-);
-
-disabled.storyName = 'disabled';

package/components/tags-list/tags-list.test.js

@@ -1,43 +0,0 @@
-import React, {Component} from 'react';
-import {shallow, render} from 'enzyme';
-
-import TagsList from './tags-list';
-
-describe('Tags List', () => {
-  let tagsList;
-  const tagsMock = [{key: 1, label: 'test1'}];
-  const shallowTagsList = props => shallow(<TagsList tags={tagsMock} {...props}/>);
-  const renderTagsList = props => render(<TagsList tags={tagsMock} {...props}/>);
-
-  describe('DOM', () => {
-    it('should render tags list', () => {
-      shallowTagsList().should.have.data('test', 'ring-tags-list');
-    });
-
-    it('should render passed label inside tags', () => {
-      renderTagsList().find('[data-test~="ring-tag"]').should.have.text('test1');
-    });
-
-    it('should render custom tag', () => {
-      class CustomTag extends Component {
-        render() {
-          return (<span data-test="custom-tag" className="custom-tag"/>);
-        }
-      }
-
-      tagsList = renderTagsList({
-        customTagComponent: CustomTag
-      });
-
-      tagsList.find('.custom-tag').should.have.data('test', 'custom-tag');
-    });
-
-    it('Should use passed className', () => {
-      tagsList = shallowTagsList({
-        className: 'test-class'
-      });
-
-      tagsList.should.have.className('test-class');
-    });
-  });
-});

package/components/text/text.examples.js

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Group from '@jetbrains/ring-ui/components/group/group';
-
-import Text from '@jetbrains/ring-ui/components/text/text';
-
-export default {
-  title: 'Components/Text',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A component for rendering text content.'
-  }
-};
-
-export const basic = () => (
-  <Group>
-    <Text>Text</Text>
-    <Text info>with an info message</Text>
-  </Group>
-);
-
-basic.storyName = 'Text';

package/components/text/text.test.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Text from './text';
-
-describe('Text', () => {
-  const shallowText = props => shallow(<Text {...props}/>);
-  const mountText = props => mount(<Text {...props}/>);
-
-  it('should create component', () => {
-    mountText().should.have.type(Text);
-  });
-
-  it('should wrap children with span', () => {
-    shallowText().should.have.tagName('span');
-  });
-
-  it('should use passed className', () => {
-    shallowText({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should use pass rest props to dom node', () => {
-    shallowText({'data-test': 'foo'}).should.have.data('test', 'foo');
-  });
-});

package/components/toggle/toggle.examples.js

@@ -1,79 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Toggle, {Size} from '@jetbrains/ring-ui/components/toggle/toggle';
-
-export default {
-  title: 'Components/Toggle',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a checkbox as an animated on/off toggle.'
-  }
-};
-
-export const basic = () => (
-  <div>
-    <h1>Size 16</h1>
-    <div>
-      <Toggle>Unchecked by default</Toggle>
-    </div>
-    <div>
-      <Toggle defaultChecked>Checked by default</Toggle>
-    </div>
-    <div>
-      <Toggle disabled>Disabled unchecked</Toggle>
-    </div>
-    <div>
-      <Toggle disabled defaultChecked>Disabled checked</Toggle>
-    </div>
-    <div>
-      <Toggle pale>Pale unchecked by default</Toggle>
-    </div>
-    <div>
-      <Toggle pale defaultChecked>Pale checked by default</Toggle>
-    </div>
-    <div>
-      <Toggle pale disabled>Pale disabled unchecked</Toggle>
-    </div>
-    <div>
-      <Toggle pale disabled defaultChecked>Pale disabled checked</Toggle>
-    </div>
-    <div>
-      <Toggle leftLabel="With label on the left"/>
-    </div>
-    <h1>Size 20</h1>
-    <div style={{lineHeight: '24px'}}>
-      <div>
-        <Toggle size={Size.Size20}>Unchecked by default</Toggle>
-      </div>
-      <div>
-        <Toggle size={Size.Size20} defaultChecked>Checked by default</Toggle>
-      </div>
-      <div>
-        <Toggle size={Size.Size20} disabled>Disabled unchecked</Toggle>
-      </div>
-      <div>
-        <Toggle size={Size.Size20} disabled defaultChecked>Disabled checked</Toggle>
-      </div>
-      <div>
-        <Toggle size={Size.Size20} pale>Pale unchecked by default</Toggle>
-      </div>
-      <div>
-        <Toggle size={Size.Size20} pale defaultChecked>Pale checked by default</Toggle>
-      </div>
-      <div>
-        <Toggle size={Size.Size20} pale disabled>Pale disabled unchecked</Toggle>
-      </div>
-      <div>
-        <Toggle size={Size.Size20} pale disabled defaultChecked>Pale disabled checked</Toggle>
-      </div>
-      <div>
-        <Toggle size={Size.Size20} leftLabel="With label on the left"/>
-      </div>
-    </div>
-  </div>
-);
-
-basic.storyName = 'Toggle';

package/components/toggle/toggle.test.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import Toggle from './toggle';
-import styles from './toggle.css';
-
-describe('Toggle', () => {
-  const mountToggle = props => mount(<Toggle {...props}/>);
-  const getToggleLabel = props => mountToggle(props).find('label');
-
-  it('should create component', () => {
-    mountToggle().type().should.equal(Toggle.type);
-  });
-
-  it('should wrap children with label', () => {
-    getToggleLabel().should.exist;
-  });
-
-  it('should use passed className', () => {
-    getToggleLabel({
-      className: 'test-class'
-    }).should.have.className('test-class');
-  });
-
-  it('should render input with type checkbox', () => {
-    const toggle = getToggleLabel();
-    toggle.find('input').should.have.attr('type', 'checkbox');
-  });
-
-  it('should render switch', () => {
-    const toggle = getToggleLabel();
-    toggle.find(`.${styles.switch}`).should.exist;
-  });
-});

package/components/tooltip/tooltip.examples.js

@@ -1,118 +0,0 @@
-import React, {Fragment} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import Tooltip from '@jetbrains/ring-ui/components/tooltip/tooltip';
-
-export default {
-  title: 'Components/Tooltip',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a tooltip.'
-  }
-};
-
-export const basic = () => (
-  <div style={{paddingBottom: '100px'}}>
-    <Tooltip title="Explanation">
-      <Button id="button-with-tooltip">Button that requires an explanation</Button>
-    </Tooltip>
-  </div>
-);
-
-basic.storyName = 'basic';
-
-basic.parameters = {
-  hermione: {
-    actions: [
-      {type: 'mouseEvent', selector: '[data-test~=ring-tooltip]', eventname: 'mouseover'},
-      {type: 'wait', delay: 500},
-      {type: 'capture', name: '', selector: '#root'}
-    ]
-  }
-};
-
-export const displayedWhenNecessary = () => {
-  const loremIpsum =
-    'Lorem ipsum dolor sit amet, vitae alienum prodesset vis ei, quando nullam ' +
-    'oportere sea eu, vim an labore diceret docendi. Vim ne illud iusto feugait, ' +
-    'sea laudem prompta accommodare eu, vidit noster efficiantur est id. Ex vide ' +
-    'tollit necessitatibus est, eum no quas dicunt. Luptatum singulis usu ne, cu ' +
-    'sit populo semper civibus. Tamquam dolorem qui ea, nec no dolor vidisse conceptam, ' +
-    'an est ponderum eloquentiam.';
-
-  const overflowStyles = {
-    display: 'block',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  };
-
-  return (
-    <Fragment>
-      <div style={{paddingBottom: '200px'}}>
-        <Tooltip title={loremIpsum} selfOverflowOnly className="lorem-ipsum__text">
-          <b>{"Tooltip won't be displayed:"}</b> {loremIpsum}
-        </Tooltip>
-      </div>
-      <div style={{paddingBottom: '200px'}}>
-        <Tooltip
-          title={loremIpsum}
-          selfOverflowOnly
-          style={overflowStyles}
-          className="lorem-ipsum__text_overflow"
-        >
-          <b>Tooltip will be displayed:</b> {loremIpsum}
-        </Tooltip>
-      </div>
-    </Fragment>
-  );
-};
-
-displayedWhenNecessary.storyName = 'displayed when necessary';
-
-displayedWhenNecessary.parameters = {
-  hermione: {
-    actions: [
-      {type: 'mouseEvent', selector: '.lorem-ipsum__text', eventname: 'mouseover'},
-      {type: 'capture', name: 'full text element', selector: '#root'},
-      {type: 'mouseEvent', selector: '.lorem-ipsum__text_overflow', eventname: 'mouseover'},
-      {type: 'capture', name: 'cut text element', selector: '#root'}
-    ]
-  }
-};
-
-export const nested = () => (
-  <div style={{paddingBottom: '100px'}}>
-    <Tooltip title="Explanation">
-      Some text with an explanation.
-
-      <Tooltip title="Nested Explanation">
-        <strong> Some text inside with a separate explanation. </strong>
-
-        <Tooltip title="Nested Nested Explanation">
-          <Button id="button-with-tooltip">Inline button that requires an explanation too</Button>
-        </Tooltip>
-
-        <strong> Some text inside with a separate explanation. </strong>
-      </Tooltip>
-
-      Some text with an explanation.
-    </Tooltip>
-  </div>
-);
-
-nested.storyName = 'nested';
-
-nested.parameters = {
-  hermione: {
-    actions: [
-      {type: 'mouseEvent', selector: '[data-test~=ring-tooltip]', eventname: 'mouseover'},
-      {type: 'wait', delay: 500},
-      {type: 'capture', name: '', selector: '#root'}
-    ]
-  }
-};