@fluentui-react-native/tester 0.65.5 → 0.67.0

package/src/FluentTester/TestComponents/Notification/NotificationTest.tsx

@@ -1,93 +1,37 @@
 import * as React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import { Notification } from '@fluentui-react-native/notification';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
-const NotificationVariants = ['primary', 'neutral', 'danger', 'warning'] as const;
-type NotificationVariant = typeof NotificationVariants[number];
-
-interface NotificationProps {
-  /**
-   * Notification variants: 'primary' | 'neutral' |'danger' | 'warning'
-   */
-  variant: NotificationVariant;
-  startText: string;
-  endText: string;
-}
-
-const Notification = (props: NotificationProps) => {
-  const variant = props.variant;
-  const startText = props.startText;
-  const endText = props.endText;
-
-  let containerBackgroundColor = 'skyblue';
-  let foregroundColor = 'black';
-
-  switch (variant) {
-    case 'primary':
-      containerBackgroundColor = 'skyblue';
-      break;
-    case 'neutral':
-      containerBackgroundColor = 'lightgrey';
-      break;
-    case 'danger':
-      containerBackgroundColor = 'pink';
-      foregroundColor = 'maroon';
-      break;
-    case 'warning':
-      containerBackgroundColor = 'lightyellow';
-      foregroundColor = 'brown';
-      break;
-  }
-
-  const styles = StyleSheet.create({
-    container: {
-      borderRadius: 12,
-      backgroundColor: containerBackgroundColor,
-
-      flex: 1,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      padding: 16,
-    },
-    start: {
-      fontSize: 16,
-      color: foregroundColor,
-
-      flex: 1,
-      flexGrow: 1,
-    },
-    end: {
-      fontSize: 16,
-      fontWeight: '500',
-      color: foregroundColor,
-
-      marginLeft: 34,
-    },
-  });
-
+const PrimaryTest: React.FunctionComponent = () => {
   return (
-    <View style={styles.container}>
-      <Text style={styles.start}>{startText}</Text>
-      <Text style={styles.end}>{endText}</Text>
-    </View>
+    <Notification variant={'primary'} endText="Undo">
+      Mail Archived
+    </Notification>
   );
 };
 
-const PrimaryTest: React.FunctionComponent = () => {
-  return <Notification variant={'primary'} startText="Mail Archived" endText="Undo" />;
-};
-
 const NeutralTest: React.FunctionComponent = () => {
-  return <Notification variant={'neutral'} startText="Some items require you to sign in to view them" endText="Sign in" />;
+  return (
+    <Notification variant={'neutral'} endText="Sign in">
+      Some items require you to sign in to view them
+    </Notification>
+  );
 };
 
 const DangerTest: React.FunctionComponent = () => {
-  return <Notification variant={'danger'} startText="There was a problem, and your recent changes may not have saved" endText="Retry" />;
+  return (
+    <Notification variant={'danger'} endText="Retry">
+      There was a problem, and your recent changes may not have saved
+    </Notification>
+  );
 };
 
 const WarningTest: React.FunctionComponent = () => {
-  return <Notification variant={'warning'} startText="Read Only" endText="X" />;
+  return (
+    <Notification variant={'warning'} endText="X">
+      Read Only
+    </Notification>
+  );
 };
 
 const notificationSections: TestSection[] = [
@@ -113,7 +57,7 @@ export const NotificationTest: React.FunctionComponent = () => {
   const status: PlatformStatus = {
     win32Status: 'Backlog',
     uwpStatus: 'Backlog',
-    iosStatus: 'Beta',
+    iosStatus: 'Experimental',
     macosStatus: 'Backlog',
     androidStatus: 'Backlog',
   };

package/src/FluentTester/testPages.android.ts

@@ -1,5 +1,5 @@
 import { TestDescription } from './TestComponents';
-import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
@@ -31,7 +31,7 @@ export const tests: TestDescription[] = [
   },
   {
     name: 'Avatar Test',
-    component: JSAvatarTest,
+    component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
   {

package/src/FluentTester/testPages.ios.ts

@@ -1,5 +1,5 @@
 import { TestDescription } from './TestComponents';
-import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { AvatarTest, NativeAvatarTest, HOMEPAGE_AVATAR_BUTTON, HOMEPAGE_NATIVE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
@@ -32,6 +32,11 @@ export const tests: TestDescription[] = [
     component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'NativeAvatar Test',
+    component: NativeAvatarTest,
+    testPage: HOMEPAGE_NATIVE_AVATAR_BUTTON,
+  },
   {
     name: 'Badge Test',
     component: BadgeTest,

package/src/FluentTester/testPages.macos.ts

@@ -1,5 +1,5 @@
 import { TestDescription } from './TestComponents';
-import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { AvatarTest, NativeAvatarTest, HOMEPAGE_AVATAR_BUTTON, HOMEPAGE_NATIVE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
@@ -39,6 +39,11 @@ export const tests: TestDescription[] = [
     component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
+  {
+    name: 'NativeAvatar Test',
+    component: NativeAvatarTest,
+    testPage: HOMEPAGE_NATIVE_AVATAR_BUTTON,
+  },
   {
     name: 'Badge Test',
     component: BadgeTest,

package/src/FluentTester/testPages.ts

@@ -1,5 +1,5 @@
 import { TestDescription } from './TestComponents';
-import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { NativeAvatarTest, HOMEPAGE_NATIVE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
@@ -37,8 +37,8 @@ export const tests: TestDescription[] = [
   },
   {
     name: 'Avatar Test',
-    component: AvatarTest,
-    testPage: HOMEPAGE_AVATAR_BUTTON,
+    component: NativeAvatarTest,
+    testPage: HOMEPAGE_NATIVE_AVATAR_BUTTON,
   },
   {
     name: 'Badge Test',

package/src/FluentTester/testPages.web.ts

@@ -1,5 +1,5 @@
 import { TestDescription } from './TestComponents';
-import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
@@ -23,7 +23,7 @@ export const tests: TestDescription[] = [
   },
   {
     name: 'Avatar Test',
-    component: JSAvatarTest,
+    component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
   {

package/src/FluentTester/testPages.win32.ts

@@ -1,4 +1,4 @@
-import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
@@ -37,7 +37,7 @@ export const tests: TestDescription[] = [
   },
   {
     name: 'Avatar Test',
-    component: JSAvatarTest,
+    component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
   {

package/src/FluentTester/testPages.windows.ts

@@ -1,4 +1,4 @@
-import { JSAvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
+import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
@@ -25,7 +25,7 @@ export const tests = [
   },
   {
     name: 'Avatar Test',
-    component: JSAvatarTest,
+    component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
   },
   {

package/lib/FluentTester/TestComponents/Avatar/JSAvatarTest.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare const JSAvatarTest: React.FunctionComponent;
-//# sourceMappingURL=JSAvatarTest.d.ts.map

package/lib/FluentTester/TestComponents/Avatar/JSAvatarTest.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JSAvatarTest.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAahC,CAAC"}

package/lib/FluentTester/TestComponents/Avatar/JSAvatarTest.js

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { JSAVATAR_TESTPAGE } from './consts';
-import { Test } from '../Test';
-import { StandardUsage } from './BasicAvatar';
-import { CustomizeUsage } from './CustomizedAvatar';
-import { E2EAvatarTest } from './E2EAvatarTest';
-var avatarSections = [
-    {
-        name: 'Standard Usage',
-        testID: JSAVATAR_TESTPAGE,
-        component: StandardUsage,
-    },
-    {
-        name: 'Customize Usage',
-        component: CustomizeUsage,
-    },
-    {
-        name: 'Avatar E2E',
-        component: E2EAvatarTest,
-    },
-];
-export var JSAvatarTest = function () {
-    var status = {
-        win32Status: 'Experimental',
-        uwpStatus: 'Backlog',
-        iosStatus: 'Beta',
-        macosStatus: 'Experimental',
-        androidStatus: 'Backlog',
-    };
-    var description = 'AvatarView is a visual representation of a user, entity, or group. If an image is supplied, it is cropped to a circle of the requested size. If an image is not supplied, initials are extracted from the given name and email address provided and displayed on a colorful background.';
-    return React.createElement(Test, { name: "Avatar Test", description: description, sections: avatarSections, status: status });
-};
-//# sourceMappingURL=JSAvatarTest.js.map

package/lib/FluentTester/TestComponents/Avatar/JSAvatarTest.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"JSAvatarTest.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,IAAI,EAA+B,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,IAAM,cAAc,GAAkB;IACpC;QACE,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,iBAAiB;QACzB,SAAS,EAAE,aAAa;KACzB;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,cAAc;KAC1B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,aAAa;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,GAA4B;IACnD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,IAAM,WAAW,GACf,yRAAyR,CAAC;IAE5R,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACzG,CAAC,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Avatar/JSAvatarTest.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare const JSAvatarTest: React.FunctionComponent;
-//# sourceMappingURL=JSAvatarTest.d.ts.map

package/lib-commonjs/FluentTester/TestComponents/Avatar/JSAvatarTest.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JSAvatarTest.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAahC,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Avatar/JSAvatarTest.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JSAvatarTest = void 0;
-var tslib_1 = require("tslib");
-var React = (0, tslib_1.__importStar)(require("react"));
-var consts_1 = require("./consts");
-var Test_1 = require("../Test");
-var BasicAvatar_1 = require("./BasicAvatar");
-var CustomizedAvatar_1 = require("./CustomizedAvatar");
-var E2EAvatarTest_1 = require("./E2EAvatarTest");
-var avatarSections = [
-    {
-        name: 'Standard Usage',
-        testID: consts_1.JSAVATAR_TESTPAGE,
-        component: BasicAvatar_1.StandardUsage,
-    },
-    {
-        name: 'Customize Usage',
-        component: CustomizedAvatar_1.CustomizeUsage,
-    },
-    {
-        name: 'Avatar E2E',
-        component: E2EAvatarTest_1.E2EAvatarTest,
-    },
-];
-var JSAvatarTest = function () {
-    var status = {
-        win32Status: 'Experimental',
-        uwpStatus: 'Backlog',
-        iosStatus: 'Beta',
-        macosStatus: 'Experimental',
-        androidStatus: 'Backlog',
-    };
-    var description = 'AvatarView is a visual representation of a user, entity, or group. If an image is supplied, it is cropped to a circle of the requested size. If an image is not supplied, initials are extracted from the given name and email address provided and displayed on a colorful background.';
-    return React.createElement(Test_1.Test, { name: "Avatar Test", description: description, sections: avatarSections, status: status });
-};
-exports.JSAvatarTest = JSAvatarTest;
-//# sourceMappingURL=JSAvatarTest.js.map

package/lib-commonjs/FluentTester/TestComponents/Avatar/JSAvatarTest.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"JSAvatarTest.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,mCAA6C;AAC7C,gCAA4D;AAC5D,6CAA8C;AAC9C,uDAAoD;AACpD,iDAAgD;AAEhD,IAAM,cAAc,GAAkB;IACpC;QACE,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,0BAAiB;QACzB,SAAS,EAAE,2BAAa;KACzB;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,iCAAc;KAC1B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,6BAAa;KACzB;CACF,CAAC;AAEK,IAAM,YAAY,GAA4B;IACnD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,IAAM,WAAW,GACf,yRAAyR,CAAC;IAE5R,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,aAAa,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACzG,CAAC,CAAC;AAbW,QAAA,YAAY,gBAavB"}

package/src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { JSAVATAR_TESTPAGE } from './consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
-import { StandardUsage } from './BasicAvatar';
-import { CustomizeUsage } from './CustomizedAvatar';
-import { E2EAvatarTest } from './E2EAvatarTest';
-
-const avatarSections: TestSection[] = [
-  {
-    name: 'Standard Usage',
-    testID: JSAVATAR_TESTPAGE,
-    component: StandardUsage,
-  },
-  {
-    name: 'Customize Usage',
-    component: CustomizeUsage,
-  },
-  {
-    name: 'Avatar E2E',
-    component: E2EAvatarTest,
-  },
-];
-
-export const JSAvatarTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Experimental',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Beta',
-    macosStatus: 'Experimental',
-    androidStatus: 'Backlog',
-  };
-
-  const description =
-    'AvatarView is a visual representation of a user, entity, or group. If an image is supplied, it is cropped to a circle of the requested size. If an image is not supplied, initials are extracted from the given name and email address provided and displayed on a colorful background.';
-
-  return <Test name="Avatar Test" description={description} sections={avatarSections} status={status} />;
-};