@pagopa/io-app-design-system 5.3.8 → 5.4.0

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

@@ -417,6 +417,7 @@ exports[`Test Buttons Components - Experimental Enabled IconButton Snapshot 1`]
       align="xMidYMid"
       bbHeight={24}
       bbWidth={24}
+      color="#0B3EE3"
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -429,9 +430,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButton Snapshot 1`]
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
-          {
-            "color": "#0B3EE3",
-          },
           {
             "flex": 0,
             "height": 24,
@@ -444,7 +442,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButton Snapshot 1`]
       width={24}
     >
       <RNSVGGroup
-        color="#0B3EE3"
         fill={
           {
             "payload": 4278190080,
@@ -546,6 +543,7 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonContained Snap
       align="xMidYMid"
       bbHeight={24}
       bbWidth={24}
+      color="#0B3EE3"
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -558,9 +556,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonContained Snap
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
-          {
-            "color": "#0B3EE3",
-          },
           {
             "flex": 0,
             "height": 24,
@@ -573,7 +568,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonContained Snap
       width={24}
     >
       <RNSVGGroup
-        color="#0B3EE3"
         fill={
           {
             "payload": 4278190080,
@@ -678,6 +672,7 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonSolid Snapshot
       align="xMidYMid"
       bbHeight={24}
       bbWidth={24}
+      color="#FFFFFF"
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -690,9 +685,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonSolid Snapshot
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
-          {
-            "color": "#FFFFFF",
-          },
           {
             "flex": 0,
             "height": 24,
@@ -705,7 +697,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonSolid Snapshot
       width={24}
     >
       <RNSVGGroup
-        color="#FFFFFF"
         fill={
           {
             "payload": 4278190080,
@@ -1086,386 +1077,3 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   </View>
 </View>
 `;
-
-exports[`Test Buttons Components IconButton Snapshot 1`] = `
-<View
-  accessibilityLabel="accessibilityLabel"
-  accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  hitSlop={8}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
->
-  <View
-    style={
-      [
-        {
-          "height": 24,
-          "width": 24,
-        },
-        {
-          "alignItems": "center",
-        },
-        {
-          "justifyContent": "center",
-        },
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-      ]
-    }
-  >
-    <RNSVGSvgView
-      accessibilityElementsHidden={true}
-      accessibilityLabel=""
-      accessible={false}
-      align="xMidYMid"
-      bbHeight={24}
-      bbWidth={24}
-      focusable={false}
-      height={24}
-      importantForAccessibility="no-hide-descendants"
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "color": "#0B3EE3",
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={24}
-      vbWidth={24}
-      width={24}
-    >
-      <RNSVGGroup
-        color="#0B3EE3"
-        fill={
-          {
-            "payload": 4278190080,
-            "type": 0,
-          }
-        }
-      >
-        <RNSVGPath
-          clipRule={0}
-          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
-          fill={
-            {
-              "type": 2,
-            }
-          }
-          fillRule={0}
-          propList={
-            [
-              "fill",
-              "fillRule",
-            ]
-          }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
-<View
-  accessibilityLabel="accessibilityLabel"
-  accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "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": "flex-start",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "elevation": 0,
-          "justifyContent": "center",
-        },
-        {
-          "borderRadius": 48,
-          "height": 48,
-          "width": 48,
-        },
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-        {
-          "backgroundColor": undefined,
-        },
-      ]
-    }
-  >
-    <RNSVGSvgView
-      accessibilityElementsHidden={true}
-      accessibilityLabel=""
-      accessible={false}
-      align="xMidYMid"
-      bbHeight={24}
-      bbWidth={24}
-      focusable={false}
-      height={24}
-      importantForAccessibility="no-hide-descendants"
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "color": "#0B3EE3",
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={24}
-      vbWidth={24}
-      width={24}
-    >
-      <RNSVGGroup
-        color="#0B3EE3"
-        fill={
-          {
-            "payload": 4278190080,
-            "type": 0,
-          }
-        }
-      >
-        <RNSVGPath
-          clipRule={0}
-          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
-          fill={
-            {
-              "type": 2,
-            }
-          }
-          fillRule={0}
-          propList={
-            [
-              "fill",
-              "fillRule",
-            ]
-          }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
-<View
-  accessibilityLabel="accessibilityLabel"
-  accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "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": "flex-start",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "elevation": 0,
-          "justifyContent": "center",
-        },
-        {
-          "borderRadius": 56,
-          "height": 56,
-          "width": 56,
-        },
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-        {
-          "backgroundColor": undefined,
-        },
-        {
-          "backgroundColor": "#0B3EE3",
-        },
-      ]
-    }
-  >
-    <RNSVGSvgView
-      accessibilityElementsHidden={true}
-      accessibilityLabel=""
-      accessible={false}
-      align="xMidYMid"
-      bbHeight={24}
-      bbWidth={24}
-      focusable={false}
-      height={24}
-      importantForAccessibility="no-hide-descendants"
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "color": "#FFFFFF",
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={24}
-      vbWidth={24}
-      width={24}
-    >
-      <RNSVGGroup
-        color="#FFFFFF"
-        fill={
-          {
-            "payload": 4278190080,
-            "type": 0,
-          }
-        }
-      >
-        <RNSVGPath
-          clipRule={0}
-          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
-          fill={
-            {
-              "type": 2,
-            }
-          }
-          fillRule={0}
-          propList={
-            [
-              "fill",
-              "fillRule",
-            ]
-          }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;

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

@@ -8,6 +8,7 @@ import ButtonSolid from "../ButtonSolid";
 import IconButton from "../IconButton";
 import IconButtonContained from "../IconButtonContained";
 import IconButtonSolid from "../IconButtonSolid";
+
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
 };
@@ -41,39 +42,6 @@ describe("Test Buttons Components", () => {
     ).toJSON();
     expect(buttonOutline).toMatchSnapshot();
   });
-
-  it("IconButtonSolid Snapshot", () => {
-    const iconButtonSolid = TestRenderer.create(
-      <IconButtonSolid
-        onPress={onButtonPress}
-        icon={"spid"}
-        accessibilityLabel={"accessibilityLabel"}
-      ></IconButtonSolid>
-    ).toJSON();
-    expect(iconButtonSolid).toMatchSnapshot();
-  });
-
-  it("IconButton Snapshot", () => {
-    const iconButton = TestRenderer.create(
-      <IconButton
-        onPress={onButtonPress}
-        icon={"spid"}
-        accessibilityLabel={"accessibilityLabel"}
-      ></IconButton>
-    ).toJSON();
-    expect(iconButton).toMatchSnapshot();
-  });
-
-  it("IconButtonContained Snapshot", () => {
-    const iconButtonContained = TestRenderer.create(
-      <IconButtonContained
-        onPress={onButtonPress}
-        icon={"spid"}
-        accessibilityLabel={"accessibilityLabel"}
-      ></IconButtonContained>
-    ).toJSON();
-    expect(iconButtonContained).toMatchSnapshot();
-  });
 });
 
 describe("Test Buttons Components - Experimental Enabled", () => {

package/src/components/buttons/index.tsx

@@ -1,3 +1,4 @@
+export * from "./IOButton";
 export * from "./ButtonLink";
 export * from "./ButtonOutline";
 export * from "./ButtonSolid";

package/src/components/claimsSelector/__test__/__snapshots__/ClaimsSelector.test.tsx.snap

@@ -97,6 +97,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
             align="xMidYMid"
             bbHeight={24}
             bbWidth={24}
+            color="#0B3EE3"
             focusable={false}
             height={24}
             importantForAccessibility="no-hide-descendants"
@@ -109,9 +110,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                {
-                  "color": "#0B3EE3",
-                },
                 {
                   "flex": 0,
                   "height": 24,
@@ -124,7 +122,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
             width={24}
           >
             <RNSVGGroup
-              color="#0B3EE3"
               fill={
                 {
                   "payload": 4278190080,
@@ -627,6 +624,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
             align="xMidYMid"
             bbHeight={24}
             bbWidth={24}
+            color="#0B3EE3"
             focusable={false}
             height={24}
             importantForAccessibility="no-hide-descendants"
@@ -639,9 +637,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                {
-                  "color": "#0B3EE3",
-                },
                 {
                   "flex": 0,
                   "height": 24,
@@ -654,7 +649,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
             width={24}
           >
             <RNSVGGroup
-              color="#0B3EE3"
               fill={
                 {
                   "payload": 4278190080,
@@ -1088,6 +1082,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
             align="xMidYMid"
             bbHeight={24}
             bbWidth={24}
+            color="#0B3EE3"
             focusable={false}
             height={24}
             importantForAccessibility="no-hide-descendants"
@@ -1100,9 +1095,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                {
-                  "color": "#0B3EE3",
-                },
                 {
                   "flex": 0,
                   "height": 24,
@@ -1115,7 +1107,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
             width={24}
           >
             <RNSVGGroup
-              color="#0B3EE3"
               fill={
                 {
                   "payload": 4278190080,

package/src/components/contentWrapper/ContentWrapper.tsx

@@ -1,13 +1,19 @@
-import React from "react";
-import { View } from "react-native";
+import React, { ReactNode } from "react";
+import { View, ViewProps, ViewStyle } from "react-native";
 import { WithTestID } from "src/utils/types";
 import type { IOAppMargin } from "../../core";
 import { IOVisualCostants } from "../../core/IOStyles";
 
-type IOContentWrapperProps = WithTestID<{
-  margin?: IOAppMargin;
-  children: React.ReactNode;
-}>;
+type IOContentWrapperProps = WithTestID<
+  Omit<ViewProps, "style"> & {
+    margin?: IOAppMargin;
+    children: ReactNode;
+    style?: Omit<
+      ViewStyle,
+      "paddingHorizontal" | "paddingLeft" | "paddingRight"
+    >;
+  }
+>;
 
 /**
 `ContentWrapper` is the main wrapper of the application. It automatically sets side margins,
@@ -16,14 +22,18 @@ depending on the size value
  */
 export const ContentWrapper = ({
   margin = IOVisualCostants.appMarginDefault,
+  style,
+  children,
   testID,
-  children
+  ...rest
 }: IOContentWrapperProps) => (
   <View
     testID={testID}
     style={{
-      paddingHorizontal: margin
+      paddingHorizontal: margin,
+      ...style
     }}
+    {...rest}
   >
     {children}
   </View>

package/src/components/icons/Icon.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { ColorValue } from "react-native";
+import Animated from "react-native-reanimated";
 import { IOColors } from "../../core/IOColors";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 
@@ -452,7 +453,7 @@ export const Icon = ({
   return (
     <IconElement
       {...props}
-      style={{ color: IOColors[color] }}
+      color={IOColors[color]}
       size={iconSize}
       accessible={isAccessible}
       accessibilityElementsHidden={!isAccessible}
@@ -494,7 +495,7 @@ export const AnimatedIcon = ({
   return (
     <IconElement
       {...props}
-      style={{ color }}
+      color={color}
       size={iconSize}
       accessible={accessible}
       accessibilityElementsHidden={true}
@@ -507,7 +508,7 @@ export const AnimatedIcon = ({
 /* Make <Icon> component animatable. Reanimated supports class components only,
 so we need to convert <Icon> into a class component first.
 https://github.com/software-mansion/react-native-reanimated/discussions/1527  */
-export class IconClassComponent extends React.Component<IOAnimatedIconsProps> {
+class AnimatedIconClassComponent extends React.Component<IOAnimatedIconsProps> {
   constructor(props: IOAnimatedIconsProps) {
     super(props);
   }
@@ -516,6 +517,14 @@ export class IconClassComponent extends React.Component<IOAnimatedIconsProps> {
   }
 }
 
+/*
+A name that explicitly indicates the purpose of the component.
+It must be used in combination with `useAnimatedProps` hook.
+*/
+export const AnimatedIconWithColorTransition = Animated.createAnimatedComponent(
+  AnimatedIconClassComponent
+);
+
 /*
 ░░░ VARIOUS SETS ░░░
 */

package/src/components/icons/types.ts

@@ -1,8 +1,9 @@
-import { StyleProp } from "react-native";
+import { ColorValue, StyleProp } from "react-native";
 
 export type SVGIconProps = {
   size: number | "100%";
-  style: StyleProp<any>;
+  style?: StyleProp<any>;
+  color: ColorValue;
   accessible: boolean;
   accessibilityElementsHidden: boolean;
   accessibilityLabel: string;