@pagopa/io-app-design-system 7.0.2 → 7.1.0

package/src/components/typography/Body.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { Pressable, View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontWeight } from "../../utils/fonts";
@@ -9,7 +9,8 @@ import {
   TypographicStyleProps
 } from "./IOText";
 
-type BodyStyleProps = TypographicStyleProps & {
+type BodyStyleProps = Omit<TypographicStyleProps, "ref"> & {
+  ref?: Ref<View>;
   weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 
@@ -19,61 +20,59 @@ export const bodyLineHeight = 24;
 /**
  * `Body` typographic style
  */
-export const Body = forwardRef<View, BodyStyleProps>(
-  (
-    {
-      weight: customWeight,
-      color: customColor,
-      asLink,
-      avoidPressable,
-      accessibilityRole = "link",
-      textStyle: customTextStyle,
-      onPress,
-      ...props
-    },
-    ref?: ForwardedRef<View>
-  ) => {
-    const theme = useIOTheme();
+export const Body = ({
+  ref,
+  weight: customWeight,
+  color: customColor,
+  asLink,
+  avoidPressable,
+  accessibilityRole = "link",
+  textStyle: customTextStyle,
+  onPress,
+  ...props
+}: BodyStyleProps) => {
+  const theme = useIOTheme();
 
-    const defaultColor = asLink
-      ? theme["interactiveElem-default"]
-      : theme["textBody-tertiary"];
+  const defaultColor = asLink
+    ? theme["interactiveElem-default"]
+    : theme["textBody-tertiary"];
 
-    const BodyProps: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "body", // iOS only
-      weight: customWeight || "Regular",
-      size: bodyFontSize,
-      lineHeight: bodyLineHeight,
-      color: customColor ?? defaultColor,
-      ...(asLink
-        ? {
-            accessibilityRole,
-            textStyle: customTextStyle ?? { textDecorationLine: "underline" }
-          }
-        : {})
-    };
-
-    if (asLink && !avoidPressable) {
-      return (
-        <Pressable
-          onPress={onPress}
-          ref={ref}
-          accessibilityRole={accessibilityRole}
-        >
-          <IOText {...BodyProps}>{props.children}</IOText>
-        </Pressable>
-      );
-    }
+  const BodyProps: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "body", // iOS only
+    weight: customWeight || "Regular",
+    size: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    color: customColor ?? defaultColor,
+    ...(asLink
+      ? {
+          accessibilityRole,
+          textStyle: customTextStyle ?? { textDecorationLine: "underline" }
+        }
+      : {})
+  };
 
+  if (asLink && !avoidPressable) {
+    // TODO: If Pressable is replaced with `onPress` on IOText, ref would
+    // always point to a Text node and the Ref<View> override in the prop
+    // type can be removed entirely.
     return (
-      <IOText
+      <Pressable
+        onPress={onPress}
         ref={ref}
-        {...BodyProps}
-        onPress={asLink && avoidPressable ? onPress : undefined}
+        accessibilityRole={accessibilityRole}
       >
-        {props.children}
-      </IOText>
+        <IOText {...BodyProps}>{props.children}</IOText>
+      </Pressable>
     );
   }
-);
+
+  return (
+    <IOText
+      {...BodyProps}
+      onPress={asLink && avoidPressable ? onPress : undefined}
+    >
+      {props.children}
+    </IOText>
+  );
+};

package/src/components/typography/BodyMonospace.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { bodyFontSize, bodyLineHeight } from "./Body";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -7,27 +5,24 @@ import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 /**
  * `BodyMonospace` typographic style
  */
-export const BodyMonospace = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const BodyMonospace = ({
+  color: customColor,
+  ...props
+}: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const BodyProps: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "body", // iOS only
-      font: "FiraCode",
-      weight: "Medium",
-      size: bodyFontSize,
-      lineHeight: bodyLineHeight,
-      color: customColor ?? theme["textBody-tertiary"],
-      textStyle: {
-        letterSpacing: 0.5
-      }
-    };
+  const BodyProps: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "body", // iOS only
+    font: "FiraCode",
+    weight: "Medium",
+    size: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    color: customColor ?? theme["textBody-tertiary"],
+    textStyle: {
+      letterSpacing: 0.5
+    }
+  };
 
-    return (
-      <IOText ref={ref} {...BodyProps}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...BodyProps}>{props.children}</IOText>;
+};

package/src/components/typography/BodySmall.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { Pressable, View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontWeight } from "../../utils/fonts";
@@ -9,7 +9,8 @@ import {
   TypographicStyleProps
 } from "./IOText";
 
-type BodySmallProps = TypographicStyleProps & {
+type BodySmallProps = Omit<TypographicStyleProps, "ref"> & {
+  ref?: Ref<View>;
   weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 
@@ -19,61 +20,59 @@ export const bodySmallLineHeight = 21;
 /**
  * `BodySmall` typographic style
  */
-export const BodySmall = forwardRef<View, BodySmallProps>(
-  (
-    {
-      weight: customWeight,
-      color: customColor,
-      asLink,
-      avoidPressable,
-      accessibilityRole = "link",
-      textStyle: customTextStyle,
-      onPress,
-      ...props
-    },
-    ref?: ForwardedRef<View>
-  ) => {
-    const theme = useIOTheme();
+export const BodySmall = ({
+  ref,
+  weight: customWeight,
+  color: customColor,
+  asLink,
+  avoidPressable,
+  accessibilityRole = "link",
+  textStyle: customTextStyle,
+  onPress,
+  ...props
+}: BodySmallProps) => {
+  const theme = useIOTheme();
 
-    const defaultColor = asLink
-      ? theme["interactiveElem-default"]
-      : theme["textBody-tertiary"];
+  const defaultColor = asLink
+    ? theme["interactiveElem-default"]
+    : theme["textBody-tertiary"];
 
-    const BodySmallProps: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "footnote" /* iOS only */,
-      weight: customWeight ?? "Regular",
-      size: bodySmallFontSize,
-      lineHeight: bodySmallLineHeight,
-      color: customColor ?? defaultColor,
-      ...(asLink
-        ? {
-            accessibilityRole,
-            textStyle: customTextStyle ?? { textDecorationLine: "underline" }
-          }
-        : {})
-    };
-
-    if (asLink && !avoidPressable) {
-      return (
-        <Pressable
-          onPress={onPress}
-          ref={ref}
-          accessibilityRole={accessibilityRole}
-        >
-          <IOText {...BodySmallProps}>{props.children}</IOText>
-        </Pressable>
-      );
-    }
+  const BodySmallProps: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "footnote" /* iOS only */,
+    weight: customWeight ?? "Regular",
+    size: bodySmallFontSize,
+    lineHeight: bodySmallLineHeight,
+    color: customColor ?? defaultColor,
+    ...(asLink
+      ? {
+          accessibilityRole,
+          textStyle: customTextStyle ?? { textDecorationLine: "underline" }
+        }
+      : {})
+  };
 
+  if (asLink && !avoidPressable) {
+    // TODO: If Pressable is replaced with `onPress` on IOText, ref would
+    // always point to a Text node and the Ref<View> override in the prop
+    // type can be removed entirely.
     return (
-      <IOText
+      <Pressable
+        onPress={onPress}
         ref={ref}
-        {...BodySmallProps}
-        onPress={asLink && avoidPressable ? onPress : undefined}
+        accessibilityRole={accessibilityRole}
       >
-        {props.children}
-      </IOText>
+        <IOText {...BodySmallProps}>{props.children}</IOText>
+      </Pressable>
     );
   }
-);
+
+  return (
+    <IOText
+      {...BodySmallProps}
+      onPress={asLink && avoidPressable ? onPress : undefined}
+    >
+      {props.children}
+    </IOText>
+  );
+};

package/src/components/typography/ButtonText.tsx

@@ -1,6 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
-
 import { IOColors } from "../../core";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -15,22 +12,19 @@ const defaultColor: IOColors = "white";
 /**
  * `ButtonText` typographic style
  */
-export const ButtonText = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const ButtonTextProps: IOTextProps = {
-      ...props,
-      weight: "Semibold",
-      size: buttonTextFontSize,
-      lineHeight: buttonTextLineHeight,
-      /* Needed to render `ButtonOutline` and`ButtonLink` because they use
+export const ButtonText = ({
+  color: customColor,
+  ...props
+}: TypographicStyleProps) => {
+  const ButtonTextProps: IOTextProps = {
+    ...props,
+    weight: "Semibold",
+    size: buttonTextFontSize,
+    lineHeight: buttonTextLineHeight,
+    /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
-      color: customColor ?? defaultColor
-    };
+    color: customColor ?? defaultColor
+  };
 
-    return (
-      <IOText ref={ref} {...ButtonTextProps}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...ButtonTextProps}>{props.children}</IOText>;
+};

package/src/components/typography/Caption.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -9,26 +7,23 @@ export const captionFontSize: IOFontSize = 12;
 /**
  * `Caption` typographic style
  */
-export const Caption = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const Caption = ({
+  color: customColor,
+  ...props
+}: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const CaptionProps: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "caption1", // iOS only
-      weight: "Regular",
-      size: captionFontSize,
-      color: customColor ?? theme["textBody-default"],
-      textStyle: {
-        textTransform: "uppercase",
-        letterSpacing: 0.5
-      }
-    };
+  const CaptionProps: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "caption1", // iOS only
+    weight: "Regular",
+    size: captionFontSize,
+    color: customColor ?? theme["textBody-default"],
+    textStyle: {
+      textTransform: "uppercase",
+      letterSpacing: 0.5
+    }
+  };
 
-    return (
-      <IOText ref={ref} {...CaptionProps}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...CaptionProps}>{props.children}</IOText>;
+};

package/src/components/typography/H1.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -10,23 +8,17 @@ export const h1LineHeight = 42;
 /**
  * `H1` typographic style
  */
-export const H1 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const H1 = ({ color: customColor, ...props }: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const H1Props: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "largeTitle", // iOS only
-      weight: "Semibold",
-      size: h1FontSize,
-      lineHeight: h1LineHeight,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const H1Props: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "largeTitle", // iOS only
+    weight: "Semibold",
+    size: h1FontSize,
+    lineHeight: h1LineHeight,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...H1Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...H1Props}>{props.children}</IOText>;
+};

package/src/components/typography/H2.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -14,26 +12,21 @@ export const h2LineHeight = 34;
 /**
  * `H2` typographic style
  */
-export const H2 = forwardRef<View, H2StyleProps>(
-  (
-    { weight: customWeight, color: customColor, ...props },
-    ref?: ForwardedRef<View>
-  ) => {
-    const theme = useIOTheme();
+export const H2 = ({
+  weight: customWeight,
+  color: customColor,
+  ...props
+}: H2StyleProps) => {
+  const theme = useIOTheme();
 
-    const H2Props: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "title1", // iOS only
-      weight: customWeight ?? "Semibold",
-      size: h2FontSize,
-      lineHeight: h2LineHeight,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const H2Props: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "title1", // iOS only
+    weight: customWeight ?? "Semibold",
+    size: h2FontSize,
+    lineHeight: h2LineHeight,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...H2Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...H2Props}>{props.children}</IOText>;
+};

package/src/components/typography/H3.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -11,23 +9,17 @@ export const h3LineHeight = 33;
 /**
  * `H3` typographic style
  */
-export const H3 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const H3 = ({ color: customColor, ...props }: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const H3Props: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "title2", // iOS only
-      weight: "Semibold",
-      size: h3FontSize,
-      lineHeight: h3LineHeight,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const H3Props: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "title2", // iOS only
+    weight: "Semibold",
+    size: h3FontSize,
+    lineHeight: h3LineHeight,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...H3Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...H3Props}>{props.children}</IOText>;
+};

package/src/components/typography/H4.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -10,23 +8,17 @@ export const h4LineHeight = 24;
 /**
  * `H4` typographic style
  */
-export const H4 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const H4 = ({ color: customColor, ...props }: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const H4Props: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "title3", // iOS only
-      weight: "Semibold",
-      size: h4FontSize,
-      lineHeight: h4LineHeight,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const H4Props: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "title3", // iOS only
+    weight: "Semibold",
+    size: h4FontSize,
+    lineHeight: h4LineHeight,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...H4Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...H4Props}>{props.children}</IOText>;
+};

package/src/components/typography/H5.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -10,27 +8,21 @@ export const h5LineHeight = 16;
 /**
  * `H5` typographic style
  */
-export const H5 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const H5 = ({ color: customColor, ...props }: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const H5Props: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "subheadline", // iOS only
-      weight: "Semibold",
-      size: h5FontSize,
-      lineHeight: h5LineHeight,
-      color: customColor ?? theme["textHeading-default"],
-      textStyle: {
-        textTransform: "uppercase",
-        letterSpacing: 0.5
-      }
-    };
+  const H5Props: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "subheadline", // iOS only
+    weight: "Semibold",
+    size: h5FontSize,
+    lineHeight: h5LineHeight,
+    color: customColor ?? theme["textHeading-default"],
+    textStyle: {
+      textTransform: "uppercase",
+      letterSpacing: 0.5
+    }
+  };
 
-    return (
-      <IOText ref={ref} {...H5Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...H5Props}>{props.children}</IOText>;
+};

package/src/components/typography/H6.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -13,24 +11,18 @@ const legacyFontSize: IOFontSize = 17;
 /**
  * `H6` typographic style
  */
-export const H6 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
+export const H6 = ({ color: customColor, ...props }: TypographicStyleProps) => {
+  const theme = useIOTheme();
+  const { newTypefaceEnabled } = useIONewTypeface();
 
-    const H6Props: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "headline", // iOS only
-      weight: "Semibold",
-      size: newTypefaceEnabled ? h6FontSize : legacyFontSize,
-      lineHeight: h6LineHeight,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const H6Props: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "headline", // iOS only
+    weight: "Semibold",
+    size: newTypefaceEnabled ? h6FontSize : legacyFontSize,
+    lineHeight: h6LineHeight,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...H6Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...H6Props}>{props.children}</IOText>;
+};