@pagopa/io-app-design-system 1.21.0 → 1.23.0

package/src/components/typography/H5.tsx

@@ -1,4 +1,4 @@
-import { IOTheme } from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -12,19 +12,22 @@ type H5Props = ExternalTypographyProps<
 
 export const h5FontSize = 14;
 export const h5LineHeight = 16;
-const font: FontFamily = "TitilliumWeb";
+const font: FontFamily = "TitilliumSansPro";
+const legacyFont: FontFamily = "TitilliumWeb";
 const defaultColor: AllowedColors = "black";
 const defaultWeight: AllowedWeight = "SemiBold";
 
 /**
  * `H5` typographic style
  */
-export const H5 = (props: H5Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const H5 = (props: H5Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight,
     defaultColor,
-    font,
+    font: isExperimental ? font : legacyFont,
     fontStyle: {
       fontSize: h5FontSize,
       lineHeight: h5LineHeight,
@@ -32,3 +35,4 @@ export const H5 = (props: H5Props) =>
       letterSpacing: 0.5
     }
   });
+};

package/src/components/typography/Label.tsx

@@ -1,4 +1,8 @@
-import type { IOColors, IOColorsStatusForeground } from "../../core/IOColors";
+import {
+  IOColors,
+  IOColorsStatusForeground,
+  useIOExperimentalDesign
+} from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import {
@@ -16,19 +20,22 @@ type LabelProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 > & { fontSize?: FontSize };
 
-const fontName: FontFamily = "TitilliumWeb";
+const fontName: FontFamily = "TitilliumSansPro";
+const legacyFontName: FontFamily = "TitilliumWeb";
 const labelDefaultWeight = "Bold";
 const labelDefaultcolor = "black";
 
 /**
  * `Label` typographic style
  */
-export const Label = ({ fontSize, ...props }: LabelProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const Label = ({ fontSize, ...props }: LabelProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
-    font: fontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: {
       fontSize: fontSize ? fontSizeMapping[fontSize] : fontSizeMapping.regular,
       lineHeight: fontSize
@@ -36,3 +43,4 @@ export const Label = ({ fontSize, ...props }: LabelProps) =>
         : lineHeightMapping.regular
     }
   });
+};

package/src/components/typography/LabelLink.tsx

@@ -1,5 +1,6 @@
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { useIOExperimentalDesign, type IOColors } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
 import {
   ExternalTypographyProps,
   FontSize,
@@ -7,7 +8,6 @@ import {
   fontSizeMapping,
   lineHeightMapping
 } from "./common";
-import { useTypographyFactory } from "./Factory";
 
 type AllowedColors = IOColors;
 type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
@@ -18,7 +18,8 @@ type LinkProps = ExternalTypographyProps<
 > &
   AllowedFontSize;
 
-const fontName: IOFontFamily = "TitilliumWeb";
+const fontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontName: IOFontFamily = "TitilliumWeb";
 
 export const linkLegacyDefaultColor: AllowedColors = "blue";
 
@@ -36,7 +37,7 @@ export const LabelLink = (props: LinkProps) => {
     ...props,
     defaultWeight: linkDefaultWeight,
     defaultColor: isExperimental ? linkDefaultColor : linkLegacyDefaultColor,
-    font: fontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: {
       fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]

package/src/components/typography/LabelSmall.tsx

@@ -1,5 +1,4 @@
-import { useIOExperimentalDesign } from "../../core";
-import type { IOColors, IOTheme } from "../../core/IOColors";
+import { IOColors, IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, FontType, TypographyProps } from "./common";
@@ -26,7 +25,8 @@ type LabelSmallProps = ExternalTypographyProps<
   AllowedFontSize &
   FontType;
 
-const defaultFontName: FontFamily = "TitilliumWeb";
+const fontName: FontFamily = "TitilliumSansPro";
+const legacyFontName: FontFamily = "TitilliumWeb";
 const fontSizeMapping: Record<FontSize, number> = {
   regular: 14,
   small: 12
@@ -48,8 +48,7 @@ export const LabelSmall = (props: LabelSmallProps) => {
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
-    font:
-      isExperimental && props.font !== undefined ? props.font : defaultFontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: {
       fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]

package/src/utils/fonts.ts

@@ -15,6 +15,11 @@ const fonts = {
     web: "TitilliumWeb",
     ios: "Titillium Web"
   }),
+  TitilliumSansPro: Platform.select({
+    android: "TitilliumSansPro",
+    web: "TitilliumSansPro",
+    ios: "Titillium Sans Pro"
+  }),
   ReadexPro: Platform.select({
     android: "ReadexPro",
     web: "ReadexPro",