@fluentui-react-native/tester 0.107.1 → 0.108.0

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,

package/src/TestComponents/Tabs/TabsTest.tsx

@@ -5,7 +5,7 @@ import { stackStyle } from '../Common/styles';
 import { TABS_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ETabsTest } from './TabsE2ETest';
-import TestSvg from './test.svg';
+import { svgProps } from '../Common/iconExamples';
 
 const TabsMainTest: React.FunctionComponent = () => {
   return (
@@ -45,10 +45,7 @@ const DisabledTabs: React.FunctionComponent = () => {
 
 const TabsCountIcon: React.FunctionComponent = () => {
   const svgExample = {
-    svgSource: {
-      src: TestSvg,
-      viewBox: '0 0 500 500',
-    },
+    svgSource: svgProps,
     width: 20,
     height: 20,
   };

package/src/TestComponents/TabsExperimental/TabsTest.tsx

@@ -6,9 +6,8 @@ import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs';
 import { stackStyle } from '../Common/styles';
 import { EXPERIMENTAL_TABS_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from './test.svg';
 import { E2ETestExperimentalTabs } from './TabsExperimentalE2ETest';
+import { svgProps } from '../Common/iconExamples';
 
 const TabsMainTest: React.FunctionComponent = () => {
   return (
@@ -47,11 +46,6 @@ const DisabledTabs: React.FunctionComponent = () => {
 };
 
 const TabsCountIcon: React.FunctionComponent = () => {
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   return (
     <View style={stackStyle}>
       <Tabs label="Tabs">

package/src/testPages.ts

@@ -5,6 +5,7 @@ import { BadgeTest, HOMEPAGE_BADGE_BUTTON } from './TestComponents/Badge';
 import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
 import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
 import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
+import { CornerRadiusTokensTest, HOMEPAGE_CORNERRADIUS_BUTTON } from './TestComponents/CornerRadius';
 import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
 import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu';
 import { NativeDatePickerTest, HOMEPAGE_NATIVEDATEPICKER_BUTTON } from './TestComponents/NativeDatePicker';
@@ -25,9 +26,10 @@ import { PressableTest, HOMEPAGE_PRESSABLE_BUTTON } from './TestComponents/Press
 import { RadioGroupTest, HOMEPAGE_RADIOGROUP_BUTTON } from './TestComponents/RadioGroup';
 import { RadioGroupExperimentalTest, HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON } from './TestComponents/RadioGroupExperimental';
 import { SeparatorTest, HOMEPAGE_SEPARATOR_BUTTON } from './TestComponents/Separator';
-import { SpacingTokensTest, HOMEPAGE_SPACING_BUTTON } from './TestComponents/Spacing';
 import { ShadowTest, HOMEPAGE_SHADOW_BUTTON } from './TestComponents/Shadow';
 import { ShimmerTest, HOMEPAGE_SHIMMER_BUTTON } from './TestComponents/Shimmer';
+import { SpacingTokensTest, HOMEPAGE_SPACING_BUTTON } from './TestComponents/Spacing';
+import { StrokeWidthTest, HOMEPAGE_STROKEWIDTH_BUTTON } from './TestComponents/StrokeWidth';
 import { SvgTest, HOMEPAGE_SVG_BUTTON } from './TestComponents/Svg';
 import { SwitchTest, HOMEPAGE_SWITCH_BUTTON } from './TestComponents/Switch';
 import { TabsTest, HOMEPAGE_TABS_BUTTON } from './TestComponents/Tabs';
@@ -43,13 +45,13 @@ export const tests: TestDescription[] = [
     name: 'ActivityIndicator',
     component: ActivityIndicatorTest,
     testPage: HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Avatar',
     component: AvatarTest,
     testPage: HOMEPAGE_AVATAR_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Avatar (Native)',
@@ -61,13 +63,13 @@ export const tests: TestDescription[] = [
     name: 'Badge',
     component: BadgeTest,
     testPage: HOMEPAGE_BADGE_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Button',
     component: ButtonTest,
     testPage: HOMEPAGE_BUTTON_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Callout',
@@ -79,7 +81,7 @@ export const tests: TestDescription[] = [
     name: 'Checkbox',
     component: CheckboxTest,
     testPage: HOMEPAGE_CHECKBOX_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Checkbox (Experimental)',
@@ -93,6 +95,12 @@ export const tests: TestDescription[] = [
     testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON,
     platforms: ['android', 'macos', 'win32'],
   },
+  {
+    name: 'Corner Radius Tokens',
+    component: CornerRadiusTokensTest,
+    testPage: HOMEPAGE_CORNERRADIUS_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
   {
     name: 'Date Picker (Native)',
     component: NativeDatePickerTest,
@@ -140,7 +148,7 @@ export const tests: TestDescription[] = [
     name: 'Link',
     component: LinkTest,
     testPage: HOMEPAGE_LINK_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Link (Experimental)',
@@ -176,19 +184,19 @@ export const tests: TestDescription[] = [
     name: 'Persona',
     component: PersonaTest,
     testPage: HOMEPAGE_PERSONA_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'PersonaCoin',
     component: PersonaCoinTest,
     testPage: HOMEPAGE_PERSONACOIN_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Pressable',
     component: PressableTest,
     testPage: HOMEPAGE_PRESSABLE_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'RadioGroup',
@@ -202,17 +210,11 @@ export const tests: TestDescription[] = [
     testPage: HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON,
     platforms: ['macos', 'win32'],
   },
-  {
-    name: 'Spacing Tokens',
-    component: SpacingTokensTest,
-    testPage: HOMEPAGE_SPACING_BUTTON,
-    platforms: ['ios'],
-  },
   {
     name: 'Separator',
     component: SeparatorTest,
     testPage: HOMEPAGE_SEPARATOR_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Shadow',
@@ -226,6 +228,18 @@ export const tests: TestDescription[] = [
     testPage: HOMEPAGE_SHIMMER_BUTTON,
     platforms: ['android', 'ios', 'macos', 'win32'],
   },
+  {
+    name: 'Spacing Tokens',
+    component: SpacingTokensTest,
+    testPage: HOMEPAGE_SPACING_BUTTON,
+    platforms: ['ios'],
+  },
+  {
+    name: 'Stroke Width Tokens',
+    component: StrokeWidthTest,
+    testPage: HOMEPAGE_STROKEWIDTH_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
   {
     name: 'Svg',
     component: SvgTest,
@@ -254,24 +268,24 @@ export const tests: TestDescription[] = [
     name: 'Text',
     component: TextTest,
     testPage: HOMEPAGE_TEXT_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Text (Experimental)',
     component: TextExperimentalTest,
     testPage: HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Theme',
     component: ThemeTest,
     testPage: HOMEPAGE_THEME_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
   {
     name: 'Tokens',
     component: TokenTest,
     testPage: HOMEPAGE_TOKEN_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
 ];

package/lib/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=RadioGroupExperimentalTabsPageObject.win.d.ts.map

package/lib/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroupExperimentalTabsPageObject.win.d.ts","sourceRoot":"","sources":["../../../../src/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.ts"],"names":[],"mappings":""}

package/lib/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.js

@@ -1,3 +0,0 @@
-"use strict";
-// TODO
-//# sourceMappingURL=RadioGroupExperimentalTabsPageObject.win.js.map

package/lib/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroupExperimentalTabsPageObject.win.js","sourceRoot":"","sources":["../../../../src/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.ts"],"names":[],"mappings":";AAAA,OAAO"}

package/lib-commonjs/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=RadioGroupExperimentalTabsPageObject.win.d.ts.map

package/lib-commonjs/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroupExperimentalTabsPageObject.win.d.ts","sourceRoot":"","sources":["../../../../src/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.ts"],"names":[],"mappings":""}

package/lib-commonjs/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.js

@@ -1,3 +0,0 @@
-"use strict";
-// TODO
-//# sourceMappingURL=RadioGroupExperimentalTabsPageObject.win.js.map

package/lib-commonjs/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroupExperimentalTabsPageObject.win.js","sourceRoot":"","sources":["../../../../src/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.ts"],"names":[],"mappings":";AAAA,OAAO"}

package/src/E2E/RadioGroupExperimental/pages/RadioGroupExperimentalTabsPageObject.win.ts

@@ -1 +0,0 @@
-// TODO

package/src/TestComponents/Badge/oof.svg

@@ -1,3 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 0C6.26801 0 0 6.26801 0 14C0 21.732 6.26801 28 14 28C21.732 28 28 21.732 28 14C28 6.26801 21.732 0 14 0ZM2.80129 14C2.80129 7.81512 7.81512 2.80129 14 2.80129C20.1849 2.80129 25.1987 7.81512 25.1987 14C25.1987 20.1849 20.1849 25.1987 14 25.1987C7.81512 25.1987 2.80129 20.1849 2.80129 14ZM19.8991 9.51445C20.4461 10.0614 20.4461 10.9483 19.8991 11.4953L13.5962 17.7982C13.0492 18.3452 12.1624 18.3452 11.6154 17.7982L8.81412 14.9969C8.26714 14.4499 8.26714 13.563 8.81412 13.0161C9.36111 12.4691 10.2479 12.4691 10.7949 13.0161L12.6058 14.827L17.9183 9.51445C18.4653 8.96746 19.3522 8.96746 19.8991 9.51445Z" fill="#C239B3"/>
-</svg>

package/src/TestComponents/Button/test.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="accessible-icon" class="svg-inline--fa fa-accessible-icon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"></path></svg>

package/src/TestComponents/Icon/assets/test.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="accessible-icon" class="svg-inline--fa fa-accessible-icon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"></path></svg>

package/src/TestComponents/Tabs/test.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="accessible-icon" class="svg-inline--fa fa-accessible-icon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"></path></svg>

package/src/TestComponents/TabsExperimental/test.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="accessible-icon" class="svg-inline--fa fa-accessible-icon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"></path></svg>