@jetbrains/ring-ui 5.1.22 → 6.0.1

package/components/global/angular-component-factory.test.js

@@ -1,138 +0,0 @@
-/* global inject: false */
-import angular from 'angular';
-
-import 'angular-mocks';
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import {act, Simulate} from 'react-dom/test-utils';
-
-import angularComponentFactory from './angular-component-factory';
-
-class TestComponent extends PureComponent {
-  static propTypes = {
-    id: PropTypes.string,
-    someObj: PropTypes.object,
-    onClick: PropTypes.func,
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  static defaultProps = {
-    someObj: {}
-  };
-
-  handleClick = () => this.props.onClick('payload');
-
-  render() {
-    const {id, someObj, className, children} = this.props;
-    return (
-      <>
-        <button
-          type="button"
-          id={id}
-          data-some-obj={someObj.foo}
-          onClick={this.handleClick}
-          className={className}
-        />
-        {children}
-      </>
-    );
-  }
-}
-
-const testModule = angularComponentFactory(TestComponent, 'TestComponent').name;
-
-describe('angularComponentFactory', () => {
-  let $componentController;
-  let $compile;
-  let $rootScope;
-
-  beforeEach(window.module(testModule));
-
-  beforeEach(inject((_$componentController_, _$compile_, _$rootScope_) => {
-    $componentController = _$componentController_;
-    $compile = _$compile_;
-    $rootScope = _$rootScope_;
-  }));
-
-  it('should return an Angular module with the proper name', () => {
-    testModule.should.be.equal('Ring.testComponent');
-  });
-
-  it('should register an Angular component with the proper name', () => {
-    const $element = angular.element('<div></div>');
-    const $transclude = callback => callback();
-    const ctrl = $componentController('rgTestComponent', {
-      $scope: $rootScope,
-      $element,
-      $transclude
-    });
-    ctrl.should.not.be.undefined;
-  });
-
-  it('should use one-way binding for object props', () => {
-    $rootScope.testObj = {
-      foo: 'bar'
-    };
-    const $element = $compile(
-      '<rg-test-component some-obj="testObj"></rg-test-component>'
-    )($rootScope);
-    const component = $element[0].firstChild;
-    component.should.have.attribute('data-some-obj', 'bar');
-
-    $rootScope.testObj = {
-      foo: 'test value'
-    };
-    $rootScope.$digest();
-    component.should.have.attribute('data-some-obj', 'test value');
-  });
-
-  it('should use string binding for string props', () => {
-    $rootScope.id = '1';
-    const $element = $compile('<rg-test-component id="id"></rg-test-component>')($rootScope);
-    const component = $element[0].firstChild;
-    component.should.have.attribute('id', '1');
-
-    $rootScope.id = '2';
-    $rootScope.$digest();
-    component.should.have.attribute('id', '2');
-  });
-
-  it('should pass given css classes', () => {
-    const $element = $compile(
-      '<rg-test-component class-name="\'test-class1 test-class2\'"></rg-test-component>'
-    )($rootScope);
-    const component = $element[0].firstChild;
-    component.should.have.class('test-class1');
-    component.should.have.class('test-class2');
-  });
-
-  it('should use one-way binding for function props', () => {
-    $rootScope.callback = sandbox.spy();
-    const $element = $compile(
-      '<rg-test-component on-click="callback"></rg-test-component>'
-    )($rootScope);
-    const component = $element[0].firstChild;
-
-    Simulate.click(component);
-
-    $rootScope.callback.should.have.been.called;
-    $rootScope.callback.should.have.been.calledWith('payload');
-  });
-
-  it('should support ng-if in nested content', () => {
-    let $element = null;
-    act(() => {
-      $element = $compile(`
-<rg-test-component>
-  <span data-test="hello">HELLO</span>
-</rg-test-component>`
-      )($rootScope);
-    });
-
-    const component = $element[0].querySelector('[data-test~=hello]');
-    $rootScope.$digest();
-
-    should.exist(component);
-  });
-});

package/components/global/ring-angular-component.js

@@ -1,13 +0,0 @@
-export default class RingAngularComponent {
-  static get controller() {
-    return this;
-  }
-
-  $inject = {};
-
-  constructor(...args) {
-    (this.constructor.$inject ?? []).forEach((injectName, i) => {
-      this.$inject[injectName] = args[i];
-    });
-  }
-}

package/components/global/ring-angular-component.test.js

@@ -1,32 +0,0 @@
-/* global inject: false */
-import angular from 'angular';
-import 'angular-mocks';
-
-import RingAngularComponent from './ring-angular-component';
-
-class TestComponent extends RingAngularComponent {
-
-}
-TestComponent.$inject = ['$scope'];
-
-const testModule = angular.module('Test', []).component('testComponent', TestComponent).name;
-
-describe('RingAngularComponent', () => {
-  let $componentController;
-
-  beforeEach(window.module(testModule));
-
-  beforeEach(inject(_$componentController_ => {
-    $componentController = _$componentController_;
-  }));
-
-  it('should return a controller as a static property', () => {
-    const ctrl = $componentController('testComponent');
-    ctrl.should.not.be.undefined;
-  });
-
-  it('should copy dependencies to class instances', () => {
-    const ctrl = $componentController('testComponent');
-    ctrl.should.have.nested.property('$inject.$scope');
-  });
-});

package/components/group-ng/group-ng.js

@@ -1,16 +0,0 @@
-/**
- * @name Group Ng
-*/
-
-import angular from 'angular';
-
-import styles from '../group/group.css';
-
-const angularModule = angular.module('Ring.group', []);
-
-angularModule.component('rgGroup', {
-  transclude: true,
-  template: `<span ng-transclude class="${styles.group}"></span>`
-});
-
-export default angularModule.name;

package/components/group-ng/group.stories.js

@@ -1,29 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ButtonNG from '../button-ng/button-ng';
-
-import GroupNG from './group-ng';
-
-export default {
-  title: 'Legacy Angular/Group Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Group.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG, GroupNG]);
-
-  return `
-      <rg-group>
-        <rg-button>First item</rg-button>
-        <rg-button>Second item</rg-button>
-      </rg-group>
-    `;
-};
-
-basic.storyName = 'Group Ng';

package/components/heading-ng/heading-ng.js

@@ -1,8 +0,0 @@
-/**
- * @name Heading Ng
-*/
-
-import angularComponentFactory from '../global/angular-component-factory';
-import HeadingNg from '../heading/heading';
-
-export default angularComponentFactory(HeadingNg, 'Heading').name;

package/components/heading-ng/heading-ng.stories.js

@@ -1,29 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import Heading from '../heading/heading';
-
-import HeadingNG from './heading-ng';
-
-export default {
-  title: 'Legacy Angular/Heading Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Heading.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [HeadingNG]);
-
-  return `
-      <rg-heading level="${Heading.Levels.H1}">Heading 1</rg-heading>
-      <rg-heading level="${Heading.Levels.H2}">Heading 2</rg-heading>
-      <rg-heading level="${Heading.Levels.H3}">Heading 3</rg-heading>
-      <rg-heading level="${Heading.Levels.H4}">Heading 4</rg-heading>
-    `;
-};
-
-basic.storyName = 'Heading Ng';

package/components/icon-ng/icon-ng.js

@@ -1,89 +0,0 @@
-import angular from 'angular';
-
-import {Color} from '../icon/icon__constants';
-import TemplateNg from '../template-ng/template-ng';
-import styles from '../icon/icon.css';
-
-/**
- * @name Icon Ng
- */
-
-const angularModule = angular.module('Ring.icon', [TemplateNg]);
-const BASE64_PREFIX = 'data:image/svg+xml;base64,';
-
-angularModule.directive('rgIcon', function rgIconDirective() {
-  return {
-    restrict: 'E',
-    scope: {
-      glyph: '@',
-      loading: '=?',
-      color: '@?',
-      size: '@?',
-      height: '@?',
-      width: '@?'
-    },
-    template: `<span class="${styles.icon}" rg-template="normalizedGlyph" rg-template-class="${styles.glyph}"></span>`,
-    controller: $scope => {
-      function decodeBase64IfNeeded(glyph) {
-        // This hack allows passing SVG content as string from angular templates like
-        // <rg-icon glyph="data:image/svg+xml;base64,PHN2ZyB4bWx...></rg-icon>
-        const isEncoded = glyph.indexOf(BASE64_PREFIX) === 0;
-        return isEncoded ? window.atob(glyph.replace(BASE64_PREFIX, '')) : glyph;
-      }
-
-      $scope.$watch('glyph', value => {
-        if (!value) {
-          return;
-        }
-        $scope.normalizedGlyph = decodeBase64IfNeeded(value);
-      });
-    },
-    link: function link(scope, iElement, iAttrs) {
-      iAttrs.$addClass('ring-icon'); // TODO: We keep this class for now for compatibility reasons (styles overrides)
-
-      scope.$watch('loading', value => {
-        if (value) {
-          iAttrs.$addClass(styles.loading);
-        } else {
-          iAttrs.$removeClass(styles.loading);
-        }
-      });
-
-      scope.$watch(() => scope.color && Color[scope.color] && styles[Color[scope.color]],
-        (colorClass, prevColorClass) => {
-          if (colorClass) {
-            iAttrs.$addClass(colorClass);
-
-            // Remove previous class, but don't remove initial one
-            if (prevColorClass && prevColorClass !== colorClass) {
-              iAttrs.$removeClass(prevColorClass);
-            }
-          }
-        }
-      );
-
-      scope.$watchGroup(['size', 'width', 'height'], ([size, width, height]) => {
-        const svgNode = iElement[0].querySelector('svg');
-        if (!svgNode) {
-          return;
-        }
-
-        if (size && !width && !height) {
-          const sizeString = `${size}px`;
-          const style = `width: ${sizeString}; height: ${sizeString};`;
-          svgNode.setAttribute('style', style);
-          return;
-        }
-
-        if (width) {
-          svgNode.setAttribute('style', `width: ${width}px;`);
-        }
-        if (height) {
-          svgNode.setAttribute('style', `height: ${height}px;`);
-        }
-      });
-    }
-  };
-});
-
-export default angularModule.name;

package/components/icon-ng/icon-ng.stories.js

@@ -1,34 +0,0 @@
-import angular from 'angular';
-
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-import warningIcon from '@jetbrains/icons/warning';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import IconNG from './icon-ng';
-
-export default {
-  title: 'Legacy Angular/Icon Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Icon.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [IconNG]).controller('testCtrl', function ctrl() {
-    this.icon = checkmarkIcon;
-    this.error = warningIcon;
-  });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <rg-icon glyph="{{ctrl.icon}}"></rg-icon>
-        <rg-icon glyph="{{ctrl.icon}}" color="MAGENTA"></rg-icon>
-        <rg-icon glyph="{{ctrl.icon}}" color="{{'BLUE'}}" loading="true"></rg-icon>
-      </div>
-    `;
-};
-
-basic.storyName = 'Icon Ng';

package/components/input-ng/input-ng.css

@@ -1,7 +0,0 @@
-.errorText {
-  height: auto;
-}
-
-.clear.clear {
-  position: absolute;
-}

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

@@ -1,160 +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 labelStyles from '../control-label/control-label.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 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="${labelStyles.label} ${labelStyles.secondaryLabel}"
-  >{{$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>
-  `;
-}
-RingInputComponent.$inject = ['$element'];
-
-angularModule.component('rgInput', RingInputComponent);
-
-export default angularModule.name;

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

@@ -1,127 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import darkStyles from '../global/variables_dark.css';
-
-import InputNG from './input-ng';
-
-export default {
-  title: 'Legacy Angular/Input Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Text input fields of varying size.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [InputNG]).controller('InputTestCtrl', function controller() {
-    this.inputModel = 'Default value';
-  });
-
-  return `
-      <div class="inputs" data-test="inputs">
-        <rg-input
-          size="M"
-          label="Type something"
-        ></rg-input>
-
-        <rg-input
-          name="login"
-          size="M"
-          label="Label and hint"
-          placeholder="Hint"
-        ></rg-input>
-
-        <rg-input
-          label="Label and value"
-          size="M"
-          ng-model="ctrl.inputModel"
-        ></rg-input>
-
-        <rg-input
-          label="Clearable input"
-          size="M"
-          ng-model="ctrl.inputModel"
-          clearable="true"
-        ></rg-input>
-
-        <rg-input
-          placeholder="Hint"
-          size="M"
-          ng-model="ctrl.inputModel"
-          borderless="true"
-        ></rg-input>
-
-        <rg-input
-          label="Active input"
-          active="true"
-          size="M"
-          ng-model="ctrl.inputModel"
-        ></rg-input>
-
-        <rg-input
-          label="Disabled input"
-          data-disabled="true"
-          size="M"
-          ng-model="ctrl.inputModel"
-        ></rg-input>
-
-        <rg-input
-          label="Invalid input"
-          size="M"
-          error="Error description that wraps over lines because of being really long"
-          ng-model="ctrl.inputModel"
-        ></rg-input>
-
-        <rg-input
-          label="Short input"
-          size="S"
-        ></rg-input>
-
-        <rg-input
-          label="Long input"
-          size="L"
-        ></rg-input>
-
-        <rg-input
-          label="Autogrowing textarea"
-          size="M"
-          multiline="true"
-        ></rg-input>
-
-        <div class="dark ${darkStyles.dark}">
-          <rg-input
-            label="Input on dark background"
-            placeholder="Hint on dark background"
-            theme="dark"
-          ></rg-input>
-        </div>
-      </div>
-    `;
-};
-
-basic.storyName = 'Input Ng';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .inputs {
-    display: flex;
-    flex-flow: column wrap;
-    max-height: 100vh;
-    margin-top: 8px;
-  }
-
-  .inputs rg-input {
-    margin: 4px 16px;
-  }
-
-  .dark {
-    background: #000;
-    margin-left: 0;
-    padding-left: 16px;
-  }
-</style>`
-};