@pagopa/io-app-design-system 5.0.0-5 → 5.0.0-6

package/src/components/layout/HeaderSecondLevel.tsx

@@ -78,6 +78,9 @@ type CommonProps = WithTestID<{
   variant?: "neutral" | "contrast";
   backgroundColor?: string;
   ignoreSafeAreaMargin?: boolean;
+  // Prevents screen readers from focusing on the title when other elements are focused
+  // (e.g. when an input text is throwing an error)
+  ignoreAccessibilityCheck?: boolean;
 }>;
 
 interface Base extends CommonProps {
@@ -151,7 +154,8 @@ export const HeaderSecondLevel = ({
   testID,
   firstAction,
   secondAction,
-  thirdAction
+  thirdAction,
+  ignoreAccessibilityCheck = false
 }: HeaderSecondLevel) => {
   const scrollOffset = useScrollViewOffset(
     (animatedRef as AnimatedRef<Animated.ScrollView>) ||
@@ -300,7 +304,9 @@ export const HeaderSecondLevel = ({
           ref={titleRef}
           accessibilityElementsHidden={!isTitleAccessible}
           importantForAccessibility={
-            isTitleAccessible ? "yes" : "no-hide-descendants"
+            isTitleAccessible && !ignoreAccessibilityCheck
+              ? "yes"
+              : "no-hide-descendants"
           }
           accessible={isTitleAccessible}
           accessibilityLabel={title}

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -105,105 +105,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
 </View>
 `;
 
-exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot 1`] = `
-<View
-  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}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTouchEnd={[Function]}
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "borderColor": "#E8EBF1",
-          "borderCurve": "continuous",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
-        },
-        {
-          "borderColor": "#E8EBF1",
-        },
-        false,
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-      ]
-    }
-  >
-    <Text
-      allowFontScaling={true}
-      maxFontSizeMultiplier={1.5}
-      style={
-        [
-          {
-            "alignSelf": "center",
-            "flexShrink": 1,
-            "letterSpacing": 0.5,
-            "textTransform": "uppercase",
-          },
-          {
-            "color": "#555C70",
-            "fontFamily": "Titillio",
-            "fontSize": 12,
-            "fontStyle": "normal",
-            "fontWeight": "600",
-            "lineHeight": 16,
-          },
-        ]
-      }
-    />
-    <Image
-      accessibilityIgnoresInvertColors={true}
-      style={
-        {
-          "height": 30,
-          "marginStart": 8,
-          "resizeMode": "contain",
-          "width": 120,
-        }
-      }
-    />
-  </View>
-</View>
-`;
-
 exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot 1`] = `
 <View
   accessibilityLabel="accessibilityLabel"
@@ -1775,105 +1676,6 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
 </View>
 `;
 
-exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
-<View
-  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}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTouchEnd={[Function]}
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "borderColor": "#E8EBF1",
-          "borderCurve": "continuous",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
-        },
-        {
-          "borderColor": "#E8EBF1",
-        },
-        false,
-        {
-          "transform": [
-            {
-              "scale": undefined,
-            },
-          ],
-        },
-      ]
-    }
-  >
-    <Text
-      allowFontScaling={true}
-      maxFontSizeMultiplier={1.5}
-      style={
-        [
-          {
-            "alignSelf": "center",
-            "flexShrink": 1,
-            "letterSpacing": 0.5,
-            "textTransform": "uppercase",
-          },
-          {
-            "color": "#555C70",
-            "fontFamily": "Titillio",
-            "fontSize": 12,
-            "fontStyle": "normal",
-            "fontWeight": "600",
-            "lineHeight": 16,
-          },
-        ]
-      }
-    />
-    <Image
-      accessibilityIgnoresInvertColors={true}
-      style={
-        {
-          "height": 30,
-          "marginStart": 8,
-          "resizeMode": "contain",
-          "width": 120,
-        }
-      }
-    />
-  </View>
-</View>
-`;
-
 exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
 <View
   accessibilityLabel="accessibilityLabel"

package/src/components/listitems/__test__/listitem.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Alert } from "react-native";
 import * as TestRenderer from "react-test-renderer";
 import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
-import ListItemIDP from "../../modules/ModuleIDP";
 import ListItemAction from "../ListItemAction";
 import ListItemInfo from "../ListItemInfo";
 import ListItemInfoCopy from "../ListItemInfoCopy";
@@ -69,12 +68,6 @@ describe("Test List Item Components", () => {
     ).toJSON();
     expect(listItemAction).toMatchSnapshot();
   });
-  it("ListItemIDP Snapshot", () => {
-    const listItemIDP = TestRenderer.create(
-      <ListItemIDP></ListItemIDP>
-    ).toJSON();
-    expect(listItemIDP).toMatchSnapshot();
-  });
   it("ListItemTransaction Snapshot", () => {
     const listItemIDP = TestRenderer.create(
       <ListItemTransaction
@@ -171,12 +164,6 @@ describe("Test List Item Components - Experimental Enabled ", () => {
     ).toJSON();
     expect(listItemAction).toMatchSnapshot();
   });
-  it("ListItemIDP Snapshot", () => {
-    const listItemIDP = TestRendererWithExperimentalEnabledContextProvider(
-      <ListItemIDP></ListItemIDP>
-    ).toJSON();
-    expect(listItemIDP).toMatchSnapshot();
-  });
   it("ListItemTransaction Snapshot", () => {
     const listItemIDP = TestRendererWithExperimentalEnabledContextProvider(
       <ListItemTransaction

package/src/components/modules/ModuleIDP.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
 import { Image, ImageSourcePropType, StyleSheet } from "react-native";
-import { IOListItemLogoMargin, useIONewTypeface, useIOTheme } from "../../core";
+import {
+  IOListItemLogoMargin,
+  useIONewTypeface,
+  useIOTheme,
+  useIOThemeContext
+} from "../../core";
 import { addCacheTimestampToUri } from "../../utils/image";
 import { IOText } from "../typography";
 import {
@@ -8,10 +13,18 @@ import {
   PressableModuleBaseProps
 } from "./PressableModuleBase";
 
+type IDPLogoSource = {
+  local: ImageSourcePropType;
+  url: ImageSourcePropType;
+};
+
+type IDPLogoColorMode = {
+  light: IDPLogoSource;
+  dark?: IDPLogoSource;
+};
 interface ModuleIDP extends PressableModuleBaseProps {
   name: string;
-  localLogo: ImageSourcePropType;
-  logo: ImageSourcePropType;
+  logo: IDPLogoColorMode;
   accessibilityLabel?: string;
 }
 
@@ -24,19 +37,41 @@ const styles = StyleSheet.create({
   }
 });
 
+const useIDPLogo = (logo: IDPLogoColorMode): ImageSourcePropType => {
+  const { themeType } = useIOThemeContext();
+
+  const {
+    light: { url: urlLogoLightMode, local: localLogoLightMode }
+  } = logo;
+
+  const logoIDPLightMode =
+    localLogoLightMode ?? addCacheTimestampToUri(urlLogoLightMode);
+
+  if (!logo.dark) {
+    return logoIDPLightMode;
+  }
+
+  const {
+    dark: { url: urlLogoDarkMode, local: localLogoDarkMode }
+  } = logo;
+
+  const logoIDPDarkMode =
+    localLogoDarkMode ?? addCacheTimestampToUri(urlLogoDarkMode);
+
+  return themeType === "dark" ? logoIDPDarkMode : logoIDPLightMode;
+};
+
 export const ModuleIDP = ({
   name,
-  localLogo,
   logo,
   withLooseSpacing = false,
   onPress,
   testID,
   accessibilityLabel
 }: ModuleIDP) => {
-  const theme = useIOTheme();
   const { newTypefaceEnabled } = useIONewTypeface();
-  // eslint-disable-next-line no-console
-  const urlLogoIDP = localLogo ? localLogo : addCacheTimestampToUri(logo);
+  const theme = useIOTheme();
+  const IDPLogoSource = useIDPLogo(logo);
 
   return (
     <PressableModuleBase
@@ -62,7 +97,7 @@ export const ModuleIDP = ({
       </IOText>
       <Image
         accessibilityIgnoresInvertColors
-        source={urlLogoIDP}
+        source={IDPLogoSource}
         style={styles.idpLogo}
       />
     </PressableModuleBase>

package/src/components/tabs/TabItem.tsx

@@ -1,22 +1,29 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
-  SharedValue,
   interpolateColor,
   useAnimatedStyle,
   useDerivedValue,
   useReducedMotion,
-  useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOColors, IOSpringValues, hexToRgba } from "../../core";
+import {
+  IOColors,
+  IOSpringValues,
+  hexToRgba,
+  useIONewTypeface,
+  useIOTheme
+} from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { BodySmall } from "../typography";
+import { IOText } from "../typography";
 
 type ColorMode = "light" | "dark";
 
+type TabItemState = "default" | "selected" | "disabled";
+
 export type TabItem = WithTestID<{
   label: string;
   color?: ColorMode;
@@ -37,12 +44,10 @@ type ColorStates = {
   border: {
     default: string;
     selected: string;
-    disabled: string;
   };
   background: {
     default: string;
     selected: string;
-    pressed: string;
   };
   foreground: {
     default: IOColors;
@@ -51,42 +56,7 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
-  light: {
-    border: {
-      default: IOColors["grey-300"],
-      selected: IOColors["blueIO-500"],
-      disabled: IOColors["grey-300"]
-    },
-    background: {
-      default: IOColors.white,
-      selected: IOColors["blueIO-50"],
-      pressed: IOColors.white
-    },
-    foreground: {
-      default: "black",
-      selected: "blueIO-500",
-      disabled: "grey-700"
-    }
-  },
-  dark: {
-    border: {
-      default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
-    },
-    background: {
-      default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      pressed: IOColors.white
-    },
-    foreground: {
-      default: "white",
-      selected: "black",
-      disabled: "white"
-    }
-  }
-};
+const DISABLED_OPACITY = 0.5;
 
 const TabItem = ({
   label,
@@ -101,75 +71,109 @@ const TabItem = ({
   icon,
   iconSelected
 }: TabItem) => {
-  const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-    useScaleAnimation();
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
+  const theme = useIOTheme();
   const reducedMotion = useReducedMotion();
-
-  const foregroundColor = useMemo(
-    () =>
-      mapColorStates[color].foreground[
-        selected ? "selected" : disabled ? "disabled" : "default"
-      ],
-    [color, selected, disabled]
+  const { newTypefaceEnabled } = useIONewTypeface();
+
+  const mapColorStates: Record<
+    NonNullable<TabItem["color"]>,
+    ColorStates
+  > = useMemo(
+    () => ({
+      light: {
+        border: {
+          default: IOColors[theme["tab-item-border-default"]],
+          selected: hexToRgba(
+            IOColors[theme["tab-item-foreground-selected"]],
+            0.5
+          )
+        },
+        background: {
+          default: hexToRgba(
+            IOColors[theme["tab-item-background-selected"]],
+            0
+          ),
+          selected: hexToRgba(
+            IOColors[theme["tab-item-background-selected"]],
+            0.25
+          ),
+          pressed: IOColors[theme["appBackground-primary"]]
+        },
+        foreground: {
+          default: theme["tab-item-foreground-default"],
+          selected: theme["tab-item-foreground-selected"],
+          disabled: "grey-700"
+        }
+      },
+      dark: {
+        border: {
+          default: hexToRgba(IOColors.white, 0),
+          selected: IOColors.white
+        },
+        background: {
+          default: hexToRgba(IOColors.white, 0.1),
+          selected: IOColors.white,
+          pressed: IOColors.white
+        },
+        foreground: {
+          default: "white",
+          selected: "black",
+          disabled: "white"
+        }
+      }
+    }),
+    [theme]
   );
 
-  const borderColor = useMemo(
-    () =>
-      mapColorStates[color].border[
-        selected ? "selected" : disabled ? "disabled" : "default"
-      ],
-    [color, selected, disabled]
-  );
+  const itemState: TabItemState = selected
+    ? "selected"
+    : disabled
+    ? "disabled"
+    : "default";
 
-  const opaquePressedBackgroundColor = hexToRgba(
-    mapColorStates[color].background.pressed,
-    0.1
-  );
+  const foregroundColor = mapColorStates[color].foreground[itemState];
 
-  const isSelected: SharedValue<number> = useSharedValue(0);
-  const progressSelected = useDerivedValue(() =>
-    withSpring(isSelected.value, IOSpringValues.selection)
+  const selectedStateTransition = useDerivedValue(() =>
+    withSpring(selected ? 1 : 0, IOSpringValues.selection)
   );
 
-  useEffect(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isSelected.value = selected ? 1 : 0;
-  }, [isSelected, selected]);
-
   // Interpolate animation values from `pressed` values
-  const animatedStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
-    const pressedBackgroundColor = interpolateColor(
-      progress.value,
-      [0, 1],
-      [mapColorStates[color].background.default, opaquePressedBackgroundColor]
-    );
-
-    const selectedBackgroundColor = interpolateColor(
-      progressSelected.value,
-      [0, 1],
-      [opaquePressedBackgroundColor, mapColorStates[color].background.selected]
-    );
-
-    const selectedBorderColor = interpolateColor(
-      progressSelected.value,
-      [0, 1],
-      [
-        mapColorStates[color].border.default,
-        mapColorStates[color].border.selected
-      ]
-    );
-
-    return {
-      backgroundColor: selected
-        ? selectedBackgroundColor
-        : pressedBackgroundColor,
-      borderColor: selected ? selectedBorderColor : borderColor
-    };
-  }, [progress, progressSelected, selected]);
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        selectedStateTransition.value,
+        [0, 1],
+        [
+          mapColorStates[color].background.default,
+          mapColorStates[color].background.selected
+        ]
+      ),
+      borderColor: interpolateColor(
+        selectedStateTransition.value,
+        [0, 1],
+        [
+          mapColorStates[color].border.default,
+          mapColorStates[color].border.selected
+        ]
+      )
+    }),
+    [selectedStateTransition]
+  );
 
   const activeIcon = selected ? iconSelected ?? icon : icon;
 
+  const handleOnPress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (onPress) {
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      }
+    },
+    [onPress]
+  );
+
   return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
@@ -177,7 +181,7 @@ const TabItem = ({
       accessibilityRole={"button"}
       accessibilityState={{ selected }}
       testID={testID}
-      onPress={onPress}
+      onPress={handleOnPress}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       accessible={true}
@@ -187,18 +191,23 @@ const TabItem = ({
         style={[
           styles.container,
           { columnGap: 4 },
-          !reducedMotion && scaleAnimatedStyle,
+          !disabled && !reducedMotion && scaleAnimatedStyle,
           animatedStyle,
           fullWidth && styles.fullWidth,
-          disabled && styles.disabled
+          disabled && { opacity: DISABLED_OPACITY }
         ]}
       >
         {activeIcon && (
           <Icon name={activeIcon} color={foregroundColor} size={16} />
         )}
-        <BodySmall weight="Semibold" color={foregroundColor}>
+        <IOText
+          size={14}
+          font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
+          weight="Semibold"
+          color={foregroundColor}
+        >
           {label}
-        </BodySmall>
+        </IOText>
       </Animated.View>
     </Pressable>
   );
@@ -218,8 +227,7 @@ const styles = StyleSheet.create({
   },
   fullWidth: {
     alignSelf: "auto"
-  },
-  disabled: { opacity: 0.5 }
+  }
 });
 
 export { TabItem };

package/src/components/textInput/TextInputValidation.tsx

@@ -86,12 +86,12 @@ export const TextInputValidation = ({
   }, [onFocus]);
 
   const labelError = useMemo(
-    () => (!isValid && errMessage ? errMessage : bottomMessage),
+    () => (isValid === false && errMessage ? errMessage : bottomMessage),
     [isValid, errMessage, bottomMessage]
   );
 
   const labelErrorColor: IOColors | undefined = useMemo(
-    () => (!isValid && errMessage ? theme.errorText : undefined),
+    () => (isValid === false && errMessage ? theme.errorText : undefined),
     [isValid, errMessage, theme.errorText]
   );