@jetbrains/ring-ui 5.1.23 → 5.1.25

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,7 @@
+/**
+ * @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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,44 @@
+@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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,8 @@
+/**
+ * @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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,70 @@
+@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);
+}