@jetbrains/ring-ui 6.0.1-beta.0 → 6.0.1

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

@@ -1,192 +0,0 @@
-import angular from 'angular';
-
-import classNames from 'classnames';
-
-import RingAngularComponent from '../global/ring-angular-component';
-import {addClasses, applyMethodToClasses, removeClasses} from '../global/dom';
-import IconNG from '../icon-ng/icon-ng';
-import styles from '../button/button.css';
-import {getButtonClasses} from '../button/button__classes';
-
-import {ControlsHeight} from '../global/controls-height';
-
-import overrides from './button-ng.css';
-
-const {ringIconDefaultColor, iconMarginFix, transcludeSpacer} = overrides;
-
-/**
- * @name Button Ng
- */
-
-
-const angularModule = angular.module('Ring.button', [IconNG]);
-const ORDER_NOT_DEFINED = '-1';
-
-const buttonClassesMap = Object.values({...styles, ...overrides}).
-  reduce((acc, classes) => {
-    classes.split(' ').forEach(value => (acc[value] = true));
-    return acc;
-  }, {});
-
-export const LOADER_BACKGROUND_SELECTOR = '.js-button-loader';
-
-class ButtonController extends RingAngularComponent {
-
-  constructor(...args) {
-    super(...args);
-
-    const {$element, $attrs, $scope} = this.$inject;
-    $scope.styles = styles;
-    this.element = $element[0];
-
-    const modifiers = ['delayed', 'loader', 'danger', 'short', 'active', 'text', 'inline', 'narrowRight'];
-
-    modifiers.forEach(mod => {
-      $scope.$watch(() => $scope.$eval($attrs[mod]), val => {
-        this.updateClasses();
-        const attrName = `data-test-${mod}`;
-
-        if (val) {
-          this.element.setAttribute(attrName, true);
-        } else {
-          this.element.removeAttribute(attrName);
-        }
-
-        if (mod === 'loader') {
-          const isText = this.getAttrValue($attrs.text);
-          const withIcon = !!$attrs.icon;
-          applyMethodToClasses((val && !isText && !withIcon) ? 'add' : 'remove')(
-            this.element.querySelector(LOADER_BACKGROUND_SELECTOR).classList,
-            styles.loaderBackground
-          );
-        }
-      });
-    });
-
-    const tabIndex = $attrs.tabindex || ORDER_NOT_DEFINED;
-    if (tabIndex !== ORDER_NOT_DEFINED) {
-      this.element.setAttribute('tabindex', tabIndex);
-    }
-
-    $scope.$watch(() => $scope.$eval($attrs.loader), val => {
-      if (val) {
-        this.element.setAttribute('tabindex', ORDER_NOT_DEFINED);
-      } else if (tabIndex !== ORDER_NOT_DEFINED) {
-        this.element.setAttribute('tabindex', tabIndex);
-      } else {
-        this.element.removeAttribute('tabindex');
-      }
-    });
-  }
-
-  $postLink() {
-    this.updateClasses();
-
-    const {$attrs} = this.$inject;
-    $attrs.$observe('mode', this.updateClasses);
-    $attrs.$observe('icon', () => {
-      this.updateClasses();
-      this.updateIcon();
-    });
-    $attrs.$observe('iconSize', () => {
-      this.updateClasses();
-      this.updateIcon();
-    });
-  }
-
-  getAttrValue(attribute) {
-    const {$scope} = this.$inject;
-    return $scope.$eval(attribute);
-  }
-
-  updateClasses = () => {
-    const {$attrs} = this.$inject;
-
-    const foreignClasses = [...this.element.classList].filter(name => !buttonClassesMap[name]);
-
-    this.element.className = classNames(
-      foreignClasses,
-      getButtonClasses({
-        height: $attrs.height || ControlsHeight.S,
-        className: styles.button,
-        active: this.getAttrValue($attrs.active),
-        disabled: this.getAttrValue($attrs.disabled),
-        loader: this.getAttrValue($attrs.loader),
-        primary: $attrs.mode === 'primary' || $attrs.mode === 'blue',
-        short: this.getAttrValue($attrs.short),
-        text: this.getAttrValue($attrs.text),
-        inline: this.getAttrValue($attrs.inline),
-        danger: this.getAttrValue($attrs.danger),
-        delayed: this.getAttrValue($attrs.delayed),
-        icon: $attrs.icon
-      }),
-      {
-        // Some overrides for angular buttons
-        [overrides.buttonWithoutIcon]: !$attrs.icon,
-        [overrides.narrowRight]: this.getAttrValue($attrs.narrowRight)
-      },
-    );
-
-    if (!$attrs.hasOwnProperty('mode')) {
-      addClasses(this.findTranscludeNode().classList, ringIconDefaultColor);
-    } else {
-      removeClasses(this.findTranscludeNode().classList, ringIconDefaultColor);
-    }
-  };
-
-  findTranscludeNode = () => this.element.querySelector('ng-transclude');
-
-  updateIcon = () => {
-    const {$attrs, $compile, $scope} = this.$inject;
-    const icon = this.element.querySelector('rg-icon');
-    const transcludeNode = this.findTranscludeNode();
-    const glyph = $attrs.icon;
-    const size = $attrs.iconSize;
-    const isLoading = this.getAttrValue($attrs.loader);
-
-    if (glyph && isLoading) {
-      icon.setAttribute('loading', true);
-    } else {
-      icon.setAttribute('loading', false);
-    }
-
-    if (glyph) {
-      addClasses(transcludeNode.classList, transcludeSpacer);
-      icon.setAttribute('glyph', glyph);
-      if (size) {
-        icon.setAttribute('size', size);
-      }
-    } else {
-      removeClasses(transcludeNode.classList, transcludeSpacer);
-      icon.removeAttribute('glyph');
-      icon.removeAttribute('size');
-    }
-
-    $compile(icon)($scope);
-  };
-}
-ButtonController.$inject = ['$element', '$attrs', '$scope', '$compile', '$log'];
-
-function createButtonDirective(tagName) {
-  return () => ({
-    restrict: 'E',
-    transclude: true,
-    replace: true,
-    template: `
-  <${tagName} class="${styles.button}">
-  <span class="${styles.content}"
-  ><rg-icon class="${classNames(styles.icon, overrides.iconNg, iconMarginFix)}"></rg-icon
-  ><ng-transclude></ng-transclude
-  ></span
-  ><div class="js-button-loader"></div>
-  </${tagName}>
-    `,
-    controller: ButtonController
-  });
-}
-
-
-angularModule.directive('rgButton', createButtonDirective('button'));
-angularModule.directive('rgButtonLink', createButtonDirective('a'));
-
-export default angularModule.name;

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.examples.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-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-toolbar-ng/button-toolbar-ng.examples.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/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/checkbox-ng/checkbox-ng.examples.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.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.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.examples.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';