@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/global/variables.d.ts

@@ -0,0 +1,90 @@
+import type { Property } from 'csstype';
+export interface RingCSSProperties {
+    '--ring-unit'?: string;
+    '--ring-line-color'?: Property.BorderColor;
+    '--ring-borders-color'?: Property.BorderColor;
+    '--ring-icon-color'?: Property.Color;
+    '--ring-icon-secondary-color'?: Property.Color;
+    '--ring-border-disabled-color'?: Property.BorderColor;
+    '--ring-border-unselected-disabled-color'?: Property.Color;
+    '--ring-icon-disabled-color'?: Property.Color;
+    '--ring-border-hover-color'?: Property.BorderColor;
+    '--ring-icon-hover-color'?: Property.Color;
+    '--ring-main-color'?: Property.Color;
+    '--ring-main-hover-color'?: Property.Color;
+    '--ring-icon-error-color'?: Property.Color;
+    '--ring-icon-warning-color'?: Property.Color;
+    '--ring-icon-success-color'?: Property.Color;
+    '--ring-pale-control-color'?: Property.Color;
+    '--ring-popup-border-components'?: string;
+    '--ring-popup-border-color'?: Property.BorderColor;
+    '--ring-popup-shadow-color'?: Property.Color;
+    '--ring-message-shadow-color'?: Property.Color;
+    '--ring-pinned-shadow-color'?: Property.Color;
+    '--ring-button-danger-hover-color'?: Property.Color;
+    '--ring-button-primary-border-color'?: Property.Color;
+    '--ring-search-color'?: Property.Color;
+    '--ring-hint-color'?: Property.Color;
+    '--ring-link-color'?: Property.Color;
+    '--ring-link-hover-color'?: Property.Color;
+    '--ring-error-color'?: Property.Color;
+    '--ring-warning-color'?: Property.Color;
+    '--ring-success-color'?: Property.Color;
+    '--ring-text-color'?: Property.Color;
+    '--ring-active-text-color'?: Property.Color;
+    '--ring-white-text-color'?: Property.Color;
+    '--ring-heading-color'?: Property.Color;
+    '--ring-secondary-color'?: Property.Color;
+    '--ring-disabled-color'?: Property.Color;
+    '--ring-content-background-color'?: Property.BackgroundColor;
+    '--ring-popup-background-color'?: Property.BackgroundColor;
+    '--ring-sidebar-background-color'?: Property.BackgroundColor;
+    '--ring-selected-background-color'?: Property.BackgroundColor;
+    '--ring-hover-background-color'?: Property.BackgroundColor;
+    '--ring-message-background-color'?: Property.BackgroundColor;
+    '--ring-navigation-background-color'?: Property.BackgroundColor;
+    '--ring-tag-background-color'?: Property.BackgroundColor;
+    '--ring-tag-hover-background-color'?: Property.BackgroundColor;
+    '--ring-removed-background-color'?: Property.BackgroundColor;
+    '--ring-warning-background-color'?: Property.BackgroundColor;
+    '--ring-added-background-color'?: Property.BackgroundColor;
+    '--ring-disabled-background-color'?: Property.BackgroundColor;
+    '--ring-button-danger-active-color'?: Property.BackgroundColor;
+    '--ring-button-loader-background'?: Property.BackgroundColor;
+    '--ring-button-primary-background-color'?: Property.BackgroundColor;
+    '--ring-code-background-color'?: Property.BackgroundColor;
+    '--ring-code-color'?: Property.Color;
+    '--ring-code-comment-color'?: Property.Color;
+    '--ring-code-meta-color'?: Property.Color;
+    '--ring-code-keyword-color'?: Property.Color;
+    '--ring-code-tag-background-color'?: Property.BackgroundColor;
+    '--ring-code-tag-color'?: Property.Color;
+    '--ring-code-tag-font-weight'?: Property.FontWeight;
+    '--ring-code-field-color'?: Property.Color;
+    '--ring-code-attribute-color'?: Property.Color;
+    '--ring-code-number-color'?: Property.Color;
+    '--ring-code-string-color'?: Property.Color;
+    '--ring-code-addition-color'?: Property.Color;
+    '--ring-code-deletion-color'?: Property.Color;
+    '--ring-border-radius'?: Property.BorderRadius;
+    '--ring-border-radius-small'?: Property.BorderRadius;
+    '--ring-font-size-larger'?: Property.FontSize;
+    '--ring-font-size'?: Property.FontSize;
+    '--ring-font-size-smaller'?: Property.FontSize;
+    '--ring-line-height-taller'?: Property.LineHeight;
+    '--ring-line-height'?: Property.LineHeight;
+    '--ring-line-height-lower'?: Property.LineHeight;
+    '--ring-line-height-lowest'?: Property.LineHeight;
+    '--ring-ease'?: string;
+    '--ring-fast-ease'?: string;
+    '--ring-font-family'?: Property.FontFamily;
+    '--ring-font-family-monospace'?: Property.FontFamily;
+    '--ring-invisible-element-z-index'?: Property.ZIndex;
+    '--ring-fixed-z-index'?: Property.ZIndex;
+    '--ring-overlay-z-index'?: Property.ZIndex;
+    '--ring-alert-z-index'?: Property.ZIndex;
+}
+declare module 'csstype' {
+    interface Properties extends RingCSSProperties {
+    }
+}

package/components/global/variables.js

@@ -0,0 +1 @@
+export {};

package/components/global/variables_dark.css

@@ -0,0 +1,68 @@
+/* stylelint-disable color-no-hex */
+
+.dark {
+  --ring-line-color: #475159;
+  --ring-borders-color: #406380;
+  --ring-icon-color: #80929d;
+  --ring-icon-secondary-color: #80929d;
+  --ring-border-disabled-color: #475159;
+  --ring-border-unselected-disabled-color: #363636;
+  --ring-icon-disabled-color: #505253;
+  --ring-border-hover-color: #70b1e6;
+  --ring-main-color: #008eff;
+  --ring-main-hover-color: #007ee5;
+  --ring-icon-error-color: #db5860;
+  --ring-icon-warning-color: #eda200;
+  --ring-icon-success-color: #47d464;
+  --ring-popup-border-components: 0, 42, 76;
+  --ring-popup-border-color: rgba(var(--ring-popup-border-components), 0.1);
+  --ring-popup-shadow-color: rgba(var(--ring-popup-border-components), 0.15);
+  --ring-message-shadow-color: rgba(var(--ring-popup-border-components), 0.3);
+  --ring-pinned-shadow-color: #000;
+  --ring-button-danger-hover-color: var(--ring-error-color);
+  --ring-button-primary-border-color: #80c6ff;
+
+  /* Text */
+  --ring-hint-color: #80929d;
+  --ring-link-color: #70b1e6;
+  --ring-error-color: #db5860;
+  --ring-warning-color: #eda200;
+  --ring-success-color: #47d464;
+  --ring-text-color: #bbb;
+  --ring-active-text-color: #fff;
+  --ring-heading-color: var(--ring-text-color);
+  --ring-secondary-color: #80929d;
+  --ring-disabled-color: #80929d;
+
+  /* Background */
+  --ring-content-background-color: #23272b;
+  --ring-popup-background-color: #111314;
+  --ring-sidebar-background-color: #28343d;
+  --ring-selected-background-color: #062640;
+  --ring-hover-background-color: #0b1a26;
+  --ring-message-background-color: var(--ring-popup-background-color);
+  --ring-navigation-background-color: #111314;
+  --ring-tag-background-color: #3e4d59;
+  --ring-tag-hover-background-color: #333e47;
+  --ring-removed-background-color: #8f5247;
+  --ring-warning-background-color: #593d01;
+  --ring-added-background-color: #365947;
+  --ring-disabled-background-color: #303030;
+  --ring-button-danger-active-color: #26080a;
+  --ring-button-primary-background-color: #007ee5;
+
+  /* Code */
+  --ring-code-background-color: #2b2b2b;
+  --ring-code-color: #a9b7c6;
+  --ring-code-meta-color: #bbb529;
+  --ring-code-keyword-color: #cc7832;
+  --ring-code-tag-background-color: #2b2b2b;
+  --ring-code-tag-color: #e8bf6a;
+  --ring-code-tag-font-weight: normal;
+  --ring-code-field-color: #9876aa;
+  --ring-code-attribute-color: #bababa;
+  --ring-code-number-color: #6897bb;
+  --ring-code-string-color: #6a8759;
+  --ring-code-addition-color: #447152;
+  --ring-code-deletion-color: #656e76;
+}

package/components/grid/col.d.ts

@@ -0,0 +1,31 @@
+import { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface ColProps {
+    children?: ReactNode;
+    xs?: boolean | number | null | undefined;
+    sm?: boolean | number | null | undefined;
+    md?: boolean | number | null | undefined;
+    lg?: boolean | number | null | undefined;
+    xsOffset?: number | null | undefined;
+    smOffset?: number | null | undefined;
+    mdOffset?: number | null | undefined;
+    lgOffset?: number | null | undefined;
+    reverse?: boolean | null | undefined;
+    className?: string | null | undefined;
+}
+export default class Col extends Component<ColProps> {
+    static propTypes: {
+        xs: PropTypes.Requireable<number | boolean>;
+        sm: PropTypes.Requireable<number | boolean>;
+        md: PropTypes.Requireable<number | boolean>;
+        lg: PropTypes.Requireable<number | boolean>;
+        xsOffset: PropTypes.Requireable<number>;
+        smOffset: PropTypes.Requireable<number>;
+        mdOffset: PropTypes.Requireable<number>;
+        lgOffset: PropTypes.Requireable<number>;
+        reverse: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}

package/components/grid/col.js

@@ -1,58 +1,49 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './grid.css';
-
 const ModifierType = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
-
 const classMap = {
-  xs: 'col-xs',
-  sm: 'col-sm',
-  md: 'col-md',
-  lg: 'col-lg',
-  xsOffset: 'col-xs-offset',
-  smOffset: 'col-sm-offset',
-  mdOffset: 'col-md-offset',
-  lgOffset: 'col-lg-offset'
+    xs: 'col-xs',
+    sm: 'col-sm',
+    md: 'col-md',
+    lg: 'col-lg',
+    xsOffset: 'col-xs-offset',
+    smOffset: 'col-sm-offset',
+    mdOffset: 'col-md-offset',
+    lgOffset: 'col-lg-offset'
 };
-
 /**
  * Converts props like "xs=9 xsOffset={2}" to classes "col-xs-9 col-xs-offset-2"
  * @param {Object} props incoming props
  * @returns {Array} result classnames
  */
 function getClassNames(props) {
-  return Object.keys(props).
-    filter(key => classMap[key]).
-    map(key => styles[Number.isInteger(props[key]) ? `${classMap[key]}-${props[key]}` : classMap[key]]);
+    return Object.entries(props).
+        filter(([key]) => classMap[key]).
+        map(([key, value]) => styles[Number.isInteger(value) ? `${classMap[key]}-${value}` : classMap[key]]);
 }
-
 export default class Col extends Component {
-  static propTypes = {
-    xs: ModifierType,
-    sm: ModifierType,
-    md: ModifierType,
-    lg: ModifierType,
-    xsOffset: PropTypes.number,
-    smOffset: PropTypes.number,
-    mdOffset: PropTypes.number,
-    lgOffset: PropTypes.number,
-    reverse: PropTypes.bool,
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, reverse, ...restProps} = this.props;
-    const classes = classNames(styles.col, className, getClassNames(restProps), {
-      [styles.reverse]: reverse
-    });
-
-    return (
-      <div className={classes}>
+    static propTypes = {
+        xs: ModifierType,
+        sm: ModifierType,
+        md: ModifierType,
+        lg: ModifierType,
+        xsOffset: PropTypes.number,
+        smOffset: PropTypes.number,
+        mdOffset: PropTypes.number,
+        lgOffset: PropTypes.number,
+        reverse: PropTypes.bool,
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, reverse, ...restProps } = this.props;
+        const classes = classNames(styles.col, className, getClassNames(restProps), {
+            [styles.reverse]: reverse
+        });
+        return (<div className={classes}>
         {children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }

package/components/grid/grid.d.ts

@@ -0,0 +1,14 @@
+import { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Grid
+ */
+export declare class Grid extends Component<HTMLAttributes<HTMLDivElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}
+export { default as Row } from './row';
+export { default as Col } from './col';

package/components/grid/grid.js

@@ -1,33 +1,22 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './grid.css';
-
 /**
  * @name Grid
  */
-
 export class Grid extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames(styles['container-fluid'], className);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames(styles['container-fluid'], className);
+        return (<div {...restProps} className={classes}>
         {children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }
-
-export {default as Row} from './row';
-export {default as Col} from './col';
+export { default as Row } from './row';
+export { default as Col } from './col';

package/components/grid/row.d.ts

@@ -0,0 +1,40 @@
+import { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+declare const ModifierType: PropTypes.Requireable<string>;
+declare type ModifierType = 'xs' | 'sm' | 'md' | 'lg';
+export interface RowProps {
+    children?: ReactNode;
+    reverse?: boolean | null | undefined;
+    start?: ModifierType | null | undefined;
+    center?: ModifierType | null | undefined;
+    end?: ModifierType | null | undefined;
+    top?: ModifierType | null | undefined;
+    middle?: ModifierType | null | undefined;
+    baseline?: ModifierType | null | undefined;
+    bottom?: ModifierType | null | undefined;
+    around?: ModifierType | null | undefined;
+    between?: ModifierType | null | undefined;
+    first?: ModifierType | null | undefined;
+    last?: ModifierType | null | undefined;
+    className?: string | null | undefined;
+}
+export default class Row extends Component<RowProps> {
+    static propTypes: {
+        reverse: PropTypes.Requireable<boolean>;
+        start: PropTypes.Requireable<string>;
+        center: PropTypes.Requireable<string>;
+        end: PropTypes.Requireable<string>;
+        top: PropTypes.Requireable<string>;
+        middle: PropTypes.Requireable<string>;
+        baseline: PropTypes.Requireable<string>;
+        bottom: PropTypes.Requireable<string>;
+        around: PropTypes.Requireable<string>;
+        between: PropTypes.Requireable<string>;
+        first: PropTypes.Requireable<string>;
+        last: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}
+export {};

package/components/grid/row.js

@@ -1,60 +1,51 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './grid.css';
-
 const ModifierType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
 const modifierKeys = [
-  'start', 'center', 'end', // text-align, justify-content
-  'around', 'between', // justify-content
-  'top', 'middle', 'baseline', 'bottom', // align-items
-  'first', 'last' // order
+    'start', 'center', 'end',
+    'around', 'between',
+    'top', 'middle', 'baseline', 'bottom',
+    'first', 'last' // order
 ];
-
 /**
  * Converts xs="middle" to class "middle-xs"
  * @param {Object} props incoming props
  * @returns {Array} result modifier classes
  */
 function getModifierClassNames(props) {
-  return modifierKeys.reduce((result, key) => {
-    if (props[key]) {
-      return result.concat(styles[`${key}-${props[key]}`]);
-    }
-    return result;
-  }, []);
+    return modifierKeys.reduce((result, key) => {
+        if (props[key]) {
+            return result.concat(styles[`${key}-${props[key]}`]);
+        }
+        return result;
+    }, []);
 }
-
 export default class Row extends Component {
-  static propTypes = {
-    reverse: PropTypes.bool,
-    start: ModifierType,
-    center: ModifierType,
-    end: ModifierType,
-    top: ModifierType,
-    middle: ModifierType,
-    baseline: ModifierType,
-    bottom: ModifierType,
-    around: ModifierType,
-    between: ModifierType,
-    first: ModifierType,
-    last: ModifierType,
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, reverse, ...restProps} = this.props;
-
-    const classes = classNames(className, styles.row, getModifierClassNames(restProps), {
-      [styles.reverse]: reverse
-    });
-
-    return (
-      <div className={classes}>
+    static propTypes = {
+        reverse: PropTypes.bool,
+        start: ModifierType,
+        center: ModifierType,
+        end: ModifierType,
+        top: ModifierType,
+        middle: ModifierType,
+        baseline: ModifierType,
+        bottom: ModifierType,
+        around: ModifierType,
+        between: ModifierType,
+        first: ModifierType,
+        last: ModifierType,
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, reverse, ...restProps } = this.props;
+        const classes = classNames(className, styles.row, getModifierClassNames(restProps), {
+            [styles.reverse]: reverse
+        });
+        return (<div className={classes}>
         {children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }

package/components/group/group.d.ts

@@ -0,0 +1,12 @@
+import { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Group
+ */
+export default class Group extends Component<HTMLAttributes<HTMLSpanElement>> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/group/group.js

@@ -1,30 +1,20 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './group.css';
-
 /**
  * @name Group
  */
-
 export default class Group extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames(styles.group, className);
-
-    return (
-      <span
-        {...restProps}
-        className={classes}
-      >
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames(styles.group, className);
+        return (<span {...restProps} className={classes}>
         {children}
-      </span>
-    );
-  }
+      </span>);
+    }
 }

package/components/group-ng/group.examples.js

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import GroupNG from '@jetbrains/ring-ui/components/group-ng/group-ng';
+import GroupNG from './group-ng';
 
 export default {
   title: 'Legacy Angular/Group Ng',

package/components/header/header.css

@@ -1,22 +1,18 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
+@value link, active from "../link/link.css";
 @value height: calc(unit * 8);
 @value compensate: 3px;
 @value compensated: calc(height - compensate);
 
-.light {
-  background-color: transparent;
+:root {
+  --ring-header-link-color: var(--ring-link-color);
 }
 
 .dark {
-  color: var(--ring-dark-text-color);
-  background-color: var(--ring-navigation-background-color);
-
-  /* override link */
-  & > a {
-    color: var(--ring-dark-secondary-color);
-  }
+  --ring-header-link-color: var(--ring-text-color);
 }
 
 .header {
@@ -27,6 +23,10 @@
   box-sizing: border-box;
   height: height;
 
+  color: var(--ring-text-color);
+
+  background-color: var(--ring-navigation-background-color);
+
   line-height: compensated;
 
   & > * {
@@ -36,6 +36,15 @@
     height: height;
     padding: 0 calc(unit * 1.5) compensate;
   }
+
+  /* override link */
+  & .link {
+    color: var(--ring-header-link-color);
+  }
+
+  & .active {
+    color: var(--ring-active-text-color);
+  }
 }
 
 .headerSpaced {
@@ -154,7 +163,7 @@
 
     content: "";
 
-    border: 1px solid var(--ring-dark-text-color);
+    border: 1px solid var(--ring-white-text-color);
     border-radius: 50%;
     background-color: var(--ring-link-hover-color);
   }

package/components/header/header.d.ts

@@ -0,0 +1,34 @@
+import { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import Theme from '../global/theme';
+interface HeaderProps extends HTMLAttributes<HTMLElement> {
+    spaced: boolean;
+    theme: Theme;
+}
+/**
+ * @name Header
+ */
+/**
+ * Displays a configurable page header. See available presentation options in the knobs panel.
+ */
+declare class Header extends Component<HeaderProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        spaced: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        spaced: boolean;
+        theme: Theme;
+    };
+    render(): JSX.Element;
+}
+export declare type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
+export default Header;
+export { default as Logo } from './logo';
+export { default as Tray } from './tray';
+export { default as TrayIcon } from './tray-icon';
+export { default as Profile } from './profile';
+export { default as SmartProfile } from './smart-profile';
+export { default as Services } from './services';
+export { default as SmartServices } from './smart-services';