@via-profit/ui-kit 0.1.0-rc.84 → 0.1.0-rc.85

package/Avatar/AvatarBase.js

@@ -19,6 +19,7 @@ const AvatarIconWrapper_1 = __importDefault(require("./AvatarIconWrapper"));
 const AvatarTextWrapper_1 = __importDefault(require("./AvatarTextWrapper"));
 const AvatarContainer_1 = __importDefault(require("./AvatarContainer"));
 const AvatarPicture_1 = __importDefault(require("./AvatarPicture"));
+const AvatarOnlineBadge_1 = __importDefault(require("./AvatarOnlineBadge"));
 const AvatarBase = (props, ref) => {
     const { children, src, color, alt, variant, overrides, isOnline } = props, nativeProps = __rest(props, ["children", "src", "color", "alt", "variant", "overrides", "isOnline"]);
     const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: AvatarTextWrapper_1.default,
@@ -27,7 +28,8 @@ const AvatarBase = (props, ref) => {
         Picture: AvatarPicture_1.default }, overrides)), [overrides]);
     return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, ref: ref }),
         typeof src !== 'undefined' && src !== null && (src === null || src === void 0 ? void 0 : src.length) !== 0 && (react_1.default.createElement(overridesMap.IconWrapper, null,
-            react_1.default.createElement(overridesMap.Picture, { src: src }))),
-        (!src || src === null || (src === null || src === void 0 ? void 0 : src.length) === 0) && (react_1.default.createElement(overridesMap.TextWrapper, null, children))));
+            react_1.default.createElement(overridesMap.Picture, { src: src, variant: variant }))),
+        (!src || src === null || (src === null || src === void 0 ? void 0 : src.length) === 0) && (react_1.default.createElement(overridesMap.TextWrapper, null, children)),
+        isOnline && react_1.default.createElement(AvatarOnlineBadge_1.default, null)));
 };
 exports.default = react_1.default.forwardRef(AvatarBase);

package/Avatar/AvatarContainer.js

@@ -28,7 +28,6 @@ const StyledAvatar = styled_1.default.span `
   width: ${({ size }) => size || '2.5em'};
   height: ${({ size }) => size || '2.5em'};
   display: inline-flex;
-  overflow: hidden;
   align-items: center;
   color: ${({ color, theme }) => {
     switch (true) {

package/Avatar/AvatarPicture.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 export type MimeType = 'image/webp' | 'image/jpeg' | 'image/png' | 'image/gif' | 'image/apng' | 'image/svg+xml' | 'image/bmp' | 'image/x-icon';
 export type SrcObject = {
-    srcSet: string;
-    type: MimeType;
-    isDefault?: boolean;
+    readonly srcSet: string;
+    readonly type: MimeType;
+    readonly isDefault?: boolean;
 };
 export type AvatarPictureProps = React.HTMLAttributes<HTMLPictureElement> & {
     /**
@@ -20,6 +20,13 @@ export type AvatarPictureProps = React.HTMLAttributes<HTMLPictureElement> & {
      * ```
      */
     readonly src: SrcObject[];
+    /**
+     * Avatar style variant\
+     * Allowed variants: `circular`,`rounded` or `square`\
+     * \
+     * **Default**: `circular`
+     */
+    readonly variant?: 'circular' | 'rounded' | 'square';
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLPictureElement> & {
     /**
@@ -36,5 +43,12 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * ```
      */
     readonly src: SrcObject[];
+    /**
+     * Avatar style variant\
+     * Allowed variants: `circular`,`rounded` or `square`\
+     * \
+     * **Default**: `circular`
+     */
+    readonly variant?: "square" | "circular" | "rounded" | undefined;
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Avatar/AvatarPicture.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
 const Picture = styled_1.default.picture `
   background-position: center;
   background-size: cover;
@@ -25,10 +26,29 @@ const Picture = styled_1.default.picture `
     width: 100%;
     height: 100%;
   }
+
+  ${({ $variant, theme }) => {
+    switch ($variant) {
+        case 'rounded':
+            return (0, react_2.css) `
+          border-radius: ${theme.shape.radiusFactor * 0.8}em;
+          overflow: hidden;
+        `;
+        case 'square':
+            return (0, react_2.css) `
+          border-radius: inherit;
+        `;
+        default:
+            return (0, react_2.css) `
+          border-radius: 100%;
+          overflow: hidden;
+        `;
+    }
+}}
 `;
 const generateKey = () => (Math.random() * 10000).toFixed();
 const AvatarPicture = (props, ref) => {
-    const { src } = props, nativeProps = __rest(props, ["src"]);
+    const { src, variant } = props, nativeProps = __rest(props, ["src", "variant"]);
     const defaultSrc = react_1.default.useMemo(() => {
         if (typeof src === 'undefined' || (src === null || src === void 0 ? void 0 : src.length) === 0) {
             return null;
@@ -44,7 +64,7 @@ const AvatarPicture = (props, ref) => {
         retData = src.find(src => src.type === 'image/jpeg');
         return retData ? retData : null;
     }, [src]);
-    return (react_1.default.createElement(Picture, Object.assign({}, nativeProps, { ref: ref }),
+    return (react_1.default.createElement(Picture, Object.assign({}, nativeProps, { "$variant": variant, ref: ref }),
         src.map((_a) => {
             var { isDefault } = _a, srcProps = __rest(_a, ["isDefault"]);
             return (react_1.default.createElement("source", Object.assign({ key: generateKey() }, srcProps)));

package/Avatar/index.d.ts

@@ -1,33 +1,5 @@
 import React from 'react';
-import { AvatarStandardProps } from './AvatarStandard';
-export type AvatarProps = AvatarStandardProps & {
-    /**
-     * Avatar style variant\
-     * Allowed variants: `circular`, 'rounded' or `square`\
-     * \
-     * **Default**: `circular`
-     */
-    readonly variant?: 'circular' | 'rounded' | 'square';
-    /**
-     * Avatar size variant\
-     * \
-     * **Default**: `2.5em`
-     */
-    readonly size?: string;
-};
-declare const _default: React.ForwardRefExoticComponent<import("./AvatarBase").AvatarBaseProps & {
-    /**
-     * Avatar style variant\
-     * Allowed variants: `circular`, 'rounded' or `square`\
-     * \
-     * **Default**: `circular`
-     */
-    readonly variant?: "square" | "circular" | "rounded" | undefined;
-    /**
-     * Avatar size variant\
-     * \
-     * **Default**: `2.5em`
-     */
-    readonly size?: string | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
+import { AvatarBaseProps } from './AvatarBase';
+export type AvatarProps = AvatarBaseProps;
+declare const _default: React.ForwardRefExoticComponent<AvatarBaseProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Avatar/index.js

@@ -1,9 +1,95 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const AvatarStandard_1 = __importDefault(require("./AvatarStandard"));
-const Avatar = (props, ref) => (react_1.default.createElement(AvatarStandard_1.default, Object.assign({}, props, { ref: ref })));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const AvatarBase_1 = __importDefault(require("./AvatarBase"));
+const StyledAvatarBase = (0, styled_1.default)(AvatarBase_1.default) `
+  position: relative;
+  color: ${({ $color }) => $color.toString()};
+  background-color: ${({ $background }) => $background.toString()};
+  ${({ $background }) => {
+    switch (true) {
+        case $background.luminance() > 0.49:
+            return $background.darken(40).alpha(0.8).toString();
+        default:
+            return $background.darken(20).alpha(0.5).toString();
+    }
+}};
+  &:hover {
+    background-color: ${({ $background, $clickable }) => $clickable && $background.darken(30).toString()};
+  }
+  &:focus-visible {
+    outline-color: ${({ theme, $background }) => $background.rgbString() === theme.color.accentPrimary.rgbString()
+    ? theme.color.textPrimary.toString()
+    : theme.color.accentPrimary.toString()};
+  }
+  ${({ $clickable }) => $clickable &&
+    (0, react_2.css) `
+      cursor: pointer;
+    `}
+`;
+const Avatar = (props, ref) => {
+    const { children, color, onClick, isOnline, size, src, variant = 'circular', alt, overrides } = props, restProps = __rest(props, ["children", "color", "onClick", "isOnline", "size", "src", "variant", "alt", "overrides"]);
+    const theme = (0, react_2.useTheme)();
+    const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
+    const { $background, $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimaryContrast,
+                    $background: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondaryContrast,
+                    $background: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $background: theme.color.surface.darken(10),
+                    $color: theme.color.textPrimary,
+                };
+            case typeof color === 'string': {
+                let $background = theme.color.surface;
+                try {
+                    if (color) {
+                        $background = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $background,
+                    $color: $background.contrast(theme.color.textPrimary) > 5
+                        ? theme.color.textPrimary
+                        : theme.color.surface,
+                };
+            }
+            default:
+                return {
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(StyledAvatarBase, Object.assign({ "$clickable": clickable, "$color": $color, "$background": $background, color: color, onClick: onClick, size: size, src: src, variant: variant, alt: alt, tabIndex: clickable ? 0 : -1, ref: ref, overrides: overrides, isOnline: isOnline }, restProps), children));
+};
 exports.default = react_1.default.forwardRef(Avatar);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.84",
+  "version": "0.1.0-rc.85",
   "description": "UI Kit",
   "repository": {
     "type": "git",