@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/TextLegacy/TextLegacyE2ETest.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import {
-  DEPRECATED_TEXT_FIRST_ACCESSIBILITY_LABEL,
-  DEPRECATED_TEXT_FIRST_COMPONENT,
-  DEPRECATED_TEXT_SECOND_COMPONENT,
-  DEPRECATED_TEXT_SECOND_COMPONENT_CONTENT,
-} from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const TextLegacyE2ETest: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Text
-          variant="captionStandard"
-          accessibilityLabel={DEPRECATED_TEXT_FIRST_ACCESSIBILITY_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(DEPRECATED_TEXT_FIRST_COMPONENT)}
-        >
-          Testing Deprecated Text Component - Accessibility Label Set
-        </Text>
-        <Text
-          variant="captionStandard"
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(DEPRECATED_TEXT_SECOND_COMPONENT)}
-        >
-          {DEPRECATED_TEXT_SECOND_COMPONENT_CONTENT}
-        </Text>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/TextLegacy/TextLegacyTest.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-
-import { TEXT_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { CustomizeUsage } from './CustomizeUsage';
-import { PressableUsage } from './PressableUsage';
-import { StandardUsage } from './StandardUsage';
-import { TextLegacyE2ETest } from './TextLegacyE2ETest';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const textSections: TestSection[] = [
-  {
-    name: 'Standard Usage',
-    testID: TEXT_TESTPAGE,
-    component: StandardUsage,
-  },
-  {
-    name: 'Customize Usage',
-    component: CustomizeUsage,
-  },
-  {
-    name: 'Pressable Usage',
-    component: PressableUsage,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Text Tests',
-    component: TextLegacyE2ETest,
-  },
-];
-
-export const TextLegacyTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Deprecated',
-    uwpStatus: 'Deprecated',
-    iosStatus: 'Deprecated',
-    macosStatus: 'Deprecated',
-    androidStatus: 'Deprecated',
-  };
-
-  const description = 'Text is a component for displaying text. You can use Text to standardize text across your app.';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/text/SPEC.md';
-
-  return <Test name="Text Test" description={description} spec={spec} sections={textSections} status={status} e2eSections={e2eSections} />;
-};

package/src/TestComponents/TextLegacy/index.ts

@@ -1 +0,0 @@
-export * from './TextLegacyTest';

package/src/TestComponents/TextV1/CustomizeUsage.tsx

@@ -1,164 +0,0 @@
-import * as React from 'react';
-import { Platform, View } from 'react-native';
-
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-
-const RedCaptionBold = Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
-const OrangeSecondaryBold = Text.customize({ variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' });
-const YellowBodyBold = Text.customize({ variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' });
-const GreenSubheaderBold = Text.customize({ variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' });
-const BlueHeaderBold = Text.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4' });
-const IndigoHeroBold = Text.customize({ variant: 'heroStandard', fontWeight: '700', color: '#4b0082' });
-const PurpleHeroLargeBold = Text.customize({ variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' });
-
-// Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
-// Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
-// The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
-const CustomFontNames = {
-  ...Platform.select({
-    android: {
-      CourierNew: 'courier new',
-      Georgia: 'georgia',
-      TimesNewRoman: 'times new roman',
-    },
-    default: {
-      CourierNew: 'Courier New',
-      Georgia: 'Georgia',
-      TimesNewRoman: 'Times New Roman',
-    },
-  }),
-};
-
-const ArialBlack = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Arial Black' });
-const BrushScriptMT = Text.customize({ variant: 'heroStandard', fontFamily: 'Brush Script MT' });
-const CourierNew = Text.customize({ variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew });
-const Georgia = Text.customize({ variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia });
-const TimesNewRoman = Text.customize({ variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman });
-const Wingdings = Text.customize({ variant: 'captionStandard', fontFamily: 'Wingdings' });
-
-// Examples of supported Android fonts.
-const Casual = Text.customize({ variant: 'heroStandard', fontFamily: 'casual' });
-const Cursive = Text.customize({ variant: 'heroStandard', fontFamily: 'cursive' });
-// Examples of iOS fonts.
-const Papyrus = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Papyrus' });
-const Helvetica = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Helvetica' });
-// Fonts supported on Android and iOS
-const Arial = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
-
-export const CustomizeUsage: React.FunctionComponent = () => {
-  const BlockText = () => {
-    return (
-      <>
-        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium" truncate>
-          I am going to be truncated since I am a very very very very very very very very very very very very very very very very very very
-          very very very very very very very very very very very very very very very very very very very very very very very very very very
-          very very very very very very very very very very very very very very very very long block text.
-        </Text>
-        <Text font="monospace" weight="semibold" wrap={false}>
-          I am not going to be wrapped since I am a very very very very very very very very very very very very very very very very very
-          very very very very very very very very very very very very very very very very very very very very very very very very very very
-          very very very very very very very very very very very very very very very very very long block text.
-        </Text>
-        <Text underline>Since text components are inside a View</Text>
-        <Text>every block of text</Text>
-        <Text underline strikethrough align="end">
-          gets its own line. This line has been underlined, striked through, and right aligned.
-        </Text>
-      </>
-    );
-  };
-
-  const NonBlockText = () => {
-    return (
-      <Text>
-        <Text italic>I am italisized inline text.</Text>
-        <Text weight="medium">Since text components are inside a Text, (medium) </Text>
-        <Text weight="bold">every block of text (bolded) </Text>
-        <Text size={600}>gets placed inline.</Text>
-      </Text>
-    );
-  };
-
-  const CustomUsageStack = () => {
-    return (
-      <Stack style={stackStyle} gap={5}>
-        <RedCaptionBold>RedCaptionBold</RedCaptionBold>
-        <OrangeSecondaryBold>OrangeSecondaryBold</OrangeSecondaryBold>
-        <YellowBodyBold>YellowBodyBold</YellowBodyBold>
-        <GreenSubheaderBold>GreenSubheaderBold</GreenSubheaderBold>
-        <BlueHeaderBold>BlueHeaderBold</BlueHeaderBold>
-        <IndigoHeroBold>IndigoHeroBold</IndigoHeroBold>
-        <PurpleHeroLargeBold>PurpleHeroLargeBold</PurpleHeroLargeBold>
-      </Stack>
-    );
-  };
-
-  const CustomFontStack = () => {
-    return (
-      <Stack style={stackStyle} gap={5}>
-        <ArialBlack>Arial Black</ArialBlack>
-        <BrushScriptMT>Brush Script MT</BrushScriptMT>
-        <CourierNew>Courier New</CourierNew>
-        <Georgia>Georgia</Georgia>
-        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
-        <Wingdings>Wingdings</Wingdings>
-      </Stack>
-    );
-  };
-
-  const CustomFontStackAndroid = () => {
-    return (
-      <Stack style={stackStyle} gap={5}>
-        <Arial>Arial</Arial>
-        <Casual>Casual</Casual>
-        <Cursive>Cursive</Cursive>
-        <CourierNew>Courier New</CourierNew>
-        <Georgia>Georgia</Georgia>
-        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
-      </Stack>
-    );
-  };
-  const CustomFontStackiOS = () => {
-    return (
-      <Stack style={stackStyle} gap={5}>
-        <Arial>Arial</Arial>
-        <Papyrus>Papyrus</Papyrus>
-        <Helvetica>Helvetica</Helvetica>
-        <CourierNew>Courier New</CourierNew>
-        <Georgia>Georgia</Georgia>
-        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
-      </Stack>
-    );
-  };
-
-  switch (Platform.OS) {
-    case 'android':
-      return (
-        <View>
-          <CustomUsageStack />
-          <CustomFontStackAndroid />
-        </View>
-      );
-    case 'ios':
-      return (
-        <View>
-          <CustomUsageStack />
-          <CustomFontStackiOS />
-        </View>
-      );
-    default:
-      return (
-        <View>
-          <BlockText />
-          <Text>{'\n'}</Text>
-          <NonBlockText />
-          <Text>{'\n'}</Text>
-          <CustomUsageStack />
-          <CustomFontStack />
-        </View>
-      );
-  }
-};

package/src/TestComponents/TextV1/MaximumFontSize.ios.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { Text, View } from 'react-native';
-
-import { Separator } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import { Caption1, Title2, Title3 } from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-
-const maximumFontSizeStyle = { maximumFontSize: 36 };
-
-const CappedTitle2 = Title2.customize(maximumFontSizeStyle);
-const CappedTitle3 = Title3.customize(maximumFontSizeStyle);
-
-export const MaximumFontSizeUsage: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Caption1>Play with the preferred content size. The marked elements should not grow larger than 36 points.</Caption1>
-        <Separator />
-        <Title2>Title2</Title2>
-        <Title3>Title3</Title3>
-        <CappedTitle2>Title2 (capped)</CappedTitle2>
-        <CappedTitle3>Title3 (capped)</CappedTitle3>
-        <Text allowFontScaling={false} style={{ fontSize: 36, fontWeight: '600' }}>
-          This is 36 pt
-        </Text>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/TextV1/MaximumFontSize.tsx

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { Text } from 'react-native';
-
-export const MaximumFontSizeUsage: React.FunctionComponent = () => {
-  return <Text>Only available on iOS.</Text>;
-};

package/src/TestComponents/TextV1/PressableUsage.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { Alert, Linking, View } from 'react-native';
-
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-import type { IKeyboardEvent, IHandledKeyboardEvent } from '@office-iss/react-native-win32';
-
-import { stackStyle } from '../Common/styles';
-
-export const PressableUsage: React.FunctionComponent = () => {
-  const _onPress = (): void => {
-    Linking.openURL('https://www.microsoft.com');
-  };
-
-  const _onKeyDown = (ev: IKeyboardEvent) => {
-    if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == 'Space') Linking.openURL('https://www.microsoft.com');
-  };
-
-  const _onPress2 = (): void => {
-    Alert.alert('Alert', 'Success!');
-  };
-
-  const _onPress3 = (): void => {
-    Alert.alert('Alert', 'onAccessibilityTap invoked!');
-  };
-
-  const _onKeyDown2 = (ev: IKeyboardEvent) => {
-    if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == ' ') Alert.alert('Alert', 'Success!');
-  };
-
-  const handledNativeKeyboardEvents: IHandledKeyboardEvent[] = [{ key: 'Enter' }, { key: 'Space' }];
-
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Text variant={'bodyStandard'}>
-          To learn more about microsoft, visit this{' '}
-          <Text
-            focusable
-            variant={'bodyStandard'}
-            color="blue"
-            keyDownEvents={handledNativeKeyboardEvents}
-            onPress={_onPress}
-            onKeyDown={_onKeyDown}
-          >
-            webpage
-          </Text>{' '}
-          for more details.
-        </Text>
-        <Text variant={'bodyStandard'}>
-          Press{' '}
-          <Text
-            variant={'bodyStandard'}
-            color="blue"
-            keyDownEvents={handledNativeKeyboardEvents}
-            onPress={_onPress2}
-            onKeyDown={_onKeyDown2}
-            onAccessibilityTap={_onPress3}
-          >
-            here
-          </Text>{' '}
-          to view an alert.
-        </Text>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/TextV1/StandardUsage.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { HOMEPAGE_TEXTV1_BUTTON } from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const StandardUsage: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Text
-          variant="captionStandard"
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(HOMEPAGE_TEXTV1_BUTTON)}
-        >
-          CaptionStandard
-        </Text>
-        <Text variant="secondaryStandard">SecondaryStandard</Text>
-        <Text variant="secondarySemibold">SecondarySemibold</Text>
-        <Text variant="bodyStandard">BodyStandard</Text>
-        <Text variant="bodySemibold">BodySemibold</Text>
-        <Text variant="subheaderStandard">SubheaderStandard</Text>
-        <Text variant="subheaderSemibold">SubheaderSemibold</Text>
-        <Text variant="headerStandard">HeaderStandard</Text>
-        <Text variant="headerSemibold">HeaderSemibold</Text>
-        <Text variant="heroStandard">HeroStandard</Text>
-        <Text variant="heroSemibold">HeroSemibold</Text>
-        <Text variant="heroLargeStandard">HeroLargeStandard</Text>
-        <Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/TextV1/TextV1E2ETest.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import {
-  TEXTV1_TEST_COMPONENT,
-  TEXTV1_ACCESSIBILITY_LABEL,
-  TEXTV1_NO_A11Y_LABEL_COMPONENT,
-  TEXTV1_CONTENT,
-} from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const TextV1E2ETest: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Text
-          variant="captionStandard"
-          accessibilityLabel={TEXTV1_ACCESSIBILITY_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(TEXTV1_TEST_COMPONENT)}
-        >
-          Testing Text Component - Accessibility Label Set
-        </Text>
-        <Text
-          variant="captionStandard"
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(TEXTV1_NO_A11Y_LABEL_COMPONENT)}
-        >
-          {TEXTV1_CONTENT}
-        </Text>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/TextV1/TextV1Test.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-
-import { TEXTV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { CustomizeUsage } from './CustomizeUsage';
-import { MaximumFontSizeUsage } from './MaximumFontSize';
-import { PressableUsage } from './PressableUsage';
-import { StandardUsage } from './StandardUsage';
-import { TextV1E2ETest } from './TextV1E2ETest';
-import { V2Usage } from './V2Usage';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const textSections: TestSection[] = [
-  {
-    name: 'Standard Usage',
-    testID: TEXTV1_TESTPAGE,
-    component: StandardUsage,
-  },
-  {
-    name: 'V1/V2 Comparison',
-    component: V2Usage,
-  },
-  {
-    name: 'Maximum Font Size Usage',
-    component: MaximumFontSizeUsage,
-  },
-  {
-    name: 'Customize Usage',
-    component: CustomizeUsage,
-  },
-  {
-    name: 'Pressable Usage',
-    component: PressableUsage,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Testing for TextV1',
-    component: TextV1E2ETest,
-  },
-];
-
-export const TextV1Test: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Beta',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description = 'Text is a component for displaying text. You can use Text to standardize text across your app.';
-
-  return <Test name="TextV1 Test" description={description} sections={textSections} status={status} e2eSections={e2eSections} />;
-};

package/src/TestComponents/TextV1/V2Usage.android.tsx

@@ -1 +0,0 @@
-export { V2Usage } from './V2Usage.mobile';

package/src/TestComponents/TextV1/V2Usage.ios.tsx

@@ -1 +0,0 @@
-export { V2Usage } from './V2Usage.mobile';

package/src/TestComponents/TextV1/V2Usage.mobile.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Stack } from '@fluentui-react-native/stack';
-import {
-  Body1,
-  Body1Strong,
-  Body2,
-  Body2Strong,
-  Caption1,
-  Caption1Strong,
-  Caption2,
-  Display,
-  LargeTitle,
-  TextV1,
-  Title1,
-  Title2,
-  Title3,
-} from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-
-export const V2Usage: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <TextV1 variant="caption2">Caption2 v1</TextV1>
-        <Caption2>Caption2 v2</Caption2>
-        <TextV1 variant="caption1">Caption1 v1</TextV1>
-        <Caption1>Caption1 v2</Caption1>
-        <TextV1 variant="caption1Strong">Caption1Strong v1</TextV1>
-        <Caption1Strong>Caption1Strong v2</Caption1Strong>
-        <TextV1 variant="body2">Body2 v1</TextV1>
-        <Body2>Body2 v2</Body2>
-        <TextV1 variant="body2Strong">Body2Strong v1</TextV1>
-        <Body2Strong>Body2Strong v2</Body2Strong>
-        <TextV1 variant="body1">Body1 v1</TextV1>
-        <Body1>Body1 v2</Body1>
-        <TextV1 variant="body1Strong">Body1Strong v1</TextV1>
-        <Body1Strong>Body1Strong v2</Body1Strong>
-        <TextV1 variant="title3">Title3 v1</TextV1>
-        <Title3>Title3 v2</Title3>
-        <TextV1 variant="title2">Title2 v1</TextV1>
-        <Title2>Title2 v2</Title2>
-        <TextV1 variant="title1">Title1 v1</TextV1>
-        <Title1>Title1 v2</Title1>
-        <TextV1 variant="largeTitle">LargeTitle v1</TextV1>
-        <LargeTitle>LargeTitle v2</LargeTitle>
-        <TextV1 variant="display">Display v1</TextV1>
-        <Display>Display v2</Display>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/TextV1/V2Usage.tsx

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { Platform, Text } from 'react-native';
-
-export const V2Usage: React.FunctionComponent = () => {
-  return <Text>V2 usage is not yet supported for platform &quot;{Platform.OS}&quot;.</Text>;
-};

package/src/TestComponents/TextV1/V2Usage.win32.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Stack } from '@fluentui-react-native/stack';
-import {
-  Body1,
-  Body1Strong,
-  Body2,
-  Body2Strong,
-  Caption1,
-  Display,
-  LargeTitle,
-  Subtitle1,
-  Subtitle1Strong,
-  Subtitle2,
-  Subtitle2Strong,
-  Title1,
-  Title1Strong,
-} from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-
-export const V2Usage: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Caption1>Caption1</Caption1>
-        <Body1>Body1</Body1>
-        <Body1Strong>Body1Strong</Body1Strong>
-        <Body2>Body2</Body2>
-        <Body2Strong>Body2Strong</Body2Strong>
-        <Subtitle2>Subtitle2</Subtitle2>
-        <Subtitle2Strong>Subtitle2Strong</Subtitle2Strong>
-        <Subtitle1>Subtitle1</Subtitle1>
-        <Subtitle1Strong>Subtitle1Strong</Subtitle1Strong>
-        <Title1>Title1</Title1>
-        <Title1Strong>Title1Strong</Title1Strong>
-        <LargeTitle>LargeTitle</LargeTitle>
-        <Display>Display</Display>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/TextV1/index.ts

@@ -1 +0,0 @@
-export * from './TextV1Test';