@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/grid/grid.d.ts

@@ -0,0 +1,14 @@
+import React, { 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(): React.JSX.Element;
+}
+export { default as Row } from './row';
+export { default as Col } from './col';

package/components/grid/grid.js

@@ -0,0 +1,22 @@
+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}>
+        {children}
+      </div>);
+    }
+}
+export { default as Row } from './row';
+export { default as Col } from './col';

package/components/grid/row.d.ts

@@ -0,0 +1,40 @@
+import React, { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+declare const ModifierType: PropTypes.Requireable<string>;
+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(): React.JSX.Element;
+}
+export {};

package/components/grid/row.js

@@ -0,0 +1,51 @@
+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
+];
+/**
+ * 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;
+    }, []);
+}
+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}>
+        {children}
+      </div>);
+    }
+}

package/components/group/group.css

@@ -0,0 +1,9 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.group {
+  & > *:not(:last-child) {
+    margin-right: unit;
+  }
+}

package/components/group/group.d.ts

@@ -0,0 +1,12 @@
+import React, { 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(): React.JSX.Element;
+}

package/components/group/group.js

@@ -0,0 +1,20 @@
+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}>
+        {children}
+      </span>);
+    }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * @name Group Ng
+*/
+
+import angular from 'angular';
+
+import styles from '../group/group.css';
+
+const angularModule = angular.module('Ring.group', []);
+
+angularModule.component('rgGroup', {
+  transclude: true,
+  template: `<span ng-transclude class="${styles.group}"></span>`
+});
+
+export default angularModule.name;

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

@@ -0,0 +1,29 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import ButtonNG from '../button-ng/button-ng';
+
+import GroupNG from './group-ng';
+
+export default {
+  title: 'Legacy Angular/Group Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Group.'
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [ButtonNG, GroupNG]);
+
+  return `
+      <rg-group>
+        <rg-button>First item</rg-button>
+        <rg-button>Second item</rg-button>
+      </rg-group>
+    `;
+};
+
+basic.storyName = 'Group Ng';

package/components/header/header.css

@@ -0,0 +1,171 @@
+@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);
+
+:root {
+  --ring-header-link-color: var(--ring-link-color);
+}
+
+.dark,
+:global(.ring-ui-theme-dark) {
+  --ring-header-link-color: var(--ring-text-color);
+}
+
+.header {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+
+  box-sizing: border-box;
+  height: height;
+
+  color: var(--ring-text-color);
+
+  background-color: var(--ring-navigation-background-color);
+
+  line-height: compensated;
+
+  & > * {
+    display: inline-block;
+
+    box-sizing: border-box;
+    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 {
+  & > *:first-child {
+    padding-left: calc(unit * 4);
+  }
+
+  & > *:last-child {
+    padding-right: calc(unit * 4);
+  }
+}
+
+.logo {
+  display: inline-flex;
+  align-items: center;
+
+  height: height;
+
+  color: var(--ring-navigation-background-color);
+
+  line-height: normal;
+
+  & svg {
+    vertical-align: bottom;
+  }
+}
+
+.tray {
+  align-items: flex-end;
+
+  margin-left: auto;
+  padding: 0 0 compensate;
+}
+
+/* override .header > * */
+.tray.tray {
+  display: flex;
+}
+
+.trayItemContent {
+  height: compensated;
+}
+
+.icon {
+  width: calc(unit * 5);
+
+  text-align: center;
+
+  vertical-align: top;
+}
+
+/* override button */
+.icon.icon {
+  height: compensated;
+
+  padding-top: calc(unit / 2);
+
+  line-height: compensated;
+}
+
+.main svg {
+  color: var(--ring-main-color);
+}
+
+.rotatable svg {
+  transition: transform 0.3s ease-out;
+  transform: rotate(0deg);
+  transform-origin: 50% 50%;
+}
+
+.rotated svg {
+  transform: rotate(90deg);
+}
+
+.profileEmpty {
+  align-items: center;
+
+  width: auto;
+  height: compensated;
+  padding-left: unit;
+
+  vertical-align: bottom;
+}
+
+/* override dropdown */
+.profileEmpty.profileEmpty {
+  display: inline-flex;
+}
+
+.profile {
+  composes: profileEmpty;
+
+  height: compensated;
+
+  cursor: pointer;
+}
+
+.avatarWrapper {
+  composes: resetButton from "../global/global.css";
+
+  line-height: 0;
+}
+
+.hasUpdates {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    top: calc(15% - 5px);
+    right: calc(15% - 5px);
+
+    display: block;
+
+    width: unit;
+    height: unit;
+
+    content: "";
+
+    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 React, { 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(): React.JSX.Element;
+}
+export 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';

package/components/header/header.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Theme, { ThemeProvider } from '../global/theme';
+import styles from './header.css';
+/**
+ * @name Header
+ */
+/**
+ * Displays a configurable page header. See available presentation options in the knobs panel.
+ */
+class Header extends Component {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node,
+        spaced: PropTypes.bool
+    };
+    static defaultProps = {
+        spaced: true,
+        theme: Theme.DARK
+    };
+    render() {
+        const { children, className, spaced, theme, ...restProps } = this.props;
+        const classes = classNames(styles.header, className, {
+            [styles.headerSpaced]: spaced
+        });
+        const overrideOuterTheme = theme !== Theme.LIGHT;
+        const header = (<header {...restProps} className={classes}>
+        {children}
+      </header>);
+        if (overrideOuterTheme) {
+            return (<ThemeProvider theme={theme}>
+          {header}
+        </ThemeProvider>);
+        }
+        return header;
+    }
+}
+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';

package/components/header/logo.d.ts

@@ -0,0 +1,14 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { IconAttrs, Size } from '../icon/icon';
+export default class Logo extends PureComponent<IconAttrs> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        size: Size;
+        suppressSizeWarning: boolean;
+    };
+    static Size: typeof Size;
+    render(): React.JSX.Element;
+}

package/components/header/logo.js

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Icon, { Size } from '../icon/icon';
+import styles from './header.css';
+export default class Logo extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string
+    };
+    static defaultProps = {
+        size: Size.Size48,
+        suppressSizeWarning: true
+    };
+    static Size = Size;
+    render() {
+        const { className, ...restProps } = this.props;
+        const classes = classNames(styles.logo, className);
+        return (<div className={classes}>
+        <Icon {...restProps}/>
+      </div>);
+    }
+}

package/components/header/profile.d.ts

@@ -0,0 +1,75 @@
+import React, { ComponentType, HTMLAttributes, PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { Size } from '../avatar/avatar';
+import { ListDataItem } from '../list/consts';
+import { AuthUser } from '../auth/auth';
+import { ClickableLinkProps } from '../link/clickableLink';
+export interface ProfileTranslations {
+    applyChangedUser?: string | null | undefined;
+    login?: string | null | undefined;
+    profile?: string | null | undefined;
+    switchUser?: string | null | undefined;
+    logout?: string | null | undefined;
+    certificateMismatch?: string | null | undefined;
+}
+export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    closeOnSelect: boolean;
+    renderPopupItems: (items: ListDataItem[]) => readonly ListDataItem[];
+    translations?: ProfileTranslations | null | undefined;
+    size: Size;
+    renderGuest: (props: ProfileProps) => ReactNode;
+    hasUpdates?: boolean | null | undefined;
+    loading?: boolean | undefined;
+    onLogin?: (() => void) | undefined;
+    onLogout?: (() => void) | null | undefined;
+    onSwitchUser?: (() => void) | null | undefined;
+    profileUrl?: string | undefined;
+    LinkComponent?: ComponentType<ClickableLinkProps> | null | undefined;
+    user?: AuthUser | null | undefined | void;
+    round?: boolean | null | undefined;
+    showLogIn?: boolean | null | undefined;
+    showLogOut?: boolean | null | undefined;
+    showSwitchUser?: boolean | null | undefined;
+    showApplyChangedUser?: boolean | null | undefined;
+    onRevertPostponement?: (() => void) | null | undefined;
+}
+export default class Profile extends PureComponent<ProfileProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        closeOnSelect: PropTypes.Requireable<boolean>;
+        hasUpdates: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        onLogin: PropTypes.Requireable<(...args: any[]) => any>;
+        onLogout: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwitchUser: PropTypes.Requireable<(...args: any[]) => any>;
+        profileUrl: PropTypes.Requireable<string>;
+        renderPopupItems: PropTypes.Requireable<(...args: any[]) => any>;
+        LinkComponent: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | React.Component<unknown, unknown, unknown> | null | undefined>>;
+        translations: PropTypes.Requireable<PropTypes.InferProps<{
+            profile: PropTypes.Requireable<string>;
+            login: PropTypes.Requireable<string>;
+            logout: PropTypes.Requireable<string>;
+            applyChangedUser: PropTypes.Requireable<string>;
+            switchUser: PropTypes.Requireable<string>;
+        }>>;
+        user: PropTypes.Requireable<PropTypes.InferProps<{
+            guest: PropTypes.Requireable<boolean>;
+            profile: PropTypes.Requireable<object>;
+            name: PropTypes.Requireable<string>;
+        }>>;
+        size: PropTypes.Requireable<number>;
+        round: PropTypes.Requireable<boolean>;
+        showLogIn: PropTypes.Requireable<boolean>;
+        showLogOut: PropTypes.Requireable<boolean>;
+        showSwitchUser: PropTypes.Requireable<boolean>;
+        showApplyChangedUser: PropTypes.Requireable<boolean>;
+        onRevertPostponement: PropTypes.Requireable<(...args: any[]) => any>;
+        renderGuest: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: ProfileProps;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof Profile.contextType>;
+    static Size: typeof Size;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+}
+export type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;