@pagopa/io-app-design-system 6.0.4 → 6.0.6

package/src/components/typography/H1.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -13,12 +13,10 @@ export const h1LineHeight = 42;
 export const H1 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H1Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "largeTitle", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: h1FontSize,
       lineHeight: h1LineHeight,

package/src/components/typography/H2.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -20,12 +20,10 @@ export const H2 = forwardRef<View, H2StyleProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H2Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title1", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: customWeight ?? "Semibold",
       size: h2FontSize,
       lineHeight: h2LineHeight,

package/src/components/typography/H3.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -14,12 +14,10 @@ export const h3LineHeight = 33;
 export const H3 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H3Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title2", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: h3FontSize,
       lineHeight: h3LineHeight,

package/src/components/typography/H4.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -13,12 +13,10 @@ export const h4LineHeight = 24;
 export const H4 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H4Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title3", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: h4FontSize,
       lineHeight: h4LineHeight,

package/src/components/typography/H5.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -13,12 +13,10 @@ export const h5LineHeight = 16;
 export const H5 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H5Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "subheadline", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: h5FontSize,
       lineHeight: h5LineHeight,

package/src/components/typography/H6.tsx

@@ -21,7 +21,6 @@ export const H6 = forwardRef<View, TypographicStyleProps>(
     const H6Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "headline", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: newTypefaceEnabled ? h6FontSize : legacyFontSize,
       lineHeight: h6LineHeight,

package/src/components/typography/Hero.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -13,11 +13,9 @@ export const heroLineHeight = 48;
 export const Hero = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const HeroProps: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: 32,
       lineHeight: 48,

package/src/components/typography/IOText.tsx

@@ -8,7 +8,7 @@ import {
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { useIOTheme } from "../../context";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOColors } from "../../core";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
@@ -108,19 +108,32 @@ export const IOText = forwardRef<View, IOTextProps>(
   ) => {
     const theme = useIOTheme();
     const boldEnabled = useBoldTextEnabled();
+    const { newTypefaceEnabled } = useIONewTypeface();
+
+    const computedFont =
+      font || (newTypefaceEnabled ? "Titillio" : "TitilliumSansPro");
 
     const computedStyleObj = useMemo(
       () =>
         calculateTextStyle(
           color ?? theme["textBody-default"],
           size,
-          font,
+          computedFont,
           lineHeight,
           weight,
           fontStyle,
           boldEnabled
         ),
-      [color, theme, size, font, lineHeight, weight, fontStyle, boldEnabled]
+      [
+        color,
+        theme,
+        size,
+        computedFont,
+        lineHeight,
+        weight,
+        fontStyle,
+        boldEnabled
+      ]
     );
 
     /* In some cases, for example when we use color transitions with

package/src/components/typography/LabelMini.tsx

@@ -1,7 +1,7 @@
 import { ForwardedRef, forwardRef } from "react";
 import { Pressable, View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useIOTheme } from "../../context";
+import { IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -13,9 +13,6 @@ type LabelMiniProps = TypographicStyleProps & {
   weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 
-const fontName: IOFontFamily = "Titillio";
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
-
 /**
  * `LabelMini` typographic style
  */
@@ -33,7 +30,6 @@ export const LabelMini = forwardRef<View, LabelMiniProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -42,8 +38,7 @@ export const LabelMini = forwardRef<View, LabelMiniProps>(
     const LabelMiniProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
-      font: newTypefaceEnabled ? fontName : legacyFontName,
-      weight: customWeight ? customWeight : "Semibold",
+      weight: customWeight || "Semibold",
       size: 12,
       lineHeight: 18,
       color: customColor ?? defaultColor,

package/src/components/typography/markdown/MdH1.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../context";
+import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
@@ -9,11 +9,9 @@ import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 export const MdH1 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const MdH1Props: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: 20,
       lineHeight: 24,

package/src/components/typography/markdown/MdH2.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../context";
+import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
@@ -9,11 +9,9 @@ import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 export const MdH2 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const MdH2Props: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: 18,
       lineHeight: 24,

package/src/components/typography/markdown/MdH3.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../context";
+import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
@@ -9,11 +9,9 @@ import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 export const MdH3 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const MdH3Props: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: 16,
       lineHeight: 24,