@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/TabList/TabListTest.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Divider } from '@fluentui-react-native/divider';
+import { TABLIST_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui-react-native/menu';
+import { TabList, Tab } from '@fluentui-react-native/tablist';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+
+import { TabListE2ETest } from './TabListE2ETest';
+import { svgProps, fontProps } from '../Common/iconExamples';
+import { stackStyle } from '../Common/styles';
+import type { PlatformStatus, TestSection } from '../Test';
+import { Test } from '../Test';
+
+const SubHeader = Text.customize({ variant: 'subheaderStandard' });
+const Header = Text.customize({ variant: 'headerStandard' });
+const Line = Divider.customize({ paddingVertical: 4 });
+const PaddedTabList = TabList.customize({
+  paddingVertical: 4,
+});
+
+const TabListDefaultTest: React.FunctionComponent = () => {
+  const [key, setKey] = React.useState('tab1');
+  return (
+    <View style={stackStyle}>
+      <Header>Uncontrolled Component</Header>
+      <Line />
+      <PaddedTabList defaultSelectedKey={'tab1'}>
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+      <Header>Controlled Component</Header>
+      <Line />
+      <Text>Selected Key: {key}</Text>
+      <PaddedTabList
+        selectedKey={key}
+        onTabSelect={(val) => {
+          console.log('New key:', val);
+          setKey(val);
+        }}
+      >
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+    </View>
+  );
+};
+
+const TabListDisabledTest: React.FunctionComponent = () => {
+  return (
+    <View style={stackStyle}>
+      <PaddedTabList defaultSelectedKey="tab2">
+        <Tab disabled tabKey="tab1">
+          Tab 1
+        </Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab disabled tabKey="tab3">
+          Tab 3
+        </Tab>
+        <Tab tabKey="tab4">Tab 4</Tab>
+      </PaddedTabList>
+      <PaddedTabList disabled>
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+    </View>
+  );
+};
+
+const TabListVariantsTest: React.FunctionComponent = () => {
+  return (
+    <View style={stackStyle}>
+      <Header>Size Variants</Header>
+      <Line />
+      <SubHeader>Small</SubHeader>
+      <PaddedTabList defaultSelectedKey="sm1" size="small">
+        <Tab tabKey="sm1">Small Tab 1</Tab>
+        <Tab tabKey="sm2">Small Tab 2</Tab>
+        <Tab tabKey="sm3">Small Tab 3</Tab>
+      </PaddedTabList>
+      <SubHeader>Medium (default)</SubHeader>
+      <PaddedTabList defaultSelectedKey="m1" size="medium">
+        <Tab tabKey="m1">Medium Tab 1</Tab>
+        <Tab tabKey="m2">Medium Tab 2</Tab>
+        <Tab tabKey="m3">Medium Tab 3</Tab>
+      </PaddedTabList>
+      <SubHeader>Large</SubHeader>
+      <PaddedTabList defaultSelectedKey="lg1" size="large">
+        <Tab tabKey="lg1">Large Tab 1</Tab>
+        <Tab tabKey="lg2">Large Tab 2</Tab>
+        <Tab tabKey="lg3">Large Tab 3</Tab>
+      </PaddedTabList>
+      <Header>Appearance</Header>
+      <Line />
+      <SubHeader>Transparent Appearance</SubHeader>
+      <PaddedTabList defaultSelectedKey="tab1" appearance="transparent">
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+      <SubHeader>Subtle Appearance</SubHeader>
+      <PaddedTabList defaultSelectedKey="tab1" appearance="subtle">
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+      <Header>Vertical Orientation</Header>
+      <Line />
+      <PaddedTabList defaultSelectedKey="tab1" vertical>
+        <Tab tabKey="tab1">Tab 1</Tab>
+        <Tab tabKey="tab2">Tab 2</Tab>
+        <Tab tabKey="tab3">Tab 3</Tab>
+      </PaddedTabList>
+    </View>
+  );
+};
+
+const TabListIconTest: React.FunctionComponent = () => {
+  return (
+    <View style={stackStyle}>
+      <TabList defaultSelectedKey="fontIcon">
+        <Tab icon={{ fontSource: fontProps }} tabKey="fontIcon">
+          Font Icon
+        </Tab>
+        <Tab icon={{ fontSource: fontProps }} tabKey="fontIconOnly" />
+        <Tab icon={{ svgSource: svgProps }} tabKey="svgIcon">
+          SVG Icon
+        </Tab>
+        <Tab icon={{ svgSource: svgProps }} tabKey="svgIconOnly" />
+      </TabList>
+    </View>
+  );
+};
+
+const TabListViewTest: React.FunctionComponent = () => {
+  const [key, setKey] = React.useState('a');
+  const views = React.useMemo(
+    () => ({
+      a: (
+        <View>
+          <SubHeader>This is View 1</SubHeader>
+          <Text variant="body1">Here is some text.</Text>
+        </View>
+      ),
+      b: (
+        <View>
+          <SubHeader>This is View 2</SubHeader>
+          <Button>Button 1</Button>
+        </View>
+      ),
+      c: (
+        <View>
+          <SubHeader>This is View 3</SubHeader>
+          <Menu>
+            <MenuTrigger>
+              <Button>Menu</Button>
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem>Item 1</MenuItem>
+                <MenuItem>Item 2</MenuItem>
+                <MenuItem>Item 3</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        </View>
+      ),
+    }),
+    [],
+  );
+  return (
+    <View style={stackStyle}>
+      <TabList selectedKey={key} onTabSelect={setKey}>
+        <Tab tabKey="a">View 1</Tab>
+        <Tab tabKey="b">View 2</Tab>
+        <Tab tabKey="c">View 3</Tab>
+      </TabList>
+      {views[key]}
+    </View>
+  );
+};
+
+const sections: TestSection[] = [
+  {
+    name: 'TabList Controlled vs Uncontrolled',
+    component: TabListDefaultTest,
+    testID: TABLIST_TESTPAGE,
+  },
+  {
+    name: 'Disabled',
+    component: TabListDisabledTest,
+  },
+  {
+    name: 'Variants',
+    component: TabListVariantsTest,
+  },
+  {
+    name: 'Icon',
+    component: TabListIconTest,
+  },
+  {
+    name: 'Rendering Content Separately',
+    component: TabListViewTest,
+  },
+];
+
+const e2eSections: TestSection[] = [
+  {
+    name: 'E2E Tests',
+    component: TabListE2ETest,
+  },
+];
+
+export const TabListTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  const description = 'With Tabs, users can navigate to another view.';
+
+  return <Test name="TabList Test" description={description} sections={sections} status={status} e2eSections={e2eSections} />;
+};

package/src/TestComponents/Test.tsx

@@ -0,0 +1,244 @@
+import * as React from 'react';
+import { Platform, StyleSheet, Switch, View } from 'react-native';
+
+import { Link, Separator, Text, ToggleButton } from '@fluentui/react-native';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { E2E_MODE_SWITCH, E2E_TEST_SECTION } from '@fluentui-react-native/e2e-testing';
+import type { SvgIconProps } from '@fluentui-react-native/icon';
+import { Stack } from '@fluentui-react-native/stack';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import type { SvgProps } from 'react-native-svg';
+import Svg, { G, Path } from 'react-native-svg';
+
+import { stackStyle } from './Common/styles';
+import { testProps } from './Common/TestProps';
+
+export type TestSection = {
+  name: string;
+  testID?: string;
+  component: React.FunctionComponent;
+} | null;
+
+export type Status = 'Production' | 'Beta' | 'Experimental' | 'Backlog' | 'N/A' | 'Deprecated';
+export type PlatformStatus = {
+  win32Status: Status;
+  uwpStatus: Status;
+  iosStatus: Status;
+  macosStatus: Status;
+  androidStatus: Status;
+};
+
+export interface TestProps {
+  name: string;
+  description: string;
+  spec?: string;
+  status: PlatformStatus;
+  sections: TestSection[];
+  e2eSections?: TestSection[];
+}
+
+const definitions = {
+  Production: 'Control is ready for broad partner use and to be used in production-ready scenarios.',
+  Beta: 'Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).',
+  Experimental: 'Control code checked into repo, but not ready for partner use.',
+  Backlog: 'Control is in plan and on our backlog to deliver.',
+  'N/A': 'Control is not in current plan.',
+  Deprecated: 'Control is being deprecated.',
+};
+
+const styles = StyleSheet.create({
+  name: {
+    marginTop: 4,
+    flex: Platform.select({ ios: 0, android: 0, default: 1 }),
+  },
+  definitionHeader: {
+    marginTop: 12,
+    marginBottom: 6,
+  },
+  description: {
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+  },
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+  },
+  section: {
+    marginTop: 12,
+  },
+  statusView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  statusLabel: {
+    marginTop: 2,
+    marginStart: 4,
+  },
+  status: {
+    fontWeight: 'normal',
+  },
+  // This button is only for our E2E testing framework. We want to be able to put keyboard focus in any test page if we need it.
+  // This button will be at the top of every test page and allows us to do that. But we don't want partners to see it.
+  e2eFocusButton: {
+    opacity: 0,
+  },
+  e2eSection: {
+    marginBottom: 4,
+  },
+  e2eSwitch: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  e2eSwitchLabel: {
+    marginRight: 4,
+    textAlignVertical: 'center',
+  },
+});
+
+export const Test = (props: TestProps): React.ReactElement<Record<string, never>> => {
+  const [showStatus, setShowStatus] = React.useState(false);
+  const [showE2E, setShowE2E] = React.useState(false);
+
+  const toggleSvg: React.FunctionComponent<SvgProps> = () => {
+    const plusPath =
+      'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
+    const minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
+
+    const path = showStatus ? minusPath : plusPath;
+    return (
+      <Svg>
+        <G>
+          <Path d={path} fill="black" />
+        </G>
+      </Svg>
+    );
+  };
+  const svgProps: SvgIconProps = {
+    src: toggleSvg,
+  };
+
+  const theme = useTheme();
+  const fontFamily = theme.typography.families.primary;
+
+  const plusCodepoint = 0x2795;
+  const minusCodepoint = 0x2796;
+  const fontIconProps = {
+    fontFamily: fontFamily,
+    codepoint: showStatus ? minusCodepoint : plusCodepoint,
+    fontSize: 10,
+  };
+
+  const toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
+  const { e2eSections } = props;
+
+  const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
+
+  return (
+    <View>
+      <View style={styles.header}>
+        <Text style={styles.name} variant="heroSemibold">
+          {props.name}
+        </Text>
+        {!isMobile && (
+          <Button
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps('Focus_Button')}
+            style={styles.e2eFocusButton}
+          >
+            E2E Button
+          </Button>
+        )}
+        {props.e2eSections && (
+          <View style={styles.e2eSwitch}>
+            <Text style={styles.e2eSwitchLabel} {...(isMobile ? {} : { variant: 'body1Strong' })}>
+              E2E Mode
+            </Text>
+            <Switch onValueChange={setShowE2E} value={showE2E} {...testProps(E2E_MODE_SWITCH)} />
+          </View>
+        )}
+        {props.spec && <Link url={props.spec} content="SPEC" />}
+      </View>
+      <Separator />
+      {e2eSections && showE2E && (
+        // We can check if the E2E section renders by checking if the "E2E Tests" header has rendered for each spec
+        <>
+          <Text variant="headerSemibold" {...testProps(E2E_TEST_SECTION)}>
+            E2E Tests
+          </Text>
+          {e2eSections.map((section, i) => {
+            if (section === null) {
+              return null;
+            }
+            const { component: E2EComponent } = section;
+            return <E2EComponent key={i} />;
+          })}
+        </>
+      )}
+      <Stack style={stackStyle}>
+        <Text style={styles.description}>{props.description}</Text>
+      </Stack>
+      <Stack style={stackStyle}>
+        <View style={styles.statusView}>
+          <Text variant="headerStandard">Platform Status</Text>
+          <ToggleButton iconOnly={true} icon={toggleIconProps} onClick={() => setShowStatus(!showStatus)} />
+        </View>
+        {showStatus && (
+          <>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              Win32: <Text style={styles.status}>{props.status.win32Status}</Text>
+            </Text>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              UWP: <Text style={styles.status}>{props.status.uwpStatus}</Text>
+            </Text>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              iOS: <Text style={styles.status}>{props.status.iosStatus}</Text>
+            </Text>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              macOS: <Text style={styles.status}>{props.status.macosStatus}</Text>
+            </Text>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              Android: <Text style={styles.status}>{props.status.androidStatus}</Text>
+            </Text>
+
+            <Text style={styles.definitionHeader} variant="headerStandard">
+              Status Definitions
+            </Text>
+            {Object.entries(definitions).map(([key, value]) => {
+              return (
+                <Text style={styles.statusLabel} variant="bodySemibold" key={key}>
+                  {key}: <Text style={styles.status}>{value}</Text>
+                </Text>
+              );
+            })}
+          </>
+        )}
+      </Stack>
+      {props.sections.map((section, index) => {
+        if (section == null) {
+          return <></>;
+        }
+
+        const TestComponent = section.component;
+        return (
+          <View key={index}>
+            <Text
+              style={styles.section}
+              variant="headerSemibold"
+              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+              {...testProps(section.testID)}
+            >
+              {section.name}
+            </Text>
+            <Separator />
+            <TestComponent />
+          </View>
+        );
+      })}
+    </View>
+  );
+};

package/src/TestComponents/TextLegacy/CustomizeUsage.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { stackStyle } from '../Common/styles';
+
+const RedCaptionBold = Text.customize({ tokens: { variant: 'captionStandard', fontWeight: '700', color: '#ff0000' } });
+const OrangeSecondaryBold = Text.customize({ tokens: { variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' } });
+const YellowBodyBold = Text.customize({ tokens: { variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' } });
+const GreenSubheaderBold = Text.customize({ tokens: { variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' } });
+const BlueHeaderBold = Text.customize({ tokens: { variant: 'headerStandard', fontWeight: '700', color: '#0229c4' } });
+const IndigoHeroBold = Text.customize({ tokens: { variant: 'heroStandard', fontWeight: '700', color: '#4b0082' } });
+const PurpleHeroLargeBold = Text.customize({ tokens: { 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({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Arial Black' } });
+const BrushScriptMT = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'Brush Script MT' } });
+const CourierNew = Text.customize({ tokens: { variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew } });
+const Georgia = Text.customize({ tokens: { variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia } });
+const TimesNewRoman = Text.customize({ tokens: { variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman } });
+const Wingdings = Text.customize({ tokens: { variant: 'captionStandard', fontFamily: 'Wingdings' } });
+
+// Examples of supported Android fonts.
+const Casual = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'casual' } });
+const Cursive = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'cursive' } });
+// Examples of iOS fonts.
+const Papyrus = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Papyrus' } });
+const Helvetica = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Helvetica' } });
+// Fonts supported on Android and iOS
+const Arial = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'arial' } });
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  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>
+          <CustomUsageStack />
+          <CustomFontStack />
+        </View>
+      );
+  }
+};

package/src/TestComponents/TextLegacy/PressableUsage.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Alert, Linking, View } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+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 _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 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}
+          >
+            here
+          </Text>{' '}
+          to view an alert.
+        </Text>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextLegacy/StandardUsage.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { stackStyle } from '../Common/styles';
+
+export const StandardUsage: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Text variant="captionStandard">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>
+  );
+};