@fluentui-react-native/tester 0.64.11 → 0.65.0

package/lib-commonjs/FluentTester/testPages.js.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"testPages.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.64.11",
+  "version": "0.65.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -27,31 +27,31 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.10.0 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.12.3 <1.0.0",
-    "@fluentui-react-native/badge": ">=0.0.42 <1.0.0",
+    "@fluentui-react-native/badge": ">=0.0.43 <1.0.0",
     "@fluentui-react-native/button": ">=0.22.29 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.13.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.5.29 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.14.41 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.14.44 <1.0.0",
     "@fluentui-react-native/experimental-button": "0.15.30",
-    "@fluentui-react-native/experimental-checkbox": "0.11.13",
+    "@fluentui-react-native/experimental-checkbox": "0.11.14",
     "@fluentui-react-native/experimental-drawer": ">=0.1.13 <1.0.0",
-    "@fluentui-react-native/experimental-native-date-picker": ">=0.4.3 <1.0.0",
+    "@fluentui-react-native/experimental-native-date-picker": ">=0.4.4 <1.0.0",
     "@fluentui-react-native/experimental-expander": "0.3.33",
-    "@fluentui-react-native/experimental-menu-button": ">=0.3.48 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.3.49 <1.0.0",
     "@fluentui-react-native/experimental-shimmer": "0.6.33",
-    "@fluentui-react-native/experimental-tabs": "0.4.51",
+    "@fluentui-react-native/experimental-tabs": "0.4.52",
     "@fluentui-react-native/experimental-text": ">=0.9.0 <1.0.0",
     "@fluentui-react-native/framework": ">=0.7.30 <1.0.0",
     "@fluentui-react-native/icon": "0.12.1",
     "@fluentui-react-native/interactive-hooks": ">=0.16.3 <1.0.0",
-    "@fluentui-react-native/menu": ">=0.14.7 <1.0.0",
+    "@fluentui-react-native/menu": ">=0.14.8 <1.0.0",
     "@fluentui-react-native/stack": ">=0.6.29 <1.0.0",
     "@fluentui-react-native/theme": ">=0.6.11 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.17.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.3.3",
     "@fluentui-react-native/theming-utils": ">=0.13.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.19.0 <1.0.0",
-    "@fluentui/react-native": ">=0.30.2 <1.0.0",
+    "@fluentui/react-native": ">=0.30.3 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

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

@@ -41,6 +41,7 @@ const StyledPicker = (props) => {
 export const StandardUsage: FunctionComponent = () => {
   const [isSquare, setSquare] = useState(false);
   const [showImage, setShowImage] = useState(true);
+  const [outOfOffice, setOutOfOffice] = useState(false);
   const [active, setActive] = useState<AvatarActive>('unset');
   const [activeAppearance, setActiveAppearance] = useState<AvatarActiveAppearance>('ring');
   const [imageSize, setImageSize] = useState<WithUndefined<AvatarSize>>(72);
@@ -67,7 +68,6 @@ export const StandardUsage: FunctionComponent = () => {
     src: TestSvg,
     viewBox: '0 0 500 500',
   };
-  const iconProps = { svgSource: svgProps, width: 20, height: 20, color: 'red' };
 
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
@@ -82,6 +82,10 @@ export const StandardUsage: FunctionComponent = () => {
           <Text style={textStyles}>Set square Avatar</Text>
           <Switch value={isSquare} onValueChange={() => setSquare(!isSquare)} />
         </View>
+        <View style={commonStyles.switch}>
+          <Text style={textStyles}>Set outOfOffice</Text>
+          <Switch value={outOfOffice} onValueChange={() => setOutOfOffice(!outOfOffice)} />
+        </View>
 
         <StyledPicker prompt="Size" selected={imageSize.toString()} onChange={onSizeChange} collection={avatarSizesForPicker} />
         <StyledPicker prompt="Active" selected={active} onChange={onActiveChange} collection={avatarActive} />
@@ -96,10 +100,11 @@ export const StandardUsage: FunctionComponent = () => {
         <StyledPicker prompt="Avatar Color" selected={avatarColor} onChange={onAvatarColorChange} collection={avatarColors} />
         <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
       </View>
-      <JSAvatar badge={{ status: 'available' }} />
-      <JSAvatar name="Richard" avatarColor="#ff0099" initialsColor="yellow" />
-      <JSAvatar icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: 'red' }} size={56} />
-      <JSAvatar accessibilityLabel="Fall-back Icon" accessibilityHint="A picture representing a user" size={120} />
+      <JSAvatar
+        accessibilityLabel="Fall-back Icon"
+        accessibilityHint="A picture representing a user"
+        size={imageSize === undefinedText ? undefined : imageSize}
+      />
       <JSAvatar
         active={active}
         activeAppearance={activeAppearance}
@@ -107,7 +112,7 @@ export const StandardUsage: FunctionComponent = () => {
         name="Satya Nadella"
         shape={isSquare ? 'square' : 'circular'}
         accessibilityLabel="Photo of Satya Nadella"
-        badge={{ status: presence === undefinedText ? undefined : presence }}
+        badge={{ status: presence === undefinedText ? undefined : presence, outOfOffice }}
         imageUrl={showImage ? satyaPhotoUrl : undefined}
         avatarColor={avatarColor}
       />
@@ -118,7 +123,8 @@ export const StandardUsage: FunctionComponent = () => {
         shape={isSquare ? 'square' : 'circular'}
         accessibilityLabel="Icon"
         name="* Richard Faynman *"
-        avatarColor={avatarColor}
+        avatarColor="#ff0099"
+        initialsColor="yellow"
       />
       {svgIconsEnabled && (
         <>
@@ -128,9 +134,9 @@ export const StandardUsage: FunctionComponent = () => {
             size={imageSize === undefinedText ? undefined : imageSize}
             shape={isSquare ? 'square' : 'circular'}
             accessibilityLabel="SVG Icon"
-            icon={iconProps}
+            icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: 'red' }}
             avatarColor={avatarColor}
-            badge={{ status: 'outOfOffice' }}
+            badge={{ status: 'outOfOffice', outOfOffice }}
           />
           <JSAvatar
             accessibilityHint="A picture representing a user"
@@ -141,7 +147,7 @@ export const StandardUsage: FunctionComponent = () => {
             accessibilityLabel="SVG Icon"
             icon={{ svgSource: svgProps }}
             avatarColor={avatarColor}
-            badge={{ status: 'away' }}
+            badge={{ status: 'away', outOfOffice }}
             idForColor="15"
           />
         </>

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

@@ -1,57 +1,64 @@
 import React, { useState, useMemo } from 'react';
-import { JSAvatar, IconAlignment, AvatarSize } from '@fluentui-react-native/experimental-avatar';
-import { Switch, View, Text, TextInput } from 'react-native';
+import { JSAvatar, AvatarSize } from '@fluentui-react-native/experimental-avatar';
+import { Switch, View, Text, TextInput, Platform } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
-import { AlignmentPicker } from '../Common/AlignmentPicker';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { FontWeight } from '@fluentui-react-native/theme-types';
+import { SvgIconProps } from '@fluentui-react-native/icon';
+import TestSvg from '../../test-data/test.svg';
 
 export const CustomizeUsage: React.FunctionComponent = () => {
   const [showImage, setShowImage] = useState(true);
-  const [coinColor, setCoinColor] = useState<string>();
+  const [showInitials, setShowInitials] = useState(true);
+  const [avatarColor, setAvatarColor] = useState<string>();
   const [textColor, setTextColor] = useState<string>();
   const [size, setSize] = useState<string>('96');
   const [iconSize, setIconSize] = useState<number>(24);
+  const [iconColor, setIconColor] = useState<string>(undefined);
   const [initialsSize, setInitialsSize] = useState<number>(16);
   const [fontWeight, setFontWeight] = useState<string>('normal');
   const [fontFamily, setFontFamily] = useState<string>('Georgia');
-  const [horizontalAlignment, setHorizontalAlignment] = useState<IconAlignment>();
-  const [verticalAlignment, setVerticalAlignment] = useState<IconAlignment>();
 
-  const [ringColor, setRingColor] = useState<string>('red');
-  const [ringBackgroundColor, setRingBackgroundColor] = useState<string>(undefined);
+  const [ringColor, setRingColor] = useState<string>(undefined);
+  const [ringBackgroundColor, setRingBackgroundColor] = useState<string>('yellow');
+  const [ringThickness, setRingThickness] = useState<string>('4');
   const [showRing, setShowRing] = useState<boolean>(true);
-  const [transparent, setTransparent] = useState<boolean>(false);
 
   const CustomizedAvatar = useMemo(() => {
     const tokens = {
-      backgroundColor: coinColor,
+      avatarColor,
       color: textColor,
-      horizontalIconAlignment: horizontalAlignment,
-      verticalIconAlignment: verticalAlignment,
+      size: parseInt(size) as AvatarSize,
       iconSize: iconSize,
+      iconColor,
       fontSize: initialsSize,
       fontWeight: fontWeight as FontWeight,
       fontFamily,
-      size: parseInt(size) as AvatarSize,
       ringColor,
       ringBackgroundColor,
+      ringThickness: parseInt(ringThickness),
     };
     return JSAvatar.customize(tokens);
   }, [
-    coinColor,
+    avatarColor,
     textColor,
-    horizontalAlignment,
-    verticalAlignment,
+    iconColor,
     iconSize,
     initialsSize,
     size,
     ringColor,
     ringBackgroundColor,
+    ringThickness,
     fontWeight,
     fontFamily,
   ]);
 
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+  const svgProps: SvgIconProps = {
+    src: TestSvg,
+    viewBox: '0 0 500 500',
+  };
+
   return (
     <View style={commonStyles.root}>
       <View style={commonStyles.settings}>
@@ -59,55 +66,53 @@ export const CustomizeUsage: React.FunctionComponent = () => {
           <Text>Show image</Text>
           <Switch value={showImage} onValueChange={setShowImage} />
         </View>
-
         <View style={commonStyles.switch}>
-          <Text>Show rings</Text>
-          <Switch value={showRing} onValueChange={setShowRing} />
+          <Text>Show initials</Text>
+          <Switch value={showInitials} onValueChange={setShowInitials} />
         </View>
 
         <View style={commonStyles.switch}>
-          <Text>Transparent Ring</Text>
-          <Switch value={transparent} onValueChange={setTransparent} />
+          <Text>Show rings</Text>
+          <Switch value={showRing} onValueChange={setShowRing} />
         </View>
-
         <View style={{ flexDirection: 'row' }}>
           <View>
+            <Text style={{ fontWeight: 'bold' }}>Avatar tokens</Text>
             <TextInput
               style={[commonStyles.textBox]}
               placeholder="Background color"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
-                setCoinColor(e.nativeEvent.text);
+                setAvatarColor(e.nativeEvent.text);
               }}
             />
 
             <TextInput
               style={[commonStyles.textBox]}
-              placeholder="Ring color"
+              placeholder="Avatar size"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
-                setRingColor(e.nativeEvent.text);
+                setSize(e.nativeEvent.text);
               }}
             />
 
             <TextInput
               style={[commonStyles.textBox]}
-              placeholder="Avatar size"
+              placeholder="Icon size"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
-                setSize(e.nativeEvent.text);
+                setIconSize(parseInt(e.nativeEvent.text));
               }}
             />
-
             <TextInput
               style={[commonStyles.textBox]}
-              placeholder="Icon size"
+              placeholder="Icon color"
               blurOnSubmit={true}
               onSubmitEditing={(e) => {
-                setIconSize(parseInt(e.nativeEvent.text));
+                setIconColor(e.nativeEvent.text);
               }}
             />
-
+            <Text style={{ fontWeight: 'bold' }}>Ring tokens</Text>
             <TextInput
               style={[commonStyles.textBox]}
               placeholder="Ring background color"
@@ -116,6 +121,22 @@ export const CustomizeUsage: React.FunctionComponent = () => {
                 setRingBackgroundColor(e.nativeEvent.text);
               }}
             />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Ring color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingColor(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Ring thickness"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingThickness(e.nativeEvent.text);
+              }}
+            />
           </View>
           <View style={{ paddingHorizontal: 20 }}>
             <Text style={{ fontWeight: 'bold' }}>Font tokens</Text>
@@ -153,30 +174,35 @@ export const CustomizeUsage: React.FunctionComponent = () => {
             />
           </View>
         </View>
-
-        <Text>These features will be available later</Text>
-        <AlignmentPicker style={commonStyles.header} label="Horizontal icon alignment" onSelectionChange={setHorizontalAlignment} />
-        <AlignmentPicker style={commonStyles.header} label="Vertical icon alignment" onSelectionChange={setVerticalAlignment} />
       </View>
-
-      <CustomizedAvatar
-        active="active"
-        activeAppearance="ring"
-        avatarColor="colorful"
-        initials="SB"
-        accessibilityLabel="Former CEO of Microsoft"
-        badge={{ status: 'blocked' }}
-        imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
-        ring={
-          showRing
-            ? {
-                ringThickness: 4,
-                innerGap: 4,
-                transparent,
-              }
-            : undefined
-        }
-      />
+      <View>
+        <Text>Customized Avatar</Text>
+        <CustomizedAvatar
+          active="active"
+          activeAppearance="ring"
+          avatarColor={avatarColor}
+          accessibilityLabel="Former CEO of Microsoft"
+          initials={showInitials ? 'SB' : undefined}
+          imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+          icon={svgIconsEnabled ? { svgSource: svgProps } : undefined}
+          transparentRing={!showRing}
+        />
+      </View>
+      <View style={{ marginLeft: 20 }}>
+        <Text>Avatar customized with props</Text>
+        <JSAvatar
+          active="active"
+          activeAppearance="ring"
+          avatarColor={avatarColor}
+          accessibilityLabel="Former CEO of Microsoft"
+          imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+          ringBackgroundColor={ringBackgroundColor}
+          ringColor={ringColor}
+          ringThickness={parseInt(ringThickness)}
+          size={parseInt(size) as AvatarSize}
+          transparentRing={!showRing}
+        />
+      </View>
     </View>
   );
 };

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

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+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,
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.start}>{startText}</Text>
+      <Text style={styles.end}>{endText}</Text>
+    </View>
+  );
+};
+
+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" />;
+};
+
+const DangerTest: React.FunctionComponent = () => {
+  return <Notification variant={'danger'} startText="There was a problem, and your recent changes may not have saved" endText="Retry" />;
+};
+
+const WarningTest: React.FunctionComponent = () => {
+  return <Notification variant={'warning'} startText="Read Only" endText="X" />;
+};
+
+const notificationSections: TestSection[] = [
+  {
+    name: 'Primary',
+    component: PrimaryTest,
+  },
+  {
+    name: 'Neutral',
+    component: NeutralTest,
+  },
+  {
+    name: 'Danger',
+    component: DangerTest,
+  },
+  {
+    name: 'Warning',
+    component: WarningTest,
+  },
+];
+
+export const NotificationTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Beta',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description = 'Testing notification component';
+
+  return <Test name="Notification Test" description={description} sections={notificationSections} status={status}></Test>;
+};

package/src/FluentTester/TestComponents/Notification/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_NOTIFICATION_BUTTON = 'Homepage_Notification_Button';
+export const NOTIFICATION_TESTPAGE = 'Notification_TestPage';

package/src/FluentTester/TestComponents/Notification/index.ts

@@ -0,0 +1,2 @@
+export * from './NotificationTest';
+export * from './consts';

package/src/FluentTester/testPages.ios.ts

@@ -19,6 +19,7 @@ import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
 import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
 import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
+import { HOMEPAGE_NOTIFICATION_BUTTON, NotificationTest } from './TestComponents/Notification';
 
 export const tests: TestDescription[] = [
   {
@@ -121,4 +122,9 @@ export const tests: TestDescription[] = [
     component: TokenTest,
     testPage: HOMEPAGE_TOKEN_BUTTON,
   },
+  {
+    name: 'Notification Test',
+    component: NotificationTest,
+    testPage: HOMEPAGE_NOTIFICATION_BUTTON,
+  },
 ];

package/src/FluentTester/testPages.ts

@@ -27,6 +27,7 @@ import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON, ExperimentalCheckboxTest } from
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
 import { ExperimentalMenuButtonTest, HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from './TestComponents/MenuButtonExperimental';
 import { MenuTest, HOMEPAGE_MENU_BUTTON } from './TestComponents/Menu';
+import { NotificationTest, HOMEPAGE_NOTIFICATION_BUTTON } from './TestComponents/Notification';
 
 export const tests: TestDescription[] = [
   {
@@ -174,4 +175,9 @@ export const tests: TestDescription[] = [
     component: MenuTest,
     testPage: HOMEPAGE_MENU_BUTTON,
   },
+  {
+    name: 'Notification Test',
+    component: NotificationTest,
+    testPage: HOMEPAGE_NOTIFICATION_BUTTON,
+  },
 ];