@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/input-ng/input-ng.js

@@ -1,159 +0,0 @@
-/**
- * @name Input Ng
- */
-import angular from 'angular';
-
-import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
-
-import RingAngularComponent from '../global/ring-angular-component';
-import styles from '../input/input.css';
-import ButtonNg from '../button-ng/button-ng';
-
-import styleOverrides from './input-ng.css';
-
-const angularModule = angular.module('Ring.input', [ButtonNg]);
-
-class RingInputComponent extends RingAngularComponent {
-  static $inject = ['$element'];
-
-  static require = {
-    ngModelCtrl: '?ngModel'
-  };
-
-  static bindings = {
-    name: '@',
-    required: '@',
-    ngMinlength: '@',
-    ngMaxlength: '@',
-    placeholder: '@',
-    ngModel: '<',
-    onChange: '&',
-    label: '@',
-    hint: '@',
-    size: '@',
-    disabled: '@',
-    active: '<',
-    error: '@',
-    empty: '<',
-    clearable: '<',
-    borderless: '<',
-    multiline: '<'
-  };
-
-  $onInit() {
-    this.closeIcon = closeIcon;
-    if (!this.ngModelCtrl) {
-      return;
-    }
-
-    this.ngModelCtrl.$render = () => {
-      this.value = this.ngModelCtrl.$viewValue;
-    };
-  }
-
-  onInputChange() {
-    if (!this.ngModelCtrl) {
-      return;
-    }
-    this.ngModelCtrl.$setViewValue(this.value);
-  }
-
-  stretch(el) {
-    if (!el) {
-      return;
-    }
-    el.style.height = `${el.scrollHeight}px`;
-  }
-
-  onKeyUp() {
-    if (!this.inputNode) {
-      this.inputNode = this.$inject.$element[0].querySelector('[data-test="ring-input"]');
-    }
-
-    if (this.multiline && this.inputNode.scrollHeight > this.inputNode.clientHeight) {
-      this.stretch(this.inputNode);
-    }
-  }
-
-  onClear() {
-    this.value = '';
-  }
-
-  getContainerClasses() {
-    return classNames(
-      styles.outerContainer,
-      this.size ? [styles[`size${this.size}`]] : null,
-      styles.heightS,
-      {
-        [styles.active]: this.active,
-        [styles.error]: this.error != null,
-        [styles.empty]: !this.value,
-        [styles.noLabel]: !this.label,
-        [styles.clearable]: this.clearable,
-        [styles.borderless]: this.borderless
-      }
-    );
-  }
-
-  static template = `
-<div
-  data-test="ring-input-container"
-  ng-class="$ctrl.getContainerClasses()"
->
-  <label
-    ng-if="!$ctrl.borderless"
-    class="${styles.label}"
-  >{{$ctrl.label}}</label>
-  <div class="${styles.container}">
-    <input
-      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-      type="text"
-      data-test="ring-input"
-      class="${styles.input}"
-      name="{{$ctrl.name}}"
-      ng-if="!$ctrl.multiline"
-      placeholder="{{$ctrl.placeholder}}"
-      ng-model="$ctrl.value"
-      ng-required="$ctrl.required"
-      ng-disabled="$ctrl.disabled"
-      ng-minlength="$ctrl.ngMinlength"
-      ng-maxlength="$ctrl.ngMaxlength"
-      ng-change="$ctrl.onInputChange()"
-      ng-keyup="$ctrl.onKeyUp()"
-    />
-
-    <textarea
-      aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-      data-test="ring-input"
-      ng-if="$ctrl.multiline"
-      class="${styles.input}"
-      rows="1"
-      name="{{$ctrl.name}}"
-      placeholder="{{$ctrl.placeholder}}"
-      ng-model="$ctrl.value"
-      ng-required="$ctrl.required"
-      ng-disabled="$ctrl.disabled"
-      ng-minlength="$ctrl.ngMinlength"
-      ng-maxlength="$ctrl.ngMaxlength"
-      ng-change="$ctrl.onInputChange()"
-      ng-keyup="$ctrl.onKeyUp()"
-    ></textarea>
-
-    <rg-button
-      ng-if="$ctrl.clearable"
-      data-test="ring-input-clear"
-      class="${styles.clear} ${styleOverrides.clear}"
-      icon="{{:: $ctrl.closeIcon}}"
-      ng-click="$ctrl.onClear()"
-    ></rg-button>
-  </div>
-
-  <div ng-if="!$ctrl.borderless && $ctrl.error" class="${styles.errorText} ${styleOverrides.errorText}">{{$ctrl.error}}</div>
-</div>
-  `;
-}
-
-angularModule.component('rgInput', RingInputComponent);
-
-export default angularModule.name;

package/components/input-ng/input-ng.test.js

@@ -1,32 +0,0 @@
-/*global inject*/
-import 'angular';
-import 'angular-mocks';
-
-import styles from '../input/input.css';
-
-import InputNG from './input-ng';
-
-describe('InputNg', () => {
-  let element;
-  let scope;
-  let $compile;
-
-  beforeEach(window.module(InputNG));
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    $compile = _$compile_;
-    scope.testValue = 'foo';
-    element = $compile('<rg-input ng-model="testValue"></rg-input>')(scope)[0];
-    $rootScope.$digest();
-  }));
-
-  it('should render template', () => {
-    element.querySelector('[data-test="ring-input-container"]').dataset.test.should.equal('ring-input-container');
-    element.querySelector('[data-test="ring-input"]').should.have.class(styles.input);
-  });
-
-  it('should pass value', () => {
-    element.querySelector('[data-test="ring-input"]').should.have.value(scope.testValue);
-  });
-});

package/components/island-ng/island-content-ng.js

@@ -1,56 +0,0 @@
-import angular from 'angular';
-
-import styles from '../island/island.css';
-import scheduleRAF from '../global/schedule-raf';
-
-import compile from './island-ng-class-fixer';
-
-const scheduleScroll = scheduleRAF();
-
-const angularModule = angular.module('Ring.island-ng.header', []);
-
-angularModule.directive('rgIslandContent', function islandContentDirective() {
-  return {
-    transclude: true,
-    replace: true,
-    bindToController: {
-      fade: '=?',
-      onScroll: '&?'
-    },
-    compile,
-    template: `
-<div
-  data-test="ring-island-content"
-  class=${styles.content}
-  ng-class="{
-    '${styles.contentWithTopFade}': contentCtrl.fade,
-    '${styles.contentWithBottomFade}': contentCtrl.fade
-  }"
->
-  <div
-    tabindex="0"
-    class="${styles.scrollableWrapper} js-scrollable-wrapper"
-    ng-transclude
-  ></div>
-</div>
-`,
-    controllerAs: 'contentCtrl',
-    controller: function controller($scope, $element) {
-      const el = $element[0];
-
-      if (this.onScroll) {
-        const scrollable = el.querySelector('.js-scrollable-wrapper');
-
-        const scrollCallback = evt => {
-          const $scrollTop = scrollable.scrollTop;
-          this.onScroll({$event: evt, $scrollTop});
-          $scope.$apply();
-        };
-
-        scrollable.addEventListener('scroll', () => scheduleScroll(scrollCallback));
-      }
-    }
-  };
-});
-
-export default angularModule.name;

package/components/island-ng/island-header-ng.js

@@ -1,34 +0,0 @@
-import angular from 'angular';
-
-import styles from '../island/island.css';
-
-import compile from './island-ng-class-fixer';
-
-const angularModule = angular.module('Ring.island-ng.content', []);
-
-angularModule.directive('rgIslandHeader', function islandHeaderDirective() {
-  return {
-    transclude: true,
-    replace: true,
-    bindToController: {
-      border: '=?'
-    },
-    compile,
-    template: `
-<div
-  data-test="ring-island-header"
-  class="${styles.header}"
-  ng-class="{'${styles.withBottomBorder}': headerCtrl.border}" 
-  ng-transclude
-></div>
-`,
-    controllerAs: 'headerCtrl',
-    controller: function controller() {
-      this.$onInit = () => {
-        this.wrapWithTitle = this.wrapWithTitle !== undefined ? this.wrapWithTitle : true;
-      };
-    }
-  };
-});
-
-export default angularModule.name;

package/components/island-ng/island-ng-class-fixer.js

@@ -1,7 +0,0 @@
-// Workaround fo Angular bug with ng-class & replace: true support
-// See https://github.com/angular/angular.js/issues/5695#issuecomment-31898355
-export default function compile(tElement, tAttrs) {
-  if (tAttrs.ngClass) {
-    tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');
-  }
-}

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

@@ -1,54 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import IslandNg from './island-ng';
-
-export default {
-  title: 'Legacy Angular/Island Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Island.',
-    hermione: {captureSelector: '*[data-test~=ring-island]'}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [IslandNg]);
-
-  return `
-      <rg-island>
-        <rg-island-header border="true">
-          This is header
-        </rg-island-header>
-        <rg-island-content>
-          This is content
-        </rg-island-content>
-      </rg-island>
-    `;
-};
-
-basic.storyName = 'basic';
-
-export const scrollable = () => {
-  angular.module(APP_NAME, [IslandNg]);
-
-  return `
-      <rg-island narrow="true" style="height: 200px; width: 200px;">
-        <rg-island-header border="true">
-          Title
-        </rg-island-header>
-        <rg-island-content fade="true">
-          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.
-        </rg-island-content>
-      </rg-island>
-    `;
-};
-
-scrollable.storyName = 'scrollable';

package/components/island-ng/island-ng.js

@@ -1,35 +0,0 @@
-/**
- * @name Island Ng
- */
-import angular from 'angular';
-
-import styles from '../island/island.css';
-
-import IslandHeader from './island-header-ng';
-import IslandContent from './island-content-ng';
-import compile from './island-ng-class-fixer';
-
-const angularModule = angular.module('Ring.island-ng', [IslandHeader, IslandContent]);
-
-angularModule.directive('rgIsland', function islandDirective() {
-  return {
-    transclude: true,
-    replace: true,
-    bindToController: {
-      narrow: '='
-    },
-    compile,
-    template: `
-<div 
-  data-test="ring-island"
-  class="${styles.island}" 
-  ng-class="{'${styles.narrowIsland}': islandCtrl.narrow}" 
-  ng-transclude
-></div>
-`,
-    controllerAs: 'islandCtrl',
-    controller: angular.noop
-  };
-});
-
-export default angularModule.name;

package/components/link-ng/link-ng.examples.js

@@ -1,22 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import LinkNG from './link-ng';
-
-export default {
-  title: 'Legacy Angular/Link Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays a link.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [LinkNG]);
-
-  return '<rg-link href="http://example.com" class="test-class">Open example</rg-link>';
-};
-
-basic.storyName = 'Link Ng';

package/components/link-ng/link-ng.js

@@ -1,26 +0,0 @@
-import angular from 'angular';
-
-import styles from '../link/link.css';
-
-/**
- * @name Link Ng
- */
-
-
-const angularModule = angular.module('Ring.link', []);
-
-function rgLinkDirective() {
-  return {
-    restrict: 'E',
-    transclude: true,
-    replace: true,
-    template: `
-<a class="${styles.link} ${styles.compatibilityUnderlineMode}"
-><span class="${styles.inner}" ng-transclude></span></a>
-    `
-  };
-}
-
-angularModule.directive('rgLink', rgLinkDirective);
-
-export default angularModule.name;

package/components/link-ng/link-ng.test.js

@@ -1,29 +0,0 @@
-/*global inject*/
-import 'angular';
-import 'angular-mocks';
-
-import linkStyles from '../link/link.css';
-
-import Link from './link-ng';
-
-describe('LinkNg', () => {
-  let element;
-  let scope;
-  let $compile;
-
-  beforeEach(window.module(Link));
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    $compile = _$compile_;
-    element = $compile('<rg-link href="http://google.com"></rg-link>')(scope)[0];
-  }));
-
-  it('should replace with a tag', () => {
-    element.should.match(`a.${linkStyles.link.split(' ')[0]}`);
-  });
-
-  it('should pass attributes to a tag', () => {
-    element.should.have.attribute('href', 'http://google.com');
-  });
-});

package/components/loader-inline-ng/loader-inline-ng.examples.js

@@ -1,28 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import LoaderInlineNg from './loader-inline-ng';
-
-export default {
-  title: 'Legacy Angular/Loader Inline Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Wraps markup for loader-inline component.'
-  }
-};
-
-export const simple = () => {
-  angular.module(APP_NAME, [LoaderInlineNg]);
-
-  return `
-      <div>
-        <span>some text on top</span>
-        <div>before <rg-loader-inline/> Some text after</div>
-        <div>some text under loader</div>
-      </div>
-    `;
-};
-
-simple.storyName = 'Loader Inline Ng';

package/components/loader-inline-ng/loader-inline-ng.js

@@ -1,17 +0,0 @@
-import angular from 'angular';
-
-import styles from '../loader-inline/loader-inline.css';
-
-/**
- * @name Loader Inline Ng
- */
-
-
-const angularModule = angular.module('Ring.loader-inline', []);
-
-angularModule.
-  component('rgLoaderInline', {
-    template: `<div data-test="ring-loader-inline-ng" class="${styles.loader}"></div>`
-  });
-
-export default angularModule.name;

package/components/loader-inline-ng/loader-inline-ng.test.js

@@ -1,28 +0,0 @@
-/*global inject*/
-import 'angular';
-import 'angular-mocks';
-
-import styles from '../loader-inline/loader-inline.css';
-
-import LoaderInline from './loader-inline-ng';
-
-describe('LoaderInline', () => {
-  let element;
-  let scope;
-  let $compile;
-
-  beforeEach(window.module(LoaderInline));
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    $compile = _$compile_;
-    element = $compile('<rg-loader-inline></rg-loader-inline>')(scope)[0];
-    scope.$digest();
-  }));
-
-  it('should render loader markup', () => {
-    element.should.contain(`.${styles.loader}`);
-    element.should.contain('[data-test="ring-loader-inline-ng"]');
-  });
-
-});

package/components/loader-ng/loader-ng.examples.js

@@ -1,27 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import LoaderNg from './loader-ng';
-
-export default {
-  title: 'Legacy Angular/Loader Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays the loader.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [LoaderNg]);
-
-  return `
-      <div>
-        <rg-loader/>
-      </div>
-    `;
-};
-
-basic.storyName = 'Loader Ng';

package/components/loader-ng/loader-ng.js

@@ -1,37 +0,0 @@
-import angular from 'angular';
-
-import RingAngularComponent from '../global/ring-angular-component';
-import LoaderCore from '../loader/loader__core';
-
-/**
- * @name Loader Ng
- */
-
-
-const angularModule = angular.module('Ring.loader', []);
-
-class RgLoaderComponent extends RingAngularComponent {
-  static $inject = ['$element'];
-
-  static bindings = {
-    message: '@'
-  };
-
-  constructor(...args) {
-    super(...args);
-    const {$element} = this.$inject;
-    this.loader = new LoaderCore($element[0], {message: this.message});
-  }
-
-  $onDestroy() {
-    this.loader.destroy();
-  }
-
-  $onChanges(changes) {
-    this.loader.updateMessage(changes.message.currentValue);
-  }
-}
-
-angularModule.component('rgLoader', RgLoaderComponent);
-
-export default angularModule.name;

package/components/loader-ng/loader-ng.test.js

@@ -1,41 +0,0 @@
-/*global inject*/
-import 'angular';
-import 'angular-mocks';
-
-import loaderStyles from '../loader/loader.css';
-
-import Loader from './loader-ng';
-
-describe('Loader', () => {
-  let element;
-  let scope;
-  let $compile;
-
-  beforeEach(window.module(Loader));
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    scope.message = 'foo';
-    $compile = _$compile_;
-    element = $compile('<rg-loader message="{{message}}"></rg-loader>')(scope)[0];
-    scope.$digest();
-  }));
-
-  it('should init', () => {
-    element.should.exist;
-  });
-
-  it('should render loader', () => {
-    element.should.contain(`.${loaderStyles.canvas}`);
-  });
-
-  it('should render text', () => {
-    element.querySelector(`.${loaderStyles.text}`).textContent.should.equal('foo');
-  });
-
-  it('should update text', () => {
-    scope.message = 'bar';
-    scope.$digest();
-    element.querySelector(`.${loaderStyles.text}`).textContent.should.equal('bar');
-  });
-});

package/components/loader-screen-ng/loader-screen-ng.examples.js

@@ -1,30 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import LoaderScreen from './loader-screen-ng';
-
-export default {
-  title: 'Legacy Angular/Loader Screen Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Loader Screen.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [LoaderScreen]).run(loaderScreen => {
-    loaderScreen.setVisible(true);
-    loaderScreen.startInitialLoading();
-  });
-
-  return `
-      <div>
-        <div rg-loader-screen="Loading..."></div>
-      </div>
-    `;
-};
-
-basic.storyName = 'Loader Screen Ng';