@fluentui-react-native/tester 0.78.2 → 0.79.0

package/src/TestComponents/PersonaCoin/CustomizeUsage.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import { PersonaCoin, IconAlignment } from '@fluentui/react-native';
+import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
+import { Slider } from '../Common/Slider';
+import { steveBallmerPhotoUrl } from './styles';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { AlignmentPicker } from '../Common/AlignmentPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [coinColor, setCoinColor] = React.useState<string>();
+  const [textColor, setTextColor] = React.useState<string>();
+  const [physicalSize, setPhysicalSize] = React.useState<number>(80);
+  const [iconSize, setIconSize] = React.useState<number>(24);
+  const [iconStrokeWidth, setIconStrokeWidth] = React.useState<number>(2);
+  const [iconStrokeColor, setIconStrokeColor] = React.useState<string>(undefined);
+  const [initialsSize, setInitialsSize] = React.useState<number>(14);
+  const [horizontalAlignment, setHorizontalAlignment] = React.useState<IconAlignment>();
+  const [verticalAlignment, setVerticalAlignment] = React.useState<IconAlignment>();
+
+  const [ringColor, setRingColor] = React.useState<string>('red');
+  const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
+  const [showRing, setShowRing] = React.useState<boolean>(true);
+  const [transparent, setTransparent] = React.useState<boolean>(false);
+
+  const theme = useTheme();
+  const textBoxBorderStyle: TextStyle = {
+    borderColor: theme.colors.inputBorder,
+  };
+
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      horizontalIconAlignment: horizontalAlignment,
+      verticalIconAlignment: verticalAlignment,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+      iconStrokeColor: iconStrokeColor,
+      initialsSize: initialsSize,
+      coinSize: physicalSize,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [
+    coinColor,
+    textColor,
+    horizontalAlignment,
+    verticalAlignment,
+    iconSize,
+    iconStrokeWidth,
+    iconStrokeColor,
+    initialsSize,
+    physicalSize,
+  ]);
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Show rings</Text>
+          <Switch value={showRing} onValueChange={setShowRing} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Transparent Ring</Text>
+          <Switch value={transparent} onValueChange={setTransparent} />
+        </View>
+
+        <TextInput
+          accessibilityLabel="Background color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setCoinColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Initials text color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Initials text color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setTextColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Icon stroke color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Icon stroke color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setIconStrokeColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Ring color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Ring color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Ring background color"
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Ring background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingBackgroundColor(e.nativeEvent.text);
+          }}
+        />
+
+        <AlignmentPicker style={commonStyles.header} label="Horizontal icon alignment" onSelectionChange={setHorizontalAlignment} />
+        <AlignmentPicker style={commonStyles.header} label="Vertical icon alignment" onSelectionChange={setVerticalAlignment} />
+
+        <Text>Coin size</Text>
+        <Slider minimum={8} maximum={200} initialValue={80} style={commonStyles.vmargin} onChange={setPhysicalSize} />
+
+        <Text>Icon size</Text>
+        <Slider minimum={8} maximum={100} initialValue={24} style={commonStyles.vmargin} onChange={setIconSize} />
+
+        <Text>Icon stroke width</Text>
+        <Slider minimum={0} maximum={8} initialValue={2} style={commonStyles.vmargin} onChange={setIconStrokeWidth} />
+
+        <Text>Font size</Text>
+        <Slider minimum={5} maximum={50} initialValue={14} style={commonStyles.vmargin} onChange={setInitialsSize} />
+      </View>
+
+      {/* component under test */}
+      <CustomizedPersonaCoin
+        initials="SB"
+        imageDescription="Former CEO of Microsoft"
+        presence="blocked"
+        imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+        ring={
+          showRing
+            ? {
+                ringColor,
+                ringBackgroundColor,
+                ringThickness: 4,
+                innerGap: 4,
+                transparent,
+              }
+            : undefined
+        }
+      />
+    </View>
+  );
+};

package/src/index.ts

@@ -1 +1 @@
-export { FluentTesterApp } from './FluentTester';
+export { FluentTesterApp } from './FluentTesterApp';

package/src/testPages.android.ts

@@ -0,0 +1,142 @@
+import { TestDescription } from './TestComponents';
+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';
+import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
+import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu';
+// import { DrawerTest, HOMEPAGE_DRAWER_BUTTON } from './TestComponents/Drawer';
+import { FocusTrapTest, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from './TestComponents/FocusTrapZone';
+import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
+import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona';
+import { HOMEPAGE_PERSONACOIN_BUTTON, PersonaCoinTest } from './TestComponents/PersonaCoin';
+import { HOMEPAGE_PRESSABLE_BUTTON, PressableTest } from './TestComponents/Pressable';
+import { HOMEPAGE_RADIOGROUP_BUTTON, RadioGroupTest } from './TestComponents/RadioGroup';
+import { HOMEPAGE_SEPARATOR_BUTTON, SeparatorTest } from './TestComponents/Separator';
+import { HOMEPAGE_SHIMMER_BUTTON, ShimmerTest } from './TestComponents/Shimmer';
+import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg';
+import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
+import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
+import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
+import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
+import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
+import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
+import { TextExperimentalTest, HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './TestComponents/TextExperimental';
+
+export const tests: TestDescription[] = [
+  {
+    name: 'ActivityIndicator Test',
+    component: ActivityIndicatorTest,
+    testPage: HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
+  },
+  {
+    name: 'Avatar Test',
+    component: AvatarTest,
+    testPage: HOMEPAGE_AVATAR_BUTTON,
+  },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
+  {
+    name: 'Button Test',
+    component: ButtonTest,
+    testPage: HOMEPAGE_BUTTON_BUTTON,
+  },
+  {
+    name: 'Callout Test',
+    component: CalloutTest,
+    testPage: HOMEPAGE_CALLOUT_BUTTON,
+  },
+  {
+    name: 'ContextualMenu Test',
+    component: ContextualMenuTest,
+    testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON,
+  },
+  // {
+  //   name: 'Drawer Test',
+  //   component: DrawerTest,
+  //   testPage: HOMEPAGE_DRAWER_BUTTON,
+  // },
+  {
+    name: 'Focus Trap Zone Test',
+    component: FocusTrapTest,
+    testPage: HOMEPAGE_FOCUSTRAPZONE_BUTTON,
+  },
+  {
+    name: 'Pressable Test',
+    component: PressableTest,
+    testPage: HOMEPAGE_PRESSABLE_BUTTON,
+  },
+  {
+    name: 'Link Test',
+    component: LinkTest,
+    testPage: HOMEPAGE_LINK_BUTTON,
+  },
+  {
+    name: 'Separator Test',
+    component: SeparatorTest,
+    testPage: HOMEPAGE_SEPARATOR_BUTTON,
+  },
+  {
+    name: 'Shimmer Test',
+    component: ShimmerTest,
+    testPage: HOMEPAGE_SHIMMER_BUTTON,
+  },
+  {
+    name: 'Text Test',
+    component: TextTest,
+    testPage: HOMEPAGE_TEXT_BUTTON,
+  },
+  {
+    name: 'Experimental Text Test',
+    component: TextExperimentalTest,
+    testPage: HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
+  },
+  {
+    name: 'Theme Test',
+    component: ThemeTest,
+    testPage: HOMEPAGE_THEME_BUTTON,
+  },
+  {
+    name: 'PersonaCoin Test',
+    component: PersonaCoinTest,
+    testPage: HOMEPAGE_PERSONACOIN_BUTTON,
+  },
+  {
+    name: 'RadioGroup Test',
+    component: RadioGroupTest,
+    testPage: HOMEPAGE_RADIOGROUP_BUTTON,
+  },
+  {
+    name: 'Persona Test',
+    component: PersonaTest,
+    testPage: HOMEPAGE_PERSONA_BUTTON,
+  },
+  {
+    name: 'Checkbox Test',
+    component: CheckboxTest,
+    testPage: HOMEPAGE_CHECKBOX_BUTTON,
+  },
+  {
+    name: 'Experimental Checkbox',
+    component: ExperimentalCheckboxTest,
+    testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
+  },
+  {
+    name: 'Svg Test',
+    component: SvgTest,
+    testPage: HOMEPAGE_SVG_BUTTON,
+  },
+  {
+    name: 'Icon Test',
+    component: IconTest,
+    testPage: HOMEPAGE_ICON_BUTTON,
+  },
+  {
+    name: 'Tokens Test',
+    component: TokenTest,
+    testPage: HOMEPAGE_TOKEN_BUTTON,
+  },
+];

package/src/testPages.windows.ts

@@ -0,0 +1,106 @@
+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';
+import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
+// import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON, ExperimentalCheckboxTest } from './TestComponents/CheckboxExperimental';
+import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
+import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona';
+import { HOMEPAGE_PERSONACOIN_BUTTON, PersonaCoinTest } from './TestComponents/PersonaCoin';
+import { HOMEPAGE_PRESSABLE_BUTTON, PressableTest } from './TestComponents/Pressable';
+import { HOMEPAGE_SEPARATOR_BUTTON, SeparatorTest } from './TestComponents/Separator';
+import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
+import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
+import { HOMEPAGE_TABS_BUTTON, TabsTest } from './TestComponents/Tabs';
+import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON, ExperimentalTabsTest } from './TestComponents/TabsExperimental';
+import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
+import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
+import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
+
+export const tests = [
+  {
+    name: 'ActivityIndicator Test',
+    component: ActivityIndicatorTest,
+    testPage: HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
+  },
+  {
+    name: 'Avatar Test',
+    component: AvatarTest,
+    testPage: HOMEPAGE_AVATAR_BUTTON,
+  },
+  {
+    name: 'Badge Test',
+    component: BadgeTest,
+    testPage: HOMEPAGE_BADGE,
+  },
+  {
+    name: 'Button Test',
+    component: ButtonTest,
+    testPage: HOMEPAGE_BUTTON_BUTTON,
+  },
+  {
+    name: 'Callout Test',
+    component: CalloutTest,
+    testPage: HOMEPAGE_CALLOUT_BUTTON,
+  },
+  {
+    name: 'Pressable Test',
+    component: PressableTest,
+    testPage: HOMEPAGE_PRESSABLE_BUTTON,
+  },
+  { name: 'Link Test', component: LinkTest, testPage: HOMEPAGE_LINK_BUTTON },
+  {
+    name: 'Separator Test',
+    component: SeparatorTest,
+    testPage: HOMEPAGE_SEPARATOR_BUTTON,
+  },
+  { name: 'Text Test', component: TextTest, testPage: HOMEPAGE_TEXT_BUTTON },
+  {
+    name: 'Experimental Text Test',
+    component: TextExperimentalTest,
+    testPage: HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
+  },
+  { name: 'Theme Test', component: ThemeTest, testPage: HOMEPAGE_THEME_BUTTON },
+  {
+    name: 'PersonaCoin Test',
+    component: PersonaCoinTest,
+    testPage: HOMEPAGE_PERSONACOIN_BUTTON,
+  },
+  {
+    name: 'Persona Test',
+    component: PersonaTest,
+    testPage: HOMEPAGE_PERSONA_BUTTON,
+  },
+  {
+    name: 'Checkbox Test',
+    component: CheckboxTest,
+    testPage: HOMEPAGE_CHECKBOX_BUTTON,
+  },
+  // GH#935: Temporarily disabling while SVGs don't work in windows
+  // {
+  //   name: 'Experimental Checkbox',
+  //   component: ExperimentalCheckboxTest,
+  //   testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
+  // },
+  {
+    name: 'Tabs Test',
+    component: TabsTest,
+    testPage: HOMEPAGE_TABS_BUTTON,
+  },
+  {
+    name: 'Experimental Tabs Test',
+    component: ExperimentalTabsTest,
+    testPage: HOMEPAGE_EXPERIMENTAL_TABS_BUTTON,
+  },
+  {
+    name: 'Tokens Test',
+    component: TokenTest,
+    testPage: HOMEPAGE_TOKEN_BUTTON,
+  },
+  // GH##1027 Temporarily disabling while the test doesn't load
+  // {
+  //   name: 'Expander Test',
+  //   component: ExpanderTest,
+  //   testPage: HOMEPAGE_EXPANDER_BUTTON,
+  // },
+];