@fluentui-react-native/tester 0.55.2 → 0.57.0

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -16,16 +16,23 @@ const basicCheckbox: React.FunctionComponent = () => {
     <View>
       <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
       <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <Checkbox
-        label="Checked checkbox (uncontrolled)"
-        onChange={onChangeUncontrolled}
-        defaultChecked={true}
-        accessibilityLabel="Hello there"
-      />
-      <Checkbox label="Disabled checkbox" onChange={onChangeUncontrolled} defaultChecked={false} disabled={true} />
-      <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
-      <Checkbox label="Checkbox will display a tooltip" onChange={onChangeUncontrolled} tooltip="This is a tooltip" />
-      <Checkbox label="A circular checkbox" circular onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
+      <Checkbox label="Disabled checkbox" disabled />
+      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
+      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
+      <Checkbox label="A circular checkbox" shape="circular" />
+      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
+    </View>
+  );
+};
+
+const sizeCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox tooltip="Medium checkbox" size="medium" />
+      <Checkbox tooltip="Large checkbox" size="large" />
+      <Checkbox label="Medium checkbox" size="medium" />
+      <Checkbox label="Large checkbox" size="large" />
     </View>
   );
 };
@@ -54,29 +61,29 @@ const otherCheckbox: React.FunctionComponent = () => {
   );
 };
 
-const tokenCheckbox: React.FunctionComponent = () => {
-  const CircleColorCheckbox = Checkbox.customize({
-    checkboxBackgroundColor: 'white',
-    checked: {
-      checkboxBackgroundColor: 'green',
-      checkboxBorderColor: 'green',
-      checkmarkColor: 'white',
-    },
-    focused: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
-    hovered: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
-    pressed: { checkboxBackgroundColor: 'menuItemBackgroundPressed' },
-  });
-
-  const HoverCheckbox = Checkbox.customize({
-    checked: {
-      checkboxBackgroundColor: 'black',
-      checkmarkColor: 'white',
-    },
-    hovered: {
-      checkmarkOpacity: 1,
-    },
-  });
+const CircleColorCheckbox = Checkbox.customize({
+  checkboxBackgroundColor: 'white',
+  checked: {
+    checkboxBackgroundColor: 'green',
+    checkboxBorderColor: 'green',
+    checkmarkColor: 'white',
+  },
+  focused: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
+  hovered: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
+  pressed: { checkboxBackgroundColor: 'menuItemBackgroundPressed' },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  checked: {
+    checkboxBackgroundColor: 'black',
+    checkmarkColor: 'white',
+  },
+  hovered: {
+    checkmarkOpacity: 1,
+  },
+});
 
+const tokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
 
@@ -99,7 +106,12 @@ const tokenCheckbox: React.FunctionComponent = () => {
   return (
     <View>
       <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <CircleColorCheckbox label="A circular token-customized checkbox" circular onChange={onChangeUncontrolled} defaultChecked={true} />
+      <CircleColorCheckbox
+        label="A circular token-customized checkbox"
+        shape="circular"
+        onChange={onChangeUncontrolled}
+        defaultChecked={true}
+      />
       <BlueCheckbox
         label="Token-customized checkbox. Customizable below."
         onChange={onChangeUncontrolled}
@@ -134,6 +146,10 @@ const checkboxSections: TestSection[] = [
     testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
     component: basicCheckbox,
   },
+  {
+    name: 'Size Checkboxes',
+    component: sizeCheckbox,
+  },
   {
     name: 'Other Implementations',
     component: otherCheckbox,

package/src/FluentTester/TestComponents/CheckboxExperimental/E2ECheckboxExperimentalTest.tsx

@@ -7,10 +7,21 @@ import {
   EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL,
   EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT,
   EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL,
+  EXPERIMENTAL_CHECKBOX_ON_PRESS,
 } from './consts';
 import { Stack } from '@fluentui-react-native/stack';
+import { Text } from '@fluentui/react-native';
 
 export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
+  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
+
+  const onClick = React.useCallback(
+    (checked) => {
+      setCheckboxPressed(checked);
+    },
+    [setCheckboxPressed],
+  );
+
   return (
     <View>
       <Stack style={stackStyle}>
@@ -19,8 +30,10 @@ export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
           disabled={false}
           label="Testing accessibilityLabel"
           testID={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT}
+          onChange={onClick}
         />
         <Checkbox label={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL} testID={EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT} />
+        {checkboxPressed ? <Text testID={EXPERIMENTAL_CHECKBOX_ON_PRESS}>Checkbox Selected</Text> : null}
       </Stack>
     </View>
   );

package/src/FluentTester/TestComponents/CheckboxExperimental/consts.ts

@@ -8,3 +8,5 @@ export const EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL = 'E2E testing Experiment
 /* Test Experimental Checkbox 2 */
 export const EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT = 'Experimental Checkbox_No_A11y_label_Component';
 export const EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL = 'Test Experimental Checkbox2 - No Accessibility Label'; // A component on each specific test page
+
+export const EXPERIMENTAL_CHECKBOX_ON_PRESS = 'Experimental_Checkbox_On_Press'; // For testing the press functionality on a Checkbox

package/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -232,6 +232,9 @@ const nestedContextualMenu: React.FunctionComponent = () => {
   );
 };
 
+// custom text
+const IndigoHeroBold = FURNText.customize({ tokens: { variant: 'heroStandard', fontWeight: '100', color: '#4b0082' } });
+
 const IconContextualMenu: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
 
@@ -258,9 +261,6 @@ const IconContextualMenu: React.FunctionComponent = () => {
     setIsContextualMenuVisible(false);
   }, [setShowContextualMenu]);
 
-  // custom text
-  const IndigoHeroBold = FURNText.customize({ tokens: { variant: 'heroStandard', fontWeight: '100', color: '#4b0082' } });
-
   return (
     <View>
       <View style={{ flexDirection: 'row', paddingVertical: 5 }}>

package/src/FluentTester/TestComponents/Expander/ExpanderTest.tsx

@@ -7,33 +7,34 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { EXPANDER_TESTPAGE } from './consts';
 import { View, Switch } from 'react-native';
 
+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 expanderTest: 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 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 [switchValue, setSwitchValue] = React.useState(false);
   const [expanderText, setExpanderText] = React.useState('Initial state');

package/src/FluentTester/TestComponents/MenuButton/CustomizedMenuButtonTest.tsx

@@ -4,18 +4,19 @@ import { MenuButton } from '@fluentui/react-native';
 import { menuItems } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonTestStyles';
 
+const StyledMenuButton = MenuButton.customize({
+  button: {
+    borderRadius: 4,
+    backgroundColor: '#0095ff',
+    borderWidth: 0,
+    color: '#fff',
+    variant: 'heroSemibold',
+    fontFamily: 'Georgia',
+  },
+  contextualMenu: { backgroundColor: '#a9dbff' },
+});
+
 export const CustomizedMenuButton: React.FunctionComponent = () => {
-  const StyledMenuButton = MenuButton.customize({
-    button: {
-      borderRadius: 4,
-      backgroundColor: '#0095ff',
-      borderWidth: 0,
-      color: '#fff',
-      variant: 'heroSemibold',
-      fontFamily: 'Georgia',
-    },
-    contextualMenu: { backgroundColor: '#a9dbff' },
-  });
   return (
     <View>
       <View style={viewWrapperStyle}>

package/src/FluentTester/TestComponents/MenuButtonExperimental/CustomizedMenuButtonTest.tsx

@@ -4,18 +4,19 @@ import { MenuButton } from '@fluentui/react-native';
 import { menuItems } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonTestStyles';
 
+const StyledMenuButton = MenuButton.customize({
+  button: {
+    borderRadius: 4,
+    backgroundColor: '#0095ff',
+    borderWidth: 0,
+    color: '#fff',
+    variant: 'heroSemibold',
+    fontFamily: 'Georgia',
+  },
+  contextualMenu: { backgroundColor: '#a9dbff' },
+});
+
 export const CustomizedMenuButton: React.FunctionComponent = () => {
-  const StyledMenuButton = MenuButton.customize({
-    button: {
-      borderRadius: 4,
-      backgroundColor: '#0095ff',
-      borderWidth: 0,
-      color: '#fff',
-      variant: 'heroSemibold',
-      fontFamily: 'Georgia',
-    },
-    contextualMenu: { backgroundColor: '#a9dbff' },
-  });
   return (
     <View>
       <View style={viewWrapperStyle}>

package/src/FluentTester/TestComponents/Persona/CustomizeUsage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Switch, TextInput, TextStyle } from 'react-native';
-import { IPersonaTokens, Persona } from '@fluentui/react-native';
+import { Persona } from '@fluentui/react-native';
 import { michaelImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
@@ -19,38 +19,25 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const [horizontalGap, setHorizontalGap] = React.useState<number>();
   const [verticalGap, setVerticalGap] = React.useState<number>();
 
-  const tokens: Partial<IPersonaTokens> = {};
-  if (coinColor) {
-    tokens.coinBackgroundColor = coinColor;
-  }
-  if (textColor) {
-    tokens.color = textColor;
-  }
-  if (textSize) {
-    tokens.textFont = { fontSize: textSize };
-  }
-  if (secondarySize) {
-    tokens.secondaryFont = { fontSize: secondarySize };
-  }
-  if (tertiarySize) {
-    tokens.tertiaryFont = { fontSize: tertiarySize };
-  }
-  if (optionalSize) {
-    tokens.optionalFont = { fontSize: optionalSize };
-  }
-  if (horizontalGap !== undefined) {
-    tokens.horizontalGap = horizontalGap;
-  }
-  if (verticalGap !== undefined) {
-    tokens.verticalGap = verticalGap;
-  }
-
   const theme = useTheme();
   const textBoxBorderStyle: TextStyle = {
     borderColor: theme.colors.inputBorder,
   };
 
-  const CustomizedPersona = Persona.customize({ tokens });
+  const CustomizedPersona = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      textFont: { fontSize: textSize },
+      secondaryFont: { fontSize: secondarySize },
+      tertiaryFont: { fontSize: tertiarySize },
+      optionalFont: { fontSize: optionalSize },
+      horizontalGap: horizontalGap,
+      verticalGap: verticalGap,
+    };
+    return Persona.customize({ tokens });
+  }, [coinColor, textColor, textSize, secondarySize, tertiarySize, optionalSize, horizontalGap, verticalGap]);
+
   return (
     <View style={commonStyles.root}>
       {/* settings */}

package/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PersonaCoin, IPersonaCoinTokens } from '@fluentui/react-native';
+import { PersonaCoin } from '@fluentui/react-native';
 import { Switch, View, Text, TextInput } from 'react-native';
 import Slider from '@react-native-community/slider';
 import { steveBallmerPhotoUrl, undefinedText } from './styles';
@@ -63,27 +63,17 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const [ringColor, setRingColor] = React.useState<string>('green');
   const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
 
-  const tokens: Partial<IPersonaCoinTokens> = {};
-  const CustomizedPersonaCoin = PersonaCoin.customize({ tokens });
-
-  if (coinColor) {
-    tokens.backgroundColor = coinColor;
-  }
-  if (textColor) {
-    tokens.color = textColor;
-  }
-  if (showRings) {
-    tokens.ring = { ringColor: 'red' };
-  }
-  if (coinSize) {
-    tokens.coinSize = coinSize;
-  }
-  if (iconSize) {
-    tokens.iconSize = iconSize;
-  }
-  if (iconStrokeWidth) {
-    tokens.iconStrokeWidth = iconStrokeWidth;
-  }
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      ring: { ringColor: 'red' },
+      coinSize: coinSize,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [coinColor, textColor, showRings, coinSize, iconSize, iconStrokeWidth]);
 
   return (
     <View style={{ flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' }}>

package/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PersonaCoin, IconAlignment, IPersonaCoinTokens } from '@fluentui/react-native';
+import { PersonaCoin, IconAlignment } from '@fluentui/react-native';
 import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './styles';
@@ -29,36 +29,30 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     borderColor: theme.colors.inputBorder,
   };
 
-  const tokens: Partial<IPersonaCoinTokens> = {};
-  if (coinColor) {
-    tokens.backgroundColor = coinColor;
-  }
-  if (textColor) {
-    tokens.color = textColor;
-  }
-  if (horizontalAlignment) {
-    tokens.horizontalIconAlignment = horizontalAlignment;
-  }
-  if (verticalAlignment) {
-    tokens.verticalIconAlignment = verticalAlignment;
-  }
-  if (iconSize) {
-    tokens.iconSize = iconSize;
-  }
-  if (iconStrokeWidth) {
-    tokens.iconStrokeWidth = iconStrokeWidth;
-  }
-  if (iconStrokeColor) {
-    tokens.iconStrokeColor = iconStrokeColor;
-  }
-  if (initialsSize) {
-    tokens.initialsSize = initialsSize;
-  }
-  if (physicalSize) {
-    tokens.coinSize = physicalSize;
-  }
-
-  const CustomizedPersonaCoin = PersonaCoin.customize({ tokens });
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      horizontalIconAlignment: horizontalAlignment,
+      verticalIconAlignment: verticalAlignment,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+      iconStrokeColor: iconStrokeColor,
+      initialsSize: initialsSize,
+      coinSize: physicalSize,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [
+    coinColor,
+    textColor,
+    horizontalAlignment,
+    verticalAlignment,
+    iconSize,
+    iconStrokeWidth,
+    iconStrokeColor,
+    initialsSize,
+    physicalSize,
+  ]);
 
   return (
     <View style={commonStyles.root}>

package/src/FluentTester/TestComponents/Shimmer/ShimmerTest.tsx

@@ -7,6 +7,49 @@ import { stackStyle } from '../Common/styles';
 import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets';
 import { E2ETestingShimmer } from './ShimmerE2ETest';
 
+const TestCompareCustomizeShimmer = Shimmer.customize({
+  shimmerWaveColor: 'blue',
+  shimmerColor: 'orange',
+  backgroundColor: 'red',
+});
+
+export const CustomizeAndTokenPropsShimmers: React.FunctionComponent = () => {
+  return (
+    <Stack style={{ margin: 4 }}>
+      <TestCompareCustomizeShimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={{ height: 100, width: '50%', borderWidth: 2, borderColor: 'black' }}
+      />
+
+      <Shimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={{ height: 100, width: '50%', borderWidth: 2, borderColor: 'black' }}
+        shimmerWaveColor="blue"
+        shimmerColor="orange"
+        backgroundColor="red"
+      />
+    </Stack>
+  );
+};
+
+export const RoundedCornerClipCheckShimmer: React.FunctionComponent = () => {
+  return (
+    <Stack style={{ margin: 4 }}>
+      <Shimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={{ height: 100, width: 150, borderRadius: 16, borderWidth: 2, borderColor: 'black' }}
+        backgroundColor="teal"
+      />
+    </Stack>
+  );
+};
+
 const RectShimmers: React.FunctionComponent<Record<string, never>> = () => {
   return (
     <Stack style={stackStyle}>
@@ -24,13 +67,10 @@ const RectCircleShimmers: React.FunctionComponent<Record<string, never>> = () =>
 };
 
 const CustomizedShimmer: React.FunctionComponent<Record<string, never>> = () => {
-  const PinkShimmer = Shimmer.customize({
-    shimmerWaveColor: 'pink',
-  });
-
   return (
     <Stack style={stackStyle}>
-      <PinkShimmer elements={shimmerRectsAndCircle()} duration={1500} delay={500} style={{ height: 100, maxWidth: '50%' }} />
+      <CustomizeAndTokenPropsShimmers />
+      <RoundedCornerClipCheckShimmer />
     </Stack>
   );
 };
@@ -44,11 +84,6 @@ const ShimmerBorderRadii: React.FunctionComponent<Record<string, never>> = () =>
 };
 
 const shimmerSections: TestSection[] = [
-  {
-    name: 'Customized Shimmer',
-    testID: SHIMMER_TESTPAGE,
-    component: CustomizedShimmer,
-  },
   {
     name: 'Shimmer Rects',
     testID: SHIMMER_TESTPAGE,
@@ -64,6 +99,11 @@ const shimmerSections: TestSection[] = [
     testID: SHIMMER_TESTPAGE,
     component: ShimmerBorderRadii,
   },
+  {
+    name: 'Customized Shimmer',
+    testID: SHIMMER_TESTPAGE,
+    component: CustomizedShimmer,
+  },
   {
     name: 'Shimmer for E2E Testing',
     component: E2ETestingShimmer,

package/src/FluentTester/TestComponents/Text/CustomizeUsage.tsx

@@ -4,15 +4,49 @@ import { Stack } from '@fluentui-react-native/stack';
 import { Text } from '@fluentui/react-native';
 import { stackStyle } from '../Common/styles';
 
-export const CustomizeUsage: React.FunctionComponent = () => {
-  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' } });
+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}>
@@ -27,40 +61,6 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     );
   };
 
-  // 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' } });
-
   const CustomFontStack = () => {
     return (
       <Stack style={stackStyle} gap={5}>