@jetbrains/ring-ui 5.1.21 → 5.1.23

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.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/avatar-ng/avatar-ng.stories.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/badge/badge.css

@@ -1,44 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.badge {
-  display: inline-block;
-
-  box-sizing: border-box;
-  height: 20px;
-  padding: 0 unit;
-
-  cursor: default;
-
-  vertical-align: baseline;
-
-  color: var(--ring-secondary-color);
-  border: 1px var(--ring-line-color) solid;
-  border-radius: var(--ring-border-radius);
-  background-color: var(--ring-content-background-color);
-
-  font-size: var(--ring-font-size-smaller);
-  font-weight: normal;
-  font-style: normal;
-  line-height: 17px;
-
-  &.gray {
-    color: var(--ring-text-color);
-    background-color: var(--ring-tag-background-color);
-  }
-
-  &.valid {
-    color: var(--ring-success-color);
-  }
-
-  &.invalid {
-    color: var(--ring-error-color);
-  }
-
-  &.disabled {
-    /* Deprecated: duplicates invalid */
-
-    color: var(--ring-error-color);
-  }
-}

package/components/badge/badge.d.ts

@@ -1,24 +0,0 @@
-import React, { PureComponent, HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
-export interface BadgeProps extends HTMLAttributes<HTMLElement> {
-    gray?: boolean | null | undefined;
-    valid?: boolean | null | undefined;
-    invalid?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    'data-test'?: string | null | undefined;
-}
-/**
- * @name Badge
- */
-export default class Badge extends PureComponent<BadgeProps> {
-    static propTypes: {
-        gray: PropTypes.Requireable<boolean>;
-        valid: PropTypes.Requireable<boolean>;
-        invalid: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        'data-test': PropTypes.Requireable<string>;
-    };
-    render(): React.JSX.Element;
-}

package/components/badge/badge.js

@@ -1,35 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import dataTests from '../global/data-tests';
-import style from './badge.css';
-/**
- * @name Badge
- */
-export default class Badge extends PureComponent {
-    static propTypes = {
-        gray: PropTypes.bool,
-        valid: PropTypes.bool,
-        invalid: PropTypes.bool,
-        disabled: PropTypes.bool,
-        className: PropTypes.string,
-        children: PropTypes.node,
-        'data-test': PropTypes.string
-    };
-    render() {
-        const { 
-        // Modifiers
-        gray, valid, invalid, disabled, 
-        // Props
-        className, children, 'data-test': dataTest, ...props } = this.props;
-        const classes = classNames(style.badge, className, {
-            [style.gray]: gray,
-            [style.valid]: valid,
-            [style.invalid]: invalid,
-            [style.disabled]: disabled
-        });
-        return (<span {...props} data-test={dataTests('ring-badge', dataTest)} className={classes}>
-        {children}
-      </span>);
-    }
-}

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/badge-ng/badge-ng.stories.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/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-ng.stories.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.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);
-}