@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/footer/footer.js

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

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

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

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

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

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

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