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

package/components/auth-dialog-service/auth-dialog-service.test.js

@@ -1,75 +0,0 @@
-import {Simulate} from 'react-dom/test-utils';
-
-import styles from '../auth-dialog/auth-dialog.css';
-
-import authDialog from './auth-dialog-service';
-
-describe('Auth Dialog Service', () => {
-  const getContainer = () => document.querySelector('*[data-test~="ring-auth-dialog"]');
-  let hideAuthDialog;
-
-  afterEach(() => {
-    hideAuthDialog();
-  });
-
-  it('should show auth dialog', () => {
-    hideAuthDialog = authDialog();
-    const container = getContainer().
-      querySelector(`.${styles.content.split(' ').join('.')}`);
-    container.should.not.be.undefined;
-  });
-
-  it('should show auth dialog text', () => {
-    hideAuthDialog = authDialog({title: 'foo'});
-    getContainer().querySelector(`.${styles.title}`).should.contain.text('foo');
-  });
-
-  it('should show auth dialog error message', () => {
-    hideAuthDialog = authDialog({title: 'foo', errorMessage: 'error mess'});
-    getContainer().should.contain.text('error mess');
-  });
-
-  it('should show auth dialog serviceName', () => {
-    hideAuthDialog = authDialog({serviceName: 'My service'});
-    getContainer().querySelector(`.${styles.title}`).should.contain.text('Log in to My service');
-  });
-
-  it('should replace serviceName in in title', () => {
-    hideAuthDialog = authDialog({title: '==%serviceName%==', serviceName: 'My service'});
-    getContainer().querySelector(`.${styles.title}`).should.contain.text('==My service==');
-  });
-
-  it('should show auth dialog image', () => {
-    hideAuthDialog = authDialog({serviceImage: 'image://url'});
-    getContainer().should.contain('img[src="image://url"]');
-  });
-
-  it('should show auth dialog button text', () => {
-    hideAuthDialog = authDialog({title: 'foo', confirmLabel: 'confirm text'});
-    getContainer().should.contain.text('confirm text');
-  });
-
-  it('should show reject button text', () => {
-    hideAuthDialog = authDialog({title: 'foo', cancelLabel: 'reject text'});
-    getContainer().should.contain.text('reject text');
-  });
-
-  it('should call onConfirm on confirm click', () => {
-    const onConfirm = sandbox.spy();
-    hideAuthDialog = authDialog({onConfirm});
-    const okButton = getContainer().querySelector('*[data-test="auth-dialog-confirm-button"]');
-    Simulate.click(okButton);
-
-
-    onConfirm.should.have.been.called;
-  });
-
-  it('should call onCancel on cancel click', () => {
-    const onCancel = sandbox.spy();
-    hideAuthDialog = authDialog({onCancel});
-    const cancelButton = getContainer().querySelector('*[data-test="auth-dialog-cancel-button"]');
-    Simulate.click(cancelButton);
-
-    onCancel.should.have.been.called;
-  });
-});

package/components/avatar/avatar.examples.js

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Avatar, {Size} from '@jetbrains/ring-ui/components/avatar/avatar';
-import {avatarDataUri} from '@jetbrains/ring-ui/components/avatar/avatar-example-datauri';
-
-export default {
-  title: 'Components/Avatar',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays an avatar. In case of a loading error an empty square is displayed.'
-  }
-};
-
-export const avatar = () => {
-  function Example() {
-    return (
-      <div>
-        {Object.keys(Size).map(size => (
-          <div className="avatar-demo" key={size}>
-            <Avatar size={Size[size]} url={avatarDataUri}/>
-            <Avatar size={Size[size]} username="Jet Brains"/>
-            <Avatar size={Size[size]} username="Jet Brains" round/>
-            <Avatar size={Size[size]}/>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  return <Example/>;
-};
-
-avatar.parameters = {
-  storyStyles: `
-<style>
-  .avatar-demo {
-    display: flex;
-    justify-content: space-between;
-    width: 240px;
-    margin-bottom: 16px;
-  }
-</style>`
-};

package/components/avatar/avatar.test.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import {getPixelRatio} from '../global/dom';
-
-import Avatar from './avatar';
-
-const dataURI = `data:image/svg+xml,${encodeURIComponent(`
-  <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="60" cy="60" r="50" fill="#00cc00"/>
-  </svg>`
-)}`;
-
-describe('Avatar', () => {
-  it('should create component', () => {
-    render(<Avatar/>);
-    screen.getByTestId('avatar').should.exist;
-  });
-
-  it('should use passed className', () => {
-    render(<Avatar className="test-class"/>);
-    screen.getByTestId('avatar').should.have.class('test-class');
-  });
-
-  it('should use passed className when url is passed', () => {
-    render(<Avatar className="test-class" url={dataURI}/>);
-    screen.getByAltText('User avatar').should.have.class('test-class');
-  });
-
-  it('should render span when no url is passed', () => {
-    render(<Avatar/>);
-    screen.getByTestId('avatar').should.have.tagName('span');
-  });
-
-  it('should render image when url is passed', () => {
-    render(<Avatar url={dataURI}/>);
-    screen.getByAltText('User avatar').should.exist;
-  });
-
-  it('should not append params when data:uri is passed', () => {
-    render(<Avatar url={dataURI}/>);
-    screen.getByAltText('User avatar').src.should.not.match(/dpr=|size=/);
-  });
-
-  it('should append params when http:uri is passed', () => {
-    render(<Avatar url="http://"/>);
-    screen.getByAltText('User avatar').src.should.match(/dpr=|size=/);
-  });
-
-  it('should set size 20 as default', () => {
-    render(<Avatar url="http://"/>);
-    screen.getByAltText('User avatar').src.should.match(/size=20/);
-  });
-
-  it('should set proper dpr', () => {
-    render(<Avatar url="http://"/>);
-    screen.getByAltText('User avatar').src.should.match(new RegExp(`dpr=${getPixelRatio()}`));
-  });
-});

package/components/badge/badge.examples.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Group from '@jetbrains/ring-ui/components/group/group';
-
-import Badge from '@jetbrains/ring-ui/components/badge/badge';
-
-export default {
-  title: 'Components/Badge',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a badge.'
-  }
-};
-
-export const badge = () => (
-  <Group>
-    <Badge>simple</Badge>
-    <Badge gray>gray</Badge>
-    <Badge valid>valid</Badge>
-    <Badge invalid>invalid</Badge>
-    <Badge disabled>disabled</Badge>
-  </Group>
-);

package/components/badge/badge.test.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import Badge from './badge';
-import style from './badge.css';
-
-describe('Badge', () => {
-  it('should render span with badge class', () => {
-    render(<Badge/>);
-    const element = screen.getByTestId('ring-badge');
-    element.should.have.tagName('span');
-    element.should.have.class(style.badge);
-  });
-
-  it('should use passed className', () => {
-    render(<Badge className="test-class"/>);
-    screen.getByTestId('ring-badge').should.have.class('test-class');
-  });
-
-  it('should use passed data-test', () => {
-    render(<Badge data-test="foo"/>);
-    screen.getByTestId('foo', {exact: false}).should.exist;
-  });
-
-  it('should render children', () => {
-    render(<Badge>{'foo'}</Badge>);
-    screen.getByText('foo').should.exist;
-  });
-
-  it('should render valid badge', () => {
-    render(<Badge valid/>);
-    screen.getByTestId('ring-badge').should.have.class(style.valid);
-  });
-});

package/components/button/button.examples.js

@@ -1,219 +0,0 @@
-import React, {Component, Fragment} from 'react';
-import pencilIcon from '@jetbrains/icons/pencil';
-import hourglassIcon from '@jetbrains/icons/hourglass';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Loader from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
-
-import Theme, {ThemeContext} from '@jetbrains/ring-ui/components/global/theme';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-export default {
-  title: 'Components/Button',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: Button,
-    framework: 'react'
-  },
-  argTypes: {
-    blue: {
-      table: {disable: true}
-    }
-  }
-};
-
-export const single = args => <Button {...args}/>;
-single.args = {children: 'Label'};
-single.parameters = {hermione: {skip: true}};
-
-export const basic = () => {
-  function renderButtonModifications() {
-    return ['active', 'primary', 'danger', 'delayed', 'disabled', 'dropdown'].map(modifier => (
-      <Button
-        key={modifier}
-        data-test={`button-${modifier}`}
-        {...{[modifier]: true}}
-      >
-        Button {modifier}
-      </Button>
-    ));
-  }
-
-  function renderTextModifications() {
-    return ['primary', 'danger', 'disabled', 'loader'].map(modifier => (
-      <Button text key={modifier} {...{[modifier]: true}}>
-        Text action {modifier}
-      </Button>
-    ));
-  }
-
-  function renderIconWithTextModifications() {
-    return [
-      {label: 'primary', primary: true},
-      {label: 'danger', danger: true},
-      {label: 'disabled', disabled: true},
-      {label: 'primary-disabled', primary: true, disabled: true},
-      {label: 'danger-disabled', danger: true, disabled: true}
-    ].map(modifiers => (
-      <Button key={modifiers.label} icon={pencilIcon} {...modifiers}>
-        Icon action {modifiers.label}
-      </Button>
-    ));
-  }
-
-  function renderIconActionModifications() {
-    return [
-      {label: 'primary', primary: true},
-      {label: 'danger', danger: true},
-      {label: 'disabled', disabled: true},
-      {label: 'primary-disabled', primary: true, disabled: true},
-      {label: 'danger-disabled', danger: true, disabled: true}
-    ].map(modifiers => (
-      <Button
-        key={modifiers.label}
-        title={`Just icon action (${modifiers.label})`}
-        icon={pencilIcon}
-        {...modifiers}
-      />
-    ));
-  }
-
-  return (
-    <div>
-      <div className="buttons">
-        <Button>Button default</Button>
-
-        <Button short>...</Button>
-
-        <Button href="/">Button link</Button>
-
-        <Button loader>Button loader</Button>
-
-        <Button primary loader>
-          Primary loader
-        </Button>
-
-        <Button icon={pencilIcon} loader>
-          Icon loader
-        </Button>
-
-        {renderButtonModifications()}
-
-        <Button text>Text action</Button>
-
-        {renderTextModifications()}
-
-        <Button icon={pencilIcon}>Icon action</Button>
-
-        {renderIconWithTextModifications()}
-
-        <Button icon={pencilIcon} title="Icon action"/>
-
-        {renderIconActionModifications()}
-      </div>
-
-      <div className="buttons dark">
-        <ThemeContext.Provider value={Theme.DARK}>
-          <Button>Button default</Button>
-
-          <Button short>
-            ...
-          </Button>
-
-          <Button href="/">
-            Button link
-          </Button>
-
-          <Button loader>
-            Dark loader
-          </Button>
-
-          {renderButtonModifications()}
-
-          <Button text>
-            Text action
-          </Button>
-
-          {renderTextModifications()}
-
-          <Button icon={pencilIcon}>
-            Icon action
-          </Button>
-
-          {renderIconWithTextModifications()}
-
-          <Button icon={pencilIcon} title="Icon action"/>
-
-          {renderIconActionModifications()}
-        </ThemeContext.Provider>
-      </div>
-    </div>
-  );
-};
-
-basic.storyName = 'basic';
-
-basic.parameters = {
-  hermione: {
-    actions: [
-      {type: 'capture', name: '', selector: '#root'},
-      {type: 'focus', selector: '[data-test=button-active]'},
-      {type: 'capture', name: 'focus active', selector: '#root'}
-    ]
-  },
-  storyStyles: `
-<style>
-  .buttons > button {
-    margin: 8px;
-  }
-
-  .dark {
-    background: #000;
-  }
-</style>`
-};
-
-export const longAction = () => {
-  class Sleeper extends Component {
-    state = {
-      loading: false
-    };
-
-    load = () => {
-      this.setState({loading: true}, () => {
-        setTimeout(this.sleep, 2000);
-      });
-    };
-
-    sleep = () => {
-      const date = new Date();
-      let curDate;
-      do {
-        curDate = new Date();
-      } while (curDate - date < 2000);
-
-      this.setState({loading: false});
-    };
-
-    render() {
-      const {loading} = this.state;
-      return (
-        <Fragment>
-          <Button loader={loading} onClick={this.load}>
-            Sleep
-          </Button>
-          <Button title="Sleep" loader={loading} icon={hourglassIcon} onClick={this.load}/>
-          {loading && <Loader/>}
-        </Fragment>
-      );
-    }
-  }
-
-  return <Sleeper/>;
-};
-
-longAction.storyName = 'long action';
-longAction.parameters = {hermione: {skip: true}};

package/components/button/button.test.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import caretDownSVG from '@jetbrains/icons/caret-down-10px';
-
-import Button from './button';
-import styles from './button.css';
-
-describe('Button', () => {
-  it('should create component', () => {
-    render(<Button/>);
-    screen.getByRole('button').should.exist;
-  });
-
-  it('should set _default modifier', () => {
-    render(<Button/>);
-    screen.getByRole('button').className.should.include(styles.button);
-  });
-
-  it('should set modifiers', () => {
-    render(
-      <Button
-        active
-        danger
-        delayed
-        loader
-        primary
-        short
-      />
-    );
-
-    const className = screen.getByRole('button').className;
-    className.should.include(styles.active);
-    className.should.include(styles.danger);
-    className.should.include(styles.delayed);
-    className.should.include(styles.loader);
-    className.should.include(styles.primary);
-    className.should.include(styles.short);
-  });
-
-  it('should add icon', () => {
-    render(<Button icon={caretDownSVG}/>);
-
-    const element = screen.getByRole('button');
-    element.should.have.class(styles.withIcon);
-    caretDownSVG.
-      replace('/>', '></path>').
-      should.include(element.querySelector('svg').innerHTML);
-  });
-
-  it('should set custom class', () => {
-    const CUSTOM_CLASS = 'test';
-
-    render(<Button className={CUSTOM_CLASS}/>);
-
-    screen.getByRole('button').should.have.class(CUSTOM_CLASS);
-  });
-
-  it('should render link instead of button if href specified', () => {
-    render(<Button href="http://www.jetbrains.com"/>);
-
-    screen.getByRole('link').should.have.attr('href', 'http://www.jetbrains.com');
-  });
-});

package/components/button-group/button-group.examples.js

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import ButtonGroup, {Caption} from '@jetbrains/ring-ui/components/button-group/button-group';
-
-export default {
-  title: 'Components/Button Group',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Allows to group several buttons.'
-  }
-};
-
-export const buttonGroup = () => (
-  <div className="container">
-    <div>
-      <ButtonGroup>
-        <Button>1st button</Button>
-        <Button active>2nd button</Button>
-        <Button disabled>3rd button</Button>
-        <Button>4th button</Button>
-        <Button short>...</Button>
-      </ButtonGroup>
-    </div>
-    <div>
-      <ButtonGroup>
-        <Caption>Side:</Caption>
-        <Button>Left</Button>
-        <Button>Right</Button>
-      </ButtonGroup>
-    </div>
-    <div>
-      <ButtonGroup>
-        <span>
-          <Button>1st button</Button>
-        </span>
-        <span>
-          <Button>2nd button</Button>
-        </span>
-        <Button>3rd button</Button>
-      </ButtonGroup>
-    </div>
-  </div>
-);
-
-buttonGroup.parameters = {
-  storyStyles: `
-    <style>
-      .container > div {
-        margin: 1em 0;
-      }
-    </style>
-  `
-};

package/components/button-group/button-group.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import ButtonGroup from './button-group';
-
-describe('Button Group', () => {
-  it('should create component', () => {
-    mount(<ButtonGroup/>).should.have.type(ButtonGroup);
-  });
-});

package/components/button-set/button-set.examples.js

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import ButtonSet from '@jetbrains/ring-ui/components/button-set/button-set';
-
-export default {
-  title: 'Components/Button Set',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Allows to group several buttons and ensures that margins between them are consistent.'
-  }
-};
-
-export const buttonSet = () => (
-  <ButtonSet>
-    <Button>1st button</Button>
-    <Button>2nd button</Button>
-    <Button>3rd button</Button>
-  </ButtonSet>
-);

package/components/button-set/button-set.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import {mount} from 'enzyme';
-
-import ButtonSet from './button-set';
-
-describe('Button Set', () => {
-  it('should create component', () => {
-    mount(<ButtonSet/>).should.have.type(ButtonSet);
-  });
-});

package/components/button-toolbar/button-toolbar.examples.js

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-import ButtonGroup from '@jetbrains/ring-ui/components/button-group/button-group';
-
-import ButtonToolbar from '@jetbrains/ring-ui/components/button-toolbar/button-toolbar';
-
-export default {
-  title: 'Components/Button Toolbar',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a toolbar with several buttons.'
-  }
-};
-
-export const buttonToolbar = () => (
-  <ButtonToolbar>
-    <Button primary delayed>
-      Run
-    </Button>
-    <ButtonGroup>
-      <Button>Button one</Button>
-      <Button>Button two</Button>
-      <Button disabled="disabled">Button three</Button>
-    </ButtonGroup>
-    <Button>Another action</Button>
-  </ButtonToolbar>
-);

package/components/button-toolbar/button-toolbar.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import ButtonToolbar from './button-toolbar';
-
-describe('Button Toolbar', () => {
-  const shallowButtonToolbar = params => shallow(<ButtonToolbar {...params}/>);
-  const mountButtonToolbar = params => mount(<ButtonToolbar {...params}/>);
-
-  it('should create component', () => {
-    mountButtonToolbar().should.have.type(ButtonToolbar);
-  });
-
-  it('should wrap children with div', () => {
-    shallowButtonToolbar().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowButtonToolbar({className: 'test-class'}).should.have.className('test-class');
-  });
-});