@pagopa/io-app-design-system 1.33.0 → 1.35.0

package/src/components/radio/RadioButtonLabel.tsx

@@ -16,11 +16,12 @@ type Props = {
 
 const DISABLED_OPACITY = 0.5;
 
-// disabled: the component is no longer touchable
-// onPress:
-type OwnProps = Props &
+type RadioButtonLabelProps = Props &
   Pick<React.ComponentProps<typeof AnimatedRadio>, "disabled" | "checked"> &
-  Pick<React.ComponentProps<typeof Pressable>, "onPress">;
+  Pick<
+    React.ComponentProps<typeof Pressable>,
+    "onPress" | "accessibilityLabel" | "accessibilityHint"
+  >;
 
 /**
  * A radio button with the automatic state management that uses a {@link AnimatedRadio}
@@ -33,8 +34,10 @@ export const RadioButtonLabel = ({
   label,
   checked,
   disabled,
-  onValueChange
-}: OwnProps) => {
+  onValueChange,
+  accessibilityLabel,
+  accessibilityHint
+}: RadioButtonLabelProps) => {
   const theme = useIOTheme();
 
   const [toggleValue, setToggleValue] = useState(checked ?? false);
@@ -49,17 +52,19 @@ export const RadioButtonLabel = ({
 
   return (
     <Pressable
-      accessibilityRole="radio"
-      accessibilityState={{
-        checked: checked ?? toggleValue,
-        disabled: !!disabled
-      }}
       onPress={toggleRadioButton}
       style={{
         alignSelf: "flex-start",
         opacity: disabled ? DISABLED_OPACITY : 1
       }}
       disabled={disabled}
+      accessibilityRole="radio"
+      accessibilityState={{
+        checked: checked ?? toggleValue,
+        disabled: !!disabled
+      }}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       testID="AnimatedRadioButton"
     >
       <View

package/src/components/radio/RadioGroup.tsx

@@ -73,14 +73,24 @@ const RadioListItemWithAmount = <T,>(
   <>
     {props.items.map((item, index) => (
       <React.Fragment key={`radio_item_${item.id}`}>
-        <ListItemRadioWithAmount
-          label={item.label}
-          formattedAmountString={item.formattedAmountString}
-          suggestReason={item.isSuggested ? item.suggestReason : ""}
-          isSuggested={item.isSuggested}
-          onValueChange={() => props.onPress(item.id)}
-          selected={props.selectedItem === item.id}
-        />
+        {item.isSuggested ? (
+          <ListItemRadioWithAmount
+            label={item.label}
+            formattedAmountString={item.formattedAmountString}
+            suggestReason={item.suggestReason}
+            isSuggested={item.isSuggested}
+            onValueChange={() => props.onPress(item.id)}
+            selected={props.selectedItem === item.id}
+          />
+        ) : (
+          <ListItemRadioWithAmount
+            label={item.label}
+            formattedAmountString={item.formattedAmountString}
+            onValueChange={() => props.onPress(item.id)}
+            selected={props.selectedItem === item.id}
+          />
+        )}
+
         {index < props.items.length - 1 && <Divider />}
       </React.Fragment>
     ))}

package/src/components/spacer/Spacer.tsx

@@ -13,7 +13,7 @@ type SpacerProps = {
   size?: IOSpacer;
 };
 
-const DEFAULT_SIZE = 16;
+const DEFAULT_SIZE: IOSpacer = 16;
 
 /* Debug Mode */
 const debugMode = false;

package/src/components/stack/Stack.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import { View } from "react-native";
+import { IOSpacer } from "../../core";
+
+type Stack = {
+  space?: IOSpacer;
+  children: ReactNode;
+};
+
+/**
+Horizontal Stack component
+@param {IOSpacer} space
+ */
+export const HStack = ({ space, children }: Stack) => (
+  <View
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      columnGap: space
+    }}
+  >
+    {children}
+  </View>
+);
+
+/**
+Vertical Stack component
+@param {IOSpacer} space
+ */
+
+export const VStack = ({ space, children }: Stack) => (
+  <View
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      rowGap: space
+    }}
+  >
+    {children}
+  </View>
+);

package/src/components/stack/index.tsx

@@ -0,0 +1 @@
+export * from "./Stack";

package/src/components/tabs/TabItem.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
 import Animated, {
   Extrapolate,
@@ -9,7 +9,13 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOColors, IOScaleValues, IOSpringValues, hexToRgba } from "../../core";
+import {
+  IOColors,
+  IOScaleValues,
+  IOSpringValues,
+  hexToRgba,
+  useIOExperimentalDesign
+} from "../../core";
 import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
@@ -35,6 +41,11 @@ export type TabItem = WithTestID<{
 }>;
 
 type ColorStates = {
+  border: {
+    default: string;
+    selected: string;
+    disabled: string;
+  };
   background: {
     default: string;
     selected: string;
@@ -49,18 +60,68 @@ 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: "#ffffff00",
-      selected: IOColors["grey-50"],
-      pressed: IOColors["grey-50"]
+      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 mapLegacyColorStates: Record<
+  NonNullable<TabItem["color"]>,
+  ColorStates
+> = {
+  light: {
+    border: {
+      default: IOColors["grey-300"],
+      selected: IOColors.blue,
+      disabled: hexToRgba(IOColors.white)
+    },
+    background: {
+      default: IOColors.white,
+      selected: hexToRgba(IOColors.blue, 0.1),
+      pressed: IOColors.white
+    },
+    foreground: {
+      default: "black",
+      selected: "blue",
       disabled: "grey-700"
     }
   },
   dark: {
+    border: {
+      default: hexToRgba(IOColors.white, 0),
+      selected: IOColors.white,
+      disabled: hexToRgba(IOColors.white, 0.5)
+    },
     background: {
       default: "#ffffff00",
       selected: IOColors.white,
@@ -93,12 +154,26 @@ const TabItem = ({
     onPressOut
   } = useSpringPressProgressValue(IOSpringValues.selection);
 
-  const colors = mapColorStates[color];
+  const { isExperimental } = useIOExperimentalDesign();
+  const colors = useMemo(
+    () =>
+      isExperimental ? mapColorStates[color] : mapLegacyColorStates[color],
+    [isExperimental, color]
+  );
+
+  const foregroundColor = useMemo(
+    () =>
+      colors.foreground[
+        selected ? "selected" : disabled ? "disabled" : "default"
+      ],
+    [colors.foreground, selected, disabled]
+  );
 
-  const foregroundColor =
-    colors.foreground[
-      selected ? "selected" : disabled ? "disabled" : "default"
-    ];
+  const borderColor = useMemo(
+    () =>
+      colors.border[selected ? "selected" : disabled ? "disabled" : "default"],
+    [colors.border, selected, disabled]
+  );
 
   const opaquePressedBackgroundColor = hexToRgba(
     colors.background.pressed,
@@ -130,6 +205,12 @@ const TabItem = ({
       [opaquePressedBackgroundColor, colors.background.selected]
     );
 
+    const selectedBorderColor = interpolateColor(
+      progressSelected.value,
+      [0, 1],
+      [colors.border.default, colors.border.selected]
+    );
+
     // Scale down button slightly when pressed
     const scale = interpolate(
       progressPressed.value,
@@ -142,6 +223,7 @@ const TabItem = ({
       backgroundColor: selected
         ? selectedBackgroundColor
         : pressedBackgroundColor,
+      borderColor: selected ? selectedBorderColor : borderColor,
       transform: [{ scale }]
     };
   }, [progressPressed, progressSelected, selected]);
@@ -186,6 +268,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     paddingVertical: 8,
+    borderWidth: 1,
     borderRadius: 64,
     borderCurve: "continuous",
     justifyContent: "center",

package/src/components/tabs/TabNavigation.tsx

@@ -34,20 +34,12 @@ const itemsJustify: Record<TabAlignment, FlexStyle["justifyContent"]> = {
 
 const TabNavigation = ({
   color = "light",
-  selectedIndex: forceSelectedIndex,
+  selectedIndex,
   tabAlignment = "center",
   onItemPress,
   children
 }: TabNavigation) => {
   const [itemMinWidth, setItemMinWidth] = React.useState<number>(0);
-  const [selectedIndex, setSelectedIndex] = React.useState(
-    forceSelectedIndex ?? 0
-  );
-
-  const handleItemPress = (index: number) => {
-    setSelectedIndex(forceSelectedIndex ?? index);
-    onItemPress?.(index);
-  };
 
   const handleItemOnLayout = (event: LayoutChangeEvent) => {
     const { width } = event.nativeEvent.layout;
@@ -73,7 +65,7 @@ const TabNavigation = ({
       {React.cloneElement<TabItem>(child, {
         onPress: event => {
           child.props.onPress?.(event);
-          handleItemPress(index);
+          onItemPress?.(index);
         },
         selected: selectedIndex === index,
         color

package/src/core/IOColors.ts

@@ -56,11 +56,11 @@ export const IOColors = asIOColors({
   "turquoise-150": "#AAEEEF",
   "turquoise-100": "#C2F3F4",
   "turquoise-50": "#DBF9FA",
-  "error-850": "#761F1F",
-  "error-600": "#D75252",
-  "error-500": "#FE6666",
-  "error-400": "#FE8585" /* Dark mode */,
-  "error-100": "#FFE0E0",
+  "error-850": "#5D1313",
+  "error-600": "#D13333",
+  "error-500": "#FF4040",
+  "error-400": "#FF6666" /* Dark mode */,
+  "error-100": "#FFD9D9",
   "warning-850": "#614C15",
   "warning-700": "#A5822A",
   "warning-500": "#FFCB46",
@@ -319,8 +319,8 @@ export const IOThemeLight: IOTheme = {
   // Layout
   "divider-default": "grey-200",
   // Status
-  errorIcon: "error-500",
-  errorText: "error-850",
+  errorIcon: "error-600",
+  errorText: "error-600",
   // Pictograms
   "pictogram-hands": "blueIO-500",
   "pictogram-tint-main": "turquoise-150",