@pagopa/io-app-design-system 1.11.3 → 1.13.0

package/lib/typescript/components/toast/ToastNotification.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { Toast } from "./types";
+type Props = Pick<Toast, "message" | "variant" | "icon">;
+declare const ToastNotification: ({ message, variant, icon }: Props) => React.JSX.Element;
+export { ToastNotification };
+//# sourceMappingURL=ToastNotification.d.ts.map

package/lib/typescript/components/toast/ToastNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastNotification.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/ToastNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,EAAgB,MAAM,SAAS,CAAC;AA8B9C,KAAK,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAEzD,QAAA,MAAM,iBAAiB,+BAA4C,KAAK,sBAsBvE,CAAC;AAgBF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/lib/typescript/components/toast/ToastProvider.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+/**
+ * The maximum number of toasts that can be displayed at the same time
+ * If the number of the toasts exceeds this number, the oldest one will be removed
+ */
+export declare const MAX_TOAST_STACK_SIZE = 3;
+/**
+ * The time in milliseconds that a toast notification will be displayed
+ */
+export declare const TOAST_DURATION_TIME = 5000;
+/**
+ * This is the time in milliseconds between two toast notifications.
+ * This will throttle the toast notifications to avoid displaying too many of them at the same time
+ * and causing visual glitches.
+ */
+export declare const TOAST_THROTTLE_TIME = 500;
+type ToastProviderProps = {
+    children: React.ReactNode;
+};
+export declare const ToastProvider: ({ children }: ToastProviderProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=ToastProvider.d.ts.map

package/lib/typescript/components/toast/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B;;;GAGG;AACH,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC;;GAEG;AACH,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAyBvC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,aAAa,iBAAkB,kBAAkB,sBAqE7D,CAAC"}

package/lib/typescript/components/toast/context.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Toast } from "./types";
+export type ToastContext = {
+    addToast: (props: Toast) => number;
+    removeToast: (id: number) => void;
+    removeAllToasts: () => void;
+};
+export declare const ToastContext: import("react").Context<ToastContext>;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/components/toast/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;IACnC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,uCAIvB,CAAC"}

package/lib/typescript/components/toast/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ToastNotification";
+export * from "./ToastProvider";
+export * from "./useIOToast";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

package/lib/typescript/components/toast/types.d.ts

@@ -0,0 +1,11 @@
+import { HapticFeedbackTypes } from "react-native-haptic-feedback";
+import { IOIcons } from "@pagopa/io-app-design-system";
+export type ToastVariant = "neutral" | "error" | "info" | "success" | "warning";
+export type Toast = {
+    message: string;
+    variant?: ToastVariant;
+    icon?: IOIcons;
+    hapticFeedback?: keyof typeof HapticFeedbackTypes;
+};
+export type ToastOptions = Omit<Toast, "message">;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/components/toast/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC"}

package/lib/typescript/components/toast/useIOToast.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { ToastOptions } from "./types";
+export declare const useIOToast: () => {
+    show: (message: string, options?: ToastOptions) => void;
+    error: (message: string) => void;
+    info: (message: string) => void;
+    success: (message: string) => void;
+    warning: (message: string) => void;
+    hide: (id: number) => void;
+    hideAll: () => void;
+};
+export type IOToast = ReturnType<typeof useIOToast>;
+export declare const IOToastRef: React.MutableRefObject<{
+    show: (message: string, options?: ToastOptions) => void;
+    error: (message: string) => void;
+    info: (message: string) => void;
+    success: (message: string) => void;
+    warning: (message: string) => void;
+    hide: (id: number) => void;
+    hideAll: () => void;
+}>;
+export declare const IOToast: IOToast;
+//# sourceMappingURL=useIOToast.d.ts.map

package/lib/typescript/components/toast/useIOToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIOToast.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/useIOToast.ts"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;oBAKT,MAAM,YAAY,YAAY;qBAO9B,MAAM;oBAWN,MAAM;uBAWN,MAAM;uBAWN,MAAM;;;CAsBnB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU;oBAlET,MAAM,YAAY,YAAY;qBAO9B,MAAM;oBAWN,MAAM;uBAWN,MAAM;uBAWN,MAAM;;;EA2BqC,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,OASrB,CAAC"}

package/lib/typescript/core/IOStyles.d.ts

@@ -72,6 +72,11 @@ export declare const IOButtonLegacyStyles: {
         paddingHorizontal: number;
         elevation: number;
     };
+    buttonInner: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
     label: {
         alignSelf: "center";
     };
@@ -92,6 +97,11 @@ export declare const IOButtonStyles: {
         paddingHorizontal: number;
         elevation: number;
     };
+    buttonInner: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
     buttonLink: {
         flexDirection: "row";
         alignItems: "center";

package/lib/typescript/core/IOStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOStyles.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEpE;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAeH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;CAiC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,sBAOpC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAW3B,CAAC;AAEH;;GAEG;AAEH,UAAU,2BAA2B;IACnC,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAC1B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iCAAiC;IACzC,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,2BAMzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBASlC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,iCAI7C,CAAC;AAEJ,UAAU,+BAA+B;IACvC,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B,EAAE,+BAQ3C,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAWpC,CAAC"}
+{"version":3,"file":"IOStyles.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEpE;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAeH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;CAsC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,sBAOpC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAW3B,CAAC;AAEH;;GAEG;AAEH,UAAU,2BAA2B;IACnC,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAC1B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iCAAiC;IACzC,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,2BAMzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBASlC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,iCAI7C,CAAC;AAEJ,UAAU,+BAA+B;IACvC,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B,EAAE,+BAQ3C,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAWpC,CAAC"}

package/lib/typescript/core/IOTransitions.d.ts

@@ -0,0 +1,58 @@
+/**
+A custom enter transition designed for the average size
+inner content of a button or module (e.g. text).
+The scaling effect is slight.
+*/
+export declare const enterTransitionInnerContent: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 1;
+        transform: {
+            scale: 1;
+        }[];
+    };
+};
+/**
+A custom enter transition designed for the small size
+inner content of a button or module (e.g. loading spinner).
+The scaling effect is accentuated.
+*/
+export declare const enterTransitionInnerContentSmall: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 1;
+        transform: {
+            scale: 1;
+        }[];
+    };
+};
+/**
+A custom exit transition designed for both small
+and average size inner content of a button or module.
+The scaling effect is slight.
+*/
+export declare const exitTransitionInnerContent: () => {
+    initialValues: {
+        opacity: number;
+        transform: {
+            scale: number;
+        }[];
+    };
+    animations: {
+        opacity: 0;
+        transform: {
+            scale: 0.9;
+        }[];
+    };
+};
+//# sourceMappingURL=IOTransitions.d.ts.map

package/lib/typescript/core/IOTransitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IOTransitions.d.ts","sourceRoot":"","sources":["../../../src/core/IOTransitions.ts"],"names":[],"mappings":"AAEA;;;;EAIE;AACF,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;CAwBvC,CAAC;AAEF;;;;EAIE;AACF,eAAO,MAAM,gCAAgC;;;;;;;;;;;;;CAwB5C,CAAC;AAEF;;;;EAIE;AACF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;CAwBtC,CAAC"}

package/lib/typescript/core/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./IOColors";
 export * from "./IOAnimations";
+export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";

package/lib/typescript/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC"}

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").MemoExoticComponent<({ color, label, fullWidth, disabled, icon, iconPosition, onPress, accessibilityLabel, accessibilityHint, testID }: import("../components").ButtonSolidProps) => import("react").JSX.Element>;
+    component: import("react").MemoExoticComponent<({ color, label, fullWidth, disabled, loading, icon, iconPosition, onPress, accessibilityLabel, accessibilityHint, testID }: import("../components").ButtonSolidProps) => import("react").JSX.Element>;
     parameters: {
         layout: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.11.3",
+  "version": "1.13.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -67,6 +67,7 @@
     "@storybook/react-webpack5": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
     "@types/jest": "^28.1.2",
+    "@types/lodash": "^4.14.157",
     "@types/react": "~17.0.38",
     "@types/react-native": "0.70.0",
     "babel-loader": "^9.1.3",
@@ -170,6 +171,7 @@
     ]
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "@expo/vector-icons": "^13.0.0",
     "@pagopa/ts-commons": "^12.0.0",
     "@testing-library/jest-native": "^5.4.2",

package/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap

@@ -78,6 +78,7 @@ exports[`Test Advice Components Advice Snapshot 1`] = `
     }
   />
   <Text
+    allowFontScaling={false}
     color="bluegrey"
     defaultColor="bluegrey"
     defaultWeight="Regular"

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

@@ -70,6 +70,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         color="blueIO-850"
         defaultColor="black"
         defaultWeight="SemiBold"
@@ -184,7 +185,9 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             }
           >
             <Text
+              allowFontScaling={false}
               ellipsizeMode="tail"
+              maxFontSizeMultiplier={1.3}
               numberOfLines={1}
               style={
                 [

package/src/components/buttons/ButtonLink.tsx

@@ -236,10 +236,8 @@ export const ButtonLink = React.memo(
             ]}
             numberOfLines={1}
             ellipsizeMode="tail"
-            /* A11y-related props:
-                DON'T UNCOMMENT THEM */
-            /* allowFontScaling
-                maxFontSizeMultiplier={1.3} */
+            allowFontScaling={isExperimental}
+            maxFontSizeMultiplier={1.3}
           >
             {label}
           </Animated.Text>

package/src/components/buttons/ButtonOutline.tsx

@@ -332,6 +332,7 @@ export const ButtonOutline = ({
       <Animated.View
         style={[
           buttonStyles.button,
+          isExperimental && fullWidth && { paddingHorizontal: 16 },
           buttonStylesLocal.buttonWithBorder,
           buttonStyles.buttonSizeDefault,
           iconPosition === "end" && { flexDirection: "row-reverse" },
@@ -380,10 +381,8 @@ export const ButtonOutline = ({
           ]}
           numberOfLines={1}
           ellipsizeMode="tail"
-          /* A11y-related props:
-                DON'T UNCOMMENT THEM */
-          /* allowFontScaling
-                maxFontSizeMultiplier={1.3} */
+          allowFontScaling={isExperimental}
+          maxFontSizeMultiplier={1.3}
         >
           {label}
         </Animated.Text>

package/src/components/buttons/ButtonSolid.tsx

@@ -9,6 +9,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { WithTestID } from "../../utils/types";
 import { HSpacer } from "../spacer/Spacer";
@@ -19,8 +20,12 @@ import {
   IOColors,
   IOScaleValues,
   IOSpringValues,
+  enterTransitionInnerContent,
+  enterTransitionInnerContentSmall,
+  exitTransitionInnerContent,
   useIOExperimentalDesign
 } from "../../core";
+import { LoadingSpinner } from "../loadingSpinner";
 
 type ButtonSolidColor = "primary" | "danger" | "contrast";
 
@@ -65,6 +70,10 @@ export type ButtonSolidProps = WithTestID<{
    * @default false
    */
   fullWidth?: boolean;
+  /**
+   * @default false
+   */
+  loading?: boolean;
   /**
    * @default false
    */
@@ -152,6 +161,7 @@ export const ButtonSolid = React.memo(
     label,
     fullWidth = false,
     disabled = false,
+    loading = false,
     icon,
     iconPosition = "start",
     onPress,
@@ -211,6 +221,19 @@ export const ButtonSolid = React.memo(
       isPressed.value = 0;
     }, [isPressed]);
 
+    const handleOnPress = useCallback(
+      (event: GestureResponderEvent) => {
+        /* Don't call `onPress` if the button is
+        in loading state */
+        if (loading) {
+          return;
+        }
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      },
+      [loading, onPress]
+    );
+
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
       ? colorMap[color]?.label?.disabled
@@ -218,21 +241,23 @@ export const ButtonSolid = React.memo(
 
     return (
       <Pressable
+        testID={testID}
+        accessible={true}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
+        accessibilityState={{ busy: loading }}
         accessibilityRole={"button"}
-        testID={testID}
-        onPress={onPress}
+        onPress={handleOnPress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
-        accessible={true}
         disabled={disabled}
         style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
       >
         <Animated.View
           style={[
             buttonStyles.button,
-            iconPosition === "end" && { flexDirection: "row-reverse" },
+            { overflow: "hidden" },
+            isExperimental && fullWidth && { paddingHorizontal: 16 },
             buttonStyles.buttonSizeDefault,
             disabled
               ? isExperimental
@@ -240,32 +265,51 @@ export const ButtonSolid = React.memo(
                 : legacyStyles.backgroundDisabled
               : { backgroundColor: colorMap[color]?.default },
             /* Prevent Reanimated from overriding background colors
-                    if button is disabled */
+              if button is disabled */
             !disabled && pressedAnimationStyle
           ]}
         >
-          {icon && (
-            <>
-              {/* If 'iconPosition' is set to 'end', we use 
+          {loading && (
+            <Animated.View
+              style={buttonStyles.buttonInner}
+              entering={enterTransitionInnerContentSmall}
+              exiting={exitTransitionInnerContent}
+            >
+              <LoadingSpinner color={foregroundColor} />
+            </Animated.View>
+          )}
+
+          {!loading && (
+            <Animated.View
+              style={[
+                buttonStyles.buttonInner,
+                iconPosition === "end" && { flexDirection: "row-reverse" }
+              ]}
+              entering={enterTransitionInnerContent}
+              exiting={exitTransitionInnerContent}
+            >
+              {icon && (
+                <>
+                  {/* If 'iconPosition' is set to 'end', we use 
             reverse flex property to invert the position */}
-              <Icon name={icon} size={iconSize} color={foregroundColor} />
-              {/* Once we have support for 'gap' property,
+                  <Icon name={icon} size={iconSize} color={foregroundColor} />
+                  {/* Once we have support for 'gap' property,
             we can get rid of that spacer */}
-              <HSpacer size={8} />
-            </>
+                  <HSpacer size={8} />
+                </>
+              )}
+              <ButtonText
+                color={foregroundColor}
+                style={IOButtonStyles.label}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                allowFontScaling={isExperimental}
+                maxFontSizeMultiplier={1.3}
+              >
+                {label}
+              </ButtonText>
+            </Animated.View>
           )}
-          <ButtonText
-            color={foregroundColor}
-            style={IOButtonStyles.label}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            /* A11y-related props:
-                DON'T UNCOMMENT THEM */
-            /* allowFontScaling
-                maxFontSizeMultiplier={1.3} */
-          >
-            {label}
-          </ButtonText>
         </Animated.View>
       </Pressable>
     );

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -67,6 +67,7 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         color="black"
         defaultColor="black"
         defaultWeight="SemiBold"
@@ -232,7 +233,9 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       ellipsizeMode="tail"
+      maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
         [
@@ -308,6 +311,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
           "paddingHorizontal": 16,
           "textAlignVertical": "center",
         },
+        false,
         {
           "borderWidth": 1,
         },
@@ -332,7 +336,9 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       ellipsizeMode="tail"
+      maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
         [
@@ -365,7 +371,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   accessibilityRole="button"
   accessibilityState={
     {
-      "busy": undefined,
+      "busy": false,
       "checked": undefined,
       "disabled": false,
       "expanded": undefined,
@@ -410,6 +416,9 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           "paddingHorizontal": 16,
           "textAlignVertical": "center",
         },
+        {
+          "overflow": "hidden",
+        },
         false,
         {
           "height": 40,
@@ -428,38 +437,55 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       ]
     }
   >
-    <Text
-      color="white"
-      defaultColor="white"
-      defaultWeight="Bold"
-      ellipsizeMode="tail"
-      font="TitilliumWeb"
-      fontStyle={
-        {
-          "fontSize": 16,
-        }
-      }
-      numberOfLines={1}
+    <View
+      entering={[Function]}
+      exiting={[Function]}
       style={
         [
           {
-            "alignSelf": "center",
-          },
-          {
-            "fontSize": 16,
-          },
-          {
-            "color": "#FFFFFF",
-            "fontFamily": "Titillium Web",
-            "fontStyle": "normal",
-            "fontWeight": "700",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
+          false,
         ]
       }
-      weight="Bold"
     >
-      label
-    </Text>
+      <Text
+        allowFontScaling={false}
+        color="white"
+        defaultColor="white"
+        defaultWeight="Bold"
+        ellipsizeMode="tail"
+        font="TitilliumWeb"
+        fontStyle={
+          {
+            "fontSize": 16,
+          }
+        }
+        maxFontSizeMultiplier={1.3}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "fontSize": 16,
+            },
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Titillium Web",
+              "fontStyle": "normal",
+              "fontWeight": "700",
+            },
+          ]
+        }
+        weight="Bold"
+      >
+        label
+      </Text>
+    </View>
   </View>
 </View>
 `;

package/src/components/icons/Icon.tsx

@@ -157,6 +157,9 @@ import IconContactless from "./svg/IconContactless";
 import IconDisabilityCard from "./svg/IconDisabilityCard";
 import IconDriverLicense from "./svg/IconDriverLicense";
 import IconHealthCard from "./svg/IconHealthCard";
+import IconDocPaymentCode from "./svg/IconDocPaymentCode";
+import IconNotes from "./svg/IconNotes";
+import IconEntityCode from "./svg/IconEntityCode";
 
 export const IOIcons = {
   archive: IconArchive,
@@ -200,13 +203,16 @@ export const IOIcons = {
   option: IconOption,
   key: IconKey,
   docGiacenza: IconGiacenza,
+  docPaymentCode: IconDocPaymentCode,
   docAttach: IconDocumentAttachment,
   docAttachPDF: IconDocumentAttachmentPDF,
+  notes: IconNotes,
   attachment: IconAttachment,
   add: IconAdd,
   success: IconSuccess,
   ok: IconOk,
   fiscalCodeIndividual: IconFiscalCodeIndividual,
+  entityCode: IconEntityCode,
   creditCard: IconCreditCard,
   bonus: IconBonus,
   transactionsBoxed: IconTransactionsBoxed,

package/src/components/icons/svg/IconDocPaymentCode.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconDocPaymentCode = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 17.5C5 16.6716 5.67157 16 6.5 16C7.32843 16 8 16.6716 8 17.5C8 18.3284 7.32843 19 6.5 19C5.67157 19 5 18.3284 5 17.5ZM10 17.5C10 16.6716 10.6716 16 11.5 16H14.5C15.3284 16 16 16.6716 16 17.5C16 18.3284 15.3284 19 14.5 19H11.5C10.6716 19 10 18.3284 10 17.5Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconDocPaymentCode;