superdesk-ui-framework 3.0.17 → 3.0.19

package/app-typescript/components/avatar/avatar-group.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {Avatar, IPropsAvatar} from './avatar';
+import {AvatarWrapper} from './avatar-wrapper';
+import {AvatarContentNumber} from './avatar-number';
+import {AvatarPlaceholder, IPropsAvatarPlaceholder} from './avatar-placeholder';
+
+export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;
+export type IAvatarPlaceholderInGroup = Omit<IPropsAvatarPlaceholder, 'size'>;
+
+export type IAvatarGroupItem = IAvatarInGroup | IAvatarPlaceholderInGroup;
+
+type IGap = 'none' | 'small'| 'medium'| 'large';
+
+export interface IPropsAvatarGroup {
+    size: IPropsAvatar['size'];
+    items: Array<IAvatarGroupItem>;
+
+    /**
+     * maximum number of avatars to shown inline; defaults to 4
+     * if exceeded, "+1"/"+2"/"+n" button will be shown
+     */
+    max?: number | 'show-all';
+}
+
+function isAvatar(item: IAvatarInGroup | IAvatarPlaceholderInGroup): item is IAvatarInGroup {
+    return (item as any)['kind'] == null;
+}
+
+export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
+    render() {
+        const {size, items} = this.props;
+        const someIconsHaveExtraElements = items.filter(isAvatar).some(
+            ({icon, administratorIndicator}) => icon != null || administratorIndicator != null,
+        );
+        const gap: IGap = someIconsHaveExtraElements ? 'medium' : 'none';
+
+        const max: number = (() => {
+            if (this.props.max === 'show-all') {
+                return this.props.items.length;
+            } else if (this.props.max == null) {
+                return 4;
+            } else {
+                return this.props.max;
+            }
+        })();
+        const itemsOverLimit = items.length - max;
+
+        return (
+            <div
+                className={classNames(
+                    'sd-avatar-group',
+                    'sd-avatar-group--stacked',
+                    `sd-avatar-group--stacked--gap-${gap}`,
+                )}
+                role='group'
+            >
+                {
+                    items.slice(0, max).map((item, index) => {
+                        if (isAvatar(item)) {
+                            return (
+                                <Avatar {...item} key={index} size={size} />
+                            );
+                        } else {
+                            return (
+                                <AvatarPlaceholder
+                                    {...item}
+                                    key={index}
+                                    size={this.props.size}
+                                />
+                            );
+                        }
+                    })
+                }
+
+                {
+                    itemsOverLimit > 0 && (
+                        <AvatarWrapper size={size} isEmpty={false}>
+                            <AvatarContentNumber number={`${itemsOverLimit}`} />
+                        </AvatarWrapper>
+                    )
+                }
+            </div>
+        );
+    }
+}

package/app-typescript/components/avatar/avatar-image.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {IPropsBase} from './interfaces';
+
+interface IPropsImageAvatar extends IPropsBase {
+    imageUrl?: string | null; // defaults to a placeholder image
+}
+
+export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
+    render() {
+        if (this.props.imageUrl == null) {
+            return (
+                <span className="sd-avatar-content sd-avatar-content--dummy-img" title={this.props.tooltipText}>
+                    <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="100" cy="100" r="100" fill="white" fill-opacity="0.01"/>
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-avatar-dummy)" fill-opacity="1"/>
+                    </svg>
+                </span>);
+        } else {
+            return (
+                <span className="sd-avatar-content" title={this.props.tooltipText} >
+                    <img src={this.props.imageUrl} />
+                </span>
+            );
+        }
+    }
+}

package/app-typescript/components/avatar/avatar-number.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {IPropsBase} from './interfaces';
+
+interface IPropsNumberAvatar extends IPropsBase {
+    number: string;
+}
+
+export class AvatarContentNumber extends React.PureComponent<IPropsNumberAvatar> {
+    render() {
+        return (
+            <span className="sd-avatar-content sd-avatar-content--number">
+                <span>+{this.props.number}</span>
+            </span>
+        );
+    }
+}

package/app-typescript/components/avatar/avatar-placeholder.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {AvatarWrapper} from './avatar-wrapper';
+import {AvatarContentAdd} from './avatar-action-add';
+
+export interface IPropsAvatarPlaceholder {
+    // kind is used to it's easy to add
+    // other types of placeholders without breaking existing usages
+    kind: 'plus-button';
+    tooltip?: string | null; // nullable, but mandatory to communicate importance
+
+    size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+
+    icon?: {
+        name: string;
+        color?: string;
+    };
+
+    onClick?(): void;
+}
+
+export class AvatarPlaceholder extends React.PureComponent<IPropsAvatarPlaceholder> {
+    render() {
+        const {size, tooltip, icon} = this.props;
+
+        return (
+            <AvatarWrapper
+                size={size}
+                isEmpty={false}
+                icon={icon}
+            >
+                <AvatarContentAdd tooltipText={tooltip ?? undefined} onClick={this.props.onClick} />
+            </AvatarWrapper>
+        );
+    }
+}

package/app-typescript/components/avatar/avatar-text.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {IPropsBase} from './interfaces';
+
+interface IPropsTextAvatar extends IPropsBase {
+    text: string; // limited to 3 characters
+}
+
+export class AvatarContentText extends React.PureComponent<IPropsTextAvatar> {
+    render() {
+        return (
+            <span
+                className="sd-avatar-content sd-avatar-content--text"
+                title={this.props.tooltipText}
+            >
+                <span>{this.props.text.slice(0, 3)}</span>
+            </span>
+        );
+    }
+}

package/app-typescript/components/avatar/avatar-wrapper.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {Icon} from '../Icon';
+
+interface IPropsAvatarWrapper {
+    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';  // defaults to medium
+    statusIndicator?: {
+        status: 'online' | 'offline';
+        tooltipText?: string;
+    };
+    administratorIndicator?: {
+        enabled: boolean;
+        tooltipText?: string;
+    };
+    children: React.ReactNode;
+    'data-test-id'?: string;
+    isEmpty?: boolean;
+    icon?: {
+        name: string;
+        color?: string;
+    };
+
+}
+
+/**
+ * @deprecated use AvatarV2
+ */
+export class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
+    render() {
+        const {icon} = this.props;
+
+        return (
+            <span
+                className={classNames('sd-avatar', {
+                    'sd-avatar--x-small': this.props.size === 'x-small',
+                    'sd-avatar--small': this.props.size === 'small',
+                    'sd-avatar--medium': this.props.size === 'medium' || this.props.size == null,
+                    'sd-avatar--large': this.props.size === 'large',
+                    'sd-avatar--x-large': this.props.size === 'x-large',
+                    'sd-avatar--xx-large': this.props.size === 'xx-large',
+                    'sd-avatar--indicator-status--online' : this.props.statusIndicator?.status === 'online',
+                    'sd-avatar--indicator-status--offline' : this.props.statusIndicator?.status === 'offline',
+                    'sd-avatar--empty-light': this.props.isEmpty,
+                })}
+                data-test-id={this.props['data-test-id']}
+                title={this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : ""}
+            >
+                {this.props.children}
+
+                {
+                    this.props.administratorIndicator?.enabled === true
+                        ? (
+                            <i
+                                className="icon-settings sd-avatar--indicator-admin"
+                                title={this.props.administratorIndicator.tooltipText}
+                            />
+                        )
+                        : null
+                }
+
+                {
+                    icon != null && (
+                        <span className="sd-avatar__icon">
+                            <Icon name={icon.name} color={icon.color} />
+                        </span>
+                    )
+                }
+
+            </span>
+        );
+    }
+}

package/app-typescript/components/avatar/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {AvatarContentImage} from './avatar-image';
+import {AvatarWrapper} from './avatar-wrapper';
+import {AvatarContentText} from './avatar-text';
+
+export interface IPropsAvatar {
+    imageUrl: string | null; // nullable, but mandatory to communicate importance
+    tooltip: string | null; // nullable, but mandatory to communicate importance
+
+    /** 3 letters max */
+    initials: string | null; // nullable, but mandatory to communicate importance
+
+    size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+
+    statusIndicator?: 'online' | 'offline';
+    administratorIndicator?: boolean;
+    icon?: {
+        name: string;
+        color?: string;
+    };
+}
+
+export class Avatar extends React.PureComponent<IPropsAvatar> {
+    render() {
+        const {imageUrl, initials, size, statusIndicator, administratorIndicator, icon, tooltip} = this.props;
+
+        return (
+            <AvatarWrapper
+                size={size}
+                statusIndicator={statusIndicator ? {status: statusIndicator, tooltipText: ''} : undefined}
+                administratorIndicator={administratorIndicator ? {enabled: true, tooltipText: ''} : undefined}
+                icon={icon}
+                isEmpty={false}
+            >
+                {
+                    imageUrl != null || initials == null
+                        ? (
+                            <AvatarContentImage imageUrl={imageUrl} tooltipText={tooltip ?? undefined} />
+                        )
+                        : (
+                            <AvatarContentText text={initials} tooltipText={tooltip ?? undefined} />
+                        )
+                }
+
+            </AvatarWrapper>
+        );
+    }
+}

package/app-typescript/components/avatar/interfaces.ts

@@ -0,0 +1,3 @@
+export interface IPropsBase {
+    tooltipText?: string;
+}

package/app-typescript/index.ts

@@ -11,10 +11,12 @@ export { Popover } from './components/Popover';
 export { Label } from './components/Label';
 export { Badge } from './components/Badge';
 export { Alert } from './components/Alert';
-export { AvatarWrapper } from './components/Avatar';
-export { AvatarContentText } from './components/Avatar';
-export { AvatarContentImage } from './components/Avatar';
-export { AvatarGroup } from './components/Avatar';
+export { AvatarWrapper } from './components/avatar/avatar-wrapper';
+export { AvatarContentText } from './components/avatar/avatar-text';
+export { AvatarContentImage } from './components/avatar/avatar-image';
+export { AvatarGroup } from './components/avatar/avatar-group';
+export { Avatar } from './components/avatar/avatar';
+export { AvatarPlaceholder } from './components/avatar/avatar-placeholder';
 export { IconButton } from './components/IconButton';
 export { IconLabel } from './components/IconLabel';
 export { Tooltip } from './components/Tooltip';
@@ -92,6 +94,8 @@ export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
+export { WithPopover } from './components/WithPopover';
+export { Spacer, SpacerBlock } from './components/Spacer';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;

package/dist/avatar_dummy.svg

@@ -0,0 +1,4 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="100" cy="100" r="100" fill="white" fill-opacity="0.01"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-interactive)" fill-opacity="0.6"/>
+</svg>