@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/error-message/error-message.d.ts

@@ -0,0 +1,27 @@
+import React, { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { IconType } from '../icon/icon';
+export interface ErrorMessageProps {
+    children?: ReactNode;
+    icon?: string | IconType | null | undefined;
+    code?: string | null | undefined;
+    message?: string | null | undefined;
+    description?: string | null | undefined;
+    className?: string | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Error Message
+ */
+export default class ErrorMessage extends Component<ErrorMessageProps> {
+    static propTypes: {
+        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactComponentLike | null | undefined>>;
+        code: PropTypes.Requireable<string>;
+        message: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/error-message/error-message.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Icon from '../icon/icon';
+import { Size } from '../icon/icon__constants';
+import dataTests from '../global/data-tests';
+import styles from './error-message.css';
+/**
+ * @name Error Message
+ */
+export default class ErrorMessage extends Component {
+    static propTypes = {
+        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+        code: PropTypes.string,
+        message: PropTypes.string,
+        description: PropTypes.string,
+        children: PropTypes.node,
+        className: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { className, icon, code, message, description, children, 'data-test': dataTest } = this.props;
+        const classes = classNames(styles.errorMessage, className);
+        return (<div className={classes} data-test={dataTests('ring-error-message', dataTest)}>
+        {icon && (<Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>)}
+        <div className={styles.content}>
+          <div className={styles.title}>
+            {code && `${code}:`} {message}
+          </div>
+          {description && (<div className={styles.description}>
+              {description}
+            </div>)}
+          {children}
+        </div>
+      </div>);
+    }
+}

package/components/error-page/error-page.css

@@ -0,0 +1,24 @@
+@import "../global/variables.css";
+
+/*
+  Using a pseudo-element rather than the element itself to prevent
+  SVG icons from disappearing when the class name is toggled
+  See https://youtrack.jetbrains.com/issue/RG-755
+*/
+
+.errorPage::before {
+  position: absolute;
+  z-index: var(--ring-invisible-element-z-index);
+
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  content: "";
+}
+
+.enabled::before {
+  opacity: 0.06;
+  background: url("error-page.gif");
+}

package/components/footer/footer.css

@@ -0,0 +1,83 @@
+@import "../global/variables.css";
+
+.footer {
+  composes: font from "../global/global.css";
+
+  position: relative;
+
+  box-sizing: border-box;
+  height: calc(var(--ring-unit) * 8);
+  margin: calc(var(--ring-unit) * 5) calc(var(--ring-unit) * 4) 0 calc(var(--ring-unit) * 4);
+  padding-top: calc(var(--ring-unit) * 2);
+
+  text-align: center;
+
+  border-top: 1px solid var(--ring-line-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.footerFloating {
+  composes: footer;
+
+  position: absolute;
+  z-index: var(--ring-fixed-z-index);
+  bottom: 0;
+
+  width: 100%;
+  margin-right: 0;
+  margin-bottom: var(--ring-unit);
+  margin-left: 0;
+}
+
+.column {
+  position: absolute;
+
+  width: 33%;
+}
+
+.columnItem {
+  display: inline-block;
+
+  margin: 0;
+  padding: 0;
+
+  vertical-align: top;
+}
+
+.columnLeft {
+  composes: column;
+
+  text-align: left;
+}
+
+.columnCenter {
+  composes: column;
+
+  left: 33.6%;
+}
+
+.columnCenter .line {
+  text-align: left;
+}
+
+.columnRight {
+  composes: column;
+
+  top: calc(var(--ring-unit) * 2);
+  right: 0;
+
+  text-align: right;
+}
+
+.line {
+  padding: 0;
+
+  list-style: none;
+
+  line-height: calc(var(--ring-unit) * 2);
+}
+
+.lineCenter {
+  text-align: left;
+}

package/components/footer/footer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @name Footer
+ */
+import React, { HTMLAttributeAnchorTarget, ReactChild } from 'react';
+/**
+ * Return copyright string
+ * @param year {int}
+ * @returns {string}
+ */
+export declare function copyright(year: number): string;
+export interface FooterLinkItem {
+    copyright?: number | null | undefined;
+    label?: string | null | undefined;
+    url?: string | null | undefined;
+    target?: HTMLAttributeAnchorTarget | undefined;
+    title?: string | undefined;
+}
+type FooterItem = FooterLinkItem | ReactChild;
+type FooterItems = readonly (FooterItem | readonly FooterItem[])[];
+export interface FooterProps {
+    className?: string | null | undefined;
+    floating?: boolean | null | undefined;
+    left?: FooterItems | null | undefined;
+    center?: FooterItems | null | undefined;
+    right?: FooterItems | null | undefined;
+}
+declare const Footer: React.NamedExoticComponent<FooterProps>;
+export default Footer;

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/form/form.css

@@ -0,0 +1,266 @@
+@import "../global/variables.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 * var(--ring-unit));
+  margin-left: 0;
+}
+
+:global(.ring-form__wrap) {
+  margin-bottom: 0;
+  padding: calc(3 * var(--ring-unit)) calc(4 * var(--ring-unit)) 0 calc(4 * var(--ring-unit));
+}
+
+:global(.ring-form__header) {
+  min-height: 13px;
+  padding-bottom: calc(2 * var(--ring-unit));
+}
+
+:global(.ring-form__control__description) {
+  display: block;
+
+  max-width: 900px;
+  padding-top: calc(var(--ring-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 * var(--ring-unit));
+
+  border: 0;
+}
+
+:global(.ring-form__title) {
+  display: block;
+
+  margin-bottom: calc(var(--ring-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(var(--ring-unit) * 3) 0;
+}
+
+:global(.ring-form__group) {
+  position: relative;
+
+  margin: calc(var(--ring-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(var(--ring-unit) * 2);
+}
+
+:global(.ring-form__group .ring_form__group .ring-form__control) {
+  margin-left: calc(18 * var(--ring-unit));
+}
+
+:global(.ring-form__group_nested) {
+  padding-top: 0;
+  padding-left: calc(var(--ring-unit) * 2);
+}
+
+:global(.ring-form__group_nested .ring-form__control) {
+  margin-left: calc(18 * var(--ring-unit));
+}
+
+:global(.ring-form__label) {
+  position: relative;
+  top: 0;
+
+  display: inline-block;
+  float: left;
+
+  max-width: calc(18 * var(--ring-unit));
+  padding-top: calc(var(--ring-unit) / 2);
+
+  vertical-align: top;
+
+  line-height: calc(2 * var(--ring-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 * var(--ring-unit));
+  margin-left: calc(20 * var(--ring-unit));
+
+  vertical-align: top;
+
+  line-height: calc(3 * var(--ring-unit));
+}
+
+:global(.ring-form__control_text::after) {
+  display: inline-block;
+
+  height: calc(var(--ring-unit) * 3);
+
+  content: "";
+  vertical-align: middle;
+}
+
+/* Temporary solution, proper grid is necessary */
+:global(.ring-form__control_secondary) {
+  position: absolute;
+  top: var(--ring-unit);
+  left: calc(27 * var(--ring-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 * var(--ring-unit)) !important;
+}
+
+:global(.ring-form__info) {
+  width: calc(85 * var(--ring-unit));
+  margin-bottom: calc(-1 * var(--ring-unit) + 2px);
+  margin-left: calc(20 * var(--ring-unit));
+
+  line-height: 20px;
+}
+
+:global(.ring-form__control__part) {
+  margin-right: var(--ring-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(var(--ring-unit) / 2);
+  padding-bottom: 0;
+}
+
+:global(.ring-form__group_short:last-child) {
+  padding-bottom: var(--ring-unit);
+}
+
+:global(.ring-form__group_short.ring-form__control) {
+  margin-left: calc(var(--ring-unit) * 3);
+}
+
+:global(.ring-form_small .ring-form__label) {
+  max-width: calc(12 * var(--ring-unit));
+}
+
+:global(.ring-form_small .ring-form__control) {
+  margin-left: calc(16 * var(--ring-unit));
+}

package/components/form/form.stories.js

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