@pagopa/io-app-design-system 1.42.0 → 2.0.0-1

package/src/components/typography/H2.tsx

@@ -1,49 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H2Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h2FontSize = 26;
+export const h2FontSize: IOFontSize = 26;
 export const h2LineHeight = 39;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
-const legacyH2FontSize = 28;
+const legacyH2FontSize: IOFontSize = 28;
 const legacyH2LineHeight = 40;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H2` typographic style
  */
-export const H2 = React.forwardRef<View, H2Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H2 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H2Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title1" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
-        lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "title1", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: isExperimental ? h2FontSize : legacyH2FontSize,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor],
+      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
+    };
+
+    return (
+      <IOText ref={ref} {...H2Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H3.tsx

@@ -1,48 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
-
-type H3Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
 /* Common typographic styles */
-export const h3FontSize = 22;
+export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultColor: AllowedColors = "bluegreyDark";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
+
 /**
  * `H3` typographic style
  */
-export const H3 = React.forwardRef<View, H3Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H3 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H3Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title2" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+      dynamicTypeRamp: "title2", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      fontStyle: {
-        fontSize: h3FontSize,
-        lineHeight: h3LineHeight
-      }
-    },
-    ref
-  );
-});
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: h3FontSize,
+      lineHeight: h3LineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H3Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H4.tsx

@@ -1,47 +1,42 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H4Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h4FontSize = 20;
+export const h4FontSize: IOFontSize = 20;
 export const h4LineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultColor: AllowedColors = "bluegreyDark";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H4` typographic style
  */
-export const H4 = React.forwardRef<View, H4Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+export const H4 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const H4Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title3" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
-      font: isExperimental ? font : legacyFontName,
-      fontStyle: {
-        fontSize: h4FontSize,
-        lineHeight: h4LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "title3", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: h4FontSize,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor],
+      lineHeight: h4LineHeight
+    };
+
+    return (
+      <IOText ref={ref} {...H4Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H5.tsx

@@ -1,45 +1,39 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H5Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h5FontSize = 14;
+export const h5FontSize: IOFontSize = 14;
 export const h5LineHeight = 16;
-const font: FontFamily = "TitilliumSansPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Semibold";
 
 /**
  * `H5` typographic style
  */
-export const H5 = React.forwardRef<View, H5Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H5 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H5Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "subheadline" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font,
-      fontStyle: {
-        fontSize: h5FontSize,
-        lineHeight: h5LineHeight,
+      dynamicTypeRamp: "subheadline", // iOS only
+      font: "TitilliumSansPro",
+      weight: "Semibold",
+      size: h5FontSize,
+      lineHeight: h5LineHeight,
+      color: customColor ?? theme[defaultColor],
+      textStyle: {
         textTransform: "uppercase",
         letterSpacing: 0.5
       }
-    },
-    ref
-  );
-});
+    };
+
+    return (
+      <IOText ref={ref} {...H5Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H6.tsx

@@ -1,55 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOTheme,
-  IOThemeLight,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-// when the weight is bold, only these color are allowed
-type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H6Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h6FontSize = 16;
+export const h6FontSize: IOFontSize = 16;
 export const h6LineHeight = 24;
-const h6DefaultColor: AllowedColors = IOThemeLight["textBody-default"];
-const h6DefaultWeight: AllowedWeight = "Regular";
-const fontName: FontFamily = "ReadexPro";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontSize = 18;
+const legacyFontSize: IOFontSize = 18;
 const legacyLineHeight = 25;
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H6` typographic style
  */
-export const H6 = React.forwardRef<View, H6Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H6 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H6Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "headline" /* iOS only */,
-      defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
-      defaultColor: h6DefaultColor,
+      dynamicTypeRamp: "headline", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      fontStyle: {
-        fontSize: isExperimental ? h6FontSize : legacyFontSize,
-        lineHeight: isExperimental ? h6LineHeight : legacyLineHeight
-      }
-    },
-    ref
-  );
-});
+      size: isExperimental ? h6FontSize : legacyFontSize,
+      lineHeight: isExperimental ? h6LineHeight : legacyLineHeight,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H6Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/Hero.tsx

@@ -1,46 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign, IOTheme } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type HeroProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const heroFontSize = 32;
+export const heroFontSize: IOFontSize = 32;
 export const heroLineHeight = 48;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyWeight: AllowedWeight = "Semibold";
-const legacyHeroFontSize = 35;
+const legacyHeroFontSize: IOFontSize = 35;
 const legacyHeroLineHeight = 49;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `Hero` typographic style
  */
-export const Hero = React.forwardRef<View, HeroProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Hero = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const HeroProps: IOTextProps = {
       ...props,
-      defaultWeight: isExperimental ? defaultWeight : legacyWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
-        lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
-      }
-    },
-    ref
-  );
-});
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: isExperimental ? heroFontSize : legacyHeroFontSize,
+      lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...HeroProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/IOText.tsx

@@ -0,0 +1,157 @@
+import React, { ComponentProps, forwardRef, useMemo } from "react";
+import {
+  ColorValue,
+  GestureResponderEvent,
+  Text,
+  TextStyle,
+  View
+} from "react-native";
+import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { useBoldTextEnabled } from "../../utils/accessibility";
+import {
+  IOFontFamily,
+  IOFontSize,
+  IOFontWeight,
+  makeFontStyleObject
+} from "../../utils/fonts";
+
+/**
+ * We exclude all of the following props when we define a new
+ * typographic style in which all of these visual attributes
+ * are already defined.
+ */
+export type IOTextStyle = Omit<
+  TextStyle,
+  "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "fontStyle"
+>;
+
+export type TypographicStyleProps = Omit<
+  IOTextProps,
+  "style" | "font" | "size" | "weight" | "color" | "lineHeight" | "fontStyle"
+> & { textStyle?: IOTextStyle; style?: IOTextStyle } & {
+  color?: IOTextBaseProps["color"];
+};
+
+/**
+ * The specific properties needed to calculate the font style using {@link makeFontStyleObject} (these information
+ * cannot be included in the default StyleProp<TextStyle>
+ */
+type IOTextBaseProps = {
+  size?: IOFontSize;
+  weight?: IOFontWeight;
+  color?: IOColors;
+  font?: IOFontFamily;
+  lineHeight?: TextStyle["lineHeight"];
+  fontStyle?: TextStyle["fontStyle"];
+  textStyle?: IOTextStyle;
+  style?: IOTextStyle;
+};
+
+type IOTextExcludedProps = Omit<
+  ComponentProps<typeof Text>,
+  "allowFontScaling" | "maxFontSizeMultiplier" | "style"
+>;
+
+export type IOTextProps = IOTextBaseProps & IOTextExcludedProps;
+
+/**
+ * Extend `TypographicStyleProps` with extra props for styles that
+ * can be used as links
+ */
+export type TypographicStyleAsLinkProps =
+  | {
+      color?: never;
+      asLink: true;
+      onPress: (event: GestureResponderEvent) => void;
+    }
+  | { color?: IOColors; asLink?: false };
+
+/**
+ * Decorate the function {@link makeFontStyleObject} with the additional color calculation.
+ * @param color A value key from {@link IOColors}, transformed here in {@link ColorValue}
+ * @param args the args of the function {@link makeFontStyleObject}
+ */
+const calculateTextStyle = (
+  color: IOColors,
+  ...args: Parameters<typeof makeFontStyleObject>
+) => ({
+  ...makeFontStyleObject(...args),
+  color: IOColors[color]
+});
+
+/**
+ * `IOText` is the core Typography component used to render a text.
+ * It accepts all the default text style `StyleProp<TextStyle>` (excluding the ones already applied) in addition with {@link IOTextBaseProps}
+ * used to calculate at runtime the platform-dependent styles.
+ * @param props
+ * @constructor
+ */
+export const IOText = forwardRef<View, IOTextProps>(
+  (
+    {
+      color,
+      size,
+      font,
+      lineHeight,
+      weight,
+      fontStyle,
+      textStyle,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const theme = useIOTheme();
+    const boldEnabled = useBoldTextEnabled();
+
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const computedStyleObj = useMemo(
+      () =>
+        calculateTextStyle(
+          color ?? theme["textBody-default"],
+          size,
+          font,
+          lineHeight,
+          weight,
+          fontStyle,
+          boldEnabled
+        ),
+      [color, theme, size, font, lineHeight, weight, fontStyle, boldEnabled]
+    );
+
+    /* In some cases, for example when we use color transitions with
+    `reanimated` we need to manage chromatic values as `ColorValue`
+    or `string` (not `IOColors`). So we keep a way to override
+    the the `color' attribute without giving the ability to
+    override all other all other typographic attributes
+    through the `style' prop. */
+    const fontStyleObj = style?.color
+      ? [{ ...computedStyleObj, color: style?.color }]
+      : computedStyleObj;
+
+    /* Some typographic styles like `H5` have certain `TextStyle` properties
+     like `textTransform` or `letterSpacing` that we want to apply to the text.
+     We use the `textStyle` prop to pass these properties to the `IOText`
+     component and preserve the ability to define the `style` prop as well.
+     The `style` prop is the last one to be applied, so we can properly
+     override the `color` attribute.
+     */
+    const styleObj = style
+      ? [textStyle ?? {}, fontStyleObj ?? {}, style]
+      : [textStyle ?? {}, fontStyleObj ?? {}];
+
+    /* Accessible typography based on the `fontScale` parameter */
+    const accessibleFontSizeProps: ComponentProps<typeof Text> = {
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: 1.25
+    };
+
+    return (
+      <Text ref={ref} style={styleObj} {...props} {...accessibleFontSizeProps}>
+        {children}
+      </Text>
+    );
+  }
+);