@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/user-card/tooltip.d.ts

@@ -0,0 +1,36 @@
+import React, { Component, ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { DropdownAttrs } from '../dropdown/dropdown';
+import { UserCardAttrs, UserCardUser } from './card';
+interface ChildrenProps {
+    active: boolean;
+    pinned: boolean;
+}
+export interface UserCardTooltipProps extends Omit<UserCardAttrs, 'children' | 'user'> {
+    user?: UserCardUser | null | undefined;
+    children: ReactElement | readonly ReactElement[] | string | ((props: ChildrenProps) => ReactNode);
+    dropdownProps: Partial<DropdownAttrs>;
+    renderUserCard: (props: UserCardAttrs) => ReactNode;
+    renderNoUser: () => ReactNode;
+}
+export default class UserCardTooltip extends Component<UserCardTooltipProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        dropdownProps: PropTypes.Requireable<object>;
+        user: PropTypes.Requireable<object>;
+        renderUserCard: PropTypes.Requireable<(...args: any[]) => any>;
+        renderNoUser: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        renderUserCard: (props: UserCardAttrs) => React.JSX.Element;
+        renderNoUser: () => string;
+        dropdownProps: {
+            hoverShowTimeOut: number;
+            hoverHideTimeOut: number;
+        };
+    };
+    render(): React.JSX.Element;
+}
+export type UserCardTooltipAttrs = JSX.LibraryManagedAttributes<typeof UserCardTooltip, UserCardTooltipProps>;
+export {};

package/components/user-card/tooltip.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Dropdown from '../dropdown/dropdown';
+import Popup from '../popup/popup';
+import UserCard from './card';
+import styles from './user-card.css';
+const DEFAULT_TIMEOUT = 300;
+export default class UserCardTooltip extends Component {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+        dropdownProps: PropTypes.object,
+        user: PropTypes.object,
+        renderUserCard: PropTypes.func,
+        renderNoUser: PropTypes.func
+    };
+    static defaultProps = {
+        renderUserCard: (props) => {
+            const { user, ...restProps } = props;
+            return user && (<UserCard user={user} {...restProps}/>);
+        },
+        renderNoUser: () => '',
+        dropdownProps: {
+            hoverShowTimeOut: DEFAULT_TIMEOUT,
+            hoverHideTimeOut: DEFAULT_TIMEOUT
+        }
+    };
+    render() {
+        const { children, renderUserCard, renderNoUser, dropdownProps, user, ...restProps } = this.props;
+        return (<Dropdown anchor={children} hoverMode clickMode={false} {...dropdownProps}>
+        <Popup attached={false}>
+          {user
+                ? renderUserCard({
+                    ...restProps,
+                    user,
+                    className: classNames(styles.userCardSpaced, this.props.className)
+                })
+                : renderNoUser()}
+        </Popup>
+      </Dropdown>);
+    }
+}

package/components/user-card/user-card.css

@@ -0,0 +1,125 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.userCardSpaced {
+  padding: calc(unit * 2) calc(unit * 2);
+}
+
+.userInformationContainer {
+  display: flex;
+  align-items: flex-start;
+}
+
+.userAvatar {
+  position: relative;
+
+  display: flex;
+}
+
+.userInformation {
+  padding-left: 12px;
+
+  text-align: left;
+
+  color: var(--ring-text-color);
+
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.userInformationGeneral {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  height: 56px;
+  padding-top: 1px;
+}
+
+.userNameLine {
+  height: var(--ring-line-height-lowest);
+
+  white-space: nowrap;
+
+  line-height: var(--ring-line-height-lowest);
+}
+
+.userName {
+  display: inline-block;
+
+  margin-right: 4px;
+
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.userLogin {
+  margin-bottom: 7px;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.userEmail {
+  margin-right: 4px;
+
+  font-size: var(--ring-font-size);
+}
+
+.userCopyIcon {
+  cursor: pointer;
+
+  opacity: 0;
+}
+
+.userCopyIcon svg {
+  margin-left: 4px;
+
+  color: var(--ring-icon-color);
+}
+
+.userCopyIcon:hover svg {
+  color: var(--ring-link-hover-color);
+}
+
+.userEmailWrapper:hover .userCopyIcon {
+  transition: opacity 300ms ease-out;
+
+  opacity: 1;
+}
+
+:has(.userCopyIcon:hover) > .userEmail {
+  color: var(--ring-link-hover-color);
+}
+
+.unverifiedLabel {
+  margin: 0 4px;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.userNameInfo {
+  display: inline-block;
+
+  margin-bottom: 3px;
+}
+
+.userActiveStatus {
+  display: inline-block;
+
+  width: unit;
+  height: unit;
+  margin-right: var(--ring-unit);
+  margin-left: 6px;
+
+  border-radius: 50%;
+  background-color: var(--ring-icon-secondary-color);
+}
+
+.userActiveStatus.online {
+  background-color: var(--ring-icon-success-color);
+}

package/components/user-card/user-card.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @name User Card
+ * @category Components
+ * @tags Ring UI Language
+ * @framework React
+ * @constructor
+ * @description A component that displays user details.
+ */
+export { default as UserCard } from './card';
+export { default as UserCardTooltip } from './tooltip';
+export { default as SmartUserCardTooltip } from './smart-user-card-tooltip';

package/components/user-card/user-card.js

@@ -0,0 +1,11 @@
+/**
+ * @name User Card
+ * @category Components
+ * @tags Ring UI Language
+ * @framework React
+ * @constructor
+ * @description A component that displays user details.
+ */
+export { default as UserCard } from './card';
+export { default as UserCardTooltip } from './tooltip';
+export { default as SmartUserCardTooltip } from './smart-user-card-tooltip';

package/components/user-card-ng/user-card-ng.js

@@ -0,0 +1,16 @@
+/**
+ * @name User Card Ng
+ */
+import angular from 'angular';
+
+import {createAngularComponent} from '../global/angular-component-factory';
+import SmartUserCardTooltip from '../user-card/smart-user-card-tooltip';
+import UserCardTooltip from '../user-card/tooltip';
+
+const angularModule = angular.module('Ring.user-card', []);
+
+angularModule.
+  component('rgUserCardTooltip', createAngularComponent(UserCardTooltip, 'UserCardTooltip')).
+  component('rgSmartUserCardTooltip', createAngularComponent(SmartUserCardTooltip, 'SmartUserCardTooltip'));
+
+export default angularModule.name;

package/components/user-card-ng/user-card-ng.stories.js

@@ -0,0 +1,66 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import hubConfig from '../../.storybook/hub-config';
+
+import Auth from '../auth/auth';
+import {createHubUserCardSource} from '../hub-source/hub-source__user';
+
+import {avatarDataUri} from '../avatar/avatar-example-datauri';
+
+import UserCardNG from './user-card-ng';
+
+export default {
+  title: 'Legacy Angular/User Card Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for User Card.',
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [UserCardNG]).controller('ExampleCtrl', function ctrl() {
+    this.user = {
+      login: 'testuser',
+      name: 'Test User',
+      email: 'testuser@mail.com',
+      avatarUrl: avatarDataUri,
+      href: `${hubConfig.serverUri}/users/0`
+    };
+  });
+
+  return `
+      <div ng-controller="ExampleCtrl as ctrl">
+        <rg-user-card-tooltip user="ctrl.user">
+          Hover me to see {{ctrl.user.name}}'s card
+        </rg-user-card-tooltip>
+      </div>
+    `;
+};
+
+basic.storyName = 'basic';
+
+export const loadOnHover = () => {
+  angular.module(APP_NAME, [UserCardNG]).controller('ExampleCtrl', function ctrl() {
+    const auth = new Auth(hubConfig);
+
+    this.userSource = async () => {
+      await auth.init();
+      const userSource = createHubUserCardSource(auth, auth.user.id);
+      return userSource();
+    };
+  });
+
+  return `
+      <div ng-controller="ExampleCtrl as ctrl">
+        <rg-smart-user-card-tooltip user-data-source="ctrl.userSource">
+          Hover me to see current user's card
+        </rg-smart-user-card-tooltip>
+      </div>
+    `;
+};
+
+loadOnHover.storyName = 'load on hover';