@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/footer/footer.js

@@ -1,97 +0,0 @@
-/**
- * @name Footer
- */
-import React, { memo, isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Link from '../link/link';
-import styles from './footer.css';
-const FooterColumn = memo(function FooterColumn({ position, children }) {
-    const classes = classNames({
-        [styles.columnLeft]: position === 'left',
-        [styles.columnCenter]: position === 'center',
-        [styles.columnRight]: position === 'right'
-    });
-    return (<div className={classes}>
-      <ul className={styles.columnItem}>
-        {children}
-      </ul>
-    </div>);
-});
-FooterColumn.propTypes = {
-    position: PropTypes.oneOf(['left', 'center', 'right']).isRequired,
-    children: PropTypes.node
-};
-/**
- * Return copyright string
- * @param year {int}
- * @returns {string}
- */
-export function copyright(year) {
-    const currentYear = (new Date()).getUTCFullYear();
-    const ndash = '–';
-    let ret = 'Copyright © ';
-    if (year >= currentYear) {
-        ret += year;
-    }
-    else {
-        ret += year + ndash + currentYear;
-    }
-    return ret;
-}
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-const FooterLine = memo(function FooterLine(props) {
-    const items = Array.isArray(props.item) ? props.item : [props.item];
-    function renderItem(item) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (isValidElement(item) || typeof item !== 'object') {
-            return item;
-        }
-        const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
-        if (item.url) {
-            return (<Link href={item.url} target={item.target} key={item.url + item.title} title={item.title}>{element}</Link>);
-        }
-        return element;
-    }
-    return (<li className={styles.line}>
-      {items.map(renderItem)}
-    </li>);
-});
-FooterLine.propTypes = {
-    item: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.array,
-        PropTypes.string
-    ])
-};
-const Footer = memo(function Footer({ floating, className, left, center, right }) {
-    function content(elements, position) {
-        if (!elements) {
-            return false;
-        }
-        return (<FooterColumn key={position} position={position}>
-        {elements.map((item, idx) => (<FooterLine 
-            // eslint-disable-next-line react/no-array-index-key
-            key={idx} item={item}/>))}
-      </FooterColumn>);
-    }
-    const classes = classNames(styles.footer, className, {
-        [styles.footerFloating]: floating
-    });
-    return (<footer className={classes} data-test="ring-footer">{[
-            content(left, 'left'),
-            content(center, 'center'),
-            content(right, 'right')
-        ]}</footer>);
-});
-Footer.propTypes = {
-    className: PropTypes.string,
-    floating: PropTypes.bool,
-    left: PropTypes.array,
-    center: PropTypes.array,
-    right: PropTypes.array
-};
-export default Footer;

package/components/footer-ng/footer-ng.js

@@ -1,61 +0,0 @@
-import angular from 'angular';
-
-import RingAngularComponent from '../global/ring-angular-component';
-import styles from '../footer/footer.css';
-import {copyright} from '../footer/footer';
-
-/**
- * @name Footer Ng
- */
-
-
-const angularModule = angular.module('Ring.footer', []);
-
-class rgFooterComponent extends RingAngularComponent {
-  styles = styles;
-
-  static transclude = {
-    left: '?rgFooterLeft',
-    center: '?rgFooterCenter',
-    right: '?rgFooterRight'
-  };
-
-  static template = `<footer ng-class=":: $ctrl.styles.footer" data-test="ring-footer">
-  <div ng-class=":: $ctrl.styles.columnLeft">
-    <div ng-transclude="left" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-
-  <div ng-class=":: $ctrl.styles.columnCenter">
-    <div ng-transclude="center" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-
-  <div ng-class=":: $ctrl.styles.columnRight">
-    <div ng-transclude="right" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-</footer>`;
-}
-
-class rgFooterLineComponent extends RingAngularComponent {
-  static transclude = true;
-
-  static template = `<div class="${styles.line}" ng-transclude></div>`;
-}
-
-class rgFooterCopyrightComponent extends RingAngularComponent {
-  static template = '<span>{{:: $ctrl.copyrightYears}} {{:: $ctrl.companyName}}</span>';
-
-  static bindings = {
-    year: '@',
-    companyName: '@'
-  };
-
-  $onInit() {
-    this.copyrightYears = copyright(this.year);
-  }
-}
-
-angularModule.component('rgFooter', rgFooterComponent);
-angularModule.component('rgFooterLine', rgFooterLineComponent);
-angularModule.component('rgFooterCopyright', rgFooterCopyrightComponent);
-
-export default angularModule.name;

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

@@ -1,35 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import '../link/link__legacy.css';
-
-import FooterNG from './footer-ng';
-
-export default {
-  title: 'Legacy Angular/Footer Ng',
-  decorators: [angularDecorator()]
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [FooterNG]);
-
-  return `
-      <rg-footer>
-        <rg-footer-left>
-          <rg-footer-line>Left</rg-footer-line>
-          <rg-footer-line>Build 1.0.0 1234</rg-footer-line>
-        </rg-footer-left>
-        <rg-footer-center>
-          <rg-footer-line>
-            <rg-footer-copyright year="2000" company-name="JetBrains"></rg-footer-copyright>
-          </rg-footer-line>
-          <rg-footer-line><a class="ring-link">License agreement</a></rg-footer-line>
-        </rg-footer-center>
-        <rg-footer-right>
-          <rg-footer-line>Right</rg-footer-line>
-        </rg-footer-right>
-      </rg-footer>
-    `;
-};
-
-basic.storyName = 'Footer Ng';

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

@@ -1,41 +0,0 @@
-/*global inject*/
-import 'angular';
-import 'angular-mocks';
-
-import Footer from './footer-ng';
-
-describe('Footer', () => {
-  let element;
-  let scope;
-  let $compile;
-
-  beforeEach(window.module(Footer));
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    $compile = _$compile_;
-    element = $compile(`
-      <rg-footer>
-        <rg-footer-left>
-          <rg-footer-line>Left column</rg-footer-line>
-        </rg-footer-left>
-        <rg-footer-center>
-          <rg-footer-line><rg-footer-copyright year="2000" company-name="JetBrains"></rg-footer-copyright></rg-footer-line>
-        </rg-footer-center>
-      </rg-footer>
-    `)(scope)[0];
-    scope.$digest();
-  }));
-
-  it('should have root div element', () => {
-    element.should.contain('div');
-  });
-
-  it('should render left column', () => {
-    element.should.contain.text('Left column');
-  });
-
-  it('should copyright', () => {
-    element.should.contain.text('JetBrains');
-  });
-});

package/components/form/form.css

@@ -1,268 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-/**
- * @name Form
-*/
-
-:global(.ring-form) {
-  color: var(--ring-text-color);
-
-  font-family: var(--ring-font-family);
-  font-size: var(--ring-font-size);
-}
-
-:global(.ring-form_white-bg) {
-  background: var(--ring-content-background-color);
-}
-
-:global(.ring-form_border) {
-  border: 1px solid var(--ring-disabled-color);
-  border-radius: 2px;
-}
-
-:global(.ring-form_rows .ring-form__label) {
-  float: none;
-
-  max-width: none;
-}
-
-:global(.ring-form_rows.ring-form__control) {
-  width: calc(42 * unit);
-  margin-left: 0;
-}
-
-:global(.ring-form__wrap) {
-  margin-bottom: 0;
-  padding: calc(3 * unit) calc(4 * unit) 0 calc(4 * unit);
-}
-
-:global(.ring-form__header) {
-  min-height: 13px;
-  padding-bottom: calc(2 * unit);
-}
-
-:global(.ring-form__control__description) {
-  display: block;
-
-  max-width: 900px;
-  padding-top: calc(unit / 2);
-
-  color: var(--ring-secondary-color);
-
-  font-size: var(--ring-font-size-smaller);
-  line-height: 16px !important;
-}
-
-:global(.ring-form__title-img) {
-  float: left;
-
-  height: calc(4 * unit);
-
-  border: 0;
-}
-
-:global(.ring-form__title) {
-  display: block;
-
-  margin-bottom: calc(unit);
-
-  font-weight: bold;
-}
-
-:global(.ring-form__main-title) {
-  color: var(--ring-text-color);
-
-  font-family: var(--ring-font-family);
-  font-size: 19px;
-}
-
-:global(.ring-form__title_separated) {
-  margin: calc(unit * 3) 0;
-}
-
-:global(.ring-form__group) {
-  position: relative;
-
-  margin: calc(unit * 2) 0;
-}
-
-:global(.ring-form__group:first-child) {
-  margin-top: 0;
-}
-
-:global(.ring-form__group::after) {
-  display: block;
-  clear: both;
-
-  content: "";
-}
-
-:global(.ring-form__group_united) {
-  padding-bottom: 0;
-}
-
-:global(.ring-form__group .ring_form__group) {
-  padding-top: 0;
-  padding-left: calc(unit * 2);
-}
-
-:global(.ring-form__group .ring_form__group .ring-form__control) {
-  margin-left: calc(18 * unit);
-}
-
-:global(.ring-form__group_nested) {
-  padding-top: 0;
-  padding-left: calc(unit * 2);
-}
-
-:global(.ring-form__group_nested .ring-form__control) {
-  margin-left: calc(18 * unit);
-}
-
-:global(.ring-form__label) {
-  position: relative;
-  top: 0;
-
-  display: inline-block;
-  float: left;
-
-  max-width: calc(18 * unit);
-  padding-top: calc(unit / 2);
-
-  vertical-align: top;
-
-  line-height: calc(2 * unit);
-}
-
-:global(.ring-form__label .ring-radio-btn__label) {
-  top: -2px;
-}
-
-:global(.ring-form__label .ring-checkbox__label) {
-  top: -2px;
-}
-
-/* End of special fix */
-
-:global(.ring-form__label_title) {
-  font-weight: bold;
-}
-
-:global(.ring-form__control) {
-  position: relative;
-
-  width: auto;
-  min-height: calc(3 * unit);
-  margin-left: calc(20 * unit);
-
-  vertical-align: top;
-
-  line-height: calc(3 * unit);
-}
-
-:global(.ring-form__control_text::after) {
-  display: inline-block;
-
-  height: calc(unit * 3);
-
-  content: "";
-  vertical-align: middle;
-}
-
-/* Temporary solution, proper grid is necessary */
-:global(.ring-form__control_secondary) {
-  position: absolute;
-  top: unit;
-  left: calc(27 * unit);
-}
-
-:global(.ring-form__control_on) {
-  color: var(--ring-success-color);
-}
-
-:global(.ring-form__control_off) {
-  color: var(--ring-secondary-color);
-}
-
-:global(.ring-form__control-link) {
-  position: relative;
-  top: 6px;
-}
-
-:global(.ring-form__control_small) {
-  margin-left: calc(16 * unit) !important;
-}
-
-:global(.ring-form__info) {
-  width: calc(85 * unit);
-  margin-bottom: calc(-1 * unit + 2px);
-  margin-left: calc(20 * unit);
-
-  line-height: 20px;
-}
-
-:global(.ring-form__control__part) {
-  margin-right: unit;
-}
-
-/* Form for key-value data
-
- You can add "ring-form\__group_short" to "ring-form\__group" to make the left column shorter
-
- Markup:
- <form class="ring-form">
-  <div class="ring-form__group ring-form__group_short">
-    <label class="ring-form__label">
-      <input class="ring-radio-btn" type="radio" name="find-type" id="breakout-checkbox-1"/>
-      <label class="ring-radio-btn__label" for="breakout-checkbox-1"></label>
-    </label>
-    <div class="ring-form__control">
-      <label for="breakout-checkbox-1">Users with same emails and similar names</label>
-    </div>
-  </div>
-  <div class="ring-form__group ring-form__group_short">
-    <label class="ring-form__label">
-      <input class="ring-radio-btn" type="radio" name="find-type" id="breakout-checkbox-2"/>
-      <label class="ring-radio-btn__label" for="breakout-checkbox-2"></label>
-    </label>
-    <div class="ring-form__control">
-      <label for="breakout-checkbox-2">Users with same emails</label>
-    </div>
-  </div>
-  <div class="ring-form__group ring-form__group_short">
-    <label class="ring-form__label">
-        <input id="short-checkbox-1" class="ring-checkbox" type="checkbox" name="example">
-        <label class="ring-checkbox__label" for="short-checkbox-1"></label>
-    </label>
-    <div class="ring-form__control">
-      <label class="ring-label" for="breakout-checkbox-3">Users having at least something in common</label>
-    </div>
-  </div>
-  <div class="ring-form__footer">
-    <button class="ring-button ring-button_blue">Save</button>
-    <button class="ring-button">Cancel</button>
-  </div>
- </form> */
-
-:global(.ring-form__group_short) {
-  padding-top: calc(unit / 2);
-  padding-bottom: 0;
-}
-
-:global(.ring-form__group_short:last-child) {
-  padding-bottom: unit;
-}
-
-:global(.ring-form__group_short.ring-form__control) {
-  margin-left: calc(unit * 3);
-}
-
-:global(.ring-form_small .ring-form__label) {
-  max-width: calc(12 * unit);
-}
-
-:global(.ring-form_small .ring-form__control) {
-  margin-left: calc(16 * unit);
-}

package/components/form/form.stories.js

@@ -1,128 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import '../input/input-legacy.css';
-import './form.css';
-import '../input-size/input-size.css';
-import '../error-bubble/error-bubble-legacy.css';
-
-import ButtonNG from '../button-ng/button-ng';
-
-export default {
-  title: 'Style-only/Form',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Helps create forms with various types of controls.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG]);
-
-  return `
-      <div style="width: 700px">
-        <form class="ring-form">
-          <span class="ring-form__title">Form Title</span>
-
-          <div class="ring-form__group">
-            <label for="ring-form-1" class="ring-form__label">Full-Width
-              Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input" id="ring-form-1" type="text">
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-2" class="ring-form__label">Medium Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input-size_m" id="ring-form-2"
-                type="text">
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-3" class="ring-form__label">Medium Input & Error</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input_error ring-input-size_m"
-                id="ring-form-3" type="text">
-              <div class="ring-error-bubble active">Error bubble</div>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-4" class="ring-form__label">Long Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input-size_l" id="ring-form-4"
-                type="text">
-              <div class="ring-error-bubble active">Error bubble for a long
-                control
-              </div>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-5" class="ring-form__label">Full-Width
-              Control</label>
-            <div class="ring-form__control">
-              <input class="ring-input" id="ring-form-5" type="text">
-              <div class="ring-error-bubble active">Error bubble for a full-width
-                control
-              </div>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-7" class="ring-form__label">Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input ring-input-size_m"
-                id="ring-form-7"></textarea>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-8" class="ring-form__label">Long
-              Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input ring-input-size_l"
-                id="ring-form-8"></textarea>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-9" class="ring-form__label">Full-Width
-              Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input" id="ring-form-9"></textarea>
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-11" class="ring-form__label">Input in
-              a small container</label>
-            <div class="ring-form__control ring-form__control_small">
-              <input class="ring-input ring-input-size_m" id="ring-form-11"
-                type="text">
-            </div>
-          </div>
-
-          <div class="ring-form__group">
-            <label for="ring-form-12" class="ring-form__label">Textarea in
-              a small container</label>
-            <div class="ring-form__control ring-form__control_small">
-              <textarea class="ring-input ring-input-size_m"
-                id="ring-form-12"></textarea>
-            </div>
-          </div>
-
-          <div class="ring-form__footer">
-            <rg-button mode="primary">Save</rg-button>
-            <rg-button>Cancel</rg-button>
-          </div>
-        </form>
-      </div>
-    `;
-};
-
-basic.storyName = 'Form';

package/components/form-ng/error-bubble-ng.css

@@ -1,7 +0,0 @@
-.errorBubbleNg {
-  position: absolute;
-  top: 0;
-  left: calc(100% + 2px);
-
-  display: inline-block;
-}