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

package/src/components/typography/Chip.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { IOColors, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -20,14 +22,17 @@ const legacyFont: FontFamily = "TitilliumWeb";
 /**
  * `Chip` typographic style
  */
-export const Chip = (props: ChipProps) => {
+export const Chip = React.forwardRef<View, ChipProps>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font: isExperimental ? font : legacyFont,
-    fontStyle: { fontSize: chipFontSize }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight,
+      defaultColor,
+      font: isExperimental ? font : legacyFont,
+      fontStyle: { fontSize: chipFontSize }
+    },
+    ref
+  );
+});

package/src/components/typography/Factory.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import { View } from "react-native";
 import { IOColors } from "../../core";
 import { IOFontWeight } from "../../utils/fonts";
 import { XOR } from "../../utils/types";
@@ -74,7 +75,10 @@ function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
 export function useTypographyFactory<
   WeightPropsType extends IOFontWeight,
   ColorsPropsType extends IOColors
->(props: FactoryProps<WeightPropsType, ColorsPropsType>) {
+>(
+  props: FactoryProps<WeightPropsType, ColorsPropsType>,
+  ref?: React.ForwardedRef<View>
+) {
   // Use different strategy to calculate the default values, based on DefaultProps
   const { weight, color } = useMemo(
     () =>
@@ -89,5 +93,5 @@ export function useTypographyFactory<
     [props]
   );
 
-  return <BaseTypography weight={weight} color={color} {...props} />;
+  return <BaseTypography weight={weight} color={color} {...props} ref={ref} />;
 }

package/src/components/typography/H1.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";
@@ -25,17 +27,20 @@ const legacyH1LineHeight = 43;
 /**
  * `H1` typographic style
  */
-export const H1 = (props: H1Props) => {
+export const H1 = React.forwardRef<View, H1Props>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor,
-    font: isExperimental ? font : legacyFont,
-    fontStyle: {
-      fontSize: isExperimental ? h1FontSize : legacyH1FontSize,
-      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+      defaultColor,
+      font: isExperimental ? font : legacyFont,
+      fontStyle: {
+        fontSize: isExperimental ? h1FontSize : legacyH1FontSize,
+        lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight
+      }
+    },
+    ref
+  );
+});

package/src/components/typography/H2.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";
@@ -25,17 +27,20 @@ const legacyH2LineHeight = 40;
 /**
  * `H2` typographic style
  */
-export const H2 = (props: H2Props) => {
+export const H2 = React.forwardRef<View, H2Props>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor,
-    font: isExperimental ? font : legacyFont,
-    fontStyle: {
-      fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
-      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+      defaultColor,
+      font: isExperimental ? font : legacyFont,
+      fontStyle: {
+        fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
+        lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
+      }
+    },
+    ref
+  );
+});

package/src/components/typography/H3.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";
@@ -26,17 +28,20 @@ const legacyH3LineHeight = 34;
 /**
  * `H3` typographic style
  */
-export const H3 = (props: H3Props) => {
+export const H3 = React.forwardRef<View, H3Props>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
-    font: isExperimental ? font : legacyFontName,
-    fontStyle: {
-      fontSize: isExperimental ? h3FontSize : legacyH3FontSize,
-      lineHeight: isExperimental ? h3LineHeight : legacyH3LineHeight
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+      font: isExperimental ? font : legacyFontName,
+      fontStyle: {
+        fontSize: isExperimental ? h3FontSize : legacyH3FontSize,
+        lineHeight: isExperimental ? h3LineHeight : legacyH3LineHeight
+      }
+    },
+    ref
+  );
+});

package/src/components/typography/H4.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";
@@ -25,16 +27,19 @@ const legacyH4FontSize = 22;
 /**
  * `H4` typographic style
  */
-export const H4 = (props: H4Props) => {
+export const H4 = React.forwardRef<View, H4Props>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
-    font: isExperimental ? font : legacyFontName,
-    fontStyle: {
-      fontSize: isExperimental ? h4FontSize : legacyH4FontSize,
-      lineHeight: h4LineHeight
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+      font: isExperimental ? font : legacyFontName,
+      fontStyle: {
+        fontSize: isExperimental ? h4FontSize : legacyH4FontSize,
+        lineHeight: h4LineHeight
+      }
+    },
+    ref
+  );
+});

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
+    );
+  }
+);