@jetbrains/ring-ui 5.1.22 → 6.0.1

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

@@ -1,95 +0,0 @@
-import angular from 'angular';
-import 'angular-mocks';
-
-import Button from './button-ng';
-
-import overrides from './button-ng.css';
-
-const {ringIconDefaultColor} = overrides;
-
-describe('Button Ng', () => {
-  let $compile;
-  let $rootScope;
-
-  beforeEach(window.module(Button));
-
-  /* global inject */
-  beforeEach(inject((_$rootScope_, _$compile_) => {
-    $compile = _$compile_;
-    $rootScope = _$rootScope_;
-  }));
-
-
-  it('should render button', () => {
-    const element = renderButton();
-    element.tagName.toLowerCase().should.be.equal('button');
-  });
-
-  it('should render button link', () => {
-    const element = renderButtonLink();
-    element.tagName.toLowerCase().should.be.equal('a');
-  });
-
-  it('should transclude content', () => {
-    const buttonElement = renderButton();
-    const linkElement = renderButtonLink();
-
-    angular.element(buttonElement).text().trim().should.be.equal('A');
-    angular.element(linkElement).text().trim().should.be.equal('A');
-  });
-
-  it('should render active button', () => {
-    const scope = $rootScope.$new();
-    scope.active = true;
-    const element = renderButton(scope);
-    element.should.have.attribute('data-test-active');
-  });
-
-
-  it('should remove active attribute', () => {
-    const scope = $rootScope.$new();
-
-    scope.active = true;
-    const element = renderButton(scope);
-    element.should.have.attribute('data-test-active');
-
-    scope.active = false;
-    scope.$digest();
-    element.should.not.have.attribute('data-test-active');
-  });
-
-  it('should add default icon color class if button without mode', () => {
-    const element = findTranscludeNode(renderButton());
-    [...element.classList].should.contains(ringIconDefaultColor);
-  });
-
-
-  it('should not set default icon color for buttons with mode', () => {
-    // User should explicitly set color for icon
-    // if it should be different from text color
-    // when use a button with mode
-    const scope = $rootScope.$new();
-    const element = findTranscludeNode($compile('<rg-button mode="primary"/>')(scope)[0]);
-    scope.$digest();
-    [...element.classList].should.not.contains(ringIconDefaultColor);
-  });
-
-
-  function renderButton(scope = $rootScope.$new()) {
-    return compileButton('rg-button', scope);
-  }
-
-  function renderButtonLink(scope = $rootScope.$new()) {
-    return compileButton('rg-button-link', scope);
-  }
-
-  function compileButton(tagName, scope) {
-    const iElement = $compile(`<${tagName} loader="loader" active="active">A</${tagName}>`)(scope);
-    scope.$digest();
-    return iElement[0];
-  }
-
-  function findTranscludeNode(element) {
-    return element.querySelector('ng-transclude');
-  }
-});

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

@@ -1,22 +0,0 @@
-/**
- * @name Button Set Ng
- */
-import angular from 'angular';
-
-import buttonSetStyles from '../button-set/button-set.css';
-
-const angularModule = angular.module('Ring.button-set', []);
-
-function rgButtonSet() {
-  return {
-    restrict: 'E',
-    replace: true,
-    scope: false,
-    transclude: true,
-    template: `<div class="${buttonSetStyles.buttonSet}" ng-transclude></div>`
-  };
-}
-
-angularModule.directive('rgButtonSet', rgButtonSet);
-
-export default angularModule.name;

package/components/button-set-ng/button-set-ng.stories.js

@@ -1,30 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ButtonNG from '../button-ng/button-ng';
-
-import ButtonSetNG from './button-set-ng';
-
-export default {
-  title: 'Legacy Angular/Button Set Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Button Set.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG, ButtonSetNG]);
-
-  return `
-      <rg-button-set>
-        <rg-button>Button 1</rg-button>
-        <rg-button>Button 2</rg-button>
-        <rg-button>Button 3</rg-button>
-      </rg-button-set>
-    `;
-};
-
-basic.storyName = 'Button Set Ng';

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

@@ -1,23 +0,0 @@
-import angular from 'angular';
-
-import styles from '../button-toolbar/button-toolbar.css';
-
-/**
- * @name Button Toolbar Ng
- */
-
-const angularModule = angular.module('Ring.button-toolbar', []);
-
-function rgButtonToolbar() {
-  return {
-    restrict: 'A',
-    link: function link($scope, iElement) {
-      const element = iElement[0];
-      element.classList.add(...styles.buttonToolbar.split(' '));
-    }
-  };
-}
-
-angularModule.directive('rgButtonToolbar', rgButtonToolbar);
-
-export default angularModule.name;

package/components/button-toolbar-ng/button-toolbar-ng.stories.js

@@ -1,35 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ButtonNG from '../button-ng/button-ng';
-import ButtonGroupNg from '../button-group-ng/button-group-ng';
-
-import ButtonToolbarNG from './button-toolbar-ng';
-
-export default {
-  title: 'Legacy Angular/Button Toolbar Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Button Toolbar.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG, ButtonToolbarNG, ButtonGroupNg]);
-
-  return `
-      <div rg-button-toolbar>
-        <rg-button mode="primary" delayed="true">Run</rg-button>
-        <div rg-button-group>
-          <rg-button>Button one</rg-button>
-          <rg-button>Button two</rg-button>
-          <rg-button disabled>Button three</rg-button>
-        </div>
-        <rg-button>Another action</rg-button>
-      </div>
-    `;
-};
-
-basic.storyName = 'Button Toolbar Ng';

package/components/checkbox-ng/checkbox-ng.js

@@ -1,64 +0,0 @@
-import angular from 'angular';
-
-import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
-
-import IconNG from '../icon-ng/icon-ng';
-import proxyAttrs from '../proxy-attrs/proxy-attrs';
-
-import styles from '../checkbox/checkbox.css';
-
-/**
- * @name Checkbox Ng
- */
-
-const angularModule = angular.module('Ring.checkbox', [IconNG]);
-
-let idCounter = 0;
-const CHECKBOX_ID_PREFIX = 'rg-checkbox-';
-
-angularModule.directive('rgCheckbox', function rgCheckboxDirective() {
-  return {
-    restrict: 'E',
-    transclude: true,
-    replace: true,
-    template: proxyAttrs(`
-<label class="${styles.checkbox}">
-  <input
-    data-proxy-ng-disabled
-    data-proxy-ng-model
-    data-proxy-ng-change
-    data-proxy-ng-true-value
-    data-proxy-ng-false-value
-    data-proxy-name
-    data-proxy-title
-    data-proxy-aria-label
-    data-test="ring-checkbox"
-    type="checkbox"
-    class="${styles.input}"
-  />
-  <span class="${styles.cell}">
-    <rg-icon class="${styles.check}" glyph="{{:: checkmarkIcon}}" />
-  </span><span class="${styles.label}" ng-transclude></span>
-</label>
-    `),
-    link: function link(scope, iElement, attrs, controller, transcludeFn) {
-      scope.checkmarkIcon = checkmarkIcon;
-      const input = iElement[0].querySelector('input[type="checkbox"]');
-      const label = iElement[0].querySelector(`*[class~="${styles.label}"]`);
-
-      const id = CHECKBOX_ID_PREFIX + idCounter++;
-      iElement[0].setAttribute('for', id);
-      input.setAttribute('id', id);
-
-      transcludeFn(clone => {
-        if (clone.length) {
-          label.style.display = 'initial';
-        } else {
-          label.style.display = 'none';
-        }
-      });
-    }
-  };
-});
-
-export default angularModule.name;

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

@@ -1,80 +0,0 @@
-/* eslint-disable angular/controller-as */
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ButtonNG from '../button-ng/button-ng';
-
-import CheckboxNG from './checkbox-ng';
-
-export default {
-  title: 'Legacy Angular/Checkbox Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Checkbox.'
-  }
-};
-
-export const basic = () => {
-  angular.
-    module(APP_NAME, [ButtonNG, CheckboxNG]).
-    controller('MainCtrl', function controller($scope) {
-      $scope.checked = false;
-      $scope.disabled = false;
-
-      $scope.changeText = 'text will be changed on ng-change of inverted checkbox';
-
-      $scope.onNgChange = () => {
-        $scope.changeText = `ngChange appear for the inverted checkbox at ${new Date()}`;
-      };
-    });
-
-  return `
-       <div ng-controller="MainCtrl">
-         <div>Checked: {{checked}}</div>
-         <div>Disabled: {{disabled}}</div>
-         <div>
-           <rg-button id="checkButton" ng-click="checked = !checked">{{checked ? 'Uncheck' : 'Check'}} checkbox programmatically</rg-button>
-           <rg-button id="disableButton" ng-click="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}} checkbox</rg-button>
-         </div>
-         <p style="width: 300px;">
-           <rg-checkbox ng-disabled="disabled === true" ng-model="checked">Checkbox</rg-checkbox>
-         </p>
-         <p style="width: 300px;">
-           <rg-checkbox ng-disabled="disabled === true" ng-model="checked" ng-change="onNgChange()">Inverted checkbox</rg-checkbox>
-           <div>{{ changeText }}</div>
-         </p>
-       </div>
-    `;
-};
-
-basic.storyName = 'basic';
-
-export const withCustomTrueFalseValues = () => {
-  angular.module(APP_NAME, [CheckboxNG]);
-
-  return `
-       <div>
-         <div>Checked: {{checked}}</div>
-         <p style="width: 300px;">
-           <rg-checkbox ng-model="checked" ng-true-value="'The TRUE value'" ng-false-value="'The FALSE value'">Checkbox</rg-checkbox>
-         </p>
-       </div>
-    `;
-};
-
-withCustomTrueFalseValues.storyName = 'with custom true-false values';
-withCustomTrueFalseValues.parameters = {hermione: {skip: true}};
-
-export const disabled = () => {
-  angular.module(APP_NAME, [CheckboxNG]);
-
-  return `
-      <p style="width: 300px;">
-        <rg-checkbox ng-disabled="true">Checkbox</rg-checkbox>
-      </p>
-    `;
-};
-
-disabled.storyName = 'disabled';

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

@@ -1,61 +0,0 @@
-import 'angular';
-import 'angular-mocks';
-
-import Checkbox from './checkbox-ng';
-
-describe('Checkbox Ng', () => {
-  let scope;
-  let element;
-  let iElement;
-  let $compile;
-  let $rootScope;
-
-  beforeEach(window.module(Checkbox));
-
-  /* global inject */
-  beforeEach(inject((_$rootScope_, _$compile_) => {
-    $compile = _$compile_;
-    $rootScope = _$rootScope_;
-    scope = $rootScope.$new();
-
-    const tpl = '<rg-checkbox ng-disabled="disabled" ng-model="checked">Checkbox</rg-checkbox>';
-    iElement = $compile(tpl)(scope);
-    element = iElement[0];
-    scope.$digest();
-  }));
-
-  it('should not be checked by default', () => {
-    element.should.not.contain('input:checked');
-    should.not.exist(iElement.controller('ngModel').$viewValue);
-  });
-
-  it('should have been set checked by click', () => {
-    element.querySelector('input').dispatchEvent(new MouseEvent('click'));
-    element.querySelector('input').dispatchEvent(new Event('change'));
-
-    iElement.controller('ngModel').$viewValue.should.be.true;
-  });
-
-  it('should have been set checked by ng-model', () => {
-    scope.checked = true;
-    scope.$digest();
-    element.should.contain('input:checked');
-  });
-
-  it('should have been set disabled by ng-model', () => {
-    scope.disabled = true;
-    scope.$digest();
-    element.should.contain('input:disabled');
-  });
-
-  it('label and input should have same ids', () => {
-    element.querySelector('input').id.should.equal(element.htmlFor);
-  });
-
-  it('should disable input with disabled expression constant', () => {
-    scope = $rootScope.$new();
-    element = $compile('<rg-checkbox ng-disabled="true">Checkbox</rg-checkbox>')(scope)[0];
-    scope.$digest();
-    element.querySelector('input').should.have.property('disabled');
-  });
-});

package/components/compiler-ng/compiler-ng.js

@@ -1,63 +0,0 @@
-/**
- * @name Compiler Ng
- */
-import angular from 'angular';
-
-const angularModule = angular.module('Ring.compiler', []).
-  factory('rgCompiler', function rgCompilerFactory($q, $controller, $injector, $compile) {
-    return options => {
-      const template = options.template;
-      const controller = options.controller;
-      const controllerAs = options.controllerAs;
-      const resolve = angular.extend({}, options.resolve);
-      const bindToController = options.bindToController;
-
-      angular.forEach(resolve, (value, key) => {
-        if (angular.isString(value)) {
-          resolve[key] = $injector.get(value);
-        } else {
-          // Use comma expression to disable babel-plugin-angular-annotate
-          // Otherwise is fails with "Maximum call stack size exceeded" error
-          resolve[key] = $injector.invoke((0, value));
-        }
-      });
-
-      angular.extend(resolve, options.locals);
-
-      return $q.all(resolve).then(locals => {
-        const element = options.element || angular.element('<div>').
-          html(template.trim()).
-          contents();
-        const linkFn = $compile(element, locals.$transclude);
-        locals.$element = element;
-
-        return {
-          locals,
-          element,
-          link: function link(scope) {
-            locals.$scope = scope;
-
-            if (controller) {
-              const invokeCtrl = $controller(controller, locals, true);
-
-              if (bindToController) {
-                angular.extend(invokeCtrl.instance, locals);
-              }
-
-              const ctrl = invokeCtrl();
-
-              element.data('$ngControllerController', ctrl);
-
-              if (controllerAs) {
-                scope[controllerAs] = ctrl;
-              }
-            }
-
-            return linkFn(scope);
-          }
-        };
-      });
-    };
-  });
-
-export default angularModule.name;

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

@@ -1,32 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import CompilerNG from './compiler-ng';
-
-export default {
-  title: 'Legacy Angular/Compiler Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [CompilerNG]).run(function controller($rootScope, rgCompiler) {
-    const $scope = $rootScope.$new();
-    $scope.testValue = 'Hello from compiled node';
-
-    rgCompiler({template: '<div>{{testValue}}</div>'}).then(data => {
-      data.link($scope);
-      setTimeout(() => {
-        document.getElementById('for-compiled').appendChild(data.element[0]);
-      });
-    });
-  });
-
-  return '<div id="for-compiled"></div>';
-};
-
-basic.storyName = 'Compiler Ng';