@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/input/input.examples.js

@@ -1,140 +0,0 @@
-import React, {PureComponent, useRef} from 'react';
-import searchIcon from '@jetbrains/icons/search';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Text from '@jetbrains/ring-ui/components/text/text';
-
-import Input, {Size, Theme} from '@jetbrains/ring-ui/components/input/input';
-
-export default {
-  title: 'Components/Input',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Text input fields of varying size.'
-  }
-};
-
-export const basic = () => {
-  class ClearableInput extends PureComponent {
-    state = {
-      text: this.props.defaultValue
-    };
-
-    setText = e => {
-      this.setState({
-        text: e.target.value
-      });
-    };
-
-    clear = () => {
-      this.setState({
-        text: ''
-      });
-    };
-
-    render() {
-      const {defaultValue, ...restProps} = this.props;
-      return (
-        <Input
-          value={this.state.text}
-          onChange={this.setText}
-          onClear={this.clear}
-          {...restProps}
-        />
-      );
-    }
-  }
-
-  return (
-    <form className="inputs">
-      <Input label="Labeled input"/>
-      <Input name="login" label="Label and hint" placeholder="Hint"/>
-      <Input label="Label and value" defaultValue="Default value"/>
-      <ClearableInput label="Clearable input" defaultValue="Default value"/>
-      <ClearableInput
-        placeholder="Hint"
-        label="Disabled clearable input"
-        defaultValue="Default value"
-        disabled
-      />
-      <Input label="Input with icon" icon={searchIcon}/>
-      <ClearableInput placeholder="Hint" defaultValue="Borderless input" borderless/>
-      <ClearableInput placeholder="Hint" defaultValue="Compact input" compact icon={searchIcon}/>
-      <Input label="Disabled input" disabled defaultValue="Default value"/>
-      <Input
-        label="Invalid input"
-        error="Error description that wraps over lines because of being really long"
-      />
-      <Input label="Error without description" error=""/>
-      <Input label="Short input" size={Size.S}/>
-      <Input label="Long input" size={Size.L}/>
-      <Input
-        label="Underline message"
-        renderUnderline={() => <Text info>With custom underline</Text>}
-      />
-      <Input label="Autogrowing textarea" multiline/>
-      <div className="dark">
-        <Input
-          label="Input on dark background"
-          placeholder="Hint on dark background"
-          theme={Theme.DARK}
-        />
-      </div>
-    </form>
-  );
-};
-
-basic.storyName = 'basic';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .inputs {
-    display: flex;
-    flex-flow: column wrap;
-    max-height: 100vh;
-    margin-top: 8px;
-  }
-
-  .inputs > div {
-    margin: 0 16px;
-  }
-
-  .dark {
-    background: #000;
-    margin-left: 0;
-    padding-left: 16px;
-  }
-</style>`
-};
-
-function SelectAll() {
-  const ref = useRef();
-
-  function select() {
-    if (ref.current != null) {
-      ref.current.select();
-    }
-  }
-
-  return (
-    <>
-      <Input defaultValue="Value" inputRef={ref} label="Label"/>
-      <Button data-test-select onClick={select}>Select all</Button>
-    </>
-  );
-}
-
-export const selectAll = () => <SelectAll/>;
-
-selectAll.parameters = {
-  hermione: {
-    actions: [
-      {type: 'click', selector: '[data-test-select]'},
-      {type: 'capture', selector: '#root'}
-    ]
-  }
-};

package/components/input/input.test.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Input from './input';
-
-describe('Input', () => {
-  let input;
-  const inputRef = el => {
-    input = el;
-  };
-  const shallowInput = props => shallow(<Input {...props}/>);
-  const mountInput = props => mount(
-    <Input
-      inputRef={inputRef}
-      {...props}
-    />
-  );
-
-  it('should create component', () => {
-    mountInput().type().should.equal(Input.type);
-  });
-
-  it('should wrap children with div', () => {
-    shallowInput().should.have.tagName('div');
-  });
-
-  it('should create input by default', () => {
-    mountInput();
-    input.should.match('input');
-  });
-
-  it('should create textarea with multiline option', () => {
-    mountInput({multiline: true});
-    input.should.match('textarea');
-  });
-
-  it('should use passed className', () => {
-    mountInput({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/island/island.examples.js

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Island, {AdaptiveIsland, Header, Content} from '@jetbrains/ring-ui/components/island/island';
-
-export default {
-  title: 'Components/Island',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays an island.',
-    hermione: {captureSelector: '*[data-test~=ring-island]'}
-  }
-};
-
-export const basic = () => (
-  <Island>
-    <Header border>Title</Header>
-    <Content>Content</Content>
-  </Island>
-);
-
-basic.storyName = 'basic';
-
-export const withScroll = () => (
-  <Island className="limited-island" narrow>
-    <Header border>Title</Header>
-    <Content fade>
-      {`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-      been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
-      galley of type and scrambled it to make a type specimen book. It has survived not only five
-      centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`}
-    </Content>
-  </Island>
-);
-
-withScroll.storyName = 'with scroll';
-
-withScroll.parameters = {
-  storyStyles: `
-<style>
-  .limited-island {
-    height: 200px;
-    width: 200px;
-  }
-</style>
-      `
-};
-
-export const withResizeableHeader = () => (
-  <AdaptiveIsland className="limited-island" narrow>
-    <Header>Title</Header>
-    <Content fade>
-      {`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-      been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
-      galley of type and scrambled it to make a type specimen book. It has survived not only five
-      centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`}
-    </Content>
-  </AdaptiveIsland>
-);
-
-withResizeableHeader.storyName = 'with resizeable header';
-
-withResizeableHeader.parameters = {
-  storyStyles: `
-<style>
-  .limited-island {
-    height: 200px;
-    width: 200px;
-  }
-</style>
-      `
-};

package/components/island/island.test.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Island, {AdaptiveIsland, Content, Header} from './island';
-
-const LINE_HEIGHT = '28px';
-
-describe('Island', () => {
-  const shallowIsland = params => shallow(<Island {...params}/>);
-  const mountIsland = params => mount(<Island {...params}/>);
-
-  it('should create Island component', () => {
-    mountIsland().should.have.type(Island);
-  });
-
-  it('should wrap children with div', () => {
-    shallowIsland().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowIsland({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should join with passed data-test', () => {
-    shallowIsland({['data-test']: 'foobar'}).should.have.attr('data-test', 'ring-island foobar');
-  });
-
-  describe('AdaptiveIsland', () => {
-    it('should render AdaptiveIsland', () => {
-      mount(<AdaptiveIsland/>).should.have.type(AdaptiveIsland);
-    });
-
-    it('should change header size if content is scrolled', () => {
-      const wrapper = mount(
-        <AdaptiveIsland>
-          <Header/>
-          <Content/>
-        </AdaptiveIsland>
-      );
-
-      const headerNode = wrapper.find('[data-test="ring-island-header"]');
-
-      wrapper.instance().onContentScroll({scrollTop: 10});
-      headerNode.should.have.style('line-height', LINE_HEIGHT);
-    });
-  });
-
-  describe('Header', () => {
-    it('should render header', () => {
-      mount(<Header/>).should.have.type(Header);
-    });
-
-    it('should change header size', () => {
-      const phase = 0.75;
-      const wrapper = shallow(<Header phase={phase}/>);
-      wrapper.should.have.style('line-height', LINE_HEIGHT);
-    });
-  });
-});

package/components/island-legacy/island-legacy.examples.js

@@ -1,33 +0,0 @@
-import '@jetbrains/ring-ui/components/island-legacy/island-legacy.css';
-
-export default {
-  title: 'Style-only/Island',
-
-  parameters: {
-    notes: 'Displays an island.'
-  }
-};
-
-export const basic = () => `
-    <div class="ring-island">
-      <div class="ring-island__header">
-        <span class="ring-island__title">Title</span>
-      </div>
-      <div class="ring-island__content">Content</div>
-    </div>
-    `;
-
-basic.storyName = 'basic';
-
-export const withAHeaderAndButtons = () => `
-    <div class="ring-island">
-      <div class="ring-island__header">
-        <span class="ring-island__title">Title</span>
-        <span class="ring-island__header-button">Button1</span>
-        <span class="ring-island__header-button">Button2</span>
-      </div>
-      <div class="ring-island__content">Content</div>
-    </div>
-  `;
-
-withAHeaderAndButtons.storyName = 'with a header and buttons';

package/components/island-legacy/island-legacy.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Island from './island-legacy';
-
-describe('Island Legacy', () => {
-  const shallowIsland = params => shallow(<Island {...params}/>);
-  const mountIsland = params => mount(<Island {...params}/>);
-
-  it('should create component', () => {
-    mountIsland().should.have.type(Island);
-  });
-
-  it('should wrap children with div', () => {
-    shallowIsland().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowIsland({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/link/link.examples.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import hubLogo from '@jetbrains/logos/hub/hub.svg';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Icon from '@jetbrains/ring-ui/components/icon/icon';
-import Toggle from '@jetbrains/ring-ui/components/toggle/toggle';
-
-import Link, {linkHOC, setCompatibilityMode} from '@jetbrains/ring-ui/components/link/link';
-
-export default {
-  title: 'Components/Link',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a link.'
-  }
-};
-
-export const allVariants = () => {
-  class CustomComponent extends React.Component {
-    render() {
-      const {active, activeClassName, onPlainLeftClick, className, href, children,
-        ...props} = this.props;
-      const classes = classNames(className, {
-        [activeClassName]: active
-      });
-      return <a href={href} {...props} className={classes}>{children}</a>;
-    }
-  }
-
-  const CustomLink = linkHOC(CustomComponent);
-
-  class LinkDemo extends React.Component {
-    state = {compatibility: false};
-
-    changeCompatibility = () => this.setState(({compatibility}) => {
-      const newCompat = !compatibility;
-      setCompatibilityMode(newCompat);
-      return {compatibility: newCompat};
-    });
-
-    render() {
-      return (
-        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start'}} data-test="lik-example">
-          <Link href="/">Ordinary link</Link>
-
-          <Link href="/" active>
-            Active link (inherits color)
-          </Link>
-
-          <Link href="/" pseudo>
-            Pseudo link (no underline on hover)
-          </Link>
-
-          <Link href="/">Link with a very long text, wrapping over lines</Link>
-
-          <Link href="/">Link with a very long text, wrapping over lines</Link>
-
-          <Link href="/" className="hub-link">
-            {WrapText => [
-              <Icon key="icon" glyph={hubLogo} className="hub-icon"/>,
-              <div key="text">
-                <WrapText>Link with non-text content</WrapText>
-              </div>
-            ]}
-          </Link>
-
-          <CustomLink href="/">Custom link component</CustomLink>
-
-          <CustomLink href="/" active>
-            Active custom link component
-          </CustomLink>
-
-          <Toggle onChange={this.changeCompatibility}>Compatibility mode</Toggle>
-        </div>
-      );
-    }
-  }
-
-  return <LinkDemo/>;
-};
-
-allVariants.storyName = 'Link';
-allVariants.parameters = {hermione: {captureSelector: '*[data-test~=lik-example]'}};

package/components/link/link.test.js

@@ -1,182 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Link, {linkHOC} from './link';
-import ClickableLink from './clickableLink';
-import styles from './link.css';
-
-function noop() {}
-
-describe('Link', () => {
-  const shallowLink = props => shallow(<Link {...props}/>);
-  const mountLink = props => mount(<Link {...props}/>);
-
-  it('should create component', () => {
-    mountLink().should.have.type(Link);
-  });
-
-  it('should wrap children with ClickableLink', () => {
-    shallowLink({href: '/'}).should.have.type(ClickableLink);
-  });
-
-  it('should wrap children with ClickableLink if href is empty string', () => {
-    shallowLink({href: ''}).should.have.type(ClickableLink);
-  });
-
-  it('should wrap children with button if no href', () => {
-    shallowLink({}).should.have.type('button');
-  });
-
-  it('should use passed className', () => {
-    shallowLink({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should add active className', () => {
-    shallowLink({active: true}).should.have.className(styles.active);
-  });
-
-  it('should render button for pseudo links', () => {
-    shallowLink().should.have.tagName('button');
-    shallowLink({href: '/', pseudo: true}).should.have.tagName('button');
-  });
-
-  describe('linkHOC', () => {
-    it('should wrap with new component', () => {
-      const CustomComponent = () => {};
-
-      linkHOC(CustomComponent).should.not.equal(CustomComponent);
-    });
-
-    it('should pass activeClassName to wrapped component', () => {
-      const CustomComponent = () => <span/>;
-      const CustomLink = linkHOC(CustomComponent);
-      mount(<CustomLink>{noop}</CustomLink>).should.containMatchingElement(
-        <CustomComponent activeClassName={styles.active}/>
-      );
-    });
-
-    it('should pass custom props to wrapped component', () => {
-      const CustomComponent = () => <span/>;
-      const CustomLink = linkHOC(CustomComponent);
-
-      mount(<CustomLink custom="test">{noop}</CustomLink>).should.containMatchingElement(
-        <CustomComponent custom="test"/>
-      );
-    });
-
-    it('should not add activeClassName to tags', () => {
-      const CustomComponent = 'a';
-      const CustomLink = linkHOC(CustomComponent);
-
-      shallow(<CustomLink/>).should.not.have.prop('activeClassName');
-    });
-  });
-
-  describe('ClickableLink', () => {
-    it('should render "a" tag', () => {
-      shallow(<ClickableLink href="/">{'foo'}</ClickableLink>).should.containMatchingElement(<a href="/">{'foo'}</a>);
-    });
-
-    describe('events', () => {
-      const Buttons = {
-        LEFT: 0,
-        MIDDLE: 1,
-        RIGHT: 2
-      };
-
-      let onClick;
-      let onConditionalClick;
-      let onPlainLeftClick;
-      let wrapper;
-
-      const makeEvent = e => ({
-        ...e,
-        preventDefault: sandbox.spy()
-      });
-
-      beforeEach(() => {
-        onClick = sandbox.spy();
-        onConditionalClick = sandbox.spy();
-        onPlainLeftClick = sandbox.spy();
-        wrapper = shallow(
-          <ClickableLink
-            onClick={onClick}
-            onConditionalClick={onConditionalClick}
-            onPlainLeftClick={onPlainLeftClick}
-            href="/"
-          >{'foo'}</ClickableLink>
-        );
-      });
-
-      it('should handle a plain left click', () => {
-        const e = makeEvent({button: Buttons.LEFT});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(true, e);
-        onPlainLeftClick.should.have.been.calledWith(e);
-        e.preventDefault.should.have.been.calledOnce;
-      });
-
-      it('should handle a middle click', () => {
-        const e = makeEvent({button: Buttons.MIDDLE});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle a right click', () => {
-        const e = makeEvent({button: Buttons.RIGHT});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle alt+click', () => {
-        const e = makeEvent({button: Buttons.LEFT, altKey: true});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle ctrl+click', () => {
-        const e = makeEvent({button: Buttons.LEFT, ctrlKey: true});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle cmd+click / win+click', () => {
-        const e = makeEvent({button: Buttons.LEFT, metaKey: true});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-
-      it('should handle shift+click', () => {
-        const e = makeEvent({button: Buttons.LEFT, shiftKey: true});
-        wrapper.simulate('click', e);
-
-        onClick.should.have.been.calledWith(e);
-        onConditionalClick.should.have.been.calledWith(false, e);
-        onPlainLeftClick.should.not.have.been.called;
-        e.preventDefault.should.not.have.been.called;
-      });
-    });
-  });
-});