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

package/components/avatar-editor-ng/avatar-editor-ng.js

@@ -1,133 +0,0 @@
-import angular from 'angular';
-
-import pencilIcon from '@jetbrains/icons/pencil';
-
-import messageBundleNg from '../message-bundle-ng/message-bundle-ng';
-import alertService from '../alert-service/alert-service';
-import IconNG from '../icon-ng/icon-ng';
-
-import template from './avatar-editor-ng__template';
-import './avatar-editor-ng.css';
-
-const angularModule = angular.module('Ring.avatar-editor', [messageBundleNg, IconNG]);
-
-/**
- * @name Avatar Editor Ng
- */
-function rgAvatarEditor() {
-  return {
-    restrict: 'E',
-    scope: {
-      model: '=ngModel',
-      onSelect: '&',
-      default: '@',
-      ngDisabled: '=',
-      showDeleteButton: '=?',
-      showAddButton: '=?',
-      deleteLabel: '@',
-      addMessage: '@'
-    },
-    template,
-    transclude: true,
-    controller: [
-      '$scope', '$attrs', 'RingMessageBundle',
-      function controller($scope, $attrs, RingMessageBundle) {
-        let fileInput;
-        $scope.editIcon = pencilIcon;
-        $scope.showAddButton = 'showAddButton' in $scope ? $scope.showAddButton : true;
-        $scope.showDeleteButton = 'showDeleteButton' in $scope ? $scope.showDeleteButton : true;
-
-        if ('controls' in $attrs) {
-          $scope.controlled = true;
-        }
-
-        function createFileLoadListener(file) {
-          return readEvent => {
-            const data = readEvent.target.result;
-            const result = $scope.onSelect({name: file.name, data});
-            if (result && result.then) {
-              result.then(() => {
-                $scope.model = data;
-              });
-            } else if (result !== false) {
-              $scope.$apply(() => {
-                $scope.model = data;
-              });
-            }
-          };
-        }
-
-        this.registerFileInput = input => {
-          fileInput = input;
-          fileInput.addEventListener('change', e => {
-            let imageFileSelected = false;
-            for (let i = 0; i < e.target.files.length; i++) {
-              const file = e.target.files[i];
-              if (file.type.indexOf('image/') === 0) {
-                imageFileSelected = true;
-                const reader = new FileReader();
-                reader.onload = createFileLoadListener(file);
-                reader.readAsDataURL(file);
-                break;
-              }
-            }
-            if (e.target.files.length && !imageFileSelected) {
-              alertService.error(RingMessageBundle.avatareditor_noselected());
-            }
-          });
-        };
-
-        $scope.controls = {};
-
-        function onClick(e) {
-          e.stopPropagation();
-        }
-
-        $scope.controls.select = () => {
-          if (!FileReader) {
-            alertService.error(RingMessageBundle.avatareditor_nosupport());
-          } else {
-            fileInput.addEventListener('click', onClick);
-            fileInput.dispatchEvent(new MouseEvent('click'));
-            fileInput.removeEventListener('click', onClick);
-          }
-        };
-
-        $scope.controls.remove = () => {
-          const data = '';
-          const result = $scope.onSelect({name: data, data});
-          if (result && result.then) {
-            result.then(() => {
-              $scope.model = data;
-            });
-          } else if (result !== false) {
-            $scope.model = data;
-          }
-        };
-
-        $scope.getDeleteLabel = () => (
-          $scope.deleteLabel || RingMessageBundle.avatareditor_delete()
-        );
-
-        $scope.getAddMessage = () => (
-          $scope.addMessage || RingMessageBundle.avatareditor_add()
-        );
-      }
-    ]
-  };
-}
-
-function rgAvatarEditorFileInput() {
-  return {
-    restrict: 'A',
-    require: '^rgAvatarEditor',
-    link: function link(scope, iElement, iAttrs, avatarEditorCtrl) {
-      avatarEditorCtrl.registerFileInput(iElement[0]);
-    }
-  };
-}
-
-angularModule.directive('rgAvatarEditor', rgAvatarEditor);
-angularModule.directive('rgAvatarEditorFileInput', rgAvatarEditorFileInput);
-
-export default angularModule.name;

package/components/avatar-editor-ng/avatar-editor-ng__template.js

@@ -1,28 +0,0 @@
-export default `<div>
-  <div ng-click="!ngDisabled && controls.select()" class="ring-avatar-editor__frame" ng-class="{
-        'ring-avatar-editor_controlled': controlled,
-        'ring-avatar-editor': !ngDisabled
-    }" ng-show="model || default">
-    <img alt="Avatar" class="ring-avatar-editor__img" ng-src="{{ model }}" ng-show="model">
-    <img alt="Default avatar" class="ring-avatar-editor__img" ng-src="{{ default }}"
-         ng-show="!model && default" ng-click="!ngDisabled && controls.select()">
-    <rg-icon glyph="{{editIcon}}" size="16" class="ring-avatar-editor__icon" ng-if="!ngDisabled"></rg-icon>
-  </div>
-  <input class="ring-avatar-editor__file-input" rg-avatar-editor-file-input type="file" ng-model="fileInput" accept="image/*" ng-if="!ngDisabled">
-
-  <rg-button
-    delayed="true"
-    ng-disabled="ngDisabled"
-    ng-if="showAddButton && !model && !default"
-    ng-click="controls.select()"
-  >{{ getAddMessage() }}</rg-button>
-
-  <rg-button
-    ng-if="showDeleteButton&& model && !ngDisabled"
-    danger="true"
-    class="ring-avatar-editor__remove"
-    ng-click="controls.remove()"
-  >
-    <span translate>{{ getDeleteLabel() }}</span>
-  </rg-button>
-</div>`;

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

@@ -1,33 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import {Size as AvatarSize} from '../avatar/avatar';
-
-import {avatarDataUri} from '../avatar/avatar-example-datauri';
-
-import AvatarNG from './avatar-ng';
-
-export default {
-  title: 'Legacy Angular/Avatar Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Avatar.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [AvatarNG]).controller('testCtrl', function controller() {
-    this.AvatarSize = AvatarSize;
-    this.avatarUrl = avatarDataUri;
-  });
-
-  return `
-      <div ng-controller="testCtrl as $ctrl">
-        <rg-avatar size="$ctrl.AvatarSize.Size32" url="$ctrl.avatarUrl"></rg-avatar>
-      </div>
-    `;
-};
-
-basic.storyName = 'Avatar Ng';

package/components/avatar-ng/avatar-ng.js

@@ -1,7 +0,0 @@
-/**
- * @name Avatar Ng
- */
-import angularComponentFactory from '../global/angular-component-factory';
-import Avatar from '../avatar/avatar';
-
-export default angularComponentFactory(Avatar, 'Avatar').name;

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

@@ -1,32 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import GroupNG from '../group-ng/group-ng';
-
-import BadgeNG from './badge-ng';
-
-export default {
-  title: 'Legacy Angular/Badge Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Badge.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [GroupNG, BadgeNG]);
-
-  return `
-      <rg-group>
-        <rg-badge>simple</rg-badge>
-        <rg-badge gray="true">gray</rg-badge>
-        <rg-badge valid="true">valid</rg-badge>
-        <rg-badge invalid="true">invalid</rg-badge>
-        <rg-badge disabled="true">disabled</rg-badge>
-      </rg-group>
-    `;
-};
-
-basic.storyName = 'Badge Ng';

package/components/badge-ng/badge-ng.js

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

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

@@ -1,33 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import BreadcrumbNG from './breadcrumb-ng';
-
-export default {
-  title: 'Legacy Angular/Breadcrumb Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays a breadcrumb.'
-  }
-};
-
-export const basic = ({onClickSecondLevel}) => {
-  angular.module(APP_NAME, [BreadcrumbNG]).controller('DemoCtrl', function controller() {
-    this.clickSecondLevel = onClickSecondLevel;
-  });
-
-  return `
-      <div ng-controller="DemoCtrl as ctrl">
-        <rg-breadcrumb label="First level" link="test/href1">
-          <rg-breadcrumb label="Second level" on-click="ctrl.clickSecondLevel()">
-            <span>Active level</span>
-          </rg-breadcrumb>
-        </rg-breadcrumb>
-      </div>
-    `;
-};
-
-basic.storyName = 'Breadcrumb Ng';
-basic.argTypes = {onClickSecondLevel: {}};

package/components/breadcrumb-ng/breadcrumb-ng.js

@@ -1,60 +0,0 @@
-import angular from 'angular';
-
-import chevronRight from '@jetbrains/icons/chevron-right';
-
-import LinkModule from '../link-ng/link-ng';
-import IconModule from '../icon-ng/icon-ng';
-
-import styles from './breadcrumb.css';
-
-/**
- * @name Breadcrumb Ng
- */
-
-
-const angularModule = angular.module('Ring.breadcrumb', [LinkModule, IconModule]);
-
-angularModule.filter('breadcrumbNgChevronIcon', () => () => chevronRight);
-
-angularModule.directive('rgBreadcrumb', function rgBreadcrumbDirective() {
-  return {
-    template: `
-<div class="${styles.breadcrumb}">
-  <span class="${styles.breadcrumbElement}" data-test="ring-breadcrumb" ng-show="label">
-    <rg-link
-      ng-if="link"
-      ng-href="{{link}}"
-    >{{label}}</rg-link>
-
-    <rg-link ng-if="!link && onClick"
-          ng-class="onClick && 'ring-link'"
-          data-test="ring-breadcrumb-link"
-          ng-click="onClick({$event: $event})">{{label}}</rg-link>
-
-    <span ng-if="!link && !onClick" ng-click="onClick({$event: $event})">{{label}}</span>
-  </span>
-
-  <span ng-show="label">
-    <rg-icon
-      class="${styles.separatorIcon}"
-      glyph="{{'' | breadcrumbNgChevronIcon}}"
-    ></rg-icon>
-  </span>
-
-  <span class="${styles.breadcrumbElement} ${styles.active}" data-test="ring-breadcrumb-element" ng-transclude></span>
-</div>
-
-    `,
-    replace: true,
-    transclude: true,
-    restrict: 'E',
-
-    scope: {
-      label: '@',
-      link: '@',
-      onClick: '&'
-    }
-  };
-});
-
-export default angularModule.name;

package/components/breadcrumb-ng/breadcrumb.css

@@ -1,70 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.breadcrumb {
-  margin: 20px 0 calc(unit * 3);
-
-  font-size: 0;
-}
-
-.header {
-  margin-bottom: 0;
-}
-
-.breadcrumbSmall .breadcrumbElement {
-  display: inline-block;
-
-  height: calc(unit * 2);
-
-  font-size: var(--ring-font-size);
-  line-height: 14px;
-}
-
-.breadcrumbElement {
-  & .breadcrumb {
-    display: inline;
-  }
-
-  display: inline-block;
-
-  height: calc(unit * 3);
-
-  text-decoration: none;
-
-  font-size: 24px;
-  line-height: 28px;
-}
-
-.breadcrumbElement > span {
-  display: inline-block;
-}
-
-.breadcrumbElement.active,
-.breadcrumb .active {
-  cursor: default;
-}
-
-.elementDescription {
-  position: relative;
-  top: 2px;
-
-  display: inline-block;
-  overflow: hidden;
-
-  width: calc(50 * unit);
-  padding-left: calc(2 * unit);
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  font-size: var(--ring-font-size);
-  line-height: 16px;
-}
-
-.separatorIcon {
-  margin: 0 2px;
-  margin-top: -14px;
-
-  color: var(--ring-icon-disabled-color);
-}

package/components/button-group-ng/button-group-ng.css

@@ -1,4 +0,0 @@
-.buttonGroup {
-  font-size: 0;
-  line-height: 0;
-}

package/components/button-group-ng/button-group-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 ButtonGroupNG from './button-group-ng';
-
-export default {
-  title: 'Legacy Angular/Button Group Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Button Group.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG, ButtonGroupNG]);
-
-  return `
-      <span rg-button-group-caption>Side</span>
-      <div rg-button-group>
-        <rg-button>Left</rg-button>
-        <rg-button>Right</rg-button>
-      </div>
-    `;
-};
-
-basic.storyName = 'Button Group Ng';

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

@@ -1,43 +0,0 @@
-import angular from 'angular';
-
-import classNames from 'classnames';
-
-import styles from '../button-group/button-group.css';
-
-import ngStyles from './button-group-ng.css';
-
-/**
- * @name Button Group Ng
- */
-
-const angularModule = angular.module('Ring.button-group', []);
-const buttonGroupClasses = classNames(styles.buttonGroup, ngStyles.buttonGroup);
-
-function rgButtonGroup() {
-  return {
-    restrict: 'A',
-    link: function link($scope, iElement, attrs) {
-      const element = iElement[0];
-      if (attrs.split) {
-        element.classList.add(...styles.split.split(' '));
-      } else {
-        element.classList.add(...buttonGroupClasses.split(' '));
-      }
-    }
-  };
-}
-
-function rgButtonGroupCaption() {
-  return {
-    restrict: 'A',
-    link: function link($scope, iElement) {
-      const element = iElement[0];
-      element.classList.add(...styles.caption.split(' '));
-    }
-  };
-}
-
-angularModule.directive('rgButtonGroup', rgButtonGroup);
-angularModule.directive('rgButtonGroupCaption', rgButtonGroupCaption);
-
-export default angularModule.name;

package/components/button-ng/button-ng.css

@@ -1,23 +0,0 @@
-@import "../global/variables.css";
-
-/* stylelint-disable-next-line selector-type-no-unknown */
-.ringIconDefaultColor rg-icon,
-.ringIconDefaultColor :global(.ring-icon) {
-  color: var(--ring-icon-secondary-color);
-}
-
-.iconMarginFix.iconMarginFix {
-  margin-right: 0;
-}
-
-.transcludeSpacer:not(:empty) {
-  margin-left: 4px;
-}
-
-.buttonWithoutIcon .iconNg {
-  display: none;
-}
-
-.narrowRight {
-  padding-right: 12px;
-}

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: '#storybook-root'},
-      {type: 'focus', selector: '[data-test=button-active]'},
-      {type: 'capture', name: 'focus active', selector: '#storybook-root'}
-    ]
-  },
-  storyStyles: `
-<style>
-  .buttons {
-    background-color: var(--ring-content-background-color);
-  }
-
-  .buttons > button {
-    margin: 8px;
-  }
-</style>`
-};