@pagopa/io-app-design-system 1.7.1 → 1.8.0

package/lib/typescript/stories/LabelSmall.stories.d.ts

@@ -2,11 +2,11 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").FC<Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "grey-50" | "grey-100" | "grey-300" | "grey-450" | "grey-650" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "noCieButton" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "green" | "greenLight" | ("white" | "grey-200" | "grey-700" | "bluegrey" | "bluegreyDark" | "blue" | "red")> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "grey-50" | "grey-100" | "grey-300" | "grey-450" | "grey-650" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "noCieButton" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "green" | "greenLight" | ("white" | "grey-200" | "grey-700" | "bluegrey" | "bluegreyDark" | "blue" | "red")> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     } & {
         fontSize?: ("small" | "regular") | undefined;
-    }>;
+    }) => import("react").JSX.Element;
     parameters: {
         layout: string;
         actions: {

package/lib/typescript/stories/Link.stories.d.ts

@@ -2,11 +2,11 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").FunctionComponent<Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"SemiBold" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     } & {
-        fontSize?: ("small" | "regular") | undefined;
-    }>;
+        fontSize?: import("../components").FontSize | undefined;
+    }) => import("react").JSX.Element;
     parameters: {
         layout: string;
         actions: {

package/lib/typescript/stories/Link.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Link.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAUmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Link.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAUwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/lib/typescript/stories/Monospace.stories.d.ts

@@ -2,9 +2,9 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").FC<Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "bluegrey" | "bluegreyDark"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Medium", "bluegrey" | "bluegreyDark"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
-    }>;
+    }) => import("react").JSX.Element;
     parameters: {
         layout: string;
         actions: {

package/lib/typescript/stories/Monospace.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Monospace.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Monospace.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;CAUwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}
+{"version":3,"file":"Monospace.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Monospace.stories.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;CAU4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/lib/typescript/utils/fonts.d.ts

@@ -4,9 +4,9 @@
  * README file included in this repository.
  */
 export type IOFontFamily = keyof typeof fonts;
-declare const weights: readonly ["Light", "Regular", "SemiBold", "Bold"];
+declare const weights: readonly ["Light", "Regular", "Medium", "SemiBold", "Bold"];
 export type IOFontWeight = (typeof weights)[number];
-declare const weightValues: readonly ["300", "400", "600", "700"];
+declare const weightValues: readonly ["300", "400", "500", "600", "700"];
 export type FontWeightValue = (typeof weightValues)[number];
 /**
  * Choose the font name based on the platform
@@ -14,7 +14,7 @@ export type FontWeightValue = (typeof weightValues)[number];
 declare const fonts: {
     TitilliumWeb: string | undefined;
     ReadexPro: string | undefined;
-    RobotoMono: string | undefined;
+    DMMono: string | undefined;
 };
 /**
  * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value

package/lib/typescript/utils/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,mDAAoD,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,uCAAwC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAgBV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAK7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAKhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAMC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAgBC,CAAC"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,6DAA8D,CAAC;AAC5E,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,8CAA+C,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAgBV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAM7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAMhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAMC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAgBC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/alert/Alert.tsx

@@ -29,6 +29,7 @@ import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
 import { H4 } from "../typography/H4";
 import { Label } from "../typography/Label";
+import { useIOExperimentalDesign } from "../../core";
 
 const iconSize: IOIconSizeScale = 24;
 
@@ -50,6 +51,10 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  labelLegacy: {
+    fontSize: 16,
+    ...makeFontStyleObject("Bold", false, "TitilliumWeb")
   }
 });
 
@@ -121,6 +126,7 @@ export const Alert = ({
   testID
 }: AlertType): JSX.Element => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const { isExperimental } = useIOExperimentalDesign();
 
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
@@ -181,7 +187,7 @@ export const Alert = ({
             <VSpacer size={8} />
             <Text
               style={[
-                styles.label,
+                isExperimental ? styles.label : styles.labelLegacy,
                 { color: IOColors[mapVariantStates[variant].foreground] }
               ]}
               numberOfLines={1}

package/src/components/badge/Badge.tsx

@@ -4,7 +4,8 @@ import {
   IOBadgeHSpacing,
   IOBadgeRadius,
   IOBadgeVSpacing,
-  IOColors
+  IOColors,
+  useIOExperimentalDesign
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
@@ -91,31 +92,41 @@ const styles = StyleSheet.create({
     lineHeight: 16,
     alignSelf: "center",
     textTransform: "uppercase",
-    flexShrink: 1,
+    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, "TitilliumWeb")
   }
 });
 
 /**
  * Official badge component
  */
-export const Badge = ({ text, variant, testID }: Badge) => (
-  <View
-    testID={testID}
-    style={[
-      styles.badge,
-      { backgroundColor: IOColors[mapVariants[variant].background] }
-    ]}
-  >
-    <Text
-      numberOfLines={1}
-      ellipsizeMode="tail"
+export const Badge = ({ text, variant, testID }: Badge) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  return (
+    <View
+      testID={testID}
       style={[
-        styles.label,
-        { color: IOColors[mapVariants[variant].foreground] }
+        styles.badge,
+        { backgroundColor: IOColors[mapVariants[variant].background] }
       ]}
     >
-      {text}
-    </Text>
-  </View>
-);
+      <Text
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={[
+          styles.label,
+          isExperimental ? styles.labelFont : styles.legacyLabelFont,
+          { color: IOColors[mapVariants[variant].foreground] }
+        ]}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+};

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

@@ -26,13 +26,15 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
         {
           "alignSelf": "center",
           "flexShrink": 1,
-          "fontFamily": "Readex Pro",
           "fontSize": 12,
-          "fontStyle": "normal",
-          "fontWeight": "400",
           "lineHeight": 16,
           "textTransform": "uppercase",
         },
+        {
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "600",
+        },
         {
           "color": "#555C70",
         },

package/src/components/banner/Banner.tsx

@@ -202,9 +202,7 @@ export const Banner = ({
           <>
             {/* Once we get 'gap' property, we can get rid of
           these <VSpacer> components */}
-            <H6 weight="SemiBold" color={colorTitle}>
-              {title}
-            </H6>
+            <H6 color={colorTitle}>{title}</H6>
             <VSpacer size={4} />
           </>
         )}

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

@@ -72,23 +72,23 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       <Text
         color="blueIO-850"
         defaultColor="black"
-        defaultWeight="Regular"
-        font="ReadexPro"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
         fontStyle={
           {
             "fontSize": 16,
-            "lineHeight": 20,
+            "lineHeight": 24,
           }
         }
         style={
           [
             {
               "fontSize": 16,
-              "lineHeight": 20,
+              "lineHeight": 24,
             },
             {
               "color": "#031344",
-              "fontFamily": "Readex Pro",
+              "fontFamily": "Titillium Web",
               "fontStyle": "normal",
               "fontWeight": "600",
             },

package/src/components/buttons/ButtonExtendedOutline.tsx

@@ -14,7 +14,7 @@ import Animated, {
   withSpring
 } from "react-native-reanimated";
 import { IOIcons, Icon } from "../icons";
-import { H4, LabelSmall } from "../typography";
+import { H6, LabelSmall } from "../typography";
 import { IOScaleValues, IOSpringValues, IOColors, IOStyles } from "../../core";
 
 type Props = {
@@ -88,7 +88,7 @@ export const ButtonExtendedOutline = ({
     >
       <Animated.View style={[styles.button, animatedStyle]}>
         <View style={IOStyles.flex}>
-          <H4>{label}</H4>
+          <H6>{label}</H6>
           {description && (
             <LabelSmall weight="Regular" color={"bluegreyDark"}>
               {description}

package/src/components/buttons/ButtonLink.tsx

@@ -21,6 +21,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons/Icon";
 import { HSpacer } from "../spacer/Spacer";
+import { buttonTextFontSize } from "../typography";
 
 type ColorButtonLink = "primary";
 export type ButtonLink = WithTestID<{
@@ -74,8 +75,8 @@ const mapLegacyColorStates: Record<
 const DISABLED_OPACITY = 0.5;
 const IOButtonStylesLocal = StyleSheet.create({
   label: {
-    fontSize: 16,
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject("Regular", false, "ReadexPro"),
+    fontSize: buttonTextFontSize
   }
 });
 

package/src/components/buttons/ButtonOutline.tsx

@@ -21,19 +21,14 @@ import {
 } from "../../core/";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import {
-  AnimatedIcon,
-  IOIconSizeScale,
-  IOIcons,
-  IconClassComponent
-} from "../icons";
+import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
 import { HSpacer } from "../spacer/Spacer";
+import { buttonTextFontSize } from "../typography";
 
-type ColorButtonOutline = "primary" | "neutral" | "contrast" | "danger";
+type ColorButtonOutline = "primary" | "contrast" | "danger";
 export type ButtonOutline = WithTestID<{
   color?: ColorButtonOutline;
   label: string;
-  small?: boolean;
   fullWidth?: boolean;
   disabled?: boolean;
   // Icons
@@ -85,24 +80,6 @@ const mapColorStates: Record<
       disabled: IOColors["grey-700"]
     }
   },
-  // Neutral button
-  neutral: {
-    border: {
-      default: IOColors.grey,
-      pressed: IOColors.bluegrey,
-      disabled: IOColors.bluegreyLight
-    },
-    background: {
-      default: IOColors.white,
-      pressed: IOColors.greyUltraLight,
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.bluegrey,
-      pressed: IOColors.bluegreyDark,
-      disabled: IOColors.grey
-    }
-  },
   // Contrast button
   contrast: {
     border: {
@@ -164,24 +141,6 @@ const mapLegacyColorStates: Record<
       disabled: IOColors.grey
     }
   },
-  // Neutral button
-  neutral: {
-    border: {
-      default: IOColors.grey,
-      pressed: IOColors.bluegrey,
-      disabled: IOColors.bluegreyLight
-    },
-    background: {
-      default: IOColors.white,
-      pressed: IOColors.greyUltraLight,
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.bluegrey,
-      pressed: IOColors.bluegreyDark,
-      disabled: IOColors.grey
-    }
-  },
   // Contrast button
   contrast: {
     border: {
@@ -237,7 +196,8 @@ const DISABLED_OPACITY = 0.5;
 const IOButtonStylesLocal = StyleSheet.create({
   // eslint-disable-next-line react-native/no-unused-styles
   label: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject("Regular", false, "ReadexPro"),
+    fontSize: buttonTextFontSize
   },
   // eslint-disable-next-line react-native/no-unused-styles
   buttonWithBorder: {
@@ -248,7 +208,6 @@ const IOButtonStylesLocal = StyleSheet.create({
 export const ButtonOutline = ({
   color = "primary",
   label,
-  small = false,
   fullWidth = false,
   disabled = false,
   icon,
@@ -349,9 +308,6 @@ export const ButtonOutline = ({
     isPressed.value = 0;
   }, [isPressed]);
 
-  // Icon size
-  const iconSize: IOIconSizeScale = small ? 16 : 20;
-
   return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
@@ -369,8 +325,8 @@ export const ButtonOutline = ({
         style={[
           buttonStyles.button,
           buttonStylesLocal.buttonWithBorder,
+          buttonStyles.buttonSizeDefault,
           iconPosition === "end" && { flexDirection: "row-reverse" },
-          small ? buttonStyles.buttonSizeSmall : buttonStyles.buttonSizeDefault,
           disabled
             ? {
                 backgroundColor: colorMap[color]?.background?.disabled,
@@ -393,13 +349,11 @@ export const ButtonOutline = ({
                 name={icon}
                 animatedProps={pressedColorIconAnimationStyle}
                 color={colorMap[color]?.label?.default}
-                size={iconSize}
               />
             ) : (
               <AnimatedIcon
                 name={icon}
                 color={colorMap[color]?.label?.disabled}
-                size={iconSize}
               />
             )}
             <HSpacer size={8} />
@@ -409,7 +363,6 @@ export const ButtonOutline = ({
           style={[
             buttonStylesLocal.label,
             buttonStyles.label,
-            small ? buttonStyles.labelSizeSmall : buttonStyles.labelSizeDefault,
             disabled
               ? { color: colorMap[color]?.label?.disabled }
               : { color: colorMap[color]?.label?.default },

package/src/components/buttons/ButtonSolid.tsx

@@ -12,7 +12,7 @@ import Animated, {
 import { IOIcons, Icon } from "../icons";
 import { WithTestID } from "../../utils/types";
 import { HSpacer } from "../spacer/Spacer";
-import { BaseTypography } from "../typography/BaseTypography";
+import { ButtonText, ButtonTextAllowedColors } from "../typography/ButtonText";
 import {
   IOButtonLegacyStyles,
   IOButtonStyles,
@@ -28,8 +28,8 @@ type ColorStates = {
   default: string;
   pressed: string;
   label: {
-    default: IOColors;
-    disabled: IOColors;
+    default: ButtonTextAllowedColors;
+    disabled: ButtonTextAllowedColors;
   };
 };
 
@@ -142,7 +142,7 @@ const mapLegacyColorStates: Record<
     default: IOColors.white,
     pressed: IOColors["blue-50"],
     label: {
-      default: "blue",
+      default: "blueIO-500",
       disabled: "white"
     }
   }
@@ -239,9 +239,7 @@ export const ButtonSolid = React.memo(
           style={[
             buttonStyles.button,
             iconPosition === "end" && { flexDirection: "row-reverse" },
-            small
-              ? buttonStyles.buttonSizeSmall
-              : buttonStyles.buttonSizeDefault,
+            buttonStyles.buttonSizeDefault,
             disabled
               ? isExperimental
                 ? styles.backgroundDisabled
@@ -262,16 +260,9 @@ export const ButtonSolid = React.memo(
               <HSpacer size={8} />
             </>
           )}
-          <BaseTypography
-            font={isExperimental ? "ReadexPro" : undefined}
-            weight={isExperimental ? "Regular" : "Bold"}
+          <ButtonText
             color={foregroundColor}
-            style={[
-              buttonStyles.label,
-              small
-                ? buttonStyles.labelSizeSmall
-                : buttonStyles.labelSizeDefault
-            ]}
+            style={IOButtonStyles.label}
             numberOfLines={1}
             ellipsizeMode="tail"
             /* A11y-related props:
@@ -280,7 +271,7 @@ export const ButtonSolid = React.memo(
                 maxFontSizeMultiplier={1.3} */
           >
             {label}
-          </BaseTypography>
+          </ButtonText>
         </Animated.View>
       </Pressable>
     );

package/src/components/buttons/IconButtonSolid.tsx

@@ -14,7 +14,8 @@ import {
   IOButtonStyles,
   IOIconButtonStyles,
   IOScaleValues,
-  IOSpringValues
+  IOSpringValues,
+  useIOExperimentalDesign
 } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { WithTestID } from "../../utils/types";
@@ -70,6 +71,36 @@ const mapColorStates: Record<
   }
 };
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const mapLegacyColorStates: Record<
+  NonNullable<IconButtonSolid["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    background: {
+      default: IOColors.blue,
+      pressed: IOColors["blue-600"],
+      disabled: IOColors["grey-100"]
+    },
+    icon: {
+      default: IOColors.white,
+      disabled: IOColors["grey-450"]
+    }
+  },
+  contrast: {
+    background: {
+      default: IOColors.white,
+      pressed: IOColors["blue-50"],
+      disabled: hexToRgba(IOColors.white, 0.25)
+    },
+    icon: {
+      default: IOColors.blue,
+      disabled: IOColors.blue
+    }
+  }
+};
+
 export const IconButtonSolid = ({
   icon,
   color = "primary",
@@ -80,7 +111,7 @@ export const IconButtonSolid = ({
   testID
 }: IconButtonSolid) => {
   const isPressed = useSharedValue(0);
-
+  const { isExperimental } = useIOExperimentalDesign();
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
 
@@ -89,15 +120,16 @@ export const IconButtonSolid = ({
     withSpring(isPressed.value, IOSpringValues.button)
   );
 
+  const colorMap = React.useMemo(
+    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+    [isExperimental]
+  );
   // Interpolate animation values from `isPressed` values
   const pressedAnimationStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].background.default,
-        mapColorStates[color].background.pressed
-      ]
+      [colorMap[color].background.default, colorMap[color].background.pressed]
     );
 
     // Scale down button slightly when pressed
@@ -123,7 +155,7 @@ export const IconButtonSolid = ({
     isPressed.value = 0;
   }, [isPressed]);
 
-  const NewButton = () => (
+  return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -143,10 +175,10 @@ export const IconButtonSolid = ({
           !disabled && pressedAnimationStyle,
           disabled
             ? {
-                backgroundColor: mapColorStates[color]?.background?.disabled
+                backgroundColor: colorMap[color]?.background?.disabled
               }
             : {
-                backgroundColor: mapColorStates[color]?.background?.default
+                backgroundColor: colorMap[color]?.background?.default
               }
         ]}
       >
@@ -154,15 +186,13 @@ export const IconButtonSolid = ({
           name={icon}
           color={
             !disabled
-              ? mapColorStates[color]?.icon?.default
-              : mapColorStates[color]?.icon?.disabled
+              ? colorMap[color]?.icon?.default
+              : colorMap[color]?.icon?.disabled
           }
         />
       </Animated.View>
     </Pressable>
   );
-
-  return <NewButton />;
 };
 
 export default IconButtonSolid;