@jetbrains/ring-ui 5.1.23 → 5.1.24

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

@@ -0,0 +1,114 @@
+/* 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>`
+};

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

@@ -0,0 +1,95 @@
+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/button-set.css

@@ -0,0 +1,22 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+@value button from "../button/button.css";
+
+.buttonSet {
+  position: relative;
+
+  display: inline-block;
+
+  white-space: nowrap;
+
+  font-size: 0;
+
+  & .button {
+    margin: 0 unit 0 0;
+  }
+
+  & > .button:last-child {
+    margin-right: 0;
+  }
+}

package/components/button-set/button-set.d.ts

@@ -0,0 +1,16 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Button Set
+ */
+export default class ButtonSet extends PureComponent<ButtonSetProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/button-set/button-set.js

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import dataTests from '../global/data-tests';
+import styles from './button-set.css';
+/**
+ * @name Button Set
+ */
+export default class ButtonSet extends PureComponent {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { className, 'data-test': dataTest, children, ...restProps } = this.props;
+        const classes = classNames(styles.buttonSet, className);
+        return (<div {...restProps} data-test={dataTests('ring-button-set', dataTest)} className={classes}>
+        {children}
+      </div>);
+    }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * @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-set-ng/button-set-ng.stories.js

@@ -0,0 +1,30 @@
+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-toolbar/button-toolbar.css

@@ -0,0 +1,26 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+@value button from "../button/button.css";
+
+.buttonToolbar {
+  display: inline-block;
+
+  white-space: nowrap;
+
+  font-size: 0;
+  line-height: 0;
+}
+
+.buttonToolbar > button,
+.buttonToolbar > :global(.ring-button-group),
+.buttonToolbar > .button,
+.buttonToolbar > .buttonGroup,
+.buttonToolbar > .split,
+.buttonToolbar > .buttonToolbar {
+  margin-right: unit;
+}
+
+.buttonToolbar > :last-child {
+  margin-right: 0;
+}

package/components/button-toolbar/button-toolbar.d.ts

@@ -0,0 +1,16 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Button Toolbar
+*/
+export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/button-toolbar/button-toolbar.js

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import styles from './button-toolbar.css';
+/**
+ * @name Button Toolbar
+*/
+export default class ButtonToolbar extends PureComponent {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { className, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(styles.buttonToolbar, className);
+        return (<div {...restProps} data-test={dataTests('ring-button-toolbar', dataTest)} className={classes}/>);
+    }
+}

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

@@ -0,0 +1,23 @@
+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/button-toolbar-ng/button-toolbar-ng.stories.js

@@ -0,0 +1,35 @@
+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/caret/caret.d.ts

@@ -0,0 +1,66 @@
+export interface PositionParams {
+    avoidFocus?: boolean | null | undefined;
+}
+export interface Position {
+    startOffset: number;
+    endOffset: number;
+    position: number;
+}
+/**
+ * @name Caret
+ */
+export default class Caret {
+    /**
+     * Line endings RegExp
+     * @type {RegExp}
+     */
+    static returnRE: RegExp;
+    /**
+     * Line endings normalizer
+     * Borrowed from jQuery
+     * @see https://github.com/jquery/jquery/blob/master/src/attributes/val.js
+     * @param value {*}
+     * @return {*}
+     */
+    static normalizeNewlines(value: string | undefined): string | undefined;
+    target: HTMLElement | HTMLInputElement;
+    constructor(target: HTMLElement);
+    isContentEditable(): boolean;
+    /**
+     * Set focus on target if possible
+     */
+    focus(): void;
+    /**
+     * Get absolute caret position index
+     * @return {number}
+     */
+    getAbsolutePosition(node: Node): number;
+    /**
+     * Get caret position index
+     * @param {Object} [params]
+     * @param {boolean} params.avoidFocus
+     * @return {number}
+     */
+    getPosition(params?: PositionParams): number | Position;
+    /**
+     * Get relative position of query
+     * @param  {Node} curNode
+     * @param {number} position
+     * @return {{_correctedPosition: number, _curNode: Node}}
+     */
+    getRelativePosition(curNode: Node, position: number): {
+        _curNode: Node;
+        _correctedPosition: number;
+    };
+    /**
+     * Set caret position index
+     * @param  {number} position
+     * @return {number}
+     */
+    setPosition(position?: Position | number): number | Range | undefined;
+    /**
+     * Get caret position in pixels
+     * @return {number}
+     */
+    getOffset(): number;
+}