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

package/src/components/toast/ToastProvider.tsx

@@ -7,12 +7,12 @@ import Animated, {
   SlideInUp,
   SlideOutUp
 } from "react-native-reanimated";
-import { Dismissable } from "../layout/Dismissable";
 import { triggerHaptic } from "../../functions";
+import { Dismissable } from "../layout/Dismissable";
 import { ToastNotification } from "./ToastNotification";
+import { ToastContext } from "./context";
 import { Toast } from "./types";
 import { IOToastRef, useIOToast } from "./useIOToast";
-import { ToastContext } from "./context";
 
 /**
  * The maximum number of toasts that can be displayed at the same time
@@ -67,7 +67,16 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
 
   const addToast = React.useCallback((toast: Toast): number => {
     const id = (toastId.current ?? 0) + 1;
-    setToasts(prevToasts => [{ id, ...toast }, ...prevToasts]);
+    // eslint-disable-next-line functional/immutable-data
+    toastId.current = id;
+    setToasts(prevToasts => {
+      if (prevToasts.length >= MAX_TOAST_STACK_SIZE) {
+        const mostRecentToasts = prevToasts.slice(0, -1);
+        return [{ id, ...toast }, ...mostRecentToasts];
+      }
+
+      return [{ id, ...toast }, ...prevToasts];
+    });
 
     setTimeout(() => {
       setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
@@ -84,20 +93,6 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
     setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
   }, []);
 
-  const removeToastAtIndex = (index: number) => {
-    setToasts(prevToasts => [
-      ...prevToasts.slice(0, index),
-      ...prevToasts.slice(index + 1)
-    ]);
-  };
-
-  // If stack size exceed the maximum, remove the oldest toast
-  React.useEffect(() => {
-    if (toasts.length > MAX_TOAST_STACK_SIZE) {
-      removeToastAtIndex(MAX_TOAST_STACK_SIZE);
-    }
-  }, [toasts]);
-
   const removeAllToasts = React.useCallback(() => {
     setToasts([]);
   }, []);

package/src/components/typography/H1.tsx

@@ -4,7 +4,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Bold">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
 type H1Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -18,7 +18,9 @@ const defaultWeight: AllowedWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont: FontFamily = "TitilliumWeb";
-const legacyDefaultWeight: AllowedWeight = "Bold";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
+const legacyH1FontSize = 31;
+const legacyH1LineHeight = 43;
 
 /**
  * `H1` typographic style
@@ -31,6 +33,9 @@ export const H1 = (props: H1Props) => {
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
     defaultColor,
     font: isExperimental ? font : legacyFont,
-    fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h1FontSize : legacyH1FontSize,
+      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight
+    }
   });
 };

package/src/components/typography/H2.tsx

@@ -4,7 +4,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 type H2Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -18,7 +18,9 @@ const defaultWeight: AllowedWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont: FontFamily = "TitilliumWeb";
-const legacyDefaultWeight: AllowedWeight = "Bold";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
+const legacyH2FontSize = 28;
+const legacyH2LineHeight = 40;
 
 /**
  * `H2` typographic style
@@ -31,6 +33,9 @@ export const H2 = (props: H2Props) => {
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
     defaultColor,
     font: isExperimental ? font : legacyFont,
-    fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
+      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
+    }
   });
 };

package/src/components/typography/H3.tsx

@@ -4,7 +4,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 type H3Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -20,7 +20,9 @@ const defaultWeight: AllowedWeight = "Regular";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: FontFamily = "TitilliumWeb";
 const legacyDefaultColor: AllowedColors = "bluegreyDark";
-const legacyDefaultWeight: AllowedWeight = "Bold";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
+const legacyH3FontSize = 24;
+const legacyH3LineHeight = 34;
 /**
  * `H3` typographic style
  */
@@ -31,6 +33,9 @@ export const H3 = (props: H3Props) => {
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
     defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
     font: isExperimental ? font : legacyFontName,
-    fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h3FontSize : legacyH3FontSize,
+      lineHeight: isExperimental ? h3LineHeight : legacyH3LineHeight
+    }
   });
 };

package/src/components/typography/H4.tsx

@@ -20,6 +20,7 @@ const defaultWeight: AllowedWeight = "Regular";
 const legacyFontName: FontFamily = "TitilliumWeb";
 const legacyDefaultColor: AllowedColors = "bluegreyDark";
 const legacyDefaultWeight: AllowedWeight = "SemiBold";
+const legacyH4FontSize = 22;
 
 /**
  * `H4` typographic style
@@ -31,6 +32,9 @@ export const H4 = (props: H4Props) => {
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
     defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
     font: isExperimental ? font : legacyFontName,
-    fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h4FontSize : legacyH4FontSize,
+      lineHeight: h4LineHeight
+    }
   });
 };

package/src/components/typography/H6.tsx

@@ -18,6 +18,8 @@ const h6DefaultWeight: AllowedWeight = "Regular";
 const fontName: FontFamily = "ReadexPro";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFontSize = 18;
+const legacyLineHeight = 25;
 const legacyFontName: FontFamily = "TitilliumWeb";
 const legacyDefaultWeight: AllowedWeight = "SemiBold";
 
@@ -32,6 +34,9 @@ export const H6 = (props: H6Props) => {
     defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
     defaultColor: h6DefaultColor,
     font: isExperimental ? fontName : legacyFontName,
-    fontStyle: { fontSize: h6FontSize, lineHeight: h6LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h6FontSize : legacyFontSize,
+      lineHeight: isExperimental ? h6LineHeight : legacyLineHeight
+    }
   });
 };

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).