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

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

@@ -1,400 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Test Buttons Components IOButton Snapshot · Link variant 1`] = `
-<View
-  accessibilityLabel="accessibilityLabel"
-  accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": false,
-      "checked": undefined,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  hitSlop={
-    {
-      "bottom": 14,
-      "left": 24,
-      "right": 24,
-      "top": 14,
-    }
-  }
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "alignSelf": "flex-start",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "borderCurve": "continuous",
-          "elevation": 0,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "textAlignVertical": "center",
-        },
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-        {},
-        {
-          "paddingHorizontal": 0,
-        },
-        {
-          "backgroundColor": "transparent",
-          "borderColor": "#0B3EE3",
-          "borderRadius": 8,
-          "borderWidth": 0,
-          "height": undefined,
-        },
-        {},
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "center",
-          },
-          {
-            "columnGap": 8,
-          },
-          false,
-        ]
-      }
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        accessible={false}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.5}
-        numberOfLines={1}
-        style={
-          [
-            {},
-            {
-              "color": "#0E0F13",
-              "fontFamily": "Titillio",
-              "fontSize": 16,
-              "fontStyle": "normal",
-              "fontWeight": "600",
-              "lineHeight": 20,
-            },
-            [
-              {
-                "textAlign": "auto",
-              },
-              {
-                "color": "#0B3EE3",
-              },
-              {
-                "color": undefined,
-              },
-            ],
-          ]
-        }
-      >
-        label
-      </Text>
-    </View>
-  </View>
-</View>
-`;
+exports[`Test Buttons Components IOButton Snapshot · Link variant 1`] = `null`;
 
-exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
-<View
-  accessibilityLabel="accessibilityLabel"
-  accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": false,
-      "checked": undefined,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "alignSelf": "auto",
-      "flexShrink": 1,
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "borderCurve": "continuous",
-          "elevation": 0,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "textAlignVertical": "center",
-        },
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-        {
-          "backgroundColor": undefined,
-          "borderColor": undefined,
-        },
-        {
-          "paddingHorizontal": 24,
-        },
-        {
-          "backgroundColor": "rgba(9,50,182,0)",
-          "borderColor": "#0B3EE3",
-          "borderRadius": 8,
-          "borderWidth": 2,
-          "height": 48,
-        },
-        {},
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "center",
-          },
-          {
-            "columnGap": 8,
-          },
-          false,
-        ]
-      }
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        accessible={false}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.5}
-        numberOfLines={1}
-        style={
-          [
-            {},
-            {
-              "color": "#0E0F13",
-              "fontFamily": "Titillio",
-              "fontSize": 16,
-              "fontStyle": "normal",
-              "fontWeight": "600",
-              "lineHeight": undefined,
-            },
-            [
-              {
-                "textAlign": "auto",
-              },
-              {
-                "color": "#0B3EE3",
-              },
-              {
-                "color": undefined,
-              },
-            ],
-          ]
-        }
-      >
-        label
-      </Text>
-    </View>
-  </View>
-</View>
-`;
+exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `null`;
 
-exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
-<View
-  accessibilityLabel="accessibilityLabel"
-  accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": false,
-      "checked": undefined,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "alignSelf": "auto",
-      "flexShrink": 1,
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "borderCurve": "continuous",
-          "elevation": 0,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "textAlignVertical": "center",
-        },
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-        {
-          "backgroundColor": undefined,
-        },
-        {
-          "paddingHorizontal": 24,
-        },
-        {
-          "backgroundColor": "#0B3EE3",
-          "borderColor": "#FFFFFF",
-          "borderRadius": 8,
-          "borderWidth": 0,
-          "height": 48,
-        },
-        {},
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "center",
-          },
-          {
-            "columnGap": 8,
-          },
-          false,
-        ]
-      }
-    >
-      <Text
-        accessibilityElementsHidden={true}
-        accessible={false}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.5}
-        numberOfLines={1}
-        style={
-          [
-            {},
-            {
-              "color": "#0E0F13",
-              "fontFamily": "Titillio",
-              "fontSize": 16,
-              "fontStyle": "normal",
-              "fontWeight": "600",
-              "lineHeight": undefined,
-            },
-            [
-              {
-                "textAlign": "auto",
-              },
-              {
-                "color": "#FFFFFF",
-              },
-              {
-                "color": undefined,
-              },
-            ],
-          ]
-        }
-      >
-        label
-      </Text>
-    </View>
-  </View>
-</View>
-`;
+exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `null`;

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

@@ -4,7 +4,8 @@ import {
   useAnimatedProps,
   useAnimatedStyle
 } from "react-native-reanimated";
-import { IOColors, hexToRgba, useIOTheme } from "../../../core";
+import { useIOTheme } from "../../../context";
+import { hexToRgba, IOColors } from "../../../core/IOColors";
 import { IOButtonColor, IOButtonProps, IOButtonVariant } from "./IOButton";
 
 type ColorStates = {

package/src/components/buttons/IconButton.tsx

@@ -5,12 +5,12 @@ import Animated, {
   useAnimatedProps,
   useReducedMotion
 } from "react-native-reanimated";
+import { useIOTheme } from "../../context";
 import {
   IOColors,
   IOIconButtonStyles,
   IOThemeLight,
-  hexToRgba,
-  useIOTheme
+  hexToRgba
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";

package/src/components/buttons/IconButtonSolid.tsx

@@ -1,11 +1,12 @@
-import * as React from "react";
+import React from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import { IOIconButtonStyles, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOIconButtonStyles } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";