@pagopa/io-app-design-system 1.36.11 → 1.36.12

package/src/components/typography/H5.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -20,19 +22,22 @@ const defaultWeight: AllowedWeight = "SemiBold";
 /**
  * `H5` typographic style
  */
-export const H5 = (props: H5Props) => {
+export const H5 = React.forwardRef<View, H5Props>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font: isExperimental ? font : legacyFont,
-    fontStyle: {
-      fontSize: h5FontSize,
-      lineHeight: h5LineHeight,
-      textTransform: "uppercase",
-      letterSpacing: 0.5
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight,
+      defaultColor,
+      font: isExperimental ? font : legacyFont,
+      fontStyle: {
+        fontSize: h5FontSize,
+        lineHeight: h5LineHeight,
+        textTransform: "uppercase",
+        letterSpacing: 0.5
+      }
+    },
+    ref
+  );
+});

package/src/components/typography/H6.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { IOTheme, IOThemeLight, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -26,17 +28,20 @@ const legacyDefaultWeight: AllowedWeight = "SemiBold";
 /**
  * `H6` typographic style
  */
-export const H6 = (props: H6Props) => {
+export const H6 = React.forwardRef<View, H6Props>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
-    defaultColor: h6DefaultColor,
-    font: isExperimental ? fontName : legacyFontName,
-    fontStyle: {
-      fontSize: isExperimental ? h6FontSize : legacyFontSize,
-      lineHeight: isExperimental ? h6LineHeight : legacyLineHeight
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
+      defaultColor: h6DefaultColor,
+      font: isExperimental ? fontName : legacyFontName,
+      fontStyle: {
+        fontSize: isExperimental ? h6FontSize : legacyFontSize,
+        lineHeight: isExperimental ? h6LineHeight : legacyLineHeight
+      }
+    },
+    ref
+  );
+});

package/src/components/typography/Hero.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { useIOExperimentalDesign, IOTheme } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -25,17 +27,20 @@ const legacyHeroLineHeight = 49;
 /**
  * `Hero` typographic style
  */
-export const Hero = (props: HeroProps) => {
+export const Hero = React.forwardRef<View, HeroProps>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental ? defaultWeight : legacyWeight,
-    defaultColor,
-    font: isExperimental ? font : legacyFont,
-    fontStyle: {
-      fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
-      lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight: isExperimental ? defaultWeight : legacyWeight,
+      defaultColor,
+      font: isExperimental ? font : legacyFont,
+      fontStyle: {
+        fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
+        lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
+      }
+    },
+    ref
+  );
+});

package/src/components/typography/Label.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import {
   IOColors,
   IOColorsStatusForeground,
@@ -28,19 +30,26 @@ const labelDefaultcolor = "black";
 /**
  * `Label` typographic style
  */
-export const Label = ({ fontSize, ...props }: LabelProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Label = React.forwardRef<View, LabelProps>(
+  ({ fontSize, ...props }, ref) => {
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: labelDefaultWeight,
-    defaultColor: labelDefaultcolor,
-    font: isExperimental ? fontName : legacyFontName,
-    fontStyle: {
-      fontSize: fontSize ? fontSizeMapping[fontSize] : fontSizeMapping.regular,
-      lineHeight: fontSize
-        ? lineHeightMapping[fontSize]
-        : lineHeightMapping.regular
-    }
-  });
-};
+    return useTypographyFactory<AllowedWeight, AllowedColors>(
+      {
+        ...props,
+        defaultWeight: labelDefaultWeight,
+        defaultColor: labelDefaultcolor,
+        font: isExperimental ? fontName : legacyFontName,
+        fontStyle: {
+          fontSize: fontSize
+            ? fontSizeMapping[fontSize]
+            : fontSizeMapping.regular,
+          lineHeight: fontSize
+            ? lineHeightMapping[fontSize]
+            : lineHeightMapping.regular
+        }
+      },
+      ref
+    );
+  }
+);

package/src/components/typography/LabelHeader.tsx

@@ -1,3 +1,5 @@
+import { View } from "react-native";
+import React from "react";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { IOTheme, IOThemeLight, useIOExperimentalDesign } from "../../core";
 import { useTypographyFactory } from "./Factory";
@@ -29,21 +31,26 @@ const legacyLabelHeaderLineHeight = 20;
 /**
  * `LabelHeader` typographic style
  */
-export const LabelHeader = (props: LabelHeaderProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
-  // console.log("isExperimental", isExperimental);
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental
-      ? labelHeaderDefaultWeight
-      : legacyLabelHeaderWeight,
-    defaultColor: labelHeaderDefaultColor,
-    font: isExperimental ? labelHeaderFontName : legacyLabelHeaderFontName,
-    fontStyle: {
-      fontSize: labelHeaderFontSize,
-      lineHeight: isExperimental
-        ? labelHeaderLineHeight
-        : legacyLabelHeaderLineHeight
-    }
-  });
-};
+export const LabelHeader = React.forwardRef<View, LabelHeaderProps>(
+  (props, ref) => {
+    const { isExperimental } = useIOExperimentalDesign();
+    // console.log("isExperimental", isExperimental);
+    return useTypographyFactory<AllowedWeight, AllowedColors>(
+      {
+        ...props,
+        defaultWeight: isExperimental
+          ? labelHeaderDefaultWeight
+          : legacyLabelHeaderWeight,
+        defaultColor: labelHeaderDefaultColor,
+        font: isExperimental ? labelHeaderFontName : legacyLabelHeaderFontName,
+        fontStyle: {
+          fontSize: labelHeaderFontSize,
+          lineHeight: isExperimental
+            ? labelHeaderLineHeight
+            : legacyLabelHeaderLineHeight
+        }
+      },
+      ref
+    );
+  }
+);

package/src/components/typography/LabelLink.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { useIOExperimentalDesign, type IOColors } from "../../core";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -29,23 +31,26 @@ export const linkDefaultWeight: AllowedWeight = "SemiBold";
 /**
  * `Link` typographic style
  */
-export const LabelLink = (props: LinkProps) => {
+export const LabelLink = React.forwardRef<View, LinkProps>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    accessibilityRole: props.onPress ? "link" : undefined,
-    ...props,
-    defaultWeight: linkDefaultWeight,
-    defaultColor: isExperimental ? linkDefaultColor : linkLegacyDefaultColor,
-    font: isExperimental ? fontName : legacyFontName,
-    fontStyle: {
-      fontSize: props.fontSize
-        ? fontSizeMapping[props.fontSize]
-        : fontSizeMapping.regular,
-      lineHeight: props.fontSize
-        ? lineHeightMapping[props.fontSize]
-        : lineHeightMapping.regular,
-      textDecorationLine: "underline"
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      accessibilityRole: props.onPress ? "link" : undefined,
+      ...props,
+      defaultWeight: linkDefaultWeight,
+      defaultColor: isExperimental ? linkDefaultColor : linkLegacyDefaultColor,
+      font: isExperimental ? fontName : legacyFontName,
+      fontStyle: {
+        fontSize: props.fontSize
+          ? fontSizeMapping[props.fontSize]
+          : fontSizeMapping.regular,
+        lineHeight: props.fontSize
+          ? lineHeightMapping[props.fontSize]
+          : lineHeightMapping.regular,
+        textDecorationLine: "underline"
+      }
+    },
+    ref
+  );
+});

package/src/components/typography/LabelSmall.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { IOColors, IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -41,21 +43,26 @@ const labelDefaultcolor = "blue";
 /**
  * `LabelSmall` typographic style
  */
-export const LabelSmall = (props: LabelSmallProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const LabelSmall = React.forwardRef<View, LabelSmallProps>(
+  (props, ref) => {
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: labelDefaultWeight,
-    defaultColor: labelDefaultcolor,
-    font: isExperimental ? fontName : legacyFontName,
-    fontStyle: {
-      fontSize: props.fontSize
-        ? fontSizeMapping[props.fontSize]
-        : fontSizeMapping.regular,
-      lineHeight: props.fontSize
-        ? lineHeightMapping[props.fontSize]
-        : lineHeightMapping.regular
-    }
-  });
-};
+    return useTypographyFactory<AllowedWeight, AllowedColors>(
+      {
+        ...props,
+        defaultWeight: labelDefaultWeight,
+        defaultColor: labelDefaultcolor,
+        font: isExperimental ? fontName : legacyFontName,
+        fontStyle: {
+          fontSize: props.fontSize
+            ? fontSizeMapping[props.fontSize]
+            : fontSizeMapping.regular,
+          lineHeight: props.fontSize
+            ? lineHeightMapping[props.fontSize]
+            : lineHeightMapping.regular
+        }
+      },
+      ref
+    );
+  }
+);

package/src/components/typography/LabelSmallAlt.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { useIOExperimentalDesign } from "../../core";
 import type { IOColors, IOTheme } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
@@ -35,17 +37,22 @@ const legacyDefaultWeight: AllowedWeight = "SemiBold";
 /**
  * `LabelSmallAlt` typographic style. It's referenced as `LabelSmallReadex` in the design projects.
  */
-export const LabelSmallAlt = (props: LabelSmallAltProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const LabelSmallAlt = React.forwardRef<View, LabelSmallAltProps>(
+  (props, ref) => {
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor,
-    font: isExperimental ? fontName : legacyFontName,
-    fontStyle: {
-      fontSize: isExperimental ? labelFontSize : legacyLabelFontSize,
-      lineHeight: labelLineHeight
-    }
-  });
-};
+    return useTypographyFactory<AllowedWeight, AllowedColors>(
+      {
+        ...props,
+        defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+        defaultColor,
+        font: isExperimental ? fontName : legacyFontName,
+        fontStyle: {
+          fontSize: isExperimental ? labelFontSize : legacyLabelFontSize,
+          lineHeight: labelLineHeight
+        }
+      },
+      ref
+    );
+  }
+);