@pagopa/io-app-design-system 1.16.1 → 1.17.0

package/src/components/typography/Hero.tsx

@@ -4,7 +4,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
 type HeroProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -18,6 +18,10 @@ const defaultWeight: AllowedWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont: FontFamily = "TitilliumWeb";
+const legacyWeight: AllowedWeight = "SemiBold";
+const legacyHeroFontSize = 35;
+const legacyHeroLineHeight = 49;
+
 /**
  * `Hero` typographic style
  */
@@ -26,9 +30,12 @@ export const Hero = (props: HeroProps) => {
 
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight,
+    defaultWeight: isExperimental ? defaultWeight : legacyWeight,
     defaultColor,
     font: isExperimental ? font : legacyFont,
-    fontStyle: { fontSize: heroFontSize, lineHeight: heroLineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
+      lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
+    }
   });
 };

package/src/components/typography/LabelSmall.tsx

@@ -31,6 +31,10 @@ const fontSizeMapping: Record<FontSize, number> = {
   regular: 14,
   small: 12
 };
+const lineHeightMapping: Record<FontSize, number> = {
+  regular: 21,
+  small: 18
+};
 const labelDefaultWeight = "Bold";
 const labelDefaultcolor = "blue";
 
@@ -49,7 +53,10 @@ export const LabelSmall = (props: LabelSmallProps) => {
     fontStyle: {
       fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]
-        : fontSizeMapping.regular
+        : fontSizeMapping.regular,
+      lineHeight: props.fontSize
+        ? lineHeightMapping[props.fontSize]
+        : lineHeightMapping.regular
     }
   });
 };

package/src/components/typography/LabelSmallAlt.tsx

@@ -0,0 +1,51 @@
+import { useIOExperimentalDesign } from "../../core";
+import type { IOColors, IOTheme } from "../../core/IOColors";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type PartialAllowedColors = Extract<
+  IOColors,
+  | "blue"
+  | "bluegrey"
+  | "red"
+  | "white"
+  | "bluegreyDark"
+  | "grey-700"
+  | "grey-200"
+>;
+type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
+
+type LabelSmallAltProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const labelFontSize = 14;
+const labelLineHeight = 21;
+const fontName: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyLabelFontSize = 16;
+const legacyFontName: FontFamily = "TitilliumWeb";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
+
+/**
+ * `LabelSmallAlt` typographic style. It's referenced as `LabelSmallReadex` in the design projects.
+ */
+export const LabelSmallAlt = (props: LabelSmallAltProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor,
+    font: isExperimental ? fontName : legacyFontName,
+    fontStyle: {
+      fontSize: isExperimental ? labelFontSize : legacyLabelFontSize,
+      lineHeight: labelLineHeight
+    }
+  });
+};

package/src/components/typography/README.md

@@ -0,0 +1,23 @@
+# Typography
+
+## Handling font files
+
+The application uses the font _Titillium Web_. Fonts are handled differently than Android and iOS. To use the font, `TitilliumWeb-SemiBoldItalic` example, you must apply the following properties for Android:
+
+```css
+{
+  fontFamily: 'TitilliumWeb-SemiBoldItalic'
+}
+```
+
+while in iOS the code to be applied is:
+
+```css
+{
+  fontFamily: 'Titillium Web',
+  fontWeight: '600',
+  fontStyle: 'italic'
+}
+```
+
+To manage fonts and variants more easily, we have created utility functions within the file [fonts.ts](../../utils/fonts.ts).

package/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap

@@ -102,29 +102,29 @@ exports[`Test Typography Components H1 Snapshot 1`] = `
   allowFontScaling={false}
   color="black"
   defaultColor="black"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 28,
-      "lineHeight": 42,
+      "fontSize": 31,
+      "lineHeight": 43,
     }
   }
   style={
     [
       {
-        "fontSize": 28,
-        "lineHeight": 42,
+        "fontSize": 31,
+        "lineHeight": 43,
       },
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -135,29 +135,29 @@ exports[`Test Typography Components H1 Snapshot 2`] = `
   allowFontScaling={false}
   color="white"
   defaultColor="black"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 28,
-      "lineHeight": 42,
+      "fontSize": 31,
+      "lineHeight": 43,
     }
   }
   style={
     [
       {
-        "fontSize": 28,
-        "lineHeight": 42,
+        "fontSize": 31,
+        "lineHeight": 43,
       },
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -168,29 +168,29 @@ exports[`Test Typography Components H2 Snapshot 1`] = `
   allowFontScaling={false}
   color="black"
   defaultColor="black"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 26,
-      "lineHeight": 39,
+      "fontSize": 28,
+      "lineHeight": 40,
     }
   }
   style={
     [
       {
-        "fontSize": 26,
-        "lineHeight": 39,
+        "fontSize": 28,
+        "lineHeight": 40,
       },
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -201,29 +201,29 @@ exports[`Test Typography Components H3 Snapshot 1`] = `
   allowFontScaling={false}
   color="bluegreyDark"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#17324D",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -234,29 +234,29 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
   allowFontScaling={false}
   color="bluegreyLight"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#CCD4DC",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -267,29 +267,29 @@ exports[`Test Typography Components H3 Snapshot 3`] = `
   allowFontScaling={false}
   color="white"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -300,29 +300,29 @@ exports[`Test Typography Components H3 Snapshot 4`] = `
   allowFontScaling={false}
   color="white"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -333,29 +333,29 @@ exports[`Test Typography Components H3 Snapshot 5`] = `
   allowFontScaling={false}
   color="bluegreyDark"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#17324D",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -370,14 +370,14 @@ exports[`Test Typography Components H4 Snapshot 1`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -403,14 +403,14 @@ exports[`Test Typography Components H4 Snapshot 2`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -436,14 +436,14 @@ exports[`Test Typography Components H4 Snapshot 3`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -469,14 +469,14 @@ exports[`Test Typography Components H4 Snapshot 4`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -502,14 +502,14 @@ exports[`Test Typography Components H4 Snapshot 5`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -535,14 +535,14 @@ exports[`Test Typography Components H4 Snapshot 6`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -568,14 +568,14 @@ exports[`Test Typography Components H4 Snapshot 7`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -749,15 +749,15 @@ exports[`Test Typography Components H6 Snapshot 1`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 16,
-      "lineHeight": 24,
+      "fontSize": 18,
+      "lineHeight": 25,
     }
   }
   style={
     [
       {
-        "fontSize": 16,
-        "lineHeight": 24,
+        "fontSize": 18,
+        "lineHeight": 25,
       },
       {
         "color": "#0E0F13",
@@ -849,12 +849,14 @@ exports[`Test Typography Components LabelSmall Snapshot 1`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#0073E6",
@@ -880,12 +882,14 @@ exports[`Test Typography Components LabelSmall Snapshot 2`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#0073E6",
@@ -911,12 +915,14 @@ exports[`Test Typography Components LabelSmall Snapshot 3`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#475A6D",
@@ -942,12 +948,14 @@ exports[`Test Typography Components LabelSmall Snapshot 4`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#C02927",
@@ -973,12 +981,14 @@ exports[`Test Typography Components LabelSmall Snapshot 5`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#FFFFFF",

package/src/components/typography/index.tsx

@@ -13,6 +13,7 @@ export * from "./H6";
 export * from "./Hero";
 export * from "./Label";
 export * from "./LabelSmall";
+export * from "./LabelSmallAlt";
 export * from "./LabelLink";
 export * from "./BodyMonospace";
 export * from "./common";