@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/CornerRadius/CornerRadiusTest.tsx

@@ -1,90 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { useFluentTheme } from '@fluentui-react-native/framework';
-import { Stack } from '@fluentui-react-native/stack';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
-
-import { stackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-interface CornerRadiusTestComponentProps {
-  name: string;
-  cornerRadius: number;
-}
-
-const CornerRadiusTestComponent: React.FunctionComponent<CornerRadiusTestComponentProps> = (props: CornerRadiusTestComponentProps) => {
-  const theme = useFluentTheme();
-  const isLightMode = getCurrentAppearance(theme.host.appearance, 'light') === 'light';
-
-  const outerBoxProps = React.useMemo(
-    () => ({
-      height: 60,
-      margin: 16,
-      backgroundColor: isLightMode ? globalTokens.color.grey80 : globalTokens.color.grey10,
-      borderRadius: props.cornerRadius,
-    }),
-    [props.cornerRadius, isLightMode],
-  );
-
-  const innerCircleIndicatorProps = React.useMemo(
-    () => ({
-      height: Math.min(props.cornerRadius * 2, 60),
-      width: Math.min(props.cornerRadius * 2, 60),
-      borderRadius: props.cornerRadius,
-      backgroundColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
-    }),
-    [props.cornerRadius, isLightMode],
-  );
-
-  return (
-    <View>
-      <Text variant="bodySemibold">{props.name + ': ' + props.cornerRadius + 'px'}</Text>
-      <View style={outerBoxProps}>
-        <View style={innerCircleIndicatorProps}></View>
-      </View>
-    </View>
-  );
-};
-
-const CornerRadiusTest: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={500}>
-        <CornerRadiusTestComponent name="radiusNone" cornerRadius={globalTokens.corner.radiusNone} />
-        <CornerRadiusTestComponent name="radius20" cornerRadius={globalTokens.corner.radius20} />
-        <CornerRadiusTestComponent name="radius40" cornerRadius={globalTokens.corner.radius40} />
-        <CornerRadiusTestComponent name="radius60" cornerRadius={globalTokens.corner.radius60} />
-        <CornerRadiusTestComponent name="radius80" cornerRadius={globalTokens.corner.radius80} />
-        <CornerRadiusTestComponent name="radius120" cornerRadius={globalTokens.corner.radius120} />
-        <CornerRadiusTestComponent name="radiusCircular" cornerRadius={globalTokens.corner.radiusCircular} />
-      </Stack>
-    </View>
-  );
-};
-
-const cornerRadiusSections: TestSection[] = [
-  {
-    name: 'Basic Usage',
-    testID: HOMEPAGE_CORNERRADIUS_TESTPAGE,
-    component: CornerRadiusTest,
-  },
-];
-
-export const CornerRadiusTokensTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Production',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description = 'The different global corner radius tokens available in Fluent UI.';
-
-  return <Test name="Corner Radius Tokens Test" description={description} sections={cornerRadiusSections} status={status} />;
-};

package/src/TestComponents/CornerRadius/index.ts

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

package/src/TestComponents/Divider/DividerTest.tsx

@@ -1,171 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-
-import { Divider } from '@fluentui-react-native/divider';
-import { DIVIDER_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { CustomisedMobileDividers, MobileDividers } from './MobileDividerTest';
-import TestSvg from '../../../assets/test.svg';
-import { commonTestStyles } from '../Common/styles';
-import { Test } from '../Test';
-import type { TestSection, PlatformStatus } from '../Test';
-
-const isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
-const PaddedDivider = Divider.customize({ paddingVertical: 4, thickness: 2 });
-const CustomText = Text.customize({ margin: 8 });
-
-const ColoredDivider = Divider.customize({ contentColor: '#bf5700', lineColor: '#bf5700' });
-const ThickDivider = Divider.customize({ thickness: 3 });
-const TextVariantDivider = Divider.customize({ variant: 'subtitle2Strong' });
-const StyledTextDivider = Divider.customize({ fontSize: 10, fontStyle: 'italic', textDecorationLine: 'underline' });
-
-const dividerTestStyles = StyleSheet.create({
-  verticalDividerContainer: {
-    marginVertical: 8,
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  horizontalDividerContainer: {
-    height: 120,
-    flexDirection: 'column',
-    justifyContent: 'space-evenly',
-  },
-});
-
-export const HorizontalDividers: React.FunctionComponent = () => (
-  <Stack style={commonTestStyles.stack}>
-    <CustomText>Regular divider with no content below.</CustomText>
-    <Divider />
-    <CustomText>Regular divider with no content above.</CustomText>
-    <Divider>Divider with text content.</Divider>
-    <Divider insetSize={16}>Divider with text + inset.</Divider>
-    <PaddedDivider alignContent="start">I am a start-aligned divider</PaddedDivider>
-    <PaddedDivider alignContent="end">I am a end-aligned divider</PaddedDivider>
-  </Stack>
-);
-
-export const VerticalDividers: React.FunctionComponent = () => (
-  <Stack style={commonTestStyles.stack}>
-    <View style={dividerTestStyles.verticalDividerContainer}>
-      <CustomText>Regular divider {'->'}</CustomText>
-      <Divider vertical />
-      <CustomText>Divider with an inset {'->'}</CustomText>
-      <Divider vertical insetSize={16} />
-      <PaddedDivider vertical>Divider with text</PaddedDivider>
-      <Divider vertical alignContent="start">
-        Start-aligned divider
-      </Divider>
-      <Divider vertical alignContent="end">
-        End-aligned divider
-      </Divider>
-    </View>
-    <Divider />
-    <View style={dividerTestStyles.verticalDividerContainer}>
-      <CustomText>The divider to the right of me should have a min height of 20px</CustomText>
-      <Divider vertical />
-      <CustomText>The divider to the left of me should have a min height of 20px</CustomText>
-    </View>
-  </Stack>
-);
-
-export const DividersWithAppearance: React.FunctionComponent = () => (
-  <Stack style={commonTestStyles.stack}>
-    <PaddedDivider appearance="default">Default divider</PaddedDivider>
-    <PaddedDivider appearance="subtle">Subtle divider</PaddedDivider>
-    <PaddedDivider appearance="brand">Branded divider</PaddedDivider>
-    <PaddedDivider appearance="strong">Strong divider</PaddedDivider>
-  </Stack>
-);
-
-export const DividersWithIcons: React.FunctionComponent = () => (
-  <Stack style={commonTestStyles.stack}>
-    <Divider appearance="brand" icon={{ fontSource: { fontFamily: 'Arial', codepoint: 0x2663, fontSize: 32 } }} />
-    <CustomText align="center">
-      Above is a branded Divider with a font icon as content. Below me is a branded divider with an svg icon as content - this will not show
-      on UWP.
-    </CustomText>
-    {Platform.OS !== 'windows' && (
-      <Divider appearance="brand" icon={{ svgSource: { viewBox: '0 0 500 500', src: TestSvg, width: 32, height: 32 } }} />
-    )}
-  </Stack>
-);
-
-export const CustomDividers: React.FunctionComponent = () => (
-  <Stack style={commonTestStyles.stack}>
-    <View style={dividerTestStyles.horizontalDividerContainer}>
-      <ColoredDivider>Divider with color</ColoredDivider>
-      <ThickDivider>Divider with thickness</ThickDivider>
-      <TextVariantDivider>Divider with text variant</TextVariantDivider>
-      <StyledTextDivider>Divider with text styling</StyledTextDivider>
-    </View>
-    <View style={dividerTestStyles.verticalDividerContainer}>
-      <ColoredDivider vertical>Divider with color</ColoredDivider>
-      <ThickDivider vertical>Divider with thickness</ThickDivider>
-      <TextVariantDivider vertical>Divider with text variant</TextVariantDivider>
-      <StyledTextDivider vertical>Divider with text styling</StyledTextDivider>
-    </View>
-  </Stack>
-);
-
-const dividerSections: TestSection[] = [
-  {
-    name: 'Horizontal Dividers',
-    testID: DIVIDER_TESTPAGE,
-    component: HorizontalDividers,
-  },
-  {
-    name: 'Vertical Dividers',
-    component: VerticalDividers,
-  },
-  {
-    name: 'Divider Appearances',
-    component: DividersWithAppearance,
-  },
-  {
-    name: 'Custom Dividers',
-    component: CustomDividers,
-  },
-  {
-    name: 'Dividers with Icons',
-    component: DividersWithIcons,
-  },
-];
-
-const mobileDividerSections: TestSection[] = [
-  {
-    name: 'Mobile Dividers',
-    testID: DIVIDER_TESTPAGE,
-    component: MobileDividers,
-  },
-  {
-    name: 'Customised Mobile Dividers',
-    testID: DIVIDER_TESTPAGE,
-    component: CustomisedMobileDividers,
-  },
-];
-
-export const DividerTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description = 'A Divider is a visual separator that can contain content (text or an icon). Dividers can be horizontal or vertical';
-  const mobileDescription = 'A Divider is a visual horizontal separator that seperates content/sections';
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Divider/SPEC.md';
-
-  return (
-    <Test
-      name="Divider Test"
-      description={isMobile ? mobileDescription : description}
-      sections={isMobile ? mobileDividerSections : dividerSections}
-      spec={spec}
-      status={status}
-    ></Test>
-  );
-};

package/src/TestComponents/Divider/MobileDividerTest.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { Divider } from '@fluentui-react-native/divider';
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-
-import { commonTestStyles } from '../Common/styles';
-
-const CustomizedText = Text.customize({
-  textAlign: 'right',
-  fontSize: 'caption',
-  fontWeight: 'bold',
-  paddingVertical: 100,
-});
-
-const mobileDividerstyles = StyleSheet.create({
-  container: { marginVertical: 20, display: 'flex', height: 20, justifyContent: 'space-between' },
-});
-
-const RedDivider = Divider.customize({ lineColor: 'red' });
-const GreenThickDivider = Divider.customize({ lineColor: 'green', thickness: globalTokens.stroke.width30 });
-
-export const MobileDividers: React.FunctionComponent = () => (
-  <Stack style={commonTestStyles.section}>
-    <View style={mobileDividerstyles.container}>
-      <Divider insetSize={0} />
-      <CustomizedText>Inset : 0</CustomizedText>
-    </View>
-
-    <View style={mobileDividerstyles.container}>
-      <Divider insetSize={16} />
-      <CustomizedText>Inset : 16</CustomizedText>
-    </View>
-
-    <View style={mobileDividerstyles.container}>
-      <Divider insetSize={56} />
-      <CustomizedText>Inset : 56</CustomizedText>
-    </View>
-    <View style={mobileDividerstyles.container}>
-      <Divider insetSize={68} />
-      <CustomizedText>Inset : 68</CustomizedText>
-    </View>
-    <View style={mobileDividerstyles.container}>
-      <Divider insetSize={72} />
-      <CustomizedText>Inset : 72</CustomizedText>
-    </View>
-    <View style={mobileDividerstyles.container}>
-      <Divider insetSize={108} />
-      <CustomizedText>Inset : 108</CustomizedText>
-    </View>
-  </Stack>
-);
-
-export const CustomisedMobileDividers: React.FunctionComponent = () => (
-  <Stack style={commonTestStyles.section}>
-    <View style={mobileDividerstyles.container}>
-      <RedDivider />
-      <CustomizedText>Inset : 0 | color : red</CustomizedText>
-    </View>
-
-    <View style={mobileDividerstyles.container}>
-      <GreenThickDivider insetSize={56} />
-      <CustomizedText>Inset : 56 | color : green | thickness: width30</CustomizedText>
-    </View>
-  </Stack>
-);

package/src/TestComponents/Divider/index.ts

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

package/src/TestComponents/Drawer/DrawerDefault.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { Avatar } from '@fluentui-react-native/avatar';
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Drawer } from '@fluentui-react-native/drawer';
-import type { DrawerPositionType } from '@fluentui-react-native/drawer';
-import { Stack } from '@fluentui-react-native/stack';
-import { Switch } from '@fluentui-react-native/switch';
-import { Text } from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-
-export const DrawerDefault: React.FunctionComponent = () => {
-  const [isDrawerVisible, setIsDrawerVisible] = React.useState(false);
-  const [drawerPosition, setDrawerPosition] = React.useState<DrawerPositionType>('left');
-
-  const handleDrawerClose = React.useCallback(() => {
-    setIsDrawerVisible(false);
-  }, []);
-
-  const handleDrawerOpen = React.useCallback((behavior) => {
-    setDrawerPosition(behavior);
-    setIsDrawerVisible(true);
-  }, []);
-
-  const handleChildrenClick = React.useCallback(() => {
-    console.log('Children Clicked');
-  }, []);
-
-  return (
-    <Stack style={stackStyle}>
-      <View style={drawerContentstyles.container}>
-        <View style={drawerContentstyles.content}>
-          <Text>This is the main content of the screen.</Text>
-          <Button appearance="outline" onClick={() => handleDrawerOpen('left')}>
-            Open Drawer (Left)
-          </Button>
-          <Button appearance="outline" onClick={() => handleDrawerOpen('right')}>
-            Open Drawer (Right)
-          </Button>
-          <Button appearance="outline" onClick={() => handleDrawerOpen('bottom')}>
-            Open Drawer (Bottom)
-          </Button>
-        </View>
-        <Drawer open={isDrawerVisible} onClose={handleDrawerClose} onScrimClick={handleDrawerClose} drawerPosition={drawerPosition}>
-          <View style={drawerContentstyles.drawerContent}>
-            <View style={drawerContentstyles.flexRow}>
-              <Avatar active={'active'} activeAppearance="ring" size={56} name="John Doe" avatarColor={'colorful'} />
-              <Text variant="headerSemibold" style={drawerContentstyles.text}>
-                John Doe
-              </Text>
-            </View>
-            <Switch style={drawerContentstyles.switch} defaultChecked={true} label={'Notifications'} />
-            <Stack gap={10}>
-              <Text variant="body1">This is the content of the drawer.</Text>
-              <Button onClick={handleDrawerClose}>Close Drawer</Button>
-              <Button appearance="outline" onClick={handleChildrenClick}>
-                Validate Children Clicked on Drawer
-              </Button>
-            </Stack>
-          </View>
-        </Drawer>
-      </View>
-    </Stack>
-  );
-};
-
-const drawerContentstyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  flexRow: {
-    flexDirection: 'row',
-  },
-  content: {
-    height: 200,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  switch: {
-    margin: 10,
-  },
-  drawerContent: {
-    flex: 1,
-    alignItems: 'flex-start',
-    margin: 20,
-  },
-  text: {
-    fontSize: 20,
-    textAlign: 'center',
-    alignSelf: 'center',
-    marginStart: 10,
-  },
-});

package/src/TestComponents/Drawer/DrawerTest.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-
-import { Drawer_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { DrawerDefault } from './DrawerDefault';
-import { E2EDrawerTest } from './E2EDrawerTest';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const DrawerSections: TestSection[] = [
-  {
-    name: 'Drawer Page',
-    testID: Drawer_TESTPAGE,
-    component: DrawerDefault,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Drawer Testing',
-    component: E2EDrawerTest,
-  },
-];
-
-export const DrawerTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Backlog',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Backlog',
-    macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
-  };
-
-  const description = 'Drawer allows to put content in a drawer that slides in from different sides of the screen.';
-
-  return <Test name="Drawer Test" description={description} sections={DrawerSections} status={status} e2eSections={e2eSections}></Test>;
-};

package/src/TestComponents/Drawer/E2EDrawerTest.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-import { Drawer } from '@fluentui-react-native/drawer';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-export const E2EDrawerTest: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Drawer />
-    </Stack>
-  );
-};

package/src/TestComponents/Drawer/index.ts

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

package/src/TestComponents/Dropdown/DropdownTest.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-
-import { Option, Dropdown } from '@fluentui-react-native/dropdown';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { DROPDOWN_TESTPAGE } from './consts';
-import { stackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const DropdownDefault: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Dropdown>
-        <Option>Test</Option>
-        <Option disabled>Disabled Test</Option>
-      </Dropdown>
-    </Stack>
-  );
-};
-
-const menuSections: TestSection[] = [
-  {
-    name: 'Dropdown Default',
-    testID: DROPDOWN_TESTPAGE,
-    component: DropdownDefault,
-  },
-];
-
-export const DropdownTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Backlog',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Backlog',
-    macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
-  };
-
-  const description = 'TODO';
-
-  const spec = 'TODO';
-
-  return <Test name="Dropdown Test" description={description} spec={spec} sections={menuSections} status={status} />;
-};

package/src/TestComponents/Dropdown/consts.ts

@@ -1,2 +0,0 @@
-export const HOMEPAGE_DROPDOWN_BUTTON = 'Homepage_Dropdown_Button';
-export const DROPDOWN_TESTPAGE = 'Dropdown_TestPage';

package/src/TestComponents/Dropdown/index.ts

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

package/src/TestComponents/Expander/ExpanderTest.tsx

@@ -1,132 +0,0 @@
-import * as React from 'react';
-import { View, Switch } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { Expander } from '@fluentui-react-native/experimental-expander';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { EXPANDER_TESTPAGE } from './consts';
-import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const CustomizedExpander = Expander.customize({
-  headerBackground: '#9c9c9c',
-  headerForeground: '#ffffff',
-  contentBackground: '#c3c3c3',
-  chevronBackground: '#ff7f7f',
-  chevronForeground: '#ffffff',
-  chevronPointerOverBackground: '#b5ffb2',
-  chevronPointerOverForeground: '#bfbdbd',
-  chevronPressedBackground: '#ffb2f4',
-  chevronPressedForeground: '#912a2a',
-  headerForegroundPointerOver: '#27f238',
-  headerForegroundPressed: '#f227eb',
-  headerBorderBrush: '#f22727',
-  headerBorderPointerOverBrush: '#27f238',
-  headerBorderPressedBrush: '#f227eb',
-  contentBorderBrush: '#f227eb',
-  headerBorderThickness: 2,
-  chevronBorderBrush: '#f22727',
-  chevronBorderPointerOverBrush: '#27f238',
-  chevronBorderPressedBrush: '#f227eb',
-  chevronBorderThickness: 2,
-});
-
-const ExpanderMainTest: React.FunctionComponent = () => {
-  /** This test page has not yet been tested and does not currently build because
-   * the react-native-test-app does not yet support WinUI 2.6
-   * Filed issue in react-native-test-app: https://github.com/microsoft/react-native-test-app/issues/444
-   */
-
-  const [switchValue, setSwitchValue] = React.useState(false);
-  const [expanderText, setExpanderText] = React.useState('Initial state');
-  const onExpanding = () => {
-    setExpanderText('Expanding event changed title');
-  };
-  const onCollapsing = () => {
-    setExpanderText('Collapsing event changed title');
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Text>expanded=true, expandDirection=up, and event functionality</Text>
-      <Expander
-        collapsedHeight={50}
-        expandedHeight={100}
-        expanded={true}
-        expandDirection="up"
-        onCollapsing={onExpanding}
-        onExpanding={onCollapsing}
-      >
-        <Text>{expanderText}</Text>
-        <Text>Text in the content</Text>
-      </Expander>
-      <Text>enabled = false</Text>
-      <Expander collapsedHeight={50} expandedHeight={100} enabled={false}>
-        <Text>User cannot interact with this control</Text>
-        <Text>Content that you should not see</Text>
-      </Expander>
-      <Text>Multiple components in header and content</Text>
-      <Expander collapsedHeight={64} expandedHeight={150}>
-        <View style={{ flexDirection: 'row', width: 200, height: 62 }}>
-          <View style={{ alignSelf: 'center' }}>
-            <Text>Line one</Text>
-            <Text>Line two</Text>
-          </View>
-          <Switch style={{ marginLeft: 'auto', marginTop: 12 }} value={switchValue} onValueChange={setSwitchValue} />
-        </View>
-        <View>
-          <Text>First line of text</Text>
-          <Text>Second line of text</Text>
-        </View>
-      </Expander>
-      <Text>Customized Expander</Text>
-      <CustomizedExpander collapsedHeight={50} expandedHeight={100}>
-        <Text>Text in the header</Text>
-        <Text>Text in the content</Text>
-      </CustomizedExpander>
-    </Stack>
-  );
-};
-
-const BasicExpander: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <View style={commonStyles.root}>
-        <Expander collapsedHeight={50} expandedHeight={100}>
-          <Text>Text in the header</Text>
-          <Text>Text in the content</Text>
-        </Expander>
-      </View>
-    </Stack>
-  );
-};
-
-const expanderSections: TestSection[] = [
-  {
-    name: 'BaseExpander',
-    testID: EXPANDER_TESTPAGE,
-    component: BasicExpander,
-  },
-  {
-    name: 'Expander',
-    testID: EXPANDER_TESTPAGE,
-    component: ExpanderMainTest,
-  },
-];
-
-export const ExpanderTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Backlog',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Backlog',
-    macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
-  };
-
-  const description =
-    'Expander is a content control that displays components in the header and content. The control has an expanded and collapsed size. Expander is a native control implemented with WinUI 2.6 Expander.';
-
-  return <Test name="Expander Test" description={description} sections={expanderSections} status={status}></Test>;
-};

package/src/TestComponents/Expander/consts.ts

@@ -1,2 +0,0 @@
-export const HOMEPAGE_EXPANDER_BUTTON = 'Homepage_Expander_Button';
-export const EXPANDER_TESTPAGE = 'Expander_TestPage';

package/src/TestComponents/Expander/index.ts

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