@fluentui-react-native/tester 0.107.2 → 0.108.0

package/src/TestComponents/RadioGroupExperimental/CustomizedRadioGroup.tsx

@@ -0,0 +1,373 @@
+import * as React from 'react';
+import { View, TextInput, Text, StyleSheet } from 'react-native';
+import { RadioGroup, Radio, RadioGroupTokens, RadioTokens } from '@fluentui-react-native/experimental-radio-group';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+const styles = StyleSheet.create({
+  tokensRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  tokensColumn: {
+    flexDirection: 'column',
+    margin: 10,
+  },
+});
+
+export const CustomizedRadioGroup: React.FunctionComponent = () => {
+  // RadioGroup
+  const [groupColor, setGroupColor] = React.useState<string>('black');
+  const [requiredColor, setRequiredColor] = React.useState<string>('red');
+  const [requiredPadding, setRequiredPadding] = React.useState<number>(2);
+
+  // Radio
+  const [borderColor, setBorderColor] = React.useState<string>('white');
+  const [borderWidth, setBorderWidth] = React.useState<number>(1);
+  const [borderRadius, setBorderRadius] = React.useState<number>(1);
+  const [radioBorderWidth, setRadioBorderWidth] = React.useState<number>(1);
+  const [radioVisibility, setRadioVisibility] = React.useState<number>(1);
+  const [radioBorder, setRadioBorder] = React.useState<string>('black');
+  const [radioSize, setRadioSize] = React.useState<number>(20);
+  const [radioInnerCircleSize, setRadioInnerCircleSize] = React.useState<number>(10);
+  const [radioFill, setRadioFill] = React.useState<string>('blue');
+  const [color, setColor] = React.useState<string>('black');
+  const [marginTop, setMarginTop] = React.useState<number>(6);
+  const [marginRight, setMarginRight] = React.useState<number>(6);
+  const [marginBottom, setMarginBottom] = React.useState<number>(6);
+  const [marginLeft, setMarginLeft] = React.useState<number>(4);
+  const [labelMarginTop, setLabelMarginTop] = React.useState<number>(5);
+  const [labelMarginRight, setLabelMarginRight] = React.useState<number>(2);
+  const [labelMarginLeft, setLabelMarginLeft] = React.useState<number>(0);
+  const [subtextMarginTop, setSubtextMarginTop] = React.useState<number>(2);
+  const [subtextMarginBottom, setSubtextMarginBottom] = React.useState<number>(2);
+
+  const CustomRadioGroup = React.useMemo(() => {
+    const tokens: RadioGroupTokens = {
+      color: groupColor,
+      requiredColor,
+      requiredPadding,
+      disabled: {
+        color: groupColor,
+      },
+    };
+    return RadioGroup.customize(tokens);
+  }, [groupColor, requiredColor, requiredPadding]);
+
+  const CustomRadio = React.useMemo(() => {
+    const tokens: RadioTokens = {
+      borderColor,
+      borderWidth,
+      borderRadius,
+      radioBorderWidth,
+      radioVisibility,
+      radioBorder,
+      radioSize,
+      radioInnerCircleSize,
+      color,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      labelMarginTop,
+      labelMarginRight,
+      labelMarginLeft,
+      subtextMarginTop,
+      subtextMarginBottom,
+
+      labelPositionBelow: {
+        marginLeft: marginLeft,
+      },
+
+      disabled: {
+        radioBorder,
+        color,
+        radioVisibility,
+      },
+      hovered: {
+        radioBorder,
+        color,
+        selected: {
+          radioBorder,
+          radioFill,
+          color,
+          radioVisibility,
+        },
+      },
+      pressed: {
+        radioBorder,
+        color,
+        selected: {
+          radioBorder,
+          radioFill,
+          color,
+          radioVisibility,
+        },
+      },
+      focused: {
+        borderColor,
+        selected: {
+          radioVisibility,
+        },
+      },
+      selected: {
+        radioBorder,
+        radioFill,
+        color,
+        radioVisibility,
+        disabled: {
+          radioFill,
+        },
+      },
+    };
+    return Radio.customize(tokens);
+  }, [
+    borderColor,
+    borderWidth,
+    borderRadius,
+    radioBorderWidth,
+    radioVisibility,
+    radioBorder,
+    radioSize,
+    radioInnerCircleSize,
+    radioFill,
+    color,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    labelMarginTop,
+    labelMarginRight,
+    labelMarginLeft,
+    subtextMarginTop,
+    subtextMarginBottom,
+  ]);
+
+  return (
+    <View style={styles.tokensColumn}>
+      <View style={styles.tokensRow}>
+        <View>
+          <Text>RadioGroup Tokens</Text>
+          <TextInput
+            accessibilityLabel="RadioGroup color"
+            style={commonStyles.textBox}
+            placeholder="color"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setGroupColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="RadioGroup required color"
+            style={commonStyles.textBox}
+            placeholder="requiredColor"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRequiredColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="RadioGroup required padding"
+            style={commonStyles.textBox}
+            placeholder="requiredPadding"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRequiredPadding(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+      </View>
+      <View style={styles.tokensRow}>
+        <View>
+          <Text>Radio Border Tokens</Text>
+          <TextInput
+            accessibilityLabel="Radio border color"
+            style={commonStyles.textBox}
+            placeholder="borderColor"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setBorderColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio border width"
+            style={commonStyles.textBox}
+            placeholder="borderWidth"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setBorderWidth(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio border radius"
+            style={commonStyles.textBox}
+            placeholder="borderRadius"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setBorderRadius(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+        <View>
+          <Text>Radio Button Tokens</Text>
+          <TextInput
+            accessibilityLabel="Radio button border width"
+            style={commonStyles.textBox}
+            placeholder="radioBorderWidth"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioBorderWidth(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button visibility"
+            style={commonStyles.textBox}
+            placeholder="radioVisibility"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioVisibility(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button border"
+            style={commonStyles.textBox}
+            placeholder="radioBorder"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioBorder(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button size"
+            style={commonStyles.textBox}
+            placeholder="radioSize"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioSize(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button inner circle size"
+            style={commonStyles.textBox}
+            placeholder="radioInnerCircleSize"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioInnerCircleSize(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button fill"
+            style={commonStyles.textBox}
+            placeholder="radioFill"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setRadioFill(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button margin top"
+            style={commonStyles.textBox}
+            placeholder="marginTop"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setMarginTop(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button margin right"
+            style={commonStyles.textBox}
+            placeholder="marginRight"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setMarginRight(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button margin bottom"
+            style={commonStyles.textBox}
+            placeholder="marginBottom"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setMarginBottom(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio button margin left"
+            style={commonStyles.textBox}
+            placeholder="marginLeft"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setMarginLeft(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+        <View>
+          <Text>Radio Label Tokens</Text>
+          <TextInput
+            accessibilityLabel="Radio label color"
+            style={commonStyles.textBox}
+            placeholder="color"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio label margin top"
+            style={commonStyles.textBox}
+            placeholder="marginTop"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLabelMarginTop(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio label margin right"
+            style={commonStyles.textBox}
+            placeholder="marginRight"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLabelMarginRight(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio label margin left"
+            style={commonStyles.textBox}
+            placeholder="marginLeft"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLabelMarginLeft(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+        <View>
+          <Text>Radio Subtext Tokens</Text>
+          <TextInput
+            accessibilityLabel="Radio subtext margin top"
+            style={commonStyles.textBox}
+            placeholder="marginTop"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setSubtextMarginTop(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Radio subtext margin bottom"
+            style={commonStyles.textBox}
+            placeholder="marginBottom"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setSubtextMarginBottom(parseInt(e.nativeEvent.text.toString()));
+            }}
+          />
+        </View>
+      </View>
+
+      <CustomRadioGroup required label="Custom RadioGroup" accessibilityLabel="Custom Switch">
+        <CustomRadio label="Apple" subtext="Fruit" value="Apple"></CustomRadio>
+        <CustomRadio label="Pear" value="Pear"></CustomRadio>
+        <CustomRadio label="Banana" value="Banana"></CustomRadio>
+        <CustomRadio label="Orange" value="Orange"></CustomRadio>
+      </CustomRadioGroup>
+    </View>
+  );
+};

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalE2ETest.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group';
+import {
+  RADIOGROUP_TEST_COMPONENT,
+  RADIOGROUP_NO_A11Y_LABEL_COMPONENT,
+  RADIOGROUP_TEST_COMPONENT_LABEL,
+  RADIOGROUP_ACCESSIBILITY_LABEL,
+  FIRST_RADIO,
+  SECOND_RADIO,
+  THIRD_RADIO,
+  FOURTH_RADIO,
+  FIFTH_RADIO,
+  FIRST_RADIO_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_LABEL,
+} from './consts';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+
+export const E2ERadioGroupExperimentalTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <RadioGroup
+          label="RadioGroup for E2E Testing - Ally Label Set"
+          accessibilityLabel={RADIOGROUP_ACCESSIBILITY_LABEL}
+          testID={RADIOGROUP_TEST_COMPONENT}
+        >
+          <Radio label="Option A" value="A" testID={FIRST_RADIO} accessibilityLabel={FIRST_RADIO_ACCESSIBILITY_LABEL} />
+          <Radio label={SECOND_RADIO_LABEL} value="B" testID={SECOND_RADIO} />
+          <Radio label="Option C (disabled)" value="C" disabled={true} testID={THIRD_RADIO} />
+          <Radio label="Option D" value="C" testID={FOURTH_RADIO} />
+        </RadioGroup>
+        <RadioGroup label={RADIOGROUP_TEST_COMPONENT_LABEL} testID={RADIOGROUP_NO_A11Y_LABEL_COMPONENT}>
+          <Radio label="Option W" value="W" testID={FIFTH_RADIO} />
+          <Radio label="Option X" value="X" />
+          <Radio label="Option Y (disabled)" value="C" disabled={true} />
+          <Radio label="Option Z" value="Z" />
+        </RadioGroup>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalTest.tsx

@@ -5,6 +5,8 @@ import { RequiredRadioGroup } from './RequiredRadioGroup';
 import { DisabledRadioGroup } from './DisabledRadioGroup';
 import { SubtextRadioGroup } from './SubtextRadioGroup';
 import { HorizontalRadioGroup } from './HorizontalRadioGroup';
+import { CustomizedRadioGroup } from './CustomizedRadioGroup';
+import { E2ERadioGroupExperimentalTest } from './RadioGroupExperimentalE2ETest';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 const radioGroupExperimentalSections: TestSection[] = [
@@ -33,6 +35,16 @@ const radioGroupExperimentalSections: TestSection[] = [
     testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
     component: HorizontalRadioGroup,
   },
+  {
+    name: 'Customized RadioGroup Usage',
+    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
+    component: CustomizedRadioGroup,
+  },
+  {
+    name: 'RadioGroup for E2E Testing',
+    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
+    component: E2ERadioGroupExperimentalTest,
+  },
 ];
 
 export const RadioGroupExperimentalTest: React.FunctionComponent = () => {

package/src/TestComponents/RadioGroupExperimental/SubtextRadioGroup.tsx

@@ -12,9 +12,9 @@ export const SubtextRadioGroup: React.FunctionComponent = () => {
     <View>
       <RadioGroup label="Select a fruit:" defaultValue="X" onChange={onChange}>
         <Radio label="Apple" subtext="This is a type of fruit" value="W" />
-        <Radio label="Pear" subtext="This is another type of fruit" value="X" />
-        <Radio label="Banana" value="C" />
-        <Radio label="Orange" value="Z" />
+        <Radio label="Pear" subtext="This is a type of fruit" value="X" />
+        <Radio label="Banana" subtext="This is a type of fruit" value="C" />
+        <Radio label="Tomato" subtext="This is a type of fruit" value="Z" />
       </RadioGroup>
     </View>
   );

package/src/TestComponents/RadioGroupExperimental/consts.ts

@@ -1,2 +1,33 @@
 export const HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON = 'Homepage_RadioGroupExperimental_Button';
 export const RADIO_GROUP_EXPERIMENTAL_TESTPAGE = 'RadioGroupExperimental_TestPage';
+
+/********************************************************************/
+/********************* E2E Testing RadioGroup 1 *********************/
+/********************************************************************/
+export const RADIOGROUP_TEST_COMPONENT = 'RadioGroupExperimental_Test_Component';
+export const RADIOGROUP_ACCESSIBILITY_LABEL = 'E2E testing RadioGroup accessibility label';
+
+/* E2E Testing RadioButton 1 (1 of 4) */
+export const FIRST_RADIO = 'First_Radio';
+export const FIRST_RADIO_ACCESSIBILITY_LABEL = 'E2E testing Radio accessibility label';
+
+/* E2E Testing RadioButton 1 (2 of 4) No accessibilityLabel */
+export const SECOND_RADIO = 'Second_Radio';
+export const SECOND_RADIO_LABEL = 'Test RadioGroup2 - No Accessibility Label';
+
+/* E2E Testing RadioButton 1 (3 of 4) */
+export const THIRD_RADIO = 'Third_Radio';
+
+/* E2E Testing RadioButton 1 (4 of 4) */
+export const FOURTH_RADIO = 'Fourth_Radio';
+
+/* E2E Testing RadioButton 2 (5 of 8) */
+export const FIFTH_RADIO = 'Fifth_Radio';
+
+/********************************************************************/
+/********************* E2E Testing RadioGroup 2 *********************/
+/********************************************************************/
+export const RADIOGROUP_NO_A11Y_LABEL_COMPONENT = 'RadioGroup_No_A11y_label_Component';
+export const RADIOGROUP_TEST_COMPONENT_LABEL = 'Test RadioGroupExperimental2 - No Accessibility Label'; // A component on each specific test page
+
+export const RADIOGROUP_ON_PRESS = 'RadioGroup_On_Press'; // For testing the press functionality on a button

package/src/TestComponents/Shadow/ShadowButtonTestSection.tsx

@@ -4,6 +4,7 @@ import { FAB, Text } from '@fluentui/react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import { shadowTestPageStyles } from './ShadowTestPageStyles';
 import { useFluentTheme } from '@fluentui-react-native/framework';
+import { iconProps } from '../Common/iconExamples';
 
 const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
 const CustomFABShadow64 = FAB.customize({
@@ -16,9 +17,15 @@ export const ShadowButtonTestSection: React.FunctionComponent = () => {
   if (Platform.OS === 'ios') {
     return (
       <View style={shadowTestPageStyles(t).backgroundColor}>
-        <FAB style={commonTestStyles.vmargin}>FAB with default shadow</FAB>
-        <CustomFABShadow64 style={commonTestStyles.vmargin}>Custom FAB with shadow64</CustomFABShadow64>
-        <CustomFABNoShadow style={commonTestStyles.vmargin}>Custom FAB with no shadow</CustomFABNoShadow>
+        <FAB icon={iconProps} style={commonTestStyles.vmargin}>
+          FAB with default shadow
+        </FAB>
+        <CustomFABShadow64 icon={iconProps} style={commonTestStyles.vmargin}>
+          Custom FAB with shadow64
+        </CustomFABShadow64>
+        <CustomFABNoShadow icon={iconProps} style={commonTestStyles.vmargin}>
+          Custom FAB with no shadow
+        </CustomFABNoShadow>
       </View>
     );
   } else {

package/src/TestComponents/Shadow/ShadowTest.tsx

@@ -13,12 +13,10 @@ const shadowSections: TestSection[] = [
   },
   {
     name: 'Shadows on Button Examples',
-    testID: SHADOW_TESTPAGE,
     component: ShadowButtonTestSection,
   },
   {
     name: 'Shadows with Different Props Test',
-    testID: SHADOW_TESTPAGE,
     component: ShadowWithDifferentPropsTestSection,
   },
 ];

package/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { STROKEWIDTH_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { View } from 'react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { Text } from '@fluentui/react-native';
+import { Theme, useFluentTheme } from '@fluentui-react-native/framework';
+import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  const isLightMode = getCurrentAppearance(t.host.appearance, 'light') === 'light';
+  return {
+    root: {
+      paddingBottom: 16,
+    },
+    exampleStrokeBackground: {
+      height: 100,
+      backgroundColor: isLightMode ? globalTokens.color.grey80 : globalTokens.color.grey10,
+      display: 'flex',
+      justifyContent: 'center',
+      marginTop: 8,
+    },
+  };
+});
+
+interface StrokeWidthTestComponentProps {
+  name: string;
+  strokeWidth: number;
+}
+
+const StrokeWidthTestComponent: React.FunctionComponent<StrokeWidthTestComponentProps> = (props: StrokeWidthTestComponentProps) => {
+  const theme = useFluentTheme();
+  const styles = getThemedStyles(theme);
+  const isLightMode = getCurrentAppearance(theme.host.appearance, 'light') === 'light';
+  const exampleStrokeStyle = React.useMemo(
+    () => ({
+      height: props.strokeWidth,
+      backgroundColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
+    }),
+    [props.strokeWidth],
+  );
+
+  return (
+    <View style={styles.root}>
+      <Text variant="bodySemibold">{props.name + ': ' + props.strokeWidth + 'pt'}</Text>
+      <View style={styles.exampleStrokeBackground}>
+        <View style={exampleStrokeStyle} />
+      </View>
+    </View>
+  );
+};
+
+const StrokeWidthTestRamp: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <StrokeWidthTestComponent name="widthNone" strokeWidth={globalTokens.stroke.widthNone}></StrokeWidthTestComponent>
+        <StrokeWidthTestComponent name="width05" strokeWidth={globalTokens.stroke.width05}></StrokeWidthTestComponent>
+        <StrokeWidthTestComponent name="width10" strokeWidth={globalTokens.stroke.width10}></StrokeWidthTestComponent>
+        <StrokeWidthTestComponent name="width15" strokeWidth={globalTokens.stroke.width15}></StrokeWidthTestComponent>
+        <StrokeWidthTestComponent name="width20" strokeWidth={globalTokens.stroke.width20}></StrokeWidthTestComponent>
+        <StrokeWidthTestComponent name="width30" strokeWidth={globalTokens.stroke.width30}></StrokeWidthTestComponent>
+        <StrokeWidthTestComponent name="width40" strokeWidth={globalTokens.stroke.width40}></StrokeWidthTestComponent>
+        <StrokeWidthTestComponent name="width60" strokeWidth={globalTokens.stroke.width60}></StrokeWidthTestComponent>
+      </Stack>
+    </View>
+  );
+};
+
+const strokeWidthSections: TestSection[] = [
+  {
+    name: 'Basic Usage',
+    testID: STROKEWIDTH_TESTPAGE,
+    component: StrokeWidthTestRamp,
+  },
+];
+
+export const StrokeWidthTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Experimental',
+    androidStatus: 'Experimental',
+  };
+
+  const description = 'This showcases the different global stroke width tokens available in Fluent UI.';
+
+  return <Test name="Stroke Width Tokens Test" description={description} sections={strokeWidthSections} status={status} />;
+};

package/src/TestComponents/StrokeWidth/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_STROKEWIDTH_BUTTON = 'Homepage_StrokeWidth_Button';
+export const STROKEWIDTH_TESTPAGE = 'StrokeWidth_TestPage';

package/src/TestComponents/StrokeWidth/index.ts

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

package/src/TestComponents/Svg/SvgTest.tsx

@@ -5,6 +5,11 @@ import { Circle, Defs, G, Line, Path, Polygon, LinearGradient, RadialGradient, R
 import TestSvg from './Assets/accessible-icon-brands.svg';
 import { SVG_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer';
+import { faSquareCheck } from '@fortawesome/free-solid-svg-icons/faSquareCheck';
+import { faMugHot } from '@fortawesome/free-solid-svg-icons/faMugHot';
+import { faMountainCity } from '@fortawesome/free-solid-svg-icons/faMountainCity';
 
 const styles = StyleSheet.create({
   svg: {
@@ -13,6 +18,19 @@ const styles = StyleSheet.create({
   },
 });
 
+const FontAwesomeTest: React.FunctionComponent = () => {
+  return (
+    <React.Fragment>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <FontAwesomeIcon icon={faMugSaucer} color={'blue'} size={64} />
+        <FontAwesomeIcon icon={faSquareCheck} color={'blue'} size={64} />
+        <FontAwesomeIcon icon={faMugHot} color={'orange'} size={64} />
+        <FontAwesomeIcon icon={faMountainCity} color={'orange'} size={64} />
+      </View>
+    </React.Fragment>
+  );
+};
+
 const RectTest: React.FunctionComponent = () => {
   const [useColorA, setUseColorA] = React.useState(false);
   const colorA = 'red';
@@ -152,6 +170,10 @@ const svgSections: TestSection[] = [
     testID: SVG_TESTPAGE,
     component: RectTest,
   },
+  {
+    name: 'FontAwesome Test',
+    component: FontAwesomeTest,
+  },
   {
     name: 'Circle',
     component: CircleTest,