@fluentui-react-native/experimental-avatar 0.14.43 → 0.15.0

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui-react-native/experimental-avatar",
   "entries": [
     {
-      "date": "Thu, 16 Jun 2022 17:08:40 GMT",
+      "date": "Tue, 21 Jun 2022 21:06:59 GMT",
+      "tag": "@fluentui-react-native/experimental-avatar_v0.15.0",
+      "version": "0.15.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "v.kozova13@gmail.com",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "commit": "2ad8751db36583b42e819bbf6667161d2687cf7a",
+            "comment": "Renamed Avatar to NativeAvatar, JSAvatar to Avatar"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Jun 2022 20:05:26 GMT",
+      "tag": "@fluentui-react-native/experimental-avatar_v0.14.45",
+      "version": "0.14.45",
+      "comments": {
+        "patch": [
+          {
+            "author": "v.kozova13@gmail.com",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "commit": "f93c1716455fb220897d993f4450f00b05f0bf0a",
+            "comment": "Rewrote tests using it.each method"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Jun 2022 19:11:01 GMT",
+      "tag": "@fluentui-react-native/experimental-avatar_v0.14.44",
+      "version": "0.14.44",
+      "comments": {
+        "patch": [
+          {
+            "author": "v.kozova13@gmail.com",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "commit": "531fc8d94b1452887b43073ea629838a72f0a7f5",
+            "comment": "Added ring configuration"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Jun 2022 17:09:28 GMT",
       "tag": "@fluentui-react-native/experimental-avatar_v0.14.43",
       "version": "0.14.43",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui-react-native/experimental-avatar
 
-This log was last generated on Thu, 16 Jun 2022 17:08:40 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Jun 2022 21:06:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.15.0
+
+Tue, 21 Jun 2022 21:06:59 GMT
+
+### Minor changes
+
+- Renamed Avatar to NativeAvatar, JSAvatar to Avatar (v.kozova13@gmail.com)
+
+## 0.14.45
+
+Tue, 21 Jun 2022 20:05:26 GMT
+
+### Patches
+
+- Rewrote tests using it.each method (v.kozova13@gmail.com)
+
+## 0.14.44
+
+Thu, 16 Jun 2022 19:11:01 GMT
+
+### Patches
+
+- Added ring configuration (v.kozova13@gmail.com)
+
 ## 0.14.43
 
-Thu, 16 Jun 2022 17:08:40 GMT
+Thu, 16 Jun 2022 17:09:28 GMT
 
 ### Patches
 

package/{lib-commonjs/Avatar.d.ts → lib/NativeAvatar.d.ts}

@@ -2,7 +2,7 @@ import { ImageURISource, ViewProps, ColorValue } from 'react-native';
 export declare type Size = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge';
 export declare type AvatarStyle = 'default' | 'accent' | 'group' | 'outlined' | 'outlinedPrimary' | 'overflow';
 export declare type Presence = 'none' | 'available' | 'away' | 'blocked' | 'doNotDisturb' | 'offline' | 'unknown';
-export declare type AvatarTokens = {
+export declare type NativeAvatarTokens = {
     /**
      * Supported Avatar sizes
      */
@@ -12,7 +12,7 @@ export declare type AvatarTokens = {
      */
     avatarStyle?: AvatarStyle;
 };
-export declare type AvatarProps = AvatarTokens & {
+export declare type NativeAvatarProps = NativeAvatarTokens & {
     /**
      * The image to be displayed
      */
@@ -63,8 +63,8 @@ export declare type AvatarProps = AvatarTokens & {
      */
     customBorderImageSource?: ImageURISource;
 };
-export declare type NativeAvatarViewProps = ViewProps & AvatarProps;
-export declare const Avatar: import("@fluentui-react-native/framework").ComposableComponent<AvatarProps, {
+export declare type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
+export declare const NativeAvatar: import("@fluentui-react-native/framework").ComposableComponent<NativeAvatarProps, {
     root: NativeAvatarViewProps;
-}, AvatarTokens, object>;
-//# sourceMappingURL=Avatar.d.ts.map
+}, NativeAvatarTokens, object>;
+//# sourceMappingURL=NativeAvatar.d.ts.map

package/lib/NativeAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeAvatar.d.ts","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAOpF,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElF,oBAAY,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAEvG,oBAAY,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAQ1G,oBAAY,kBAAkB,GAAG;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,oBAAY,iBAAiB,GAAG,kBAAkB,GAAG;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,cAAc,CAAC;CAC1C,CAAC;AAIF,oBAAY,qBAAqB,GAAG,SAAS,GAAG,iBAAiB,CAAC;AAOlE,eAAO,MAAM,YAAY;UAJJ,qBAAqB;8BAgCxC,CAAC"}

package/lib/{Avatar.js → NativeAvatar.js}

@@ -13,11 +13,11 @@ var __assign = (this && this.__assign) || function () {
 import { compose, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework';
 import { NativeModules } from 'react-native';
 import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
-var avatarName = 'Avatar';
+var avatarName = 'NativeAvatar';
 var NativeAvatarView = ensureNativeComponent('FRNAvatarView');
 var ExportedNativeConstants = NativeModules.FRNAvatarViewManager;
 var tokensThatAreAlsoProps = ['size', 'avatarStyle'];
-export var Avatar = compose({
+export var NativeAvatar = compose({
     displayName: avatarName,
     tokens: [
         {
@@ -42,4 +42,4 @@ export var Avatar = compose({
         return function (rest) { return withSlots(Root, __assign({}, mergeProps(props, rest))); };
     },
 });
-//# sourceMappingURL=Avatar.js.map
+//# sourceMappingURL=NativeAvatar.js.map

package/lib/NativeAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeAvatar.js","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,OAAO,EAAY,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACxG,OAAO,EAAkB,aAAa,EAAyB,MAAM,cAAc,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,IAAM,UAAU,GAAG,cAAc,CAAC;AAElC,IAAM,gBAAgB,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;AAYhE,IAAM,uBAAuB,GAAsB,aAAa,CAAC,oBAAoB,CAAC;AA6EtF,IAAM,sBAAsB,GAAiC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AASrF,MAAM,CAAC,IAAM,YAAY,GAAG,OAAO,CAAa;IAC9C,WAAW,EAAE,UAAU;IACvB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,SAAS;SACvB;QACD,UAAU;KACX;IACD,sBAAsB,wBAAA;IACtB,KAAK,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;IACjC,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,UAAC,MAAM,IAAK,OAAA,CAAC;YACX,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE;gBACL,MAAM,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBAClD,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;aAClD;SACF,CAAC,EANU,CAMV,EACF,CAAC,MAAM,CAAC,CACT;KACF;IACD,SAAS,EAAE,UAAC,KAAwB,EAAE,QAA8B;QAClE,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAElC,OAAO,UAAC,IAAuB,IAAK,OAAA,UAAC,IAAI,eAAK,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,EAAI,EAArC,CAAqC,CAAC;IAC5E,CAAC;CACF,CAAC,CAAC"}

package/lib/index.d.ts

@@ -1,4 +1,2 @@
-export * from './Avatar';
-export * from './JSAvatar';
-export * from './JSAvatar.types';
+export * from './NativeAvatar';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib/index.js

@@ -1,4 +1,2 @@
-export * from './Avatar';
-export * from './JSAvatar';
-export * from './JSAvatar.types';
+export * from './NativeAvatar';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/{lib/Avatar.d.ts → lib-commonjs/NativeAvatar.d.ts}

@@ -2,7 +2,7 @@ import { ImageURISource, ViewProps, ColorValue } from 'react-native';
 export declare type Size = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge';
 export declare type AvatarStyle = 'default' | 'accent' | 'group' | 'outlined' | 'outlinedPrimary' | 'overflow';
 export declare type Presence = 'none' | 'available' | 'away' | 'blocked' | 'doNotDisturb' | 'offline' | 'unknown';
-export declare type AvatarTokens = {
+export declare type NativeAvatarTokens = {
     /**
      * Supported Avatar sizes
      */
@@ -12,7 +12,7 @@ export declare type AvatarTokens = {
      */
     avatarStyle?: AvatarStyle;
 };
-export declare type AvatarProps = AvatarTokens & {
+export declare type NativeAvatarProps = NativeAvatarTokens & {
     /**
      * The image to be displayed
      */
@@ -63,8 +63,8 @@ export declare type AvatarProps = AvatarTokens & {
      */
     customBorderImageSource?: ImageURISource;
 };
-export declare type NativeAvatarViewProps = ViewProps & AvatarProps;
-export declare const Avatar: import("@fluentui-react-native/framework").ComposableComponent<AvatarProps, {
+export declare type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
+export declare const NativeAvatar: import("@fluentui-react-native/framework").ComposableComponent<NativeAvatarProps, {
     root: NativeAvatarViewProps;
-}, AvatarTokens, object>;
-//# sourceMappingURL=Avatar.d.ts.map
+}, NativeAvatarTokens, object>;
+//# sourceMappingURL=NativeAvatar.d.ts.map

package/lib-commonjs/NativeAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeAvatar.d.ts","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAOpF,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElF,oBAAY,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAEvG,oBAAY,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAQ1G,oBAAY,kBAAkB,GAAG;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,oBAAY,iBAAiB,GAAG,kBAAkB,GAAG;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,cAAc,CAAC;CAC1C,CAAC;AAIF,oBAAY,qBAAqB,GAAG,SAAS,GAAG,iBAAiB,CAAC;AAOlE,eAAO,MAAM,YAAY;UAJJ,qBAAqB;8BAgCxC,CAAC"}

package/lib-commonjs/{Avatar.js → NativeAvatar.js}

@@ -11,16 +11,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
+exports.NativeAvatar = void 0;
 /** @jsx withSlots */
 var framework_1 = require("@fluentui-react-native/framework");
 var react_native_1 = require("react-native");
 var component_cache_1 = require("@fluentui-react-native/component-cache");
-var avatarName = 'Avatar';
+var avatarName = 'NativeAvatar';
 var NativeAvatarView = (0, component_cache_1.ensureNativeComponent)('FRNAvatarView');
 var ExportedNativeConstants = react_native_1.NativeModules.FRNAvatarViewManager;
 var tokensThatAreAlsoProps = ['size', 'avatarStyle'];
-exports.Avatar = (0, framework_1.compose)({
+exports.NativeAvatar = (0, framework_1.compose)({
     displayName: avatarName,
     tokens: [
         {
@@ -45,4 +45,4 @@ exports.Avatar = (0, framework_1.compose)({
         return function (rest) { return (0, framework_1.withSlots)(Root, __assign({}, (0, framework_1.mergeProps)(props, rest))); };
     },
 });
-//# sourceMappingURL=Avatar.js.map
+//# sourceMappingURL=NativeAvatar.js.map

package/lib-commonjs/NativeAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeAvatar.js","sourceRoot":"","sources":["../src/NativeAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,8DAAwG;AACxG,6CAAoF;AACpF,0EAA+E;AAE/E,IAAM,UAAU,GAAG,cAAc,CAAC;AAElC,IAAM,gBAAgB,GAAG,IAAA,uCAAqB,EAAC,eAAe,CAAC,CAAC;AAYhE,IAAM,uBAAuB,GAAsB,4BAAa,CAAC,oBAAoB,CAAC;AA6EtF,IAAM,sBAAsB,GAAiC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AASxE,QAAA,YAAY,GAAG,IAAA,mBAAO,EAAa;IAC9C,WAAW,EAAE,UAAU;IACvB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,SAAS;SACvB;QACD,UAAU;KACX;IACD,sBAAsB,wBAAA;IACtB,KAAK,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;IACjC,SAAS,EAAE;QACT,IAAI,EAAE,IAAA,sBAAU,EACd,UAAC,MAAM,IAAK,OAAA,CAAC;YACX,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE;gBACL,MAAM,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBAClD,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;aAClD;SACF,CAAC,EANU,CAMV,EACF,CAAC,MAAM,CAAC,CACT;KACF;IACD,SAAS,EAAE,UAAC,KAAwB,EAAE,QAA8B;QAClE,IAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAElC,OAAO,UAAC,IAAuB,IAAK,OAAA,2BAAC,IAAI,eAAK,IAAA,sBAAU,EAAC,KAAK,EAAE,IAAI,CAAC,EAAI,EAArC,CAAqC,CAAC;IAC5E,CAAC;CACF,CAAC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,4 +1,2 @@
-export * from './Avatar';
-export * from './JSAvatar';
-export * from './JSAvatar.types';
+export * from './NativeAvatar';
 //# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib-commonjs/index.js

@@ -10,7 +10,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Avatar"), exports);
-__exportStar(require("./JSAvatar"), exports);
-__exportStar(require("./JSAvatar.types"), exports);
+__exportStar(require("./NativeAvatar"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,6CAA2B;AAC3B,mDAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iDAA+B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.14.43",
+  "version": "0.15.0",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -25,16 +25,8 @@
     "directory": "packages/experimental/Avatar"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "^0.8.5",
-    "@fluentui-react-native/badge": "^0.0.43",
     "@fluentui-react-native/component-cache": "^1.3.2",
-    "@fluentui-react-native/framework": "0.7.30",
-    "@fluentui-react-native/icon": "^0.12.1",
-    "@fluentui-react-native/interactive-hooks": "^0.16.3",
-    "@fluentui-react-native/theme-tokens": "^0.18.0",
-    "@fluentui-react-native/tokens": "^0.14.0",
-    "@fluentui-react-native/use-styling": "^0.8.3",
-    "react-native-svg": "^12.3.0"
+    "@fluentui-react-native/framework": "0.7.30"
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",

package/src/{Avatar.tsx → NativeAvatar.tsx}

@@ -3,7 +3,7 @@ import { compose, UseSlots, buildProps, mergeProps, withSlots } from '@fluentui-
 import { ImageURISource, NativeModules, ViewProps, ColorValue } from 'react-native';
 import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 
-const avatarName = 'Avatar';
+const avatarName = 'NativeAvatar';
 
 const NativeAvatarView = ensureNativeComponent('FRNAvatarView');
 
@@ -19,7 +19,7 @@ interface ExportedConstants {
 
 const ExportedNativeConstants: ExportedConstants = NativeModules.FRNAvatarViewManager;
 
-export type AvatarTokens = {
+export type NativeAvatarTokens = {
   /**
    * Supported Avatar sizes
    */
@@ -31,7 +31,7 @@ export type AvatarTokens = {
   avatarStyle?: AvatarStyle;
 };
 
-export type AvatarProps = AvatarTokens & {
+export type NativeAvatarProps = NativeAvatarTokens & {
   /**
    * The image to be displayed
    */
@@ -94,16 +94,16 @@ export type AvatarProps = AvatarTokens & {
   customBorderImageSource?: ImageURISource;
 };
 
-const tokensThatAreAlsoProps: (keyof AvatarTokens)[] = ['size', 'avatarStyle'];
+const tokensThatAreAlsoProps: (keyof NativeAvatarTokens)[] = ['size', 'avatarStyle'];
 
-export type NativeAvatarViewProps = ViewProps & AvatarProps;
+export type NativeAvatarViewProps = ViewProps & NativeAvatarProps;
 interface AvatarType {
-  props: AvatarProps;
+  props: NativeAvatarProps;
   slotProps: { root: NativeAvatarViewProps };
-  tokens: AvatarTokens;
+  tokens: NativeAvatarTokens;
 }
 
-export const Avatar = compose<AvatarType>({
+export const NativeAvatar = compose<AvatarType>({
   displayName: avatarName,
   tokens: [
     {
@@ -115,7 +115,7 @@ export const Avatar = compose<AvatarType>({
   tokensThatAreAlsoProps,
   slots: { root: NativeAvatarView },
   slotProps: {
-    root: buildProps<NativeAvatarViewProps, AvatarTokens>(
+    root: buildProps<NativeAvatarViewProps, NativeAvatarTokens>(
       (tokens) => ({
         size: tokens.size,
         style: {
@@ -126,9 +126,9 @@ export const Avatar = compose<AvatarType>({
       ['size'],
     ),
   },
-  useRender: (props: AvatarProps, useSlots: UseSlots<AvatarType>) => {
+  useRender: (props: NativeAvatarProps, useSlots: UseSlots<AvatarType>) => {
     const Root = useSlots(props).root;
 
-    return (rest: AvatarProps) => <Root {...mergeProps(props, rest)} />;
+    return (rest: NativeAvatarProps) => <Root {...mergeProps(props, rest)} />;
   },
 });

package/src/__tests__/{JSAvatar.test.jsx → Avatar.test.jsx}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { JSAvatar } from '..';
+import { Avatar } from '..';
 import { getInitials } from '../useAvatar';
 import * as renderer from 'react-test-renderer';
 
@@ -23,7 +23,7 @@ const initialsForNameWithTitles = ['F', 'RF'];
 
 describe('Avatar rendering', () => {
   it('renders Avatar', () => {
-    const tree = renderer.create(<JSAvatar />).toJSON();
+    const tree = renderer.create(<Avatar />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

package/src/__tests__/__snapshots__/Avatar.test.jsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar rendering renders Avatar 1`] = `
+<View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
+  icon={null}
+  initials=""
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "height": 24,
+      "justifyContent": "center",
+      "opacity": 1,
+      "width": 24,
+    }
+  }
+>
+  <View
+    accessible={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#e6e6e6",
+        "borderColor": "#ffffff",
+        "borderRadius": 9999,
+        "borderWidth": 0,
+        "height": 24,
+        "justifyContent": "center",
+        "marginLeft": 2,
+        "marginTop": 2,
+        "width": 24,
+      }
+    }
+  >
+    <View
+      accessibilityRole="image"
+      accessible={false}
+      style={
+        Object {
+          "fontSize": 16,
+          "height": 16,
+          "position": "absolute",
+          "width": 16,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight="100%"
+        bbWidth="100%"
+        focusable={false}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": "100%",
+              "width": "100%",
+            },
+          ]
+        }
+        vbHeight={16}
+        vbWidth={14}
+      >
+        <RNSVGGroup>
+          <RNSVGPath
+            d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z"
+            fill={
+              Array [
+                2,
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+</View>
+`;

package/src/index.ts

@@ -1,3 +1 @@
-export * from './Avatar';
-export * from './JSAvatar';
-export * from './JSAvatar.types';
+export * from './NativeAvatar';

package/MIGRATION.md

@@ -1,158 +0,0 @@
-# Avatar Migration
-
-## Migration from PersonaCoin component
-
-### Component renames
-
-| `PersonaCoin`                                                | `Avatar`                                         |
-| ------------------------------------------------------------ | ------------------------------------------------ |
-| `<PersonaCoin size='size24' initials="SN" />`                | `<Avatar size={24} initials="SN" />`             |
-| `<PersonaCoin presence='available' coinColorFluent="red" />` | `<Avatar size={24} initials="SN" />`             |
-| `<PersonaCoin imageUrl="./path/name.png" />`                 | `<Avatar image={{source: './path/name.png'}} />` |
-| `<PersonaCoin imageDescription="Photo" />`                   | `<Avatar accessibilityLabel="Photo" />`          |
-
-### Props that remain as is
-
-- `icon`
-- `initials`
-- `size`
-- `imageUrl`
-
-### Props no longer supported with an equivalent functionality in Avatar
-
-- `coinColorFluent` => Use `avatarColor` instead.
-- `imageDescription` => Use `accessibilityLabel` instead.
-- `isOutOfOffice` => `outOfOffice` is part of `badge` slot. Use `badge={{ outOfOffice: true }} />`.
-- `presence` => It's part of `badge` slot. Use `badge={{ presence: 'available' }} />`.
-- `ring` => `ring` became part of `activeAppearance` prop. It's used together with `active='active'` prop.
-
-### New props
-
-- `active`
-- `activeAppearance` - According to Web spec there should be `ring`, `shadow`, `glow`, `ring-shadow`, `ring-glow`.
-  Currently we support only `ring`. `activeAppearance` can be used when `active` prop set to `active`.
-- `name` - is used for generation initials with `getInitials` method.
-- `shape` - can be `circular` and `square`.
-- `idForColor`
-
-### Tokens that remain as is
-
-- Any props that are part of `IBackgroundColorTokens`, `IForegroundColorTokens`
-
-- `iconSize`
-- `iconWeight`
-- `horizontalIconAlignment`
-- `verticalIconAlignment`
-- `size`
-
-### Tokens no longer supported with an equivalent functionality in Avatar
-
-- `initialsSize` => Use `fontSize` token instead
-- `coinColorFluent` => Use `avatarColor` token instead
-- `coinSize` => Use size tokens instead.
-- `ring` => Use `ringBackgroundColor`, `ringColor`, `ringThickness` and `ringInnerGap`
-
-### Tokens no longer supported without an equivalent functionality in Avatar
-
-- `iconStrokeWidth` and `iconStrokeColor` => This was for activity ring around the Avatar.
-  We support ring in `activeAppearance` prop. `borderColor` will be changed using `ringColor` token and `borderWidth` using ringThickness token.
-
-### New tokens
-
-- Any props that are part of `FontTokens` and `IBorderTokens`.
-- `avatarOpacity`
-- `badgeSize`
-- `circular`
-- `iconColor`
-- `inactive`
-- `square`
-
-Size tokens:
-
-- `size20`
-- `size24`
-- `size28`
-- `size32`
-- `size36`
-- `size40`
-- `size48`
-- `size56`
-- `size64`
-- `size72`
-- `size96`
-- `size120`
-
-Color tokens:
-
-- `neutral`
-- `brand`
-- `darkRed`
-- `cranberry`
-- `red`
-- `pumpkin`
-- `peach`
-- `marigold`
-- `gold`
-- `brass`
-- `brown`
-- `forest`
-- `seafoam`
-- `darkGreen`
-- `lightTeal`
-- `teal`
-- `steel`
-- `blue`
-- `royalBlue`
-- `cornflower`
-- `navy`
-- `lavender`
-- `purple`
-- `grape`
-- `lilac`
-- `pink`
-- `magenta`
-- `plum`
-- `beige`
-- `mink`
-- `platinum`
-- `anchor`
-
-### Slots no longer supported with an equivalent functionality in v1 Avatar
-
-- `photo` => Use `image` slot instead or `imageUrl` prop.
-
-### Slots no longer supported without an equivalent functionality in v1 Avatar
-
-- `glow` => is not suported in this version of Avatar
-
-### New slots
-
-- `badge`
-
-### Prop differences due to technical differences and limitations
-
-- Web uses `image` slot which is part of `react-image` component. They use syntax `image={{ src: './MonaKane.jpg' }}`. If we use similar syntax, our users will need to write `image={{ source: { uri: './MonaKane.jpg' } }} />`. In majority of cases users pass image URL that's why we still have opportunity to pass this parameter using `imageUrl` prop. But there's also a way to pass `image` object similar to Web.
-
-### Other Prop differences
-
-- `avatarColor` => Web uses `color` prop and omits it from `ComponentProps<AvatarSlots>`. Their users can style font color using CSS but our users can style the component via tokens. If we use the same prop name (color), we'll need to omit it from foregroundTokens and come up with a new name for the font color prop. That's why we use `avatarColor` prop instead of `color`.
-
-## Property mapping
-
-| `PersonaCoin`      | `Avatar`             |
-| ------------------ | -------------------- |
-|                    | `active`             |
-|                    | `activeAppearance`   |
-|                    | `badge`              |
-| `coinColorFluent`  | `avatarColor`        |
-| `icon`             | `icon`               |
-|                    | `idForColor`         |
-| `imageUrl`         | `imageUrl`           |
-| `imageDescription` | `accessibilityLabel` |
-| `isOutOfOffice`    |                      |
-| `initials`         | `initials`           |
-|                    | `name`               |
-| `presence`         |                      |
-| `ring`             |                      |
-|                    | `shape`              |
-| `size`             | `size`               |