@fluentui-react-native/tester 0.64.13 → 0.65.2

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/Menu/E2EMenuTest.tsx

@@ -33,9 +33,11 @@ export const E2EMenuTest: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover testID={MENUPOPOVER_TEST_COMPONENT}>
           <MenuList>
-            <MenuItem testID={MENUITEM_TEST_COMPONENT} accessibilityLabel={MENUITEM_ACCESSIBILITY_LABEL} content="A plain MenuItem" />
-            <MenuItem disabled content="A second disabled plain MenuItem" />
-            <MenuItem testID={MENUITEM_NO_A11Y_LABEL_COMPONENT} content={MENUITEM_TEST_LABEL} />
+            <MenuItem testID={MENUITEM_TEST_COMPONENT} accessibilityLabel={MENUITEM_ACCESSIBILITY_LABEL}>
+              A plain MenuItem
+            </MenuItem>
+            <MenuItem disabled>A second disabled plain MenuItem</MenuItem>
+            <MenuItem testID={MENUITEM_NO_A11Y_LABEL_COMPONENT}>{MENUITEM_TEST_LABEL}</MenuItem>
           </MenuList>
         </MenuPopover>
       </Menu>

package/src/FluentTester/TestComponents/Menu/MenuTest.tsx

@@ -26,9 +26,9 @@ const MenuDefault: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItem content="A plain MenuItem" />
-            <MenuItem disabled content="A second disabled plain MenuItem" />
-            <MenuItem content="A third plain MenuItem" />
+            <MenuItem>A plain MenuItem</MenuItem>
+            <MenuItem disabled>A second disabled plain MenuItem</MenuItem>
+            <MenuItem>A third plain MenuItem</MenuItem>
           </MenuList>
         </MenuPopover>
       </Menu>
@@ -45,9 +45,9 @@ const MenuCheckmarks: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItemCheckbox name="itemOne" content="A MenuItem with checkmark" />
+            <MenuItemCheckbox name="itemOne">A MenuItem with checkmark</MenuItemCheckbox>
             <MenuDivider />
-            <MenuItemCheckbox name="itemTwo" content="Another MenuItem with checkmark" />
+            <MenuItemCheckbox name="itemTwo">Another MenuItem with checkmark</MenuItemCheckbox>
           </MenuList>
         </MenuPopover>
       </Menu>
@@ -57,10 +57,12 @@ const MenuCheckmarks: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItem content="A plain MenuItem" />
-            <MenuItemCheckbox name="itemTwo" content="A MenuItem with checkmark" />
-            <MenuItemCheckbox disabled name="itemThree" content="A disabled MenuItem with checkmark" />
-            <MenuItemCheckbox name="itemFour" content="A MenuItem with checkmark" />
+            <MenuItem>A plain MenuItem</MenuItem>
+            <MenuItemCheckbox name="itemTwo">A MenuItem with checkmark</MenuItemCheckbox>
+            <MenuItemCheckbox disabled name="itemThree">
+              A disabled MenuItem with checkmark
+            </MenuItemCheckbox>
+            <MenuItemCheckbox name="itemFour">A MenuItem with checkmark</MenuItemCheckbox>
           </MenuList>
         </MenuPopover>
       </Menu>
@@ -70,9 +72,9 @@ const MenuCheckmarks: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItem content="A plain MenuItem" />
-            <MenuItemCheckbox name="itemTwo" content="A MenuItem with checkmark" />
-            <MenuItemCheckbox name="itemThree" content="A MenuItem with checkmark" />
+            <MenuItem>A plain MenuItem</MenuItem>
+            <MenuItemCheckbox name="itemTwo">A MenuItem with checkmark</MenuItemCheckbox>
+            <MenuItemCheckbox name="itemThree">A MenuItem with checkmark</MenuItemCheckbox>
           </MenuList>
         </MenuPopover>
       </Menu>
@@ -98,10 +100,10 @@ const MenuRadioItem: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItemRadio name="itemOne" content="A MenuItem with checkmark and radio selection" />
-            <MenuItemRadio name="itemTwo" content="Another MenuItem with checkmark and radio selection" />
-            <MenuItemRadio name="itemThree" content="A third MenuItem with checkmark and radio selection" />
-            <MenuItemCheckbox name="itemFour" content="A MenuItem with checkmark and toggle selection" />
+            <MenuItemRadio name="itemOne">A MenuItem with checkmark and radio selection</MenuItemRadio>
+            <MenuItemRadio name="itemTwo">Another MenuItem with checkmark and radio selection</MenuItemRadio>
+            <MenuItemRadio name="itemThree">A third MenuItem with checkmark and radio selection</MenuItemRadio>
+            <MenuItemCheckbox name="itemFour">A MenuItem with checkmark and toggle selection</MenuItemCheckbox>
           </MenuList>
         </MenuPopover>
       </Menu>
@@ -113,12 +115,12 @@ const Submenu: React.FunctionComponent = () => {
   return (
     <Menu>
       <MenuTrigger>
-        <MenuItem content="A second MenuItem" />
+        <MenuItem>A second MenuItem</MenuItem>
       </MenuTrigger>
       <MenuPopover>
         <MenuList>
-          <MenuItem content="A nested MenuItem" />
-          <MenuItem content="A second nested MenuItem" />
+          <MenuItem>A nested MenuItem</MenuItem>
+          <MenuItem>A second nested MenuItem</MenuItem>
           <Submenu />
         </MenuList>
       </MenuPopover>
@@ -135,7 +137,7 @@ const MenuSubMenu: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItem content="A MenuItem" />
+            <MenuItem>A MenuItem</MenuItem>
             <Submenu />
           </MenuList>
         </MenuPopover>
@@ -153,7 +155,7 @@ const MenuOpenOnHover: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItem content="A MenuItem" />
+            <MenuItem>A MenuItem</MenuItem>
             <Submenu />
           </MenuList>
         </MenuPopover>
@@ -173,7 +175,7 @@ const MenuControlledOpen: React.FunctionComponent = () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            <MenuItem content="A MenuItem" />
+            <MenuItem>A MenuItem</MenuItem>
             <Submenu />
           </MenuList>
         </MenuPopover>

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,
+  },
 ];