@pagopa/io-app-design-system 1.42.0 → 2.0.0-1

package/src/components/modules/ModuleIDP.tsx

@@ -1,20 +1,12 @@
 import * as React from "react";
+import { Image, ImageSourcePropType, Platform, StyleSheet } from "react-native";
 import {
-  Image,
-  ImageSourcePropType,
-  Platform,
-  StyleSheet,
-  Text
-} from "react-native";
-import {
-  IOColors,
   IOListItemLogoMargin,
-  IOVisualCostants,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOText } from "../typography";
 import {
   PressableModuleBase,
   PressableModuleBaseProps
@@ -28,19 +20,6 @@ interface ModuleIDP extends PressableModuleBaseProps {
 }
 
 const styles = StyleSheet.create({
-  idpName: {
-    fontSize: 12,
-    lineHeight: 16,
-    alignSelf: "center",
-    textTransform: "uppercase",
-    flexShrink: 1
-  },
-  idpNameFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  idpLegacyNameFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
-  },
   idpLogo: {
     marginStart: IOListItemLogoMargin,
     width: 120,
@@ -79,18 +58,22 @@ export const ModuleIDP = ({
       testID={testID}
       withLooseSpacing={withLooseSpacing}
     >
-      <Text
-        allowFontScaling={isExperimental}
-        maxFontSizeMultiplier={IOVisualCostants.maxFontSizeMultiplier}
-        style={[
-          styles.idpName,
-          { color: IOColors[theme["textBody-tertiary"]] },
-          isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
-        ]}
+      <IOText
+        font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+        weight={isExperimental ? "Regular" : "Semibold"}
+        size={12}
+        lineHeight={16}
+        color={theme["textBody-tertiary"]}
+        textStyle={{
+          alignSelf: "center",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          flexShrink: 1
+        }}
         accessibilityLabel={accessibilityLabel ?? name}
       >
         {name}
-      </Text>
+      </IOText>
       <Image
         accessibilityIgnoresInvertColors
         source={urlLogoIDP}

package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

@@ -82,33 +82,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           1
         </Text>
@@ -173,33 +161,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           2
         </Text>
@@ -264,33 +240,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           3
         </Text>
@@ -378,33 +342,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           4
         </Text>
@@ -469,33 +421,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           5
         </Text>
@@ -560,33 +500,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           6
         </Text>
@@ -674,33 +602,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           7
         </Text>
@@ -765,33 +681,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           8
         </Text>
@@ -856,33 +760,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           9
         </Text>
@@ -1111,33 +1003,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           0
         </Text>

package/src/components/searchInput/SearchInput.tsx

@@ -36,7 +36,7 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
 import { ButtonLink } from "../buttons";
 import { IOIconSizeScale, Icon } from "../icons";
 
@@ -51,7 +51,7 @@ const iconMargin: IOSpacingScale = 8;
 const iconColor: IOColors = "grey-700";
 const iconSize: IOIconSizeScale = 16;
 const iconCloseSize: IOIconSizeScale = 24;
-const inputFontSizePlaceholder: number = 14;
+const inputFontSizePlaceholder: IOFontSize = 14;
 const cancelButtonMargin: IOSpacingScale = 16;
 const inputTransitionDuration: number = 250;
 const inputHeightIOS: number = 36;
@@ -324,12 +324,20 @@ const styles = StyleSheet.create({
     marginRight: iconMargin
   },
   placeholder: {
-    fontSize: inputFontSizePlaceholder,
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject(
+      inputFontSizePlaceholder,
+      "ReadexPro",
+      undefined,
+      "Regular"
+    )
   },
   placeholderLegacy: {
-    fontSize: inputFontSizePlaceholder,
-    ...makeFontStyleObject("Regular", false, "TitilliumSansPro")
+    ...makeFontStyleObject(
+      inputFontSizePlaceholder,
+      "TitilliumSansPro",
+      undefined,
+      "Regular"
+    )
   },
   cancelButton: {
     position: "absolute",

package/src/components/switch/SwitchLabel.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { Pressable, View } from "react-native";
+import { useIOTheme } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { HSpacer } from "../spacer/Spacer";
 import { H6 } from "../typography/H6";
 import { AnimatedSwitch } from "./AnimatedSwitch";
@@ -23,17 +22,6 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedSwitch>, "disabled" | "checked"> &
   Pick<React.ComponentProps<typeof Pressable>, "onPress">;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const styles = StyleSheet.create({
-  legacyTextValue: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: IOColors.bluegreyDark,
-    flexShrink: 1,
-    ...makeFontStyleObject("Semibold", undefined, "TitilliumSansPro")
-  }
-});
-
 /**
  * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
@@ -47,24 +35,8 @@ export const SwitchLabel = ({
   disabled,
   onValueChange
 }: OwnProps) => {
-  const [toggleValue, setToggleValue] = useState(checked ?? false);
   const theme = useIOTheme();
-
-  const { isExperimental } = useIOExperimentalDesign();
-  const switchLabelText = (
-    <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
-      {label}
-    </H6>
-  );
-
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacySwitchlabelText = (
-    <Text style={styles.legacyTextValue}>{label}</Text>
-  );
-
-  const switchLabelTextComponent = isExperimental
-    ? switchLabelText
-    : legacySwitchlabelText;
+  const [toggleValue, setToggleValue] = useState(checked ?? false);
 
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
@@ -99,7 +71,9 @@ export const SwitchLabel = ({
           <AnimatedSwitch checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        {switchLabelTextComponent}
+        <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
+          {label}
+        </H6>
       </View>
     </Pressable>
   );

package/src/components/tabs/TabItem.tsx

@@ -20,7 +20,7 @@ import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressPro
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
-import { LabelHeader } from "../typography/LabelHeader";
+import { LabelSmall } from "../typography";
 
 type ColorMode = "light" | "dark";
 
@@ -257,7 +257,9 @@ const TabItem = ({
             <HSpacer size={4} />
           </>
         )}
-        <LabelHeader color={foregroundColor}>{label}</LabelHeader>
+        <LabelSmall weight="Semibold" color={foregroundColor}>
+          {label}
+        </LabelSmall>
       </Animated.View>
     </Pressable>
   );

package/src/components/tag/Tag.tsx

@@ -1,16 +1,21 @@
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
-import { IOColors, IOTagRadius, useIOExperimentalDesign } from "../../core";
+import { Platform, StyleSheet, View } from "react-native";
+import {
+  IOColors,
+  IOTagRadius,
+  useIOExperimentalDesign,
+  useIOTheme
+} from "../../core";
 import {
   IOSpacingScale,
   IOTagHSpacing,
   IOTagVSpacing
 } from "../../core/IOSpacing";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { IOText } from "../typography";
 
 type VariantProps = {
   iconColor: IOColors;
@@ -74,21 +79,6 @@ const styles = StyleSheet.create({
   },
   spacer: {
     width: IOTagIconMargin
-  },
-  label: {
-    fontSize: 12,
-    lineHeight: 16,
-    alignSelf: "center",
-    textTransform: "uppercase",
-    color: IOColors["grey-700"],
-    flexShrink: 1
-  },
-  labelFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  legacyLabelFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
   }
 });
 
@@ -151,6 +141,7 @@ export const Tag = ({
   customIconProps,
   iconAccessibilityLabel
 }: Tag) => {
+  const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
 
   const variantProps = getVariantProps(variant, customIconProps);
@@ -177,16 +168,23 @@ export const Tag = ({
       )}
       {variantProps && text && <View style={styles.spacer} />}
       {text && (
-        <Text
+        <IOText
+          font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+          weight={isExperimental ? "Regular" : "Semibold"}
+          size={12}
+          lineHeight={16}
+          color={theme["textBody-tertiary"]}
           numberOfLines={1}
           ellipsizeMode="tail"
-          style={[
-            styles.label,
-            isExperimental ? styles.labelFont : styles.legacyLabelFont
-          ]}
+          style={{
+            alignSelf: "center",
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            flexShrink: 1
+          }}
         >
           {text}
-        </Text>
+        </IOText>
       )}
     </View>
   );