@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

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

@@ -1,93 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Tag from '../tag/tag';
-
-function noop() {}
-
-/**
- * @name Tags List
- */
-
-export default class TagsList extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    tags: PropTypes.array,
-    customTagComponent: (props, propName, componentName) => {
-      if (props[propName] && !props[propName].prototype instanceof Component) {
-        return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed.`);
-      }
-      return null;
-    },
-    activeIndex: PropTypes.number,
-    canNotBeEmpty: PropTypes.bool,
-    disabled: PropTypes.bool,
-    handleClick: PropTypes.func,
-    handleRemove: PropTypes.func,
-    className: PropTypes.string,
-    tagClassName: PropTypes.string
-  };
-
-  static defaultProps = {
-    customTagComponent: null,
-    canNotBeEmpty: false,
-    disabled: false,
-    handleClick: noop,
-    handleRemove: noop
-  };
-
-  renderTag(tag, focusTag) {
-    const TagComponent = this.props.customTagComponent || Tag;
-    const readOnly = this.props.disabled || tag.readOnly ||
-      (this.props.canNotBeEmpty && this.props.tags.length === 1);
-
-    const {tagClassName} = this.props;
-
-    return (
-      <TagComponent
-        {...tag}
-        readOnly={readOnly}
-        disabled={this.props.disabled || tag.disabled}
-        focused={focusTag}
-        onClick={this.props.handleClick(tag)}
-        onRemove={this.props.handleRemove(tag)}
-        className={tagClassName}
-      >{tag.label}</TagComponent>
-    );
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      customTagComponent,
-      canNotBeEmpty,
-      handleClick,
-      tagClassName,
-      handleRemove,
-      tags,
-      activeIndex,
-      ...props
-    } = this.props;
-    const classes = classNames(
-      'ring-js-shortcuts',
-      className
-    );
-
-    const tagsList = (this.props.tags || []).map(
-      (tag, index) => this.renderTag(tag, this.props.activeIndex === index)
-    );
-
-    return (
-      <div
-        data-test="ring-tags-list"
-        className={classes}
-        {...props}
-      >
-        {tagsList}
-        {children}
-      </div>
-    );
-  }
-}

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'}
-    ]
-  }
-};