@pagopa/io-app-design-system 4.5.5 → 4.6.0

package/src/components/claimsSelector/index.tsx

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

package/src/components/index.tsx

@@ -5,6 +5,7 @@ export * from "./badge";
 export * from "./banner";
 export * from "./buttons";
 export * from "./checkbox";
+export * from "./claimsSelector";
 export * from "./codeInput";
 export * from "./contentWrapper";
 export * from "./divider";

package/src/components/listitems/ListItemCheckbox.tsx

@@ -119,7 +119,7 @@ export const ListItemCheckbox = ({
                 <Icon
                   allowFontScaling
                   name={icon}
-                  color="grey-300"
+                  color={theme["icon-decorative"]}
                   size={IOSelectionListItemVisualParams.iconSize}
                 />
               )}

package/src/components/listitems/ListItemInfo.tsx

@@ -60,6 +60,7 @@ export type ListItemInfo = WithTestID<{
   // Accessibility
   accessibilityLabel?: string;
   accessibilityRole?: AccessibilityRole;
+  reversed?: boolean;
 }> &
   GraphicProps &
   InteractiveProps;
@@ -70,6 +71,7 @@ export const ListItemInfo = ({
   label,
   value,
   numberOfLines = 2,
+  reversed = false,
   icon,
   paymentLogoIcon,
   endElement,
@@ -99,7 +101,10 @@ export const ListItemInfo = ({
 
   const itemInfoTextComponent = useMemo(
     () => (
-      <View accessible={Platform.OS === "ios"}>
+      <View
+        accessible={Platform.OS === "ios"}
+        style={{ flexDirection: reversed ? "column-reverse" : "column" }}
+      >
         <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
           {label}
         </BodySmall>
@@ -112,7 +117,7 @@ export const ListItemInfo = ({
         )}
       </View>
     ),
-    [label, value, numberOfLines, theme]
+    [label, value, numberOfLines, theme, reversed]
   );
 
   const listItemInfoAction = useCallback(() => {

package/src/components/listitems/ListItemRadio.tsx

@@ -198,7 +198,7 @@ export const ListItemRadio = ({
                 <Icon
                   allowFontScaling
                   name={startImage.icon}
-                  color="grey-300"
+                  color={theme["icon-decorative"]}
                   size={IOSelectionListItemVisualParams.iconSize}
                 />
               )}

package/src/components/listitems/ListItemSwitch.tsx

@@ -115,7 +115,7 @@ export const ListItemSwitch = React.memo(
               <Icon
                 allowFontScaling
                 name={icon}
-                color="grey-300"
+                color={theme["icon-decorative"]}
                 size={IOSelectionListItemVisualParams.iconSize}
               />
             )}

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

@@ -239,6 +239,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
     >
       <View
         accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+          }
+        }
       >
         <Text
           allowFontScaling={true}
@@ -1909,6 +1914,11 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
     >
       <View
         accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+          }
+        }
       >
         <Text
           allowFontScaling={true}

package/src/components/radio/AnimatedRadio.tsx

@@ -14,7 +14,7 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
-import { useIOExperimentalDesign } from "../../core";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
 import {
@@ -54,11 +54,12 @@ export const AnimatedRadio = ({
   onPress,
   disabled
 }: OwnProps) => {
+  const theme = useIOTheme();
   const isChecked = checked ?? false;
 
   const { isExperimental } = useIOExperimentalDesign();
-  const borderColorOffState =
-    IOColors[IOSelectionTickVisualParams.borderColorOffState];
+  const borderColorOffState = IOColors[theme["selection-border-off"]];
+
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   const legacyBorderColorOffState =
     IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState];
@@ -66,12 +67,13 @@ export const AnimatedRadio = ({
     ? borderColorOffState
     : legacyBorderColorOffState;
 
-  const backgroundColorOnState =
-    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  const backgroundColorOnState = IOColors[theme["selection-background-on"]];
+
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   const legacyBackgroundColorOnState =
     IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
-  const backgroundColorProp = isExperimental
+
+  const backgroundColor = isExperimental
     ? backgroundColorOnState
     : legacyBackgroundColorOnState;
 
@@ -133,9 +135,7 @@ export const AnimatedRadio = ({
         style={[
           styles.radioCircle,
           radioButtonSizeStyle,
-          {
-            backgroundColor: backgroundColorProp
-          },
+          { backgroundColor },
           animatedCheckboxSquare
         ]}
       />
@@ -144,7 +144,7 @@ export const AnimatedRadio = ({
           <AnimatedTick
             size={size}
             progress={tickAnimationProgress}
-            stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
+            stroke={IOColors[theme["selection-tick"]]}
           />
         </View>
       )}

package/src/components/switch/NativeSwitch.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Platform, Switch, SwitchProps } from "react-native";
-import { useIOExperimentalDesign } from "../../core";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOColors } from "../../core/IOColors";
-import { IOSwitchVisualParams } from "../../core/IOStyles";
 
 type OwnProps = Pick<
   SwitchProps,
@@ -25,10 +24,11 @@ export const NativeSwitch = ({
   value,
   ...accessibility
 }: OwnProps) => {
+  const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
   const trackColor = {
-    false: IOColors[IOSwitchVisualParams.bgColorOffState],
-    true: IOColors[IOSwitchVisualParams.bgColorOnState]
+    false: IOColors[theme["switch-background-off"]],
+    true: IOColors[theme["switch-background-on"]]
   };
 
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
@@ -45,10 +45,10 @@ export const NativeSwitch = ({
       accessibilityRole="switch"
       accessibilityState={{ checked: value, disabled: accessibility.disabled }}
       trackColor={trackColorComponent}
-      thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
+      thumbColor={IOColors[theme["switch-thumb-color"]]}
       ios_backgroundColor={
         isExperimental
-          ? IOColors[IOSwitchVisualParams.bgColorOffState]
+          ? IOColors[theme["switch-background-off"]]
           : bgLegacyTrackColorAndroid
       }
       onValueChange={onValueChange}

package/src/components/switch/index.tsx

@@ -1,3 +1 @@
-export * from "./SwitchLabel";
-export * from "./AnimatedSwitch";
 export * from "./NativeSwitch";

package/src/components/textInput/TextInputValidation.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { useCallback, useMemo, useState } from "react";
+import {
+  useCallback,
+  useMemo,
+  useState,
+  forwardRef,
+  useImperativeHandle
+} from "react";
 import { AccessibilityInfo, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { useIOTheme } from "../../core";
@@ -28,6 +34,14 @@ type TextInputValidationProps = Omit<
    * In case of a dynamic `errorMessage`, use the `onValidate` function with a `ValidationWithOptions` object as the return value to ensure that screen readers announce the correct value.
    */
   errorMessage: string;
+  /**
+   * Determines the validation mode. If "onBlur", validation occurs on blur. If "onContinue", validation occurs when an external button is pressed.
+   */
+  validationMode?: "onBlur" | "onContinue";
+  /**
+   * A string that will be read by screen readers when the field is not valid.
+   */
+  accessibilityErrorLabel?: string;
 };
 
 function isValidationWithOptions(
@@ -42,107 +56,136 @@ function isValidationWithOptions(
 
 const feedbackIconSize: IOIconSizeScale = 24;
 
-export const TextInputValidation = ({
-  onValidate,
-  errorMessage,
-  value,
-  bottomMessage,
-  onBlur,
-  onFocus,
-  ...props
-}: TextInputValidationProps) => {
-  const theme = useIOTheme();
-  const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
-  const [errMessage, setErrMessage] = useState(errorMessage);
-
-  const getErrorFeedback = useCallback((isValid: boolean, message: string) => {
-    setIsValid(isValid);
-    setErrMessage(message);
-
-    if (!isValid) {
-      triggerHaptic("notificationError");
-      AccessibilityInfo.announceForAccessibilityWithOptions(message, {
-        queue: true
-      });
-    } else {
-      triggerHaptic("notificationSuccess");
-    }
-  }, []);
-
-  const onBlurHandler = useCallback(() => {
-    const validation = onValidate(value);
-
-    if (isValidationWithOptions(validation)) {
-      getErrorFeedback(validation.isValid, validation.errorMessage);
-    } else {
-      getErrorFeedback(validation, errorMessage);
-    }
-    onBlur?.();
-  }, [value, errorMessage, onBlur, onValidate, getErrorFeedback]);
-
-  const onFocusHandler = useCallback(() => {
-    setIsValid(undefined);
-    onFocus?.();
-  }, [onFocus]);
-
-  const labelError = useMemo(
-    () => (isValid === false && errMessage ? errMessage : bottomMessage),
-    [isValid, errMessage, bottomMessage]
-  );
+export const TextInputValidation = forwardRef<
+  {
+    validateInput: () => void;
+  },
+  TextInputValidationProps
+>(
+  (
+    {
+      onValidate,
+      errorMessage,
+      value,
+      bottomMessage,
+      onBlur,
+      onFocus,
+      validationMode = "onBlur",
+      accessibilityErrorLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const theme = useIOTheme();
+    const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
+    const [errMessage, setErrMessage] = useState(errorMessage);
+
+    const getErrorFeedback = useCallback(
+      (isValid: boolean, message: string) => {
+        setIsValid(isValid);
+        setErrMessage(message);
+
+        if (!isValid) {
+          triggerHaptic("notificationError");
+          AccessibilityInfo.announceForAccessibilityWithOptions(
+            accessibilityErrorLabel ?? message,
+            {
+              queue: true
+            }
+          );
+        } else {
+          triggerHaptic("notificationSuccess");
+        }
+      },
+      [accessibilityErrorLabel]
+    );
 
-  const labelErrorColor: IOColors | undefined = useMemo(
-    () => (isValid === false && errMessage ? theme.errorText : undefined),
-    [isValid, errMessage, theme.errorText]
-  );
+    const validateInput = useCallback(() => {
+      const validation = onValidate(value);
 
-  const feedbackIconAttrMap: Record<
-    string,
-    { name: IOIcons; color: IOColors }
-  > = useMemo(
-    () => ({
-      valid: {
-        name: "success",
-        color: theme.successIcon
-      },
-      notValid: {
-        name: "errorFilled",
-        color: theme.errorIcon
+      if (isValidationWithOptions(validation)) {
+        getErrorFeedback(validation.isValid, validation.errorMessage);
+      } else {
+        getErrorFeedback(validation, errorMessage);
       }
-    }),
-    [theme]
-  );
+    }, [value, errorMessage, onValidate, getErrorFeedback]);
+
+    // Expose the validateInput function to the parent component
+    useImperativeHandle(ref, () => ({
+      validateInput
+    }));
 
-  const feedbackIcon = useMemo(() => {
-    const validationStatus = isValid ? "valid" : "notValid";
-
-    return isValid !== undefined ? (
-      <Animated.View
-        entering={enterTransitionInputIcon}
-        exiting={exitTransitionInputIcon}
-      >
-        <Icon
-          name={feedbackIconAttrMap[validationStatus].name}
-          color={feedbackIconAttrMap[validationStatus].color}
-          size={feedbackIconSize}
-        />
-      </Animated.View>
-    ) : (
-      <View style={{ width: feedbackIconSize, height: feedbackIconSize }} />
+    const onBlurHandler = useCallback(() => {
+      if (validationMode === "onBlur") {
+        validateInput();
+      }
+      onBlur?.();
+    }, [validationMode, validateInput, onBlur]);
+
+    const onFocusHandler = useCallback(() => {
+      setIsValid(undefined);
+      onFocus?.();
+    }, [onFocus]);
+
+    const labelError = useMemo(
+      () => (isValid === false && errMessage ? errMessage : bottomMessage),
+      [isValid, errMessage, bottomMessage]
     );
-  }, [feedbackIconAttrMap, isValid]);
 
-  return (
-    <TextInputBase
-      {...props}
-      value={value}
-      status={isValid === false ? "error" : undefined}
-      bottomMessage={labelError}
-      bottomMessageColor={labelErrorColor}
-      rightElement={feedbackIcon}
-      onBlur={onBlurHandler}
-      onFocus={onFocusHandler}
-    />
-  );
-};
+    const labelErrorColor: IOColors | undefined = useMemo(
+      () => (isValid === false && errMessage ? theme.errorText : undefined),
+      [isValid, errMessage, theme.errorText]
+    );
+
+    const feedbackIconAttrMap: Record<
+      string,
+      { name: IOIcons; color: IOColors }
+    > = useMemo(
+      () => ({
+        valid: {
+          name: "success",
+          color: theme.successIcon
+        },
+        notValid: {
+          name: "errorFilled",
+          color: theme.errorIcon
+        }
+      }),
+      [theme]
+    );
+
+    const feedbackIcon = useMemo(() => {
+      const validationStatus = isValid ? "valid" : "notValid";
+
+      return isValid !== undefined ? (
+        <Animated.View
+          entering={enterTransitionInputIcon}
+          exiting={exitTransitionInputIcon}
+        >
+          <Icon
+            name={feedbackIconAttrMap[validationStatus].name}
+            color={feedbackIconAttrMap[validationStatus].color}
+            size={feedbackIconSize}
+          />
+        </Animated.View>
+      ) : (
+        <View style={{ width: feedbackIconSize, height: feedbackIconSize }} />
+      );
+    }, [feedbackIconAttrMap, isValid]);
+
+    return (
+      <TextInputBase
+        {...props}
+        value={value}
+        status={isValid === false ? "error" : undefined}
+        bottomMessage={labelError}
+        bottomMessageColor={labelErrorColor}
+        rightElement={feedbackIcon}
+        onBlur={onBlurHandler}
+        onFocus={onFocusHandler}
+      />
+    );
+  }
+);
 
 export default TextInputValidation;

package/src/components/typography/markdown/MdH1.tsx

@@ -6,7 +6,6 @@ import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 /**
  * `MdH1` typographic style
  */
-
 export const MdH1 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
@@ -18,7 +17,7 @@ export const MdH1 = forwardRef<View, TypographicStyleProps>(
       weight: "Semibold",
       size: 20,
       lineHeight: 24,
-      color: customColor ?? theme["textHeading-tertiary"]
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/components/typography/markdown/MdH2.tsx

@@ -15,9 +15,9 @@ export const MdH2 = forwardRef<View, TypographicStyleProps>(
       ...props,
       font: isExperimental ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
-      size: 16,
+      size: 18,
       lineHeight: 24,
-      color: customColor ?? theme["textHeading-tertiary"]
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/components/typography/markdown/MdH3.tsx

@@ -14,10 +14,10 @@ export const MdH3 = forwardRef<View, TypographicStyleProps>(
     const MdH3Props: IOTextProps = {
       ...props,
       font: isExperimental ? "Titillio" : "TitilliumSansPro",
-      weight: "Regular",
+      weight: "Semibold",
       size: 16,
       lineHeight: 24,
-      color: customColor ?? theme["textHeading-tertiary"]
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/core/IOColors.ts

@@ -40,6 +40,7 @@ export const IOColors = asIOColors({
   "blueIO-600": "#0932B6",
   "blueIO-500": "#0B3EE3",
   "blueIO-400": "#3C65E9",
+  "blueIO-300": "#6D8BEE",
   "blueIO-200": "#9DB2F4",
   "blueIO-150": "#B6C5F7",
   "blueIO-100": "#CED8F9",
@@ -152,6 +153,8 @@ export const IOColorsTints = asIOColors({
   "blueIO-850": IOColors["blueIO-850"],
   "blueIO-600": IOColors["blueIO-600"],
   "blueIO-500": IOColors["blueIO-500"],
+  "blueIO-400": IOColors["blueIO-400"],
+  "blueIO-300": IOColors["blueIO-300"],
   "blueIO-200": IOColors["blueIO-200"],
   "blueIO-150": IOColors["blueIO-150"],
   "blueIO-100": IOColors["blueIO-100"],
@@ -227,6 +230,7 @@ const themeKeys = [
   "neutralButton-pressed",
   "neutralButton-disabled",
   "buttonText-default",
+  "buttonText-danger",
   "buttonText-disabled",
   "listItem-pressed",
   // Typography
@@ -246,6 +250,13 @@ const themeKeys = [
   "textInputLabel-default",
   "textInputValue-default",
   "textInputValue-disabled",
+  // Selection (Radio, Checkbox, Switch)
+  "switch-background-off",
+  "switch-background-on",
+  "switch-thumb-color",
+  "selection-border-off",
+  "selection-background-on",
+  "selection-tick",
   // Layout
   "divider-header",
   "divider-default",
@@ -289,6 +300,7 @@ export const IOThemeLight: IOTheme = {
   "neutralButton-pressed": "grey-850",
   "neutralButton-disabled": "grey-450",
   "buttonText-default": "white",
+  "buttonText-danger": "white",
   "buttonText-disabled": "grey-700",
   "listItem-pressed": "grey-50",
   // Typography
@@ -307,6 +319,13 @@ export const IOThemeLight: IOTheme = {
   "textInputLabel-default": "grey-700",
   "textInputValue-default": "black",
   "textInputValue-disabled": "grey-850",
+  // Selection (Radio, Checkbox, Switch)
+  "switch-background-off": "grey-700",
+  "switch-background-on": "blueIO-500",
+  "switch-thumb-color": "white",
+  "selection-border-off": "grey-650",
+  "selection-background-on": "blueIO-500",
+  "selection-tick": "white",
   // Layout
   "divider-header": "grey-100",
   "divider-default": "grey-200",
@@ -335,7 +354,8 @@ export const IOThemeLightLegacy: IOTheme = {
   ...IOThemeLight,
   "appBackground-accent": "blue-500",
   "interactiveElem-default": "blue-500",
-  "pictogram-hands": "blue-500"
+  "pictogram-hands": "blue-500",
+  "selection-tick": "white"
 };
 
 export const IOThemeDark: IOTheme = {
@@ -344,14 +364,15 @@ export const IOThemeDark: IOTheme = {
   "appBackground-primary": "black",
   "appBackground-secondary": "grey-850",
   "appBackground-tertiary": "grey-700",
-  "interactiveElem-default": "blueIO-400",
-  "interactiveElem-pressed": "blueIO-500",
+  "interactiveElem-default": "blueIO-300",
+  "interactiveElem-pressed": "blueIO-400",
   "interactiveElem-disabled": "grey-700",
   "interactiveOutline-disabled": "grey-450",
   "neutralButton-default": "white",
   "neutralButton-pressed": "grey-100",
   "neutralButton-disabled": "grey-850",
-  "buttonText-default": "white",
+  "buttonText-default": "black",
+  "buttonText-danger": "white",
   "buttonText-disabled": "grey-300",
   "listItem-pressed": "grey-850",
   // Typography
@@ -360,7 +381,7 @@ export const IOThemeDark: IOTheme = {
   "textHeading-tertiary": "grey-450",
   "textBody-default": "white",
   "textBody-secondary": "grey-100",
-  "textBody-tertiary": "grey-450",
+  "textBody-tertiary": "grey-300",
   // Design System related
   "cardBorder-default": "grey-850",
   "icon-default": "grey-450",
@@ -370,6 +391,13 @@ export const IOThemeDark: IOTheme = {
   "textInputLabel-default": "grey-450",
   "textInputValue-default": "white",
   "textInputValue-disabled": "grey-100",
+  // Selection (Radio, Checkbox, Switch)
+  "switch-background-off": "grey-850",
+  "switch-background-on": "blueIO-300",
+  "switch-thumb-color": "white",
+  "selection-border-off": "grey-450",
+  "selection-background-on": "blueIO-300",
+  "selection-tick": "black",
   // Tab Item
   "tab-item-border-default": "grey-700",
   "tab-item-foreground-default": "grey-200",

package/src/core/IOStyles.ts

@@ -311,19 +311,6 @@ export const IOModuleStyles = StyleSheet.create({
 interface IOSelectionTickVisualParams {
   size: IOIconSizeScale;
   borderWidth: number;
-  borderColorOffState: IOColors;
-  bgColorOnState: IOColors;
-  tickColor: IOColors;
-}
-
-interface IOSwitchVisualParams {
-  width: number;
-  height: number;
-  bgColorOffState: IOColors;
-  bgColorOnState: IOColors;
-  tickColor: IOColors;
-  bgCircle: IOColors;
-  padding: number;
 }
 
 interface IOSelectionTickLegacyVisualParams {
@@ -333,21 +320,7 @@ interface IOSelectionTickLegacyVisualParams {
 
 export const IOSelectionTickVisualParams: IOSelectionTickVisualParams = {
   size: 24,
-  borderWidth: 2,
-  borderColorOffState: "grey-650",
-  bgColorOnState: "blueIO-500",
-  tickColor: "white"
-};
-
-export const IOSwitchVisualParams: IOSwitchVisualParams = {
-  width: 40,
-  height: 28,
-  bgColorOffState: "grey-700",
-  bgColorOnState: "blueIO-500",
-  tickColor: "blueIO-500",
-  bgCircle: "white",
-  // Space between the circle and the main shape
-  padding: 2
+  borderWidth: 2
 };
 
 export const IOSelectionTickLegacyVisualParams: IOSelectionTickLegacyVisualParams =