@pagopa/io-app-design-system 1.13.1 → 1.14.0

package/src/components/listitems/ListItemNav.tsx

@@ -30,6 +30,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { Body, H6, LabelSmall } from "../typography";
+import { IOLogoPaymentType, LogoPayment } from "../logos";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyStyles = StyleSheet.create({
@@ -41,20 +42,27 @@ const legacyStyles = StyleSheet.create({
   }
 });
 
-export type ListItemNav = WithTestID<{
+type ListItemNavPartialProps = WithTestID<{
   value: string | React.ReactNode;
   description?: string | React.ReactNode;
   onPress: (event: GestureResponderEvent) => void;
-  icon?: IOIcons;
   // Accessibility
   accessibilityLabel: string;
 }>;
 
+export type ListItemNavGraphicProps =
+  | { icon?: never; paymentLogo: IOLogoPaymentType }
+  | { icon: IOIcons; paymentLogo?: never }
+  | { icon?: never; paymentLogo?: never };
+
+export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
+
 export const ListItemNav = ({
   value,
   description,
   onPress,
   icon,
+  paymentLogo,
   accessibilityLabel,
   testID
 }: ListItemNav) => {
@@ -94,9 +102,7 @@ export const ListItemNav = ({
     </>
   );
 
-  const navTextComponent = isExperimental
-    ? navText
-    : legacyNavText;
+  const navTextComponent = isExperimental ? navText : legacyNavText;
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -171,6 +177,14 @@ export const ListItemNav = ({
               />
             </View>
           )}
+          {paymentLogo && (
+            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+              <LogoPayment
+                name={paymentLogo}
+                size={IOListItemVisualParams.iconSize}
+              />
+            </View>
+          )}
           <View style={IOStyles.flex}>{navTextComponent}</View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,13 +1,10 @@
-import React from "react";
-import {
-  ActivityIndicator,
-  GestureResponderEvent,
-  Switch,
-  View
-} from "react-native";
+import React, { useMemo } from "react";
+import { GestureResponderEvent, Switch, View } from "react-native";
 import {
+  IOColors,
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { IOIcons, Icon } from "../icons";
@@ -16,6 +13,7 @@ import { H6, LabelSmall, LabelLink } from "../typography";
 import { NativeSwitch } from "../switch/NativeSwitch";
 import { Badge } from "../badge";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
+import { LoadingSpinner } from "../loadingSpinner";
 
 type PartialProps = {
   label: string;
@@ -52,15 +50,25 @@ export const ListItemSwitch = React.memo(
     description,
     icon,
     paymentLogo,
-    value,
+    value = false,
     disabled,
     action,
     isLoading,
     badge,
     onSwitchValueChange
   }: ListItemSwitchProps) => {
+    const { isExperimental } = useIOExperimentalDesign();
     const theme = useIOTheme();
 
+    // If we have a badge or we are loading, we can't render the switch
+    // this affects the accessibility tree and the rendering of the component
+    const canRenderSwitch = useMemo(
+      () => !isLoading && !badge,
+      [isLoading, badge]
+    );
+
+    const primaryColor: IOColors = isExperimental ? "blueIO-500" : "blue";
+
     return (
       <View
         testID="ListItemSwitch"
@@ -72,12 +80,14 @@ export const ListItemSwitch = React.memo(
         ]}
         pointerEvents={disabled ? "none" : "auto"}
         needsOffscreenAlphaCompositing={true}
+        accessible={false}
       >
         <View
           style={[
             IOSelectionListItemStyles.listItemInner,
             { alignItems: "center" }
           ]}
+          accessible={false}
         >
           <View
             style={{
@@ -85,6 +95,10 @@ export const ListItemSwitch = React.memo(
               flexDirection: "row",
               alignItems: "center"
             }}
+            accessible={!canRenderSwitch}
+            importantForAccessibility={
+              !canRenderSwitch ? "yes" : "no-hide-descendants"
+            }
           >
             {icon && (
               <View
@@ -114,7 +128,14 @@ export const ListItemSwitch = React.memo(
               </View>
             )}
 
-            <H6 color={"black"} style={{ flex: 1 }}>
+            <H6
+              color={"black"}
+              style={{ flex: 1 }}
+              accessible={!canRenderSwitch}
+              importantForAccessibility={
+                !canRenderSwitch ? "yes" : "no-hide-descendants"
+              }
+            >
               {label}
             </H6>
           </View>
@@ -133,9 +154,13 @@ export const ListItemSwitch = React.memo(
                 testID={badge.testID}
               />
             )}
-            {isLoading && <ActivityIndicator color={"black"} />}
-            {!isLoading && !badge && (
-              <NativeSwitch value={value} onValueChange={onSwitchValueChange} />
+            {isLoading && <LoadingSpinner size={24} color={primaryColor} />}
+            {canRenderSwitch && (
+              <NativeSwitch
+                value={value}
+                accessibilityLabel={label}
+                onValueChange={onSwitchValueChange}
+              />
             )}
           </View>
         </View>

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -20,8 +20,8 @@ export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
 
 const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
   24: 3,
-  48: 6,
-  76: 9
+  48: 5,
+  76: 7
 };
 
 const startRotationAnimation = (
@@ -41,7 +41,7 @@ const startRotationAnimation = (
 export const LoadingSpinner = ({
   color = "blueIO-500",
   size = 24,
-  durationMs = 750,
+  durationMs = 850,
   accessibilityHint,
   accessibilityLabel,
   testID = "LoadingSpinnerTestID"

package/src/components/switch/NativeSwitch.tsx

@@ -4,13 +4,20 @@ import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
 import { IOSwitchVisualParams } from "../../core/IOStyles";
 
-type OwnProps = Pick<SwitchProps, "onValueChange" | "value">;
+type OwnProps = Pick<
+  SwitchProps,
+  "onValueChange" | "value" | "accessible" | "accessibilityLabel"
+>;
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const bgLegacyTrackColorAndroid =
   Platform.OS === "android" ? IOColors["grey-300"] : IOColors.greyUltraLight;
 
-export const NativeSwitch = ({ onValueChange, value }: OwnProps) => {
+export const NativeSwitch = ({
+  onValueChange,
+  value,
+  ...accessibility
+}: OwnProps) => {
   const { isExperimental } = useIOExperimentalDesign();
   const trackColor = {
     false: IOColors[IOSwitchVisualParams.bgColorOffState],
@@ -27,6 +34,7 @@ export const NativeSwitch = ({ onValueChange, value }: OwnProps) => {
 
   return (
     <Switch
+      {...accessibility}
       trackColor={trackColorComponent}
       thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
       ios_backgroundColor={

package/src/components/textInput/TextInputBase.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable functional/immutable-data */
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import {
   Pressable,
   StyleSheet,
@@ -6,7 +7,6 @@ import {
   View,
   ViewStyle
 } from "react-native";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -19,18 +19,23 @@ import {
   IOStyles,
   useIOExperimentalDesign
 } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { getInputPropsByType } from "../../utils/textInput";
+import { InputType } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelSmall } from "../typography";
-import { InputType } from "../../utils/types";
-import { getInputPropsByType } from "../../utils/textInput";
-import { makeFontStyleObject } from "../../utils/fonts";
 
 type InputStatus = "initial" | "focused" | "disabled" | "error";
 
 type RNTextInputProps = Pick<
   React.ComponentProps<typeof TextInput>,
-  "keyboardType" | "inputMode" | "textContentType" | "autoComplete"
+  | "keyboardType"
+  | "inputMode"
+  | "textContentType"
+  | "autoComplete"
+  | "returnKeyType"
+  | "autoCapitalize"
 >;
 
 type InputTextProps = {
@@ -39,7 +44,7 @@ type InputTextProps = {
   onChangeText: (value: string) => void;
   accessibilityLabel?: string;
   textInputProps?: RNTextInputProps;
-  inputTyoe?: InputType;
+  inputType?: InputType;
   status?: InputStatus;
   icon?: IOIcons;
   rightElement?: React.ReactNode;
@@ -152,7 +157,7 @@ export const TextInputBase = ({
   onChangeText,
   accessibilityLabel,
   textInputProps,
-  inputTyoe = "default",
+  inputType = "default",
   status,
   icon,
   rightElement,
@@ -248,8 +253,8 @@ export const TextInputBase = ({
   }, [value, labelSharedValue, onBlur]);
 
   const derivedInputProps = useMemo(
-    () => getInputPropsByType(inputTyoe),
-    [inputTyoe]
+    () => getInputPropsByType(inputType),
+    [inputType]
   );
 
   const inputValue = useMemo(
@@ -319,6 +324,7 @@ export const TextInputBase = ({
             style={[
               animatedLabelProps,
               {
+                ...makeFontStyleObject("Regular", false, "TitilliumWeb"),
                 color: IOColors["grey-700"]
               }
             ]}

package/src/utils/textInput/index.ts

@@ -20,7 +20,8 @@ export const getInputPropsByType = (
           autoComplete: "cc-number",
           keyboardType: "numeric",
           textContentType: "creditCardNumber",
-          inputMode: "numeric"
+          inputMode: "numeric",
+          returnKeyType: "done"
         }
       };
     default: