@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/dropdown/dropdown.test.js

@@ -1,175 +0,0 @@
-import React from 'react';
-import {
-  Simulate
-} from 'react-dom/test-utils';
-import {shallow, mount} from 'enzyme';
-
-import Popup from '../popup/popup';
-
-import Anchor from './anchor';
-import Dropdown from './dropdown';
-
-describe('Dropdown', () => {
-  let anchor;
-  let popup;
-
-  const anchorElement = (
-    <span
-      ref={function anchorRef(el) {
-        anchor = el;
-      }}
-    />
-  );
-
-  const popupElement = (
-    <Popup
-      ref={function popupRef(el) {
-        popup = el;
-      }}
-    >{'foo'}</Popup>
-  );
-
-  const shallowDropdown = (props, children = popupElement) => shallow(
-    <Dropdown
-      anchor={anchorElement}
-      {...props}
-    >
-      {children}
-    </Dropdown>
-  );
-  const mountDropdown = (props, children = popupElement) => mount(
-    <Dropdown
-      anchor={anchorElement}
-      {...props}
-    >
-      {children}
-    </Dropdown>
-  );
-
-  it('should create component', () => {
-    mountDropdown().should.have.type(Dropdown);
-  });
-
-  it('should wrap children with div', () => {
-    shallowDropdown().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowDropdown({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should not show popup by default', () => {
-    mountDropdown();
-    popup.isVisible().should.be.false;
-  });
-
-  it('should show popup on anchor click', () => {
-    mountDropdown();
-    Simulate.click(anchor);
-    popup.isVisible().should.be.true;
-  });
-
-  it('should hide popup on second anchor click', () => {
-    mountDropdown();
-    Simulate.click(anchor);
-    Simulate.click(anchor);
-    popup.isVisible().should.be.false;
-  });
-
-  it('should hide popup on outside pointer down event', done => {
-    mountDropdown();
-    Simulate.click(anchor);
-    setTimeout(() => {
-      document.dispatchEvent(new PointerEvent('pointerdown'));
-      popup.isVisible().should.be.false;
-      done();
-    }, 0);
-  });
-
-  it('should show popup when initialized with initShown=true', () => {
-    mountDropdown({initShown: true});
-    popup.isVisible().should.be.true;
-  });
-
-  it('should accept function as anchor', () => {
-    const anchorFunc = sandbox.stub().returns(anchorElement);
-    mountDropdown({anchor: anchorFunc});
-
-    anchorFunc.should.have.been.calledWithMatch({active: false});
-  });
-
-  it('should pass active property to anchor function', () => {
-    const anchorFunc = sandbox.stub().returns(anchorElement);
-    mountDropdown({anchor: anchorFunc});
-    Simulate.click(anchor);
-
-    anchorFunc.should.have.been.calledTwice;
-    anchorFunc.getCall(1).calledWithMatch({active: true}).should.be.true;
-  });
-
-  it('should render <Anchor> with child if type of anchor property is string', () => {
-    const anchorText = 'Test anchor text';
-    shallowDropdown({anchor: anchorText}).find(Anchor).children().should.have.text(anchorText);
-  });
-
-  describe('hoverMode', () => {
-    let wrapper;
-    let popupEl;
-    let clock;
-
-    const dropDownProps = {
-      hoverMode: true,
-      hoverShowTimeOut: 100,
-      hoverHideTimeOut: 300
-    };
-
-    beforeEach(() => {
-      clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-
-      const popupComponent = (
-        <Popup
-          ref={function popupRef(el) {
-            popupEl = el;
-          }}
-        >{'foo'}</Popup>
-      );
-
-      wrapper = mountDropdown(dropDownProps, popupComponent);
-    });
-
-    it('should show popup on mouse enter', () => {
-      wrapper.simulate('mouseenter');
-      clock.tick(dropDownProps.hoverShowTimeOut);
-
-      popupEl.isVisible().should.be.true;
-    });
-
-    it('should hide popup on mouse leave', () => {
-      wrapper.simulate('mouseenter');
-      clock.tick(dropDownProps.hoverShowTimeOut);
-
-      wrapper.simulate('mouseleave');
-      clock.tick(dropDownProps.hoverHideTimeOut);
-
-      popupEl.isVisible().should.be.false;
-    });
-
-    it('should no hide popup on mouse leave if wrapper was clicked', () => {
-      wrapper.simulate('click');
-
-      wrapper.simulate('mouseleave');
-      clock.tick(dropDownProps.hoverHideTimeOut);
-
-      popupEl.isVisible().should.be.true;
-    });
-
-    it('should no hide popup on click if popup is already opened by hover popup', () => {
-      wrapper.simulate('mouseenter');
-      clock.tick(dropDownProps.hoverShowTimeOut);
-
-      wrapper.simulate('click');
-
-      popupEl.isVisible().should.be.true;
-    });
-  });
-});

package/components/dropdown-menu/dropdown-menu.examples.js

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import DropdownMenu from '@jetbrains/ring-ui/components/dropdown-menu/dropdown-menu';
-
-export default {
-  title: 'Components/DropdownMenu',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a menu in a dropdown.',
-    hermione: {
-      actions: [
-        {type: 'click', selector: '[data-test~=ring-dropdown]'},
-        {
-          type: 'capture',
-          name: 'dropdown',
-          selector: ['[data-test~=ring-dropdown]', '[data-test~=ring-popup]']
-        }
-      ]
-    },
-    a11y: {element: '*[data-test~=ring-dropdown]'}
-  }
-};
-
-export const basic = () => {
-  const data = [
-    {label: 'Item'},
-    {label: 'Link to jetbrains.com', href: 'http://www.jetbrains.com'},
-    {rgItemType: DropdownMenu.ListProps.Type.SEPARATOR},
-    {rgItemType: DropdownMenu.ListProps.Type.LINK, label: 'Link Item'},
-    {
-      rgItemType: DropdownMenu.ListProps.Type.LINK,
-      label: 'Link Item With Additional Class',
-      className: 'test'
-    },
-    {rgItemType: DropdownMenu.ListProps.Type.SEPARATOR, description: 'Separator With Description'},
-    {rgItemType: DropdownMenu.ListProps.Type.TITLE, label: 'Title'},
-    {rgItemType: DropdownMenu.ListProps.Type.ITEM, label: '1 Element in group'},
-    {rgItemType: DropdownMenu.ListProps.Type.ITEM, label: '2 Element in group'}
-  ];
-
-  return <DropdownMenu data={data} anchor={'Click me!'}/>;
-};
-
-basic.storyName = 'DropdownMenu';

package/components/dropdown-menu/dropdown-menu.js

@@ -1,117 +0,0 @@
-import React, {useMemo, cloneElement} from 'react';
-import PropTypes from 'prop-types';
-
-import List, {ActiveItemContext} from '../list/list';
-import Dropdown from '../dropdown/dropdown';
-import PopupMenu from '../popup-menu/popup-menu';
-import getUID from '../global/get-uid';
-import Anchor from '../dropdown/anchor';
-
-const {children, ...dropdownPropTypes} = Dropdown.propTypes || {};
-const {
-  id: idPropType,
-  data: dataPropType,
-  ariaLabel: ariaLabelPropType,
-  onSelect: onSelectPropType
-} = PopupMenu.propTypes || {};
-
-const defaultAriaLabel = 'Dropdown menu';
-
-function DropdownAnchorWrapper({anchor, pinned, active, activeListItemId, listId, ...restProps}) {
-  const anchorAriaProps = useMemo(() => ({
-    ...(listId ? {'aria-haspopup': 'true'} : {}),
-    ...(activeListItemId ? {'aria-activedescendant': activeListItemId, 'aria-owns': listId} : {}),
-    ...(active ? {'aria-expanded': 'true'} : {})
-  }), [active, activeListItemId, listId]);
-
-  const anchorProps = useMemo(
-    () => ({active, pinned, ...restProps, ...anchorAriaProps}),
-    [pinned, active, restProps, anchorAriaProps]
-  );
-
-  const anchorComponentProps = useMemo(
-    () => ({...anchorProps, pinned: `${anchorProps.pinned}`}),
-    [anchorProps]
-  );
-
-  if (typeof anchor === 'string') {
-    return (
-      <Anchor
-        {...anchorComponentProps}
-      >{anchor}</Anchor>
-    );
-  }
-  if (typeof anchor === 'function') {
-    return anchor(({active, pinned, ...restProps}), anchorAriaProps);
-  }
-  if (!Array.isArray(anchor)) {
-    return cloneElement(
-      anchor,
-      typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps
-    );
-  }
-  return (
-    <div {...anchorAriaProps}>{anchor}</div>
-  );
-}
-
-DropdownAnchorWrapper.propTypes = {
-  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
-  pinned: PropTypes.bool,
-  active: PropTypes.bool,
-  activeListItemId: PropTypes.string,
-  listId: PropTypes.string
-};
-
-const DropdownMenu = React.forwardRef(function DropdownMenu(
-  {id, anchor, ariaLabel, data, onSelect, menuProps, ...restDropdownProps},
-  forwardedRef
-) {
-  const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
-
-  return (
-    <ActiveItemContext.Provider>
-      <Dropdown
-        anchor={({pinned, active, ...restAnchorProps}) => (
-          <ActiveItemContext.ValueContext.Consumer>
-            {activeItemId => (
-              <DropdownAnchorWrapper
-                anchor={anchor}
-                pinned={pinned}
-                active={active}
-                activeListItemId={activeItemId}
-                listId={listId}
-                {...restAnchorProps}
-              />
-            )}
-          </ActiveItemContext.ValueContext.Consumer>
-        )}
-        {...restDropdownProps}
-      >
-        <PopupMenu
-          ref={forwardedRef}
-          id={listId}
-          ariaLabel={ariaLabel || defaultAriaLabel}
-          closeOnSelect
-          activateFirstItem
-          data={data}
-          onSelect={onSelect}
-          {...menuProps}
-        />
-      </Dropdown>
-    </ActiveItemContext.Provider>
-  );
-});
-
-DropdownMenu.propTypes = {
-  id: idPropType,
-  data: dataPropType,
-  ariaLabel: ariaLabelPropType,
-  onSelect: onSelectPropType,
-  menuProps: PropTypes.object,
-  ...dropdownPropTypes
-};
-
-DropdownMenu.ListProps = List.ListProps;
-
-export default DropdownMenu;

package/components/dropdown-menu/dropdown-menu.test.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import PopupMenu from '../popup-menu/popup-menu';
-import Anchor from '../dropdown/anchor';
-
-import DropdownMenu from './dropdown-menu';
-
-const waitForCondition = (condition, rejectMessage) => new Promise((resolve, reject) => {
-  const interval = 10;
-  const maxWaitingTime = 2000;
-  let remainingTime = maxWaitingTime;
-
-  const intervalId = setInterval(() => {
-    if (condition()) {
-      clearInterval(intervalId);
-      resolve();
-    } else if (remainingTime < 0) {
-      clearInterval(intervalId);
-      reject(new Error(rejectMessage));
-    } else {
-      remainingTime -= interval;
-    }
-  }, interval);
-});
-
-describe('Dropdown Menu', () => {
-  const shallowDropdownMenu = props => shallow(<DropdownMenu id="test-list-id" {...props}/>);
-  const mountDropdownMenu = props => mount(<DropdownMenu id="test-list-id" {...props}/>);
-
-  const mountAndWaitForMenuContent = async props => {
-    const wrapper = mountDropdownMenu(props);
-
-    wrapper.find('button').getDOMNode().click();
-    await waitForCondition(
-      () => !!wrapper.find(PopupMenu).length,
-      'List was not rendered in a dropdown menu'
-    );
-
-    return wrapper;
-  };
-
-  it('should create component', () => {
-    shallowDropdownMenu({anchor: 'Anchor text'}).should.exist;
-  });
-
-  it('should open List', async () => {
-    const wrapper = await mountAndWaitForMenuContent({anchor: 'Anchor text'});
-
-    const list = wrapper.find(PopupMenu).instance().list;
-    list.should.exist;
-
-    //We need it to maintain compatibility between Dropdown Menu and List
-    list.props.data.length.should.equal(0);
-  });
-
-  it('should pass params to List', async () => {
-    const wrapper = await mountAndWaitForMenuContent({
-      anchor: 'Anchor text',
-      data: [{key: 'key1'}]
-    });
-
-    shallow(wrapper.find(PopupMenu).instance().list.renderItem({index: 1})).should.exist;
-  });
-
-  it('should add accessibility attributes to anchor', async () => {
-    const wrapper = await mountAndWaitForMenuContent({
-      anchor: 'Anchor text',
-      data: [{key: 'key1'}, {key: 'key2'}]
-    });
-
-    const anchorProps = wrapper.update().find(Anchor).props();
-    anchorProps['aria-owns'].should.equal('test-list-id');
-    anchorProps['aria-activedescendant'].should.contain(':key1');
-  });
-});

package/components/error-bubble/error-bubble.examples.js

@@ -1,96 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Select from '@jetbrains/ring-ui/components/select/select';
-
-import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
-import {Header, Content} from '@jetbrains/ring-ui/components/island/island';
-import '@jetbrains/ring-ui/components/form/form.css';
-import '@jetbrains/ring-ui/components/input-size/input-size.css';
-
-import ErrorBubble from '@jetbrains/ring-ui/components/error-bubble/error-bubble';
-
-export default {
-  title: 'Components/ErrorBubble',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Displays an error bubble near the wrapped input component when a non-empty string is passed to the `error` prop. * Passes any prop except `className` down to the input.'
-  }
-};
-
-export const basic = () => {
-  class ErrorBubbleDemo extends Component {
-    state = {value: null};
-
-    render() {
-      const {value} = this.state;
-
-      return (
-        <ErrorBubble
-          error={value ? null : 'Value is required'}
-          onSelect={selected => this.setState({value: selected})}
-          placeholder="enter something"
-        >
-          <Select
-            type={Select.Type.BUTTON}
-            size={Select.Size.M}
-            data={[{label: 'One'}, {label: 'Two'}]}
-          />
-        </ErrorBubble>
-      );
-    }
-  }
-
-  return <ErrorBubbleDemo/>;
-};
-
-basic.storyName = 'basic';
-
-export const inDialogForm = () => {
-  class ErrorBubbleDemo extends Component {
-    state = {value: null};
-
-    render() {
-      const {value} = this.state;
-
-      return (
-        <Dialog label="Dialog" show>
-          <Header>Dialog example</Header>
-          <Content>
-            <form className="ring-form">
-              <div className="ring-form__group">
-                <label htmlFor="select" className="ring-form__label">Field name</label>
-                <div className="ring-form__control ring-form__control_small">
-                  <ErrorBubble
-                    error={value ? null : 'Value is required'}
-                    onSelect={selected => this.setState({value: selected})}
-                    placeholder="enter something"
-                  >
-                    <Select
-                      id="select"
-                      type={Select.Type.BUTTON}
-                      size={Select.Size.M}
-                      data={[{label: 'One'}, {label: 'Two'}]}
-                    />
-                  </ErrorBubble>
-                </div>
-              </div>
-            </form>
-          </Content>
-        </Dialog>
-      );
-    }
-  }
-
-  return <ErrorBubbleDemo/>;
-};
-
-inDialogForm.storyName = 'in dialog form';
-
-inDialogForm.parameters = {
-  hermione: {captureSelector: ['*[data-test~=ring-dialog]', '*[data-test~=ring-error-bubble]']},
-  a11y: {element: '*[data-test~=ring-dialog],*[data-test~=ring-error-bubble]'}
-};

package/components/error-bubble/error-bubble.js

@@ -1,50 +0,0 @@
-import React, {Children, cloneElement, PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Popup from '../popup/popup';
-
-import {Directions} from '../popup/popup.consts';
-
-import styles from './error-bubble.css';
-/**
- * @name Error Bubble
- */
-
-export default class ErrorBubble extends PureComponent {
-  static propTypes = {
-    error: PropTypes.string,
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-
-    const errorBubbleClasses = classNames(styles.errorBubble, className);
-
-    return (
-      <div className={styles.errorBubbleWrapper}>
-        {Children.map(children, child => cloneElement(child, restProps))}
-
-        {restProps.error && (
-          <Popup
-            trapFocus={false}
-            className={styles.errorBubblePopup}
-            hidden={false}
-            attached={false}
-            directions={[Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP]}
-          >
-            <div
-              className={errorBubbleClasses}
-              data-test="ring-error-bubble"
-            >
-              {restProps.error}
-            </div>
-          </Popup>
-        )}
-      </div>
-    );
-  }
-}
-

package/components/error-bubble/error-bubble.test.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Input from '../input/input';
-
-import ErrorBubble from './error-bubble';
-
-const ERROR_BUBBLE_SELECTOR = '[data-test="ring-error-bubble"]';
-
-describe('Error Bubble', () => {
-  const shallowErrorBubble = params => shallow(
-    <ErrorBubble {...params}>
-      <Input/>
-    </ErrorBubble>
-  );
-  const mountErrorBubble = params => mount(
-    <ErrorBubble {...params}>
-      <Input/>
-    </ErrorBubble>
-  );
-
-  it('should create component', () => {
-    mountErrorBubble().should.have.type(ErrorBubble);
-  });
-
-  it('should wrap children with div', () => {
-    shallowErrorBubble().should.have.tagName('div');
-  });
-
-  it('should not show error bubble by default', () => {
-    shallowErrorBubble().should.not.have.descendants(ERROR_BUBBLE_SELECTOR);
-  });
-
-  it('should show error bubble', () => {
-    shallowErrorBubble({error: 'test'}).should.have.descendants(ERROR_BUBBLE_SELECTOR);
-  });
-
-  it('should use passed className', () => {
-    shallowErrorBubble({error: 'test', className: 'test-class'}).should.have.descendants('.test-class');
-  });
-});

package/components/error-message/error-message.examples.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import frownIcon from '@jetbrains/icons/frown';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Link from '@jetbrains/ring-ui/components/link/link';
-
-import ErrorMessage from '@jetbrains/ring-ui/components/error-message/error-message';
-
-export default {
-  title: 'Components/Error Message',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Displays an error message centered both vertically and horizontally inside the parent container.'
-  }
-};
-
-export const basic = () => (
-  <div style={{height: '300px'}}>
-    <ErrorMessage
-      icon={frownIcon}
-      code="Disconnected"
-      message="no answer from server."
-      description="Please try again soon."
-    >
-      <Link href="/">Go to the home page</Link>
-    </ErrorMessage>
-  </div>
-);
-
-basic.storyName = 'Error Message';

package/components/error-message/error-message.js

@@ -1,54 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Icon from '../icon/icon';
-import {Size} from '../icon/icon__constants';
-
-import styles from './error-message.css';
-
-
-/**
- * @name Error Message
- */
-
-export default class ErrorMessage extends Component {
-  static propTypes = {
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    code: PropTypes.string,
-    message: PropTypes.string,
-    description: PropTypes.string,
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
-
-  render() {
-    const {className, icon, code, message, description, children} = this.props;
-    const classes = classNames(styles.errorMessage, className);
-
-    return (
-      <div className={classes}>
-        {icon && (
-          <Icon
-            className={styles.icon}
-            glyph={icon}
-            size={Size.Size64}
-            suppressSizeWarning
-          />
-        )}
-        <div className={styles.content}>
-          <div className={styles.title}>
-            {code && `${code}:`} {message}
-          </div>
-          {description && (
-            <div className={styles.description}>
-              {description}
-            </div>
-          )}
-          {children}
-        </div>
-      </div>
-    );
-  }
-}