@spaced-out/ui-design-system 0.0.23-beta.0 → 0.0.23

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.23](https://github.com/spaced-out/ui-design-system/compare/v0.0.23-beta.0...v0.0.23) (2023-02-14)
+
+
+### Bug Fixes
+
+* import fixes for avataar ([1880ed7](https://github.com/spaced-out/ui-design-system/commit/1880ed760283e48347b68c220a7ba11a54dfcd4f))
+* status support for avataar ([e877b88](https://github.com/spaced-out/ui-design-system/commit/e877b88c326262f9738da89457bd417d4f684002))
+
 ### [0.0.23-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.22...v0.0.23-beta.0) (2023-02-14)
 
 

package/lib/components/Avatar/Avatar.js

@@ -9,6 +9,7 @@ var _Text = require("../../components/Text");
 var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
+var _StatusIndicator = require("../StatusIndicator");
 var _AvatarModule = _interopRequireDefault(require("./Avatar.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -66,14 +67,20 @@ const AvatarConditionalContent = _ref2 => {
     iconName,
     size,
     iconType,
-    color = 'blue'
+    color = 'blue',
+    status
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     className: _AvatarModule.default.innerContainer,
     style: {
       background: AVATAR_COLOR[color]
     }
-  }, imageSrc ? /*#__PURE__*/React.createElement("img", {
+  }, !!status && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AvatarModule.default.statusIndicatorWrapper, _AvatarModule.default[size])
+  }, /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
+    status: status,
+    withBorder: true
+  })), imageSrc ? /*#__PURE__*/React.createElement("img", {
     src: imageSrc,
     alt: "Avatar",
     className: _AvatarModule.default.avatar
@@ -96,7 +103,8 @@ const Avatar = _ref3 => {
     iconName,
     iconType,
     color,
-    ring = false
+    ring = false,
+    status
   } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarModule.default.container, {
@@ -115,14 +123,16 @@ const Avatar = _ref3 => {
     iconName: iconName,
     iconType: iconType,
     color: color,
-    size: size
+    size: size,
+    status: status
   }))) : /*#__PURE__*/React.createElement(AvatarConditionalContent, {
     imageSrc: imageSrc,
     text: text,
     iconName: iconName,
     iconType: iconType,
     color: color,
-    size: size
+    size: size,
+    status: status
   }));
 };
 exports.Avatar = Avatar;

package/lib/components/Avatar/Avatar.js.flow

@@ -18,6 +18,8 @@ import {
 import classify from '../../utils/classify';
 import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
+import type {StatusSemanticType} from '../StatusIndicator';
+import {StatusIndicator} from '../StatusIndicator';
 
 import css from './Avatar.module.css';
 
@@ -55,6 +57,7 @@ export type AvatarProps = {
   iconName?: string,
   iconType?: IconType,
   ring?: boolean,
+  status?: StatusSemanticType,
 };
 
 const getAvatarText = (text = '') => {
@@ -96,6 +99,7 @@ export type AvatarContentProps = {
   size: AvatarSize,
   color?: AvatarColorType,
   ring?: boolean,
+  status?: StatusSemanticType,
 };
 
 const AvatarConditionalContent = ({
@@ -105,8 +109,15 @@ const AvatarConditionalContent = ({
   size,
   iconType,
   color = 'blue',
+  status,
 }: AvatarContentProps) => (
   <div className={css.innerContainer} style={{background: AVATAR_COLOR[color]}}>
+    {!!status && (
+      <div className={classify(css.statusIndicatorWrapper, css[size])}>
+        <StatusIndicator status={status} withBorder />
+      </div>
+    )}
+
     {imageSrc ? (
       <img src={imageSrc} alt="Avatar" className={css.avatar}></img>
     ) : iconName ? (
@@ -127,6 +138,7 @@ export const Avatar = ({
   iconType,
   color,
   ring = false,
+  status,
 }: AvatarProps): React.Node => (
   <div
     className={classify(
@@ -150,6 +162,7 @@ export const Avatar = ({
             iconType={iconType}
             color={color}
             size={size}
+            status={status}
           />
         </div>
       </div>
@@ -161,6 +174,7 @@ export const Avatar = ({
         iconType={iconType}
         color={color}
         size={size}
+        status={status}
       />
     )}
   </div>

package/lib/components/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 @value (colorFillPrimary, colorBackgroundTertiary, colorInformation) from '../../styles/variables/_color.css';
 @value ( size34, size42, size60, sizeFluid) from '../../styles/variables/_size.css';
 @value (borderRadiusCircle, borderRadiusLarge, borderRadiusXLarge, borderWidthSecondary) from '../../styles/variables/_border.css';
-@value (spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';
+@value (spaceNone, spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';
 
 .container {
   border-radius: borderRadiusCircle;
@@ -79,9 +79,29 @@
 
 .innerContainer {
   display: flex;
+  position: relative;
   border-radius: borderRadiusCircle;
   width: sizeFluid;
   height: sizeFluid;
   align-items: center;
   justify-content: center;
 }
+
+.statusIndicatorWrapper {
+  position: absolute;
+}
+
+.statusIndicatorWrapper.large {
+  top: calc(spaceXXSmall / 2);
+  right: calc(spaceXXSmall / 2);
+}
+
+.statusIndicatorWrapper.medium {
+  top: spaceNone;
+  right: spaceNone;
+}
+
+.statusIndicatorWrapper.small {
+  top: calc((spaceXXSmall / 2) * -1);
+  right: calc((spaceXXSmall / 2) * -1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.23-beta.0",
+  "version": "0.0.23",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {