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

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

@@ -1,114 +0,0 @@
-/* eslint-disable angular/controller-as */
-import angular from 'angular';
-
-import pencilIcon from '@jetbrains/icons/pencil';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import IconNG from '../icon-ng/icon-ng';
-import CheckboxNG from '../checkbox-ng/checkbox-ng';
-import Theme from '../global/theme';
-
-import ButtonNG from './button-ng';
-
-export default {
-  title: 'Legacy Angular/Button Ng',
-  decorators: [angularDecorator()],
-  parameters: {a11y: {options: {rules: {tabindex: {enabled: false}}}}}
-};
-
-export const basic = () => {
-  angular.
-    module(APP_NAME, [IconNG, CheckboxNG, ButtonNG]).
-    controller('testCtrl', function controller($scope) {
-      $scope.pencil = pencilIcon;
-      $scope.Theme = Theme;
-    });
-
-  function renderButtonModifications() {
-    return ['active', 'primary', 'danger', 'delayed', 'disabled'].
-      map(modifier => `<rg-button ${modifier}="true" data-test="button-${modifier}">Button ${modifier}</rg-button>`).join('');
-  }
-
-  function renderTextModifications() {
-    return ['primary', 'danger', 'disabled', 'loader'].
-      map(modifier => `<rg-button text="true" ${modifier}="true">Text action ${modifier}</rg-button>`).join('');
-  }
-
-  function renderIconWithTextModifications() {
-    return [
-      {label: 'primary', attrs: 'primary="true"'},
-      {label: 'danger', attrs: 'danger="true"'},
-      {label: 'disabled', attrs: 'disabled="true"'},
-      {label: 'primary-disabled', attrs: 'primary="true" disabled="true"'},
-      {label: 'danger-disabled', attrs: 'danger="true" disabled=true'}
-    ].map(mod => `<rg-button icon="{{pencil}}" ${mod.attrs}>Icon action ${mod.label}</rg-button>`).join('');
-  }
-
-  function renderIconActionModifications() {
-    return [
-      {label: 'primary', attrs: 'primary="true"'},
-      {label: 'danger', attrs: 'danger="true"'},
-      {label: 'disabled', attrs: 'disabled="true"'},
-      {label: 'primary-disabled', attrs: 'primary="true" disabled="true"'},
-      {label: 'danger-disabled', attrs: 'danger="true" disabled=true'}
-    ].map(mod => `<rg-button title="Just icon action (${mod.label})" icon="{{pencil}}" ${mod.attrs}></rg-button>`).join('');
-  }
-
-  function renderAllButtons() {
-    return `
-        <rg-button>Button default</rg-button>
-        <rg-button short="true">...</rg-button>
-        <rg-button-link href="/">Button link</rg-button-link>
-        <rg-button loader="true">Button loader</rg-button>
-        <rg-button mode="primary" loader="true">Primary loader</rg-button>
-
-        <rg-button loader="true" icon="{{pencil}}">Icon loader</rg-button>
-
-        <rg-button>
-          <span>With rg-icon inside:</span>
-          <rg-icon glyph="{{pencil}}"></rg-icon>
-        </rg-button>
-
-        ${renderButtonModifications()}
-
-        <rg-button text="true">Text action</rg-button>
-        ${renderTextModifications()}
-
-        <rg-button icon="{{pencil}}">Icon action</rg-button>
-        ${renderIconWithTextModifications()}
-
-        <rg-button icon="{{pencil}}" title="Icon action"></rg-button>
-        ${renderIconActionModifications()}
-    `;
-  }
-
-  return `
-    <div ng-controller="testCtrl">
-      <div class="buttons">${renderAllButtons()}</div>
-    </div>
-  `;
-
-};
-
-basic.storyName = 'Button Ng';
-
-basic.parameters = {
-  hermione: {
-    actions: [
-      {type: 'capture', name: '', selector: '#root'},
-      {type: 'focus', selector: '[data-test=button-active]'},
-      {type: 'capture', name: 'focus active', selector: '#root'}
-    ]
-  },
-  storyStyles: `
-<style>
-  .buttons {
-    background-color: var(--ring-content-background-color);
-  }
-
-  .buttons > button {
-    margin: 8px;
-  }
-</style>`
-};

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 {
-  static $inject = ['$element', '$attrs', '$scope', '$compile', '$log'];
-
-  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);
-  };
-}
-
-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;