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

package/components/auth/window-flow.js

@@ -0,0 +1,102 @@
+import AuthResponseParser from './response-parser';
+const NAVBAR_HEIGHT = 50;
+const CLOSED_CHECK_INTERVAL = 200;
+export default class WindowFlow {
+    _timeoutId = undefined;
+    _requestBuilder;
+    _storage;
+    reject;
+    _loginWindow;
+    _promise;
+    constructor(requestBuilder, storage) {
+        this._requestBuilder = requestBuilder;
+        this._storage = storage;
+        this._reset();
+    }
+    /**
+     * Opens window with the given URL
+     * @param {string} url
+     * @private
+     */
+    _openWindow(url) {
+        const height = 700;
+        const width = 750;
+        const screenHalves = 2;
+        const top = (window.screen.height - height - NAVBAR_HEIGHT) / screenHalves;
+        const left = (window.screen.width - width) / screenHalves;
+        return window.open(url, 'HubLoginWindow', `height=${height}, width=${width}, left=${left}, top=${top}`);
+    }
+    /**
+     * Initiates authorization in window
+     */
+    async _load() {
+        const authRequest = await this._requestBuilder.prepareAuthRequest(
+        // eslint-disable-next-line camelcase
+        { request_credentials: 'required', auth_mode: 'bypass_to_login' }, { nonRedirect: true });
+        return new Promise((resolve, reject) => {
+            this.reject = reject;
+            let cleanRun;
+            const cleanUp = () => {
+                if (cleanRun) {
+                    return;
+                }
+                cleanRun = true;
+                /* eslint-disable @typescript-eslint/no-use-before-define */
+                removeStateListener();
+                removeTokenListener();
+                /* eslint-enable @typescript-eslint/no-use-before-define */
+                this._loginWindow?.close();
+                clearTimeout(this._timeoutId);
+            };
+            const removeTokenListener = this._storage.onTokenChange(token => {
+                if (token) {
+                    cleanUp();
+                    resolve(token.accessToken);
+                }
+            });
+            const removeStateListener = this._storage.onStateChange(authRequest.stateId, state => {
+                if (state && state.error) {
+                    cleanUp();
+                    reject(new AuthResponseParser.AuthError(state));
+                }
+            });
+            if (this._loginWindow == null || this._loginWindow.closed) {
+                this._loginWindow = this._openWindow(authRequest.url);
+            }
+            else {
+                this._loginWindow.location.href = authRequest.url;
+            }
+            this.checkIsClosed();
+        });
+    }
+    checkIsClosed = () => {
+        if (this._loginWindow?.closed) {
+            this.stop();
+            return;
+        }
+        this._timeoutId = window.setTimeout(this.checkIsClosed, CLOSED_CHECK_INTERVAL);
+    };
+    _reset = () => {
+        this._promise = null;
+        this._loginWindow = null;
+        clearTimeout(this._timeoutId);
+    };
+    stop() {
+        if (this._loginWindow != null) {
+            this._loginWindow.close();
+        }
+        if (this.reject) {
+            this.reject('Authorization window closed');
+        }
+        this._reset();
+    }
+    authorize() {
+        if (this._promise != null && this._loginWindow != null && !this._loginWindow.closed) {
+            this._loginWindow.focus();
+            return this._promise;
+        }
+        this._promise = this._load();
+        this._promise.then(this._reset, this._reset);
+        return this._promise;
+    }
+}

package/components/auth-dialog/auth-dialog.css

@@ -0,0 +1,54 @@
+@import "../global/variables.css";
+
+.dialog.dialog {
+  width: auto;
+  max-width: 400px;
+}
+
+.content {
+  composes: font from "../global/global.css";
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  margin: calc(var(--ring-unit) * 2) 0;
+}
+
+.button {
+  width: calc(var(--ring-unit) * 25);
+  margin-top: var(--ring-unit);
+}
+
+.firstButton {
+  composes: button;
+
+  margin-top: calc(var(--ring-unit) * 4);
+}
+
+.title.title {
+  margin-top: 0;
+  margin-bottom: var(--ring-unit);
+
+  text-align: center;
+
+  font-weight: 100;
+}
+
+.logo {
+  width: calc(var(--ring-unit) * 12);
+  height: calc(var(--ring-unit) * 12);
+  margin-bottom: 12px;
+  object-fit: contain;
+
+  @media (height <= 400px) {
+    width: calc(var(--ring-unit) * 4);
+    height: calc(var(--ring-unit) * 4);
+  }
+}
+
+.error {
+  text-align: center;
+
+  color: var(--ring-error-color);
+}

package/components/auth-dialog/auth-dialog.d.ts

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Auth Dialog
+ */
+export interface AuthDialogProps {
+    className?: string | undefined;
+    title?: string | null | undefined;
+    errorMessage?: string | null | undefined;
+    serviceImage?: string | null | undefined;
+    serviceName?: string | null | undefined;
+    loginCaption: string;
+    loginToCaption: string;
+    show: boolean;
+    cancelOnEsc: boolean;
+    confirmLabel: string;
+    cancelLabel: string;
+    tryAgainLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    onTryAgain?: () => void;
+}
+export default class AuthDialog extends Component<AuthDialogProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        errorMessage: PropTypes.Requireable<string>;
+        serviceImage: PropTypes.Requireable<string>;
+        serviceName: PropTypes.Requireable<string>;
+        loginCaption: PropTypes.Requireable<string>;
+        loginToCaption: PropTypes.Requireable<string>;
+        show: PropTypes.Requireable<boolean>;
+        cancelOnEsc: PropTypes.Requireable<boolean>;
+        confirmLabel: PropTypes.Requireable<string>;
+        cancelLabel: PropTypes.Requireable<string>;
+        tryAgainLabel: PropTypes.Requireable<string>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        onTryAgain: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        loginCaption: string;
+        loginToCaption: string;
+        tryAgainLabel: string;
+        show: boolean;
+        cancelOnEsc: boolean;
+        confirmLabel: string;
+        cancelLabel: string;
+        onConfirm: () => void;
+        onCancel: () => void;
+    };
+    state: {
+        retrying: boolean;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onEscPress: () => void;
+    onRetryPress: () => Promise<void>;
+    render(): React.JSX.Element;
+}

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

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+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';
+export default class AuthDialog extends Component {
+    static propTypes = {
+        className: PropTypes.string,
+        title: PropTypes.string,
+        errorMessage: PropTypes.string,
+        serviceImage: PropTypes.string,
+        serviceName: PropTypes.string,
+        loginCaption: PropTypes.string,
+        loginToCaption: PropTypes.string,
+        show: PropTypes.bool,
+        cancelOnEsc: PropTypes.bool,
+        confirmLabel: PropTypes.string,
+        cancelLabel: PropTypes.string,
+        tryAgainLabel: PropTypes.string,
+        onConfirm: PropTypes.func,
+        onCancel: PropTypes.func,
+        onTryAgain: PropTypes.func
+    };
+    static defaultProps = {
+        loginCaption: 'Log in',
+        loginToCaption: 'Log in to %serviceName%',
+        tryAgainLabel: 'Try again',
+        show: false,
+        cancelOnEsc: true,
+        confirmLabel: 'Log in',
+        cancelLabel: 'Remain a guest',
+        onConfirm: () => { },
+        onCancel: () => { }
+    };
+    state = {
+        retrying: false
+    };
+    componentDidMount() {
+        window.addEventListener('online', this.onRetryPress);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('online', this.onRetryPress);
+    }
+    onEscPress = () => {
+        if (this.props.cancelOnEsc) {
+            this.props.onCancel();
+        }
+    };
+    onRetryPress = async () => {
+        if (!this.props.onTryAgain || this.state.retrying) {
+            return;
+        }
+        this.setState({ retrying: true });
+        try {
+            await this.props.onTryAgain();
+        }
+        catch (e) {
+            // do nothing, error is handled in onTryAgain
+        }
+        finally {
+            this.setState({ retrying: false });
+        }
+    };
+    render() {
+        const { show, className, errorMessage, serviceImage, serviceName, loginCaption, loginToCaption, confirmLabel, cancelLabel, tryAgainLabel, onConfirm, onCancel, onTryAgain } = this.props;
+        const { retrying } = this.state;
+        const defaultTitle = serviceName ? loginToCaption : loginCaption;
+        const title = (this.props.title || defaultTitle).
+            replace('%serviceName%', serviceName ?? '').
+            replace('{{serviceName}}', serviceName ?? '');
+        return (<Dialog label={title} data-test="ring-auth-dialog" className={className} contentClassName={classNames(className, styles.dialog)} onEscPress={this.onEscPress} show={show} trapFocus>
+        <Content>
+          <div className={styles.content}>
+            {serviceImage && (<img alt={`${serviceName} logo`} className={styles.logo} src={serviceImage}/>)}
+            <H2 className={styles.title}>{title}</H2>
+            {errorMessage && (<div className={styles.error}>{errorMessage}</div>)}
+            <Button primary className={styles.firstButton} data-test="auth-dialog-confirm-button" onClick={onConfirm}>
+              {confirmLabel}
+            </Button>
+            {onTryAgain && (<Button className={styles.button} data-test="auth-dialog-retry-button" onClick={() => this.onRetryPress()} loader={retrying} disabled={retrying}>
+                {tryAgainLabel}
+              </Button>)}
+            <Button className={styles.button} data-test="auth-dialog-cancel-button" onClick={onCancel}>
+              {cancelLabel}
+            </Button>
+          </div>
+        </Content>
+      </Dialog>);
+    }
+}

package/components/auth-dialog-service/auth-dialog-service.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import AuthDialog, { AuthDialogProps } from '../auth-dialog/auth-dialog';
+export declare const reactRoot: import("react-dom/client").Root;
+type AuthDialogAttributes = JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
+export default function showAuthDialog(props?: AuthDialogAttributes): () => void;
+export {};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
+import AuthDialog from '../auth-dialog/auth-dialog';
+/**
+ * @name Auth Dialog Service
+ */
+const containerElement = document.createElement('div');
+export const reactRoot = createRoot(containerElement);
+/**
+ * Renders AuthDialog into virtual node to skip maintaining container
+ */
+function renderAuthDialog(props) {
+    reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+        <AuthDialog {...props}/>
+      </ControlsHeightContext.Provider>));
+}
+export default function showAuthDialog(props = {}) {
+    renderAuthDialog({
+        ...props,
+        show: true
+    });
+    return () => {
+        renderAuthDialog({ show: false });
+    };
+}

package/components/avatar/avatar-example-datauri.d.ts

@@ -0,0 +1 @@
+export declare const avatarDataUri: string;

package/components/avatar/avatar-example-datauri.js

@@ -0,0 +1,24 @@
+// Taken from https://hub.jetbrains.com/api/rest/avatar/default?username=Jet%20Brains&dpr=2&size=56
+export const avatarDataUri = `data:image/svg+xml,${encodeURIComponent(`
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
+            <stop stop-color="#D50F6B" offset="0"/>
+            <stop stop-color="#E73AE8" offset="1"/>
+        </linearGradient>
+    </defs>
+    <g>
+        <rect fill="url(#gradient)"
+              x="0" y="0" width="40" height="40"
+              rx="3" ry="3"/>
+        <text x="5" y="19"
+              font-family="Arial, Helvetica, sans-serif"
+              font-size="15px"
+              letter-spacing="1"
+              fill="#FFFFFF">
+            <tspan>JB</tspan>
+            <tspan x="6" y="28">_</tspan>
+        </text>
+    </g>
+</svg>
+`)}`;

package/components/avatar/avatar.css

@@ -0,0 +1,27 @@
+@import "../global/variables.css";
+
+.avatar {
+  display: inline-block;
+  object-fit: cover;
+  object-position: center;
+
+  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+
+  border-radius: var(--ring-border-radius);
+}
+
+.subavatar {
+  position: absolute;
+  top: 15px;
+  left: 27px;
+
+  border: 1px var(--ring-content-background-color) solid;
+}
+
+.empty {
+  display: inline-block;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--ring-borders-color);
+}

package/components/avatar/avatar.d.ts

@@ -0,0 +1,52 @@
+import React, { PureComponent, ImgHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Avatar
+ */
+export declare enum Size {
+    Size18 = 18,
+    Size20 = 20,
+    Size24 = 24,
+    Size28 = 28,
+    Size32 = 32,
+    Size40 = 40,
+    Size48 = 48,
+    Size56 = 56
+}
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+    dpr: number;
+    size: Size | number;
+    subavatarSize: number;
+    url?: string | null | undefined;
+    round?: boolean | null | undefined;
+    subavatar?: string | null | undefined;
+    username?: string | null | undefined;
+    skipParams?: boolean | null | undefined;
+}
+export default class Avatar extends PureComponent<AvatarProps> {
+    static propTypes: {
+        dpr: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<number>;
+        style: PropTypes.Requireable<object>;
+        url: PropTypes.Requireable<string>;
+        round: PropTypes.Requireable<boolean>;
+        subavatar: PropTypes.Requireable<string>;
+        subavatarSize: PropTypes.Requireable<number>;
+        username: PropTypes.Requireable<string>;
+        skipParams: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        dpr: number;
+        size: Size;
+        subavatarSize: number;
+        style: {};
+    };
+    state: {
+        errorUrl: string;
+    };
+    handleError: () => void;
+    handleSuccess: () => void;
+    render(): React.JSX.Element;
+}
+export type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/avatar/avatar.js

@@ -0,0 +1,98 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { encodeURL, isDataURI, parseQueryString } from '../global/url';
+import { getPixelRatio } from '../global/dom';
+import styles from './avatar.css';
+import FallbackAvatar from './fallback-avatar';
+/**
+ * @name Avatar
+ */
+export var Size;
+(function (Size) {
+    Size[Size["Size18"] = 18] = "Size18";
+    Size[Size["Size20"] = 20] = "Size20";
+    Size[Size["Size24"] = 24] = "Size24";
+    Size[Size["Size28"] = 28] = "Size28";
+    Size[Size["Size32"] = 32] = "Size32";
+    Size[Size["Size40"] = 40] = "Size40";
+    Size[Size["Size48"] = 48] = "Size48";
+    Size[Size["Size56"] = 56] = "Size56";
+})(Size || (Size = {}));
+export default class Avatar extends PureComponent {
+    static propTypes = {
+        dpr: PropTypes.number,
+        className: PropTypes.string,
+        size: PropTypes.number,
+        style: PropTypes.object,
+        url: PropTypes.string,
+        round: PropTypes.bool,
+        subavatar: PropTypes.string,
+        subavatarSize: PropTypes.number,
+        username: PropTypes.string,
+        skipParams: PropTypes.bool
+    };
+    static defaultProps = {
+        dpr: getPixelRatio(),
+        size: Size.Size20,
+        subavatarSize: Size.Size20 / 2,
+        style: {}
+    };
+    state = {
+        errorUrl: ''
+    };
+    handleError = () => {
+        this.setState({ errorUrl: this.props.url });
+    };
+    handleSuccess = () => {
+        this.setState({ errorUrl: '' });
+    };
+    render() {
+        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)';
+        const styleObj = {
+            borderRadius: round ? '50%' : borderRadius,
+            height: sizeString,
+            width: sizeString,
+            ...style
+        };
+        const styleObjGroup = {
+            borderRadius: '2px',
+            height: subavatarSizeString,
+            width: subavatarSizeString,
+            ...style
+        };
+        if (!url || this.state.errorUrl === url) {
+            return (<span {...restProps} 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 (!skipParams && !isDataURI(url)) {
+            const [urlStart, query] = url.split('?');
+            const queryParams = {
+                ...parseQueryString(query),
+                dpr,
+                size
+            };
+            src = encodeURL(urlStart, queryParams);
+        }
+        let subavatarSrc = null;
+        if (subavatar && !isDataURI(subavatar)) {
+            const [urlStart, query] = subavatar.split('?');
+            const queryParams = {
+                ...parseQueryString(query),
+                dpr,
+                subavatarSizeString
+            };
+            subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
+            return (<div>
+          <img {...restProps} onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>
+          <img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.subavatar)} style={styleObjGroup} src={subavatarSrc} alt="Subavatar"/>
+        </div>);
+        }
+        else {
+            return (<img {...restProps} data-test="avatar" onError={this.handleError} onLoad={this.handleSuccess} className={classNames(styles.avatar, this.props.className)} style={styleObj} src={src} alt="User avatar"/>);
+        }
+    }
+}

package/components/avatar/fallback-avatar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Size } from './avatar';
+export interface FallbackAvatarProps {
+    username: string;
+    size: Size;
+    round: boolean | null | undefined;
+}
+declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): React.JSX.Element;
+declare namespace FallbackAvatar {
+    var propTypes: {
+        username: PropTypes.Validator<string>;
+        size: PropTypes.Validator<number>;
+        round: PropTypes.Requireable<boolean>;
+    };
+}
+export default FallbackAvatar;

package/components/avatar/fallback-avatar.js

@@ -0,0 +1,113 @@
+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).map(word => Array.from(word));
+    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).join('').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} cursor="default">
+          <tspan>{extractLetters(username)}</tspan>
+          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
+        </text>
+        <title>{username}</title>
+      </g>
+    </svg>);
+}
+FallbackAvatar.propTypes = {
+    username: PropTypes.string.isRequired,
+    size: PropTypes.number.isRequired,
+    round: PropTypes.bool
+};