@pagopa/io-app-design-system 5.6.7 → 5.7.1

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

@@ -1,589 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={false}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
->
-  <View
-    style={
-      [
-        {
-          "alignContent": "center",
-          "alignItems": "flex-start",
-          "borderCurve": "continuous",
-          "borderRadius": 8,
-          "flexDirection": "row",
-          "padding": 16,
-        },
-        {
-          "backgroundColor": "#F4F5F8",
-        },
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityLabel="Action text"
-      accessibilityRole="button"
-      accessible={true}
-      style={
-        {
-          "alignSelf": "center",
-          "flex": 1,
-          "gap": 4,
-        }
-      }
-    >
-      <Text
-        allowFontScaling={true}
-        dynamicTypeRamp="headline"
-        maxFontSizeMultiplier={1.5}
-        style={
-          [
-            {},
-            {
-              "color": "#031344",
-              "fontFamily": "Titillio",
-              "fontSize": 16,
-              "fontStyle": "normal",
-              "fontWeight": "600",
-              "lineHeight": 24,
-            },
-          ]
-        }
-      >
-        Banner title
-      </Text>
-      <View
-        accessibilityElementsHidden={true}
-        accessibilityLabel="Action text"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        importantForAccessibility="no-hide-descendants"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        pointerEvents="none"
-      >
-        <View
-          style={
-            {
-              "height": 8,
-            }
-          }
-        />
-        <Text
-          accessibilityElementsHidden={true}
-          accessible={false}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          importantForAccessibility="no-hide-descendants"
-          maxFontSizeMultiplier={1.5}
-          numberOfLines={1}
-          style={
-            [
-              {},
-              {
-                "color": "#0B3EE3",
-                "fontFamily": "Titillio",
-                "fontSize": 16,
-                "fontStyle": "normal",
-                "fontWeight": "600",
-                "lineHeight": undefined,
-              },
-            ]
-          }
-        >
-          Action text
-        </Text>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "marginRight": -16,
-          },
-          {
-            "alignSelf": "center",
-          },
-        ]
-      }
-    >
-      <RNSVGSvgView
-        align="xMidYMid"
-        bbHeight={80}
-        bbWidth={80}
-        focusable={false}
-        height={80}
-        meetOrSlice={0}
-        minX={0}
-        minY={0}
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "borderWidth": 0,
-            },
-            {
-              "flex": 0,
-              "height": 80,
-              "width": 80,
-            },
-          ]
-        }
-        vbHeight={240}
-        vbWidth={240}
-        width={80}
-      >
-        <RNSVGGroup
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-        >
-          <RNSVGPath
-            d="M133.46 173.8c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.11-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.88.22 1.51 1.01 1.52 1.92 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.17-3.8 21.12-8.32 26.15-8.25l-.06 4h-.08c-3.38 0-12.29 2.89-24.47 7.94-1.01.42-2.05.62-3.08.62l-.02.02Z"
-            fill={
-              {
-                "payload": 4278927075,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M137.37 190.23c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.84 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.08-9.56 23.94-9.11l-.47 3.97c-2.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
-            fill={
-              {
-                "payload": 4278927075,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M240.29 213.7c-39.81-19.17-81.44-13.87-92.88-10.51-2.82.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.81-8.97 95.75 10.74l-1.73 3.6h-.01ZM169.508 150.199l-.698 3.939 10.348 1.834.698-3.939-10.348-1.834Z"
-            fill={
-              {
-                "payload": 4278927075,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M191.07 170.8c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.258 156.644l-3.982.38 2.844 29.854 3.982-.379-2.844-29.855Z"
-            fill={
-              {
-                "payload": 4278927075,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M133.75 39.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.5099-2.03-3.78.51-7.45 1.58-10.89 3.15-4.49 2.05-7.86 5.81-10.65 9.88l-3.1 4.53c-3.74-2.62-7.92-4.57-12.35-5.72-4.86-1.26-9.92-1.56-14.89-.88-4.97.68-9.77 2.33-14.1 4.86-4.33 2.52-8.13 5.87-11.16 9.85-3.04 3.98-5.25 8.52-6.53 13.35-1.28 4.83-1.59 9.87-.91 14.81.68 4.95 2.34 9.71 4.87 14.02 2.53 4.31 5.9 8.08 9.89 11.09L103.6 145.21l26.72-45.64 10.54-20.04c1.85-4.42 3.76-12.92 1.34-23.34-1.41-6.07-4.32-11.7-8.47-16.38l.02.01Z"
-            fill={
-              {
-                "payload": 4289392367,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M25.2295 81.79c-.79 0-1.45-.62-1.5-1.42-1.37-25.26 18.17-33.75 28.7-34.71.83-.08 1.55.53 1.63 1.36.08.83-.53 1.55-1.35 1.63-1.12.11-27.54 2.92-25.98 31.56.04.83-.59 1.53-1.42 1.58h-.08Z"
-            fill={
-              {
-                "payload": 4278240714,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-        </RNSVGGroup>
-      </RNSVGSvgView>
-    </View>
-  </View>
-</View>
-`;
+exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `null`;
 
-exports[`Test Banner Components Banner Snapshot 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={false}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
->
-  <View
-    style={
-      [
-        {
-          "alignContent": "center",
-          "alignItems": "flex-start",
-          "borderCurve": "continuous",
-          "borderRadius": 8,
-          "flexDirection": "row",
-          "padding": 16,
-        },
-        {
-          "backgroundColor": "#F4F5F8",
-        },
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityLabel="Action text"
-      accessibilityRole="button"
-      accessible={true}
-      style={
-        {
-          "alignSelf": "center",
-          "flex": 1,
-          "gap": 4,
-        }
-      }
-    >
-      <Text
-        allowFontScaling={true}
-        dynamicTypeRamp="headline"
-        maxFontSizeMultiplier={1.5}
-        style={
-          [
-            {},
-            {
-              "color": "#031344",
-              "fontFamily": "Titillio",
-              "fontSize": 16,
-              "fontStyle": "normal",
-              "fontWeight": "600",
-              "lineHeight": 24,
-            },
-          ]
-        }
-      >
-        Banner title
-      </Text>
-      <View
-        accessibilityElementsHidden={true}
-        accessibilityLabel="Action text"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        importantForAccessibility="no-hide-descendants"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        pointerEvents="none"
-      >
-        <View
-          style={
-            {
-              "height": 8,
-            }
-          }
-        />
-        <Text
-          accessibilityElementsHidden={true}
-          accessible={false}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          importantForAccessibility="no-hide-descendants"
-          maxFontSizeMultiplier={1.5}
-          numberOfLines={1}
-          style={
-            [
-              {},
-              {
-                "color": "#0B3EE3",
-                "fontFamily": "Titillio",
-                "fontSize": 16,
-                "fontStyle": "normal",
-                "fontWeight": "600",
-                "lineHeight": undefined,
-              },
-            ]
-          }
-        >
-          Action text
-        </Text>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "marginRight": -16,
-          },
-          {
-            "alignSelf": "center",
-          },
-        ]
-      }
-    >
-      <RNSVGSvgView
-        align="xMidYMid"
-        bbHeight={80}
-        bbWidth={80}
-        focusable={false}
-        height={80}
-        meetOrSlice={0}
-        minX={0}
-        minY={0}
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "borderWidth": 0,
-            },
-            {
-              "flex": 0,
-              "height": 80,
-              "width": 80,
-            },
-          ]
-        }
-        vbHeight={240}
-        vbWidth={240}
-        width={80}
-      >
-        <RNSVGGroup
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-        >
-          <RNSVGPath
-            d="M133.46 173.8c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.11-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.88.22 1.51 1.01 1.52 1.92 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.17-3.8 21.12-8.32 26.15-8.25l-.06 4h-.08c-3.38 0-12.29 2.89-24.47 7.94-1.01.42-2.05.62-3.08.62l-.02.02Z"
-            fill={
-              {
-                "payload": 4278927075,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M137.37 190.23c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.84 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.08-9.56 23.94-9.11l-.47 3.97c-2.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
-            fill={
-              {
-                "payload": 4278927075,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M240.29 213.7c-39.81-19.17-81.44-13.87-92.88-10.51-2.82.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.81-8.97 95.75 10.74l-1.73 3.6h-.01ZM169.508 150.199l-.698 3.939 10.348 1.834.698-3.939-10.348-1.834Z"
-            fill={
-              {
-                "payload": 4278927075,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M191.07 170.8c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.258 156.644l-3.982.38 2.844 29.854 3.982-.379-2.844-29.855Z"
-            fill={
-              {
-                "payload": 4278927075,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M133.75 39.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.5099-2.03-3.78.51-7.45 1.58-10.89 3.15-4.49 2.05-7.86 5.81-10.65 9.88l-3.1 4.53c-3.74-2.62-7.92-4.57-12.35-5.72-4.86-1.26-9.92-1.56-14.89-.88-4.97.68-9.77 2.33-14.1 4.86-4.33 2.52-8.13 5.87-11.16 9.85-3.04 3.98-5.25 8.52-6.53 13.35-1.28 4.83-1.59 9.87-.91 14.81.68 4.95 2.34 9.71 4.87 14.02 2.53 4.31 5.9 8.08 9.89 11.09L103.6 145.21l26.72-45.64 10.54-20.04c1.85-4.42 3.76-12.92 1.34-23.34-1.41-6.07-4.32-11.7-8.47-16.38l.02.01Z"
-            fill={
-              {
-                "payload": 4289392367,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M25.2295 81.79c-.79 0-1.45-.62-1.5-1.42-1.37-25.26 18.17-33.75 28.7-34.71.83-.08 1.55.53 1.63 1.36.08.83-.53 1.55-1.35 1.63-1.12.11-27.54 2.92-25.98 31.56.04.83-.59 1.53-1.42 1.58h-.08Z"
-            fill={
-              {
-                "payload": 4278240714,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-        </RNSVGGroup>
-      </RNSVGSvgView>
-    </View>
-  </View>
-</View>
-`;
+exports[`Test Banner Components Banner Snapshot 1`] = `null`;

package/src/components/buttons/ButtonLink.tsx

@@ -12,13 +12,12 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import {
   IOButtonStyles,
   IOColors,
   IOSpacingScale,
-  hexToRgba,
-  useIONewTypeface,
-  useIOTheme
+  hexToRgba
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";

package/src/components/buttons/ButtonOutline.tsx

@@ -11,13 +11,8 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import {
-  IOButtonStyles,
-  IOColors,
-  hexToRgba,
-  useIONewTypeface,
-  useIOTheme
-} from "../../core/";
+import { useIONewTypeface, useIOTheme } from "../../context";
+import { IOButtonStyles, IOColors, hexToRgba } from "../../core/";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import {

package/src/components/buttons/ButtonSolid.tsx

@@ -17,13 +17,13 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
+import { useIOTheme } from "../../context";
 import {
   IOButtonStyles,
   IOColors,
   enterTransitionInnerContent,
   enterTransitionInnerContentSmall,
-  exitTransitionInnerContent,
-  useIOTheme
+  exitTransitionInnerContent
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";

package/src/components/buttons/IOButton/IOButton.tsx

@@ -19,11 +19,11 @@ import {
 } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, { useReducedMotion } from "react-native-reanimated";
+import { useIONewTypeface } from "../../../context";
 import {
   enterTransitionInnerContent,
   enterTransitionInnerContentSmall,
-  exitTransitionInnerContent,
-  useIONewTypeface
+  exitTransitionInnerContent
 } from "../../../core";
 import { useScaleAnimation } from "../../../hooks";
 import { WithTestID } from "../../../utils/types";