@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

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.js

@@ -1,29 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import styles from './text.css';
-
-/**
- * @name Text
- */
-
-export default class Text extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    info: PropTypes.bool,
-    className: PropTypes.string
-  };
-
-  render() {
-    const {children, className, info, ...restProps} = this.props;
-
-    const classes = classNames(styles.text, className, {
-      [styles.info]: info
-    });
-
-    return (
-      <span className={classes} {...restProps}>{children}</span>
-    );
-  }
-}

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.js

@@ -1,77 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import {withTheme} from '../global/theme';
-import dataTests from '../global/data-tests';
-
-import styles from './toggle.css';
-
-export const Size = {
-  Size16: styles.size16,
-  Size20: styles.size20
-};
-
-/**
-  * @name Toggle
-  */
-
-class Toggle extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    name: PropTypes.string,
-    className: PropTypes.string,
-    title: PropTypes.string,
-    leftLabel: PropTypes.node,
-    defaultChecked: PropTypes.bool,
-    checked: PropTypes.bool,
-    disabled: PropTypes.bool,
-    pale: PropTypes.bool,
-    onChange: PropTypes.func,
-    onTransitionEnd: PropTypes.func,
-    theme: PropTypes.string,
-    size: PropTypes.oneOf(Object.values(Size)),
-    'data-test': PropTypes.string
-  };
-
-  render() {
-    const {className, children, disabled, pale, title, leftLabel, theme, size = Size.Size16,
-      'data-test': dataTest, onTransitionEnd, ...restProps} = this.props;
-
-    const classes = classNames(
-      className,
-      size,
-      styles.toggle,
-      styles[theme],
-      disabled && styles.disabled
-    );
-
-    return (
-      <label
-        className={classes}
-        title={title}
-        data-test={dataTests('ring-toggle', dataTest)}
-      >
-        {leftLabel && <span className={styles.leftLabel}>{leftLabel}</span>}
-
-        <span className={styles.switchWrapper}>
-          <input
-            data-test="ring-toggle-input"
-            {...restProps}
-            type="checkbox"
-            disabled={disabled}
-            className={styles.input}
-          />
-
-          <span
-            className={classNames(styles.switch, pale && styles.paleSwitch)}
-            onTransitionEnd={onTransitionEnd}
-          />
-        </span>
-
-        {children && <span className={styles.label}>{children}</span>}
-      </label>
-    );
-  }
-}
-export default withTheme()(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'}
-    ]
-  }
-};

package/components/tooltip/tooltip.js

@@ -1,168 +0,0 @@
-import React, {Component, createContext} from 'react';
-import PropTypes from 'prop-types';
-
-import Popup from '../popup/popup';
-import {Listeners} from '../global/dom';
-import dataTests from '../global/data-tests';
-import scheduleRAF from '../global/schedule-raf';
-
-import styles from './tooltip.css';
-
-const scheduleScroll = scheduleRAF();
-
-const TooltipContext = createContext();
-
-/**
- * @name Tooltip
- */
-export default class Tooltip extends Component {
-  static propTypes = {
-    delay: PropTypes.number,
-    selfOverflowOnly: PropTypes.bool,
-    popupProps: PropTypes.object,
-    title: PropTypes.node,
-    children: PropTypes.node,
-    'data-test': PropTypes.string
-  };
-
-  static defaultProps = {
-    title: '',
-    selfOverflowOnly: false,
-    popupProps: {}
-  };
-
-  state = {
-    showPopup: false,
-    showNestedPopup: false
-  };
-
-  componentDidMount() {
-    if (this.props.title) {
-      this.addListeners();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!prevProps.title && this.props.title) {
-      this.addListeners();
-    } else if (prevProps.title && !this.props.title) {
-      this.listeners.removeAll();
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-    this.listeners.removeAll();
-  }
-
-  static PopupProps = Popup.PopupProps;
-  static contextType = TooltipContext;
-
-  listeners = new Listeners();
-  containerRef = el => {
-    this.containerNode = el;
-  };
-
-  tryToShowPopup = () => {
-    const {delay, title} = this.props;
-
-    if (!title) {
-      return;
-    }
-
-    if (delay) {
-      this.timeout = setTimeout(this.showPopup, delay);
-    } else {
-      this.showPopup();
-    }
-  };
-
-  showPopup = () => {
-    if (this.props.selfOverflowOnly) {
-      const {containerNode} = this;
-
-      // rare cases when containerNode is null are possible;
-      // probably the collision is due to the asynchronous nature of the code,
-      // i.e. this code runs after the component is unmounted,
-      // although at first glance it looks unlikely.
-      if (!containerNode) {
-        return;
-      }
-
-      // inline element?
-      if (containerNode.clientWidth === 0 && containerNode.clientHeight === 0) {
-        return;
-      }
-      if (
-        containerNode.scrollWidth <= containerNode.clientWidth &&
-        containerNode.scrollHeight <= containerNode.clientHeight
-      ) {
-        return;
-      }
-    }
-
-    this.context?.onNestedTooltipShow();
-    this.setState({showPopup: true});
-  };
-
-  hidePopup = () => {
-    clearTimeout(this.timeout);
-    this.context?.onNestedTooltipHide();
-    this.setState({showPopup: false});
-  };
-
-  addListeners() {
-    this.listeners.add(this.containerNode, 'mouseover', this.tryToShowPopup);
-    this.listeners.add(this.containerNode, 'mouseout', this.hidePopup);
-    this.listeners.add(document, 'scroll', () => scheduleScroll(this.hidePopup), {passive: true});
-  }
-
-  popupRef = el => {
-    this.popup = el;
-  };
-
-  onNestedTooltipShow = () => {
-    this.setState({showNestedPopup: true});
-  };
-
-  onNestedTooltipHide = () => {
-    this.setState({showNestedPopup: false});
-  };
-
-  render() {
-    const {children, 'data-test': dataTest,
-      title, delay, selfOverflowOnly, popupProps, ...restProps} = this.props;
-
-    const ariaProps = typeof title === 'string' && !!title
-      ? {'aria-label': title, role: 'tooltip'}
-      : {};
-
-    const {onNestedTooltipShow, onNestedTooltipHide} = this;
-
-    return (
-      <TooltipContext.Provider value={{onNestedTooltipShow, onNestedTooltipHide}}>
-        <span
-          {...ariaProps}
-          {...restProps}
-          ref={this.containerRef}
-          data-test={dataTests('ring-tooltip', dataTest)}
-          data-test-title={typeof title === 'string' ? title : undefined}
-        >
-          {children}
-          <Popup
-            trapFocus={false}
-            hidden={!this.state.showPopup || this.state.showNestedPopup}
-            onCloseAttempt={this.hidePopup}
-            maxHeight={400}
-            className={styles.tooltip}
-            attached={false}
-            top={4}
-            dontCloseOnAnchorClick
-            ref={this.popupRef}
-            {...popupProps}
-          >{title}</Popup>
-        </span>
-      </TooltipContext.Provider>
-    );
-  }
-}