@jetbrains/ring-ui 4.1.0-beta.3 → 4.1.1

package/components/auth-dialog/auth-dialog.js

@@ -6,6 +6,8 @@ import {Content} from '../island/island';
 import Dialog from '../dialog/dialog';
 import Button from '../button/button';
 
+import {H2} from '../heading/heading';
+
 import styles from './auth-dialog.css';
 
 /**
@@ -68,6 +70,7 @@ export default class AuthDialog extends Component {
 
     return (
       <Dialog
+        label={title}
         data-test="ring-auth-dialog"
         className={className}
         contentClassName={classNames(className, styles.dialog)}
@@ -84,7 +87,7 @@ export default class AuthDialog extends Component {
                 src={serviceImage}
               />
             )}
-            <div className={styles.title}>{title}</div>
+            <H2 className={styles.title}>{title}</H2>
             {errorMessage && (
               <div className={styles.error}>{errorMessage}</div>
             )}

package/components/auth-dialog/auth-dialog.test.js

@@ -1,27 +1,11 @@
 import React from 'react';
-import {mount} from 'enzyme';
-
-import styles from './auth-dialog.css';
+import {render, screen} from '@testing-library/react';
 
 import AuthDialog from './auth-dialog';
 
 describe('AuthDialog', () => {
-  const defaultProps = {show: true, text: 'Foo'};
-  let wrapper;
-  const mountAuthDialog = props => {
-    wrapper = mount(<AuthDialog {...props}/>);
-    return wrapper;
-  };
-  afterEach(() => wrapper.unmount());
-
-  const getContainer = () => document.querySelector('*[data-test~="ring-auth-dialog"]');
-
-  it('should create component', () => {
-    mountAuthDialog(defaultProps).should.have.type(AuthDialog);
-  });
-
   it('should render confirm', () => {
-    mountAuthDialog(defaultProps);
-    getContainer().should.contain(`.${styles.title}`);
+    render(<AuthDialog show title="Foo"/>);
+    screen.getByRole('heading', {text: 'Foo'}).should.exist;
   });
 });

package/components/avatar/avatar.css

@@ -1,10 +1,13 @@
 @import "../global/variables.css";
 
 .avatar {
+  display: inline-block;
   object-fit: cover;
   object-position: center;
 
-  border-radius: var(--ring-border-radius); /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+
+  border-radius: var(--ring-border-radius);
 }
 
 .subavatar {

package/components/avatar/avatar.examples.js

@@ -21,7 +21,8 @@ export const avatar = () => {
         {Object.keys(Size).map(size => (
           <div className="avatar-demo" key={size}>
             <Avatar size={Size[size]} url={avatarDataUri}/>
-            <Avatar size={Size[size]} url={avatarDataUri} round/>
+            <Avatar size={Size[size]} username="Jet Brains"/>
+            <Avatar size={Size[size]} username="Jet Brains" round/>
             <Avatar size={Size[size]}/>
           </div>
         ))}
@@ -38,7 +39,7 @@ avatar.parameters = {
   .avatar-demo {
     display: flex;
     justify-content: space-between;
-    width: 200px;
+    width: 240px;
     margin-bottom: 16px;
   }
 </style>`

package/components/avatar/avatar.js

@@ -6,6 +6,7 @@ import {encodeURL, isDataURI, parseQueryString} from '../global/url';
 import {getPixelRatio} from '../global/dom';
 
 import styles from './avatar.css';
+import FallbackAvatar from './fallback-avatar';
 
 /**
  * @name Avatar
@@ -15,6 +16,7 @@ export const Size = {
   Size18: 18,
   Size20: 20,
   Size24: 24,
+  Size28: 28,
   Size32: 32,
   Size40: 40,
   Size48: 48,
@@ -30,7 +32,9 @@ export default class Avatar extends PureComponent {
     url: PropTypes.string,
     round: PropTypes.bool,
     subavatar: PropTypes.string,
-    subavatarSize: PropTypes.number
+    subavatarSize: PropTypes.number,
+    username: PropTypes.string,
+    skipParams: PropTypes.bool
   };
 
   static defaultProps = {
@@ -53,7 +57,18 @@ export default class Avatar extends PureComponent {
   };
 
   render() {
-    const {size, url, dpr, style, round, subavatar, subavatarSize, ...restProps} = this.props;
+    const {
+      size,
+      url,
+      dpr,
+      style,
+      round,
+      subavatar,
+      subavatarSize,
+      username,
+      skipParams,
+      ...restProps
+    } = this.props;
     const sizeString = `${size}px`;
     const subavatarSizeString = `${subavatarSize}px`;
     const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
@@ -75,14 +90,25 @@ export default class Avatar extends PureComponent {
       return (
         <span
           {...restProps}
-          className={classNames(styles.avatar, styles.empty, this.props.className)}
+          data-test="avatar"
+          className={
+            classNames(styles.avatar, this.props.className, {[styles.empty]: username == null})
+          }
           style={styleObj}
-        />
+        >{
+            username != null && (
+              <FallbackAvatar
+                size={size}
+                round={round}
+                username={username}
+              />
+            )
+          }</span>
       );
     }
 
     let src = url;
-    if (!isDataURI(url)) {
+    if (!skipParams && !isDataURI(url)) {
       const [urlStart, query] = url.split('?');
       const queryParams = {
         ...parseQueryString(query),
@@ -101,7 +127,7 @@ export default class Avatar extends PureComponent {
         subavatarSizeString
       };
 
-      subavatarSrc = encodeURL(urlStart, queryParams);
+      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
       return (
         <div>
           <img
@@ -115,6 +141,7 @@ export default class Avatar extends PureComponent {
           />
           <img
             {...restProps}
+            data-test="avatar"
             onError={this.handleError}
             onLoad={this.handleSuccess}
             className={classNames(styles.subavatar)}
@@ -128,6 +155,7 @@ export default class Avatar extends PureComponent {
       return (
         <img
           {...restProps}
+          data-test="avatar"
           onError={this.handleError}
           onLoad={this.handleSuccess}
           className={classNames(styles.avatar, this.props.className)}

package/components/avatar/avatar.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {shallow, mount} from 'enzyme';
+import {render, screen} from '@testing-library/react';
 
 import {getPixelRatio} from '../global/dom';
 
@@ -12,45 +12,48 @@ const dataURI = `data:image/svg+xml,${encodeURIComponent(`
 )}`;
 
 describe('Avatar', () => {
-  const shallowAvatar = props => shallow(<Avatar {...props}/>);
-  const mountAvatar = props => mount(<Avatar {...props}/>);
-
   it('should create component', () => {
-    mountAvatar().should.have.type(Avatar);
+    render(<Avatar/>);
+    screen.getByTestId('avatar').should.exist;
   });
 
   it('should use passed className', () => {
-    shallowAvatar({className: 'test-class'}).should.have.className('test-class');
+    render(<Avatar className="test-class"/>);
+    screen.getByTestId('avatar').should.have.class('test-class');
   });
 
   it('should use passed className when url is passed', () => {
-    shallowAvatar({className: 'test-class', url: dataURI}).should.
-      have.className('test-class');
+    render(<Avatar className="test-class" url={dataURI}/>);
+    screen.getByAltText('User avatar').should.have.class('test-class');
   });
 
   it('should render span when no url is passed', () => {
-    shallowAvatar().should.have.tagName('span');
+    render(<Avatar/>);
+    screen.getByTestId('avatar').should.have.tagName('span');
   });
 
   it('should render image when url is passed', () => {
-    shallowAvatar({url: dataURI}).should.match('img[src]');
+    render(<Avatar url={dataURI}/>);
+    screen.getByAltText('User avatar').should.exist;
   });
 
   it('should not append params when data:uri is passed', () => {
-    shallowAvatar({url: dataURI}).should.have.prop('src').
-      not.match(/dpr=|size=/);
+    render(<Avatar url={dataURI}/>);
+    screen.getByAltText('User avatar').src.should.not.match(/dpr=|size=/);
   });
 
-  it('should append params when data:uri is passed', () => {
-    shallowAvatar({url: 'http://'}).should.have.prop('src').match(/dpr=|size=/);
+  it('should append params when http:uri is passed', () => {
+    render(<Avatar url="http://"/>);
+    screen.getByAltText('User avatar').src.should.match(/dpr=|size=/);
   });
 
   it('should set size 20 as default', () => {
-    shallowAvatar({url: 'http://'}).should.have.prop('src').match(/size=20/);
+    render(<Avatar url="http://"/>);
+    screen.getByAltText('User avatar').src.should.match(/size=20/);
   });
 
   it('should set proper dpr', () => {
-    shallowAvatar({url: 'http://'}).should.have.prop('src').
-      match(new RegExp(`dpr=${getPixelRatio()}`));
+    render(<Avatar url="http://"/>);
+    screen.getByAltText('User avatar').src.should.match(new RegExp(`dpr=${getPixelRatio()}`));
   });
 });

package/components/avatar/fallback-avatar.js

@@ -0,0 +1,136 @@
+import React, {useMemo} from 'react';
+import PropTypes from 'prop-types';
+
+import getUID from '../global/get-uid';
+
+const colorPairs = [
+  ['#60A800', '#D5CA00'],
+  ['#21D370', '#03E9E1'],
+  ['#3BA1FF', '#36E97D'],
+  ['#00C243', '#00FFFF'],
+  ['#4BE098', '#627FFF'],
+  ['#168BFA', '#26F7C7'],
+  ['#9D4CFF', '#39D3C3'],
+  ['#0A81F6', '#0ACFF6'],
+  ['#765AF8', '#5A91F8'],
+  ['#9E54FF', '#0ACFF6'],
+  ['#B345F1', '#669DFF'],
+  ['#765AF8', '#C059EE'],
+  ['#9039D0', '#C239D0'],
+  ['#9F2AFF', '#FD56FD'],
+  ['#AB3AF2', '#E40568'],
+  ['#9F2AFF', '#E9A80B'],
+  ['#D50F6B', '#E73AE8'],
+  ['#ED5502', '#E73AE8'],
+  ['#ED358C', '#DBED18'],
+  ['#ED358C', '#F9902E'],
+  ['#FF7500', '#FFCA00']
+];
+
+const Sizes = {
+  18: {
+    radius: 2,
+    text: {x: 9, y: 13},
+    fontSize: '11px',
+    textAnchor: 'middle'
+  },
+  24: {
+    radius: 3,
+    text: {x: 2, y: 13},
+    fontSize: '11px',
+    underscore: {x: 3, y: 17}
+  },
+  32: {
+    radius: 3,
+    text: {x: 3, y: 17},
+    fontSize: '13px',
+    letterSpacing: 1,
+    underscore: {x: 4, y: 22}
+  },
+  40: {
+    radius: 3,
+    text: {x: 5, y: 19},
+    fontSize: '15px',
+    letterSpacing: 1,
+    underscore: {x: 6, y: 28}
+  }
+};
+
+const sizeKeys = Object.keys(Sizes).map(Number);
+
+function extractLetters(name) {
+  const names = name.split(/[\s._]+/).filter(Boolean);
+  if (names.length >= 2) {
+    return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+  } else if (names.length === 1) {
+    if (names[0].length >= 2) {
+      return names[0].slice(0, 2).toUpperCase();
+    } else {
+      return `${names[0][0].toUpperCase()}X`;
+    }
+  } else {
+    return 'XX';
+  }
+}
+
+// https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0#gistcomment-2775538
+const BASE = 32;
+function hashCode(s) {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+  }
+
+  return h;
+}
+
+export default function FallbackAvatar({username, size, round}) {
+  const hash = Math.abs(hashCode(username.toLowerCase()));
+  const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
+  const possibleSizeKeys = sizeKeys.filter(key => key >= size);
+  const sizeKey = possibleSizeKeys.length > 0
+    ? Math.min(...possibleSizeKeys)
+    : Math.max(...sizeKeys);
+  const sizes = Sizes[sizeKey];
+  const radius = round ? '50%' : sizes.radius;
+  const gradientId = useMemo(() => getUID('gradient-'), []);
+  return (
+    <svg viewBox={`0 0 ${sizeKey} ${sizeKey}`} xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop stopColor={fromColor} offset="0"/>
+          <stop stopColor={toColor} offset="1"/>
+        </linearGradient>
+      </defs>
+      <g>
+        <rect
+          fill={`url(#${gradientId})`}
+          x="0"
+          y="0"
+          width={sizeKey}
+          height={sizeKey}
+          rx={radius}
+          ry={radius}
+        />
+        <text
+          x={sizes.text.x}
+          y={sizes.text.y}
+          fontFamily="Arial, Helvetica, sans-serif"
+          fontSize={sizes.fontSize}
+          letterSpacing={sizes.letterSpacing}
+          fill="#FFFFFF"
+          textAnchor={sizes.textAnchor}
+        >
+          <tspan>{extractLetters(username)}</tspan>
+          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
+        </text>
+      </g>
+    </svg>
+  );
+}
+
+FallbackAvatar.propTypes = {
+  username: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  round: PropTypes.bool
+};

package/components/avatar-editor-ng/avatar-editor-ng.css

@@ -19,7 +19,7 @@
     width: 0;
     height: calc(unit * 5);
 
-    content: '';
+    content: "";
     vertical-align: middle;
   }
 }
@@ -49,7 +49,7 @@
     width: 100%;
     height: 100%;
 
-    content: '';
+    content: "";
 
     background-color: rgba(0, 0, 0, 0.8);
   }

package/components/avatar-editor-ng/avatar-editor-ng.js

@@ -6,6 +6,7 @@ import messageBundleNg from '../message-bundle-ng/message-bundle-ng';
 import alertService from '../alert-service/alert-service';
 import IconNG from '../icon-ng/icon-ng';
 
+import template from './avatar-editor-ng__template';
 import './avatar-editor-ng.css';
 
 const angularModule = angular.module('Ring.avatar-editor', [messageBundleNg, IconNG]);
@@ -26,7 +27,7 @@ function rgAvatarEditor() {
       deleteLabel: '@',
       addMessage: '@'
     },
-    template: require('./avatar-editor-ng.html'),
+    template,
     transclude: true,
     controller: [
       '$scope', '$attrs', 'RingMessageBundle',

package/components/avatar-editor-ng/{avatar-editor-ng.html → avatar-editor-ng__template.js}

@@ -1,4 +1,4 @@
-<div>
+export default `<div>
   <div ng-click="!ngDisabled && controls.select()" class="ring-avatar-editor__frame" ng-class="{
         'ring-avatar-editor_controlled': controlled,
         'ring-avatar-editor': !ngDisabled
@@ -25,4 +25,4 @@
   >
     <span translate>{{ getDeleteLabel() }}</span>
   </rg-button>
-</div>
+</div>`;

package/components/badge/badge.test.js

@@ -1,41 +1,34 @@
 import React from 'react';
-import {shallow, mount, render} from 'enzyme';
+import {render, screen} from '@testing-library/react';
 
 import Badge from './badge';
 import style from './badge.css';
 
 describe('Badge', () => {
-  const shallowBadge = (params, content) => shallow(<Badge {...params}>{content}</Badge>);
-  const mountBadge = (params, content) => mount(<Badge {...params}>{content}</Badge>);
-  const renderBadge = (params, content) => render(<Badge {...params}>{content}</Badge>);
-
-  it('should create component', () => {
-    mountBadge().should.have.type(Badge);
-  });
-
   it('should render span with badge class', () => {
-    const wrapper = shallowBadge();
-    wrapper.should.have.tagName('span');
-    wrapper.should.have.className(style.badge);
+    render(<Badge/>);
+    const element = screen.getByTestId('ring-badge');
+    element.should.have.tagName('span');
+    element.should.have.class(style.badge);
   });
 
   it('should use passed className', () => {
-    shallowBadge({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should have default data-test', () => {
-    shallowBadge({}).should.have.attr('data-test', 'ring-badge');
+    render(<Badge className="test-class"/>);
+    screen.getByTestId('ring-badge').should.have.class('test-class');
   });
 
   it('should use passed data-test', () => {
-    shallowBadge({['data-test']: 'foo'}).should.have.attr('data-test', 'ring-badge foo');
+    render(<Badge data-test="foo"/>);
+    screen.getByTestId('foo', {exact: false}).should.exist;
   });
 
   it('should render children', () => {
-    renderBadge({}, 'foo').should.have.text('foo');
+    render(<Badge>{'foo'}</Badge>);
+    screen.getByText('foo').should.exist;
   });
 
   it('should render valid badge', () => {
-    shallowBadge({valid: true}, 'foo').should.have.className(style.valid);
+    render(<Badge valid/>);
+    screen.getByTestId('ring-badge').should.have.class(style.valid);
   });
 });

package/components/button/button.css

@@ -451,7 +451,7 @@
     width: calc(100% + loaderWidth);
     height: 100%;
 
-    content: '';
+    content: "";
     animation: progress 1s linear infinite;
 
     background-repeat: repeat;
@@ -460,7 +460,7 @@
 }
 
 .delayed .content::after {
-  content: '…';
+  content: "…";
 }
 
 .short {

package/components/button/button.js

@@ -1,5 +1,5 @@
 import 'focus-visible';
-import React, {PureComponent} from 'react';
+import React, {createRef, PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-10px';
@@ -47,6 +47,8 @@ class Button extends PureComponent {
   static IconSize = Size;
   static Theme = Theme;
 
+  buttonRef = createRef();
+
   render() {
     const {
       // Modifiers
@@ -102,6 +104,7 @@ class Button extends PureComponent {
     const Tag = isLink ? ClickableLink : 'button';
     return (
       <Tag
+        ref={this.buttonRef}
         tabIndex={loader ? -1 : 0}
         type={isLink ? null : 'button'}
         {...props}

package/components/button/button.test.js

@@ -1,65 +1,64 @@
 import React from 'react';
-import {mount, render} from 'enzyme';
+import {render, screen} from '@testing-library/react';
+
 import caretDownSVG from '@jetbrains/icons/caret-down-10px';
 
 import Button from './button';
 import styles from './button.css';
 
 describe('Button', () => {
-  const mountButton = props => mount(<Button {...props}/>);
-  const getButtonOutput = props => mountButton(props).find('button');
-  const renderButton = props => render(<Button {...props}/>);
-
   it('should create component', () => {
-    mountButton().type().should.equal(Button.type);
+    render(<Button/>);
+    screen.getByRole('button').should.exist;
   });
 
   it('should set _default modifier', () => {
-    getButtonOutput().hasClass(styles.button).should.be.true;
+    render(<Button/>);
+    screen.getByRole('button').className.should.include(styles.button);
   });
 
   it('should set modifiers', () => {
-    const wrapper = getButtonOutput({
-      active: true,
-      danger: true,
-      delayed: true,
-      loader: true,
-      primary: true,
-      short: true
-    });
+    render(
+      <Button
+        active
+        danger
+        delayed
+        loader
+        primary
+        short
+      />
+    );
 
-    wrapper.hasClass(styles.active).should.be.true;
-    wrapper.hasClass(styles.danger).should.be.true;
-    wrapper.hasClass(styles.delayed).should.be.true;
-    wrapper.hasClass(styles.loader).should.be.true;
-    wrapper.hasClass(styles.primary).should.be.true;
-    wrapper.hasClass(styles.short).should.be.true;
+    const className = screen.getByRole('button').className;
+    className.should.include(styles.active);
+    className.should.include(styles.danger);
+    className.should.include(styles.delayed);
+    className.should.include(styles.loader);
+    className.should.include(styles.primary);
+    className.should.include(styles.short);
   });
 
   it('should add icon', () => {
-    const wrapper = renderButton({
-      icon: caretDownSVG
-    });
+    render(<Button icon={caretDownSVG}/>);
 
-    wrapper.hasClass(styles.withIcon).should.be.true;
+    const element = screen.getByRole('button');
+    element.should.have.class(styles.withIcon);
     caretDownSVG.
       replace('/>', '></path>').
-      should.include(wrapper.find('svg').html());
+      should.include(element.querySelector('svg').innerHTML);
   });
 
   it('should set custom class', () => {
     const CUSTOM_CLASS = 'test';
 
-    const wrapper = getButtonOutput({
-      className: CUSTOM_CLASS
-    });
+    render(<Button className={CUSTOM_CLASS}/>);
 
-    wrapper.hasClass(CUSTOM_CLASS).should.be.true;
+    screen.getByRole('button').should.have.class(CUSTOM_CLASS);
   });
 
   it('should render link instead of button if href specified', () => {
-    const linkButton = mountButton({href: 'http://www.jetbrains.com'}).find('a');
-    linkButton.should.exist;
-    linkButton.should.have.attr('href', 'http://www.jetbrains.com');
+    render(<Button href="http://www.jetbrains.com"/>);
+
+    screen.getByRole('link').should.have.attr('href', 'http://www.jetbrains.com');
   });
 });

package/components/button-group/button-group.js

@@ -12,7 +12,7 @@ export default class ButtonGroup extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string
-  }
+  };
 
   render() {
     const {className} = this.props;

package/components/button-group/caption.js

@@ -7,7 +7,7 @@ import styles from './button-group.css';
 export default class Caption extends PureComponent {
   static propTypes = {
     className: PropTypes.node
-  }
+  };
 
   render() {
     const {className} = this.props;