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

package/components/dropdown/dropdown.examples.js

@@ -1,151 +0,0 @@
-import React from 'react';
-import chevronDownIcon from '@jetbrains/icons/chevron-down';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import {ActiveItemContext} from '../list/list';
-
-import Popup from '@jetbrains/ring-ui/components/popup/popup';
-import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Link from '@jetbrains/ring-ui/components/link/link';
-import {Input} from '@jetbrains/ring-ui/components/input/input';
-import getUID from '@jetbrains/ring-ui/components/global/get-uid';
-import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
-
-export default {
-  title: 'Components/Dropdown',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A stateful popup with a clickable anchor.',
-
-    hermione: {
-      actions: [
-        {type: 'click', selector: '[data-test~=ring-dropdown]'},
-        {
-          type: 'capture',
-          name: 'dropdown',
-          selector: ['[data-test~=ring-dropdown]', '[data-test~=ring-popup]']
-        }
-      ]
-    }
-  }
-};
-
-export const basic = () => (
-  <Dropdown anchor="Click me">
-    <Popup>Popup content</Popup>
-  </Dropdown>
-);
-
-basic.storyName = 'basic';
-
-export const withCustomAnchorAndPopup = () => (
-  <Dropdown anchor={<Button delayed>Edit</Button>}>
-    <PopupMenu closeOnSelect data={['Cut', 'Copy', 'Paste'].map(label => ({label}))}/>
-  </Dropdown>
-);
-
-export const withCustomAnchorAndPopupAndContentAccessibilityHandling = () => {
-  const listId = getUID('popup-menu-list-id');
-
-  return (
-    <ActiveItemContext.Provider>
-      <Dropdown anchor={({active}) => (
-        <ActiveItemContext.ValueContext.Consumer>
-          {activeItemId => {
-            const anchorAriaProps = active && activeItemId
-              ? {'aria-owns': listId, 'aria-activedescendant': activeItemId}
-              : {};
-            return (
-              <Button
-                {...anchorAriaProps}
-                delayed
-              >Edit</Button>
-            );
-          }}
-        </ActiveItemContext.ValueContext.Consumer>
-      )}
-      >
-        <PopupMenu
-          id={listId}
-          ariaLabel="My options menu"
-          closeOnSelect
-          activateFirstItem
-          data={['Cut', 'Copy', 'Paste'].map(label => ({label, key: label.toLowerCase()}))}
-        />
-      </Dropdown>
-    </ActiveItemContext.Provider>
-  );
-};
-
-withCustomAnchorAndPopup.storyName = 'with custom anchor and popup';
-
-export const withActiveClassName = () => (
-  <Dropdown
-    className="chevron"
-    activeClassName="rotated"
-    anchor={<Button title="Details" icon={chevronDownIcon}/>}
-  >
-    <Popup>Popup content</Popup>
-  </Dropdown>
-);
-
-withActiveClassName.storyName = 'with activeClassName';
-
-withActiveClassName.parameters = {
-  storyStyles: `
-<style>
-  .chevron svg {
-    transition: transform 0.3s ease-out;
-    transform-origin: 50% 40%;
-    transform: rotate(0deg);
-  }
-
-  .rotated svg {
-    transform: rotate(180deg);
-  }
-</style>`
-};
-
-export const withHoverMode = () => (
-  <Dropdown anchor="Hover over me" hoverMode>
-    <Popup>
-      <div>Outer popup</div>
-    </Popup>
-  </Dropdown>
-);
-
-withHoverMode.storyName = 'with hover mode';
-
-export const withHoverModeAndDisabledClickMode = () => (
-  <Dropdown anchor={<Link href="">Hover over me</Link>} clickMode={false} hoverMode>
-    <Popup>Popup content</Popup>
-  </Dropdown>
-);
-
-withHoverModeAndDisabledClickMode.storyName = 'with hover mode and disabled click mode';
-withHoverModeAndDisabledClickMode.parameters = {hermione: {skip: true}};
-
-export const autofocusOnOpen = () => (
-  <div>
-    <div style={{height: '90vh'}}/>
-    <Dropdown anchor="Scroll and then click me">
-      <Popup trapFocus autoFocusFirst>
-        <Input className="ring-js-shortcuts"/>
-      </Popup>
-    </Dropdown>
-    <div style={{height: '50vh'}}/>
-  </div>
-);
-
-autofocusOnOpen.storyName = 'autofocus on open';
-autofocusOnOpen.parameters = {hermione: {skip: true}};
-
-export const renderProps = () => (
-  <Dropdown anchor="Click me">
-    {props => <Popup {...props}><Button onClick={props.onCloseAttempt} text>Close</Button></Popup>}
-  </Dropdown>
-);
-renderProps.parameters = {hermione: {skip: true}};

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import ErrorMessage from './error-message';
-
-describe('Error Message', () => {
-  const shallowErrorMessage = props => shallow(<ErrorMessage {...props}/>);
-  const mountErrorMessage = props => mount(<ErrorMessage {...props}/>);
-
-  it('should create component', () => {
-    mountErrorMessage().should.have.type(ErrorMessage);
-  });
-
-  it('should wrap children with div', () => {
-    shallowErrorMessage().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowErrorMessage({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/footer/footer.examples.js

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Footer from '@jetbrains/ring-ui/components/footer/footer';
-
-export default {
-  title: 'Components/Footer',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: `
-Displays a configurable page footer.
-
-A footer consists of three sections, each optional:
-
-- left
-- center
-- right
-    `
-  }
-};
-
-export const basic = () => (
-  <Footer
-    className="stuff"
-    left={[
-      [
-        {
-          url: 'http://www.jetbrains.com/teamcity/?fromserver',
-          label: 'TeamCity'
-        },
-        ' by JetBrains'
-      ],
-      'Enterprise 8.0.2 EAP (build 27448)'
-    ]}
-    center={[
-      [{copyright: 2000, label: ' JetBrains'}],
-      {
-        url: 'https://teamcity.jetbrains.com/showAgreement.html',
-        label: 'License agreement',
-        title: 'read me!',
-        target: '_blank'
-      }
-    ]}
-    right={[
-      {
-        url:
-          'http://www.jetbrains.com/teamcity/feedback?source=footer&version=8.0.3%20(build%2027531)&build=27531&mode=ent',
-        label: 'Feedback'
-      }
-    ]}
-  />
-);
-
-basic.storyName = 'Footer';