@pagopa/io-app-design-system 1.32.1 → 1.34.0

package/src/components/index.tsx

@@ -5,8 +5,8 @@ export * from "./badge";
 export * from "./banner";
 export * from "./buttons";
 export * from "./checkbox";
-export * from "./contentWrapper";
 export * from "./codeInput";
+export * from "./contentWrapper";
 export * from "./divider";
 export * from "./endOfPage";
 export * from "./featureInfo";
@@ -14,8 +14,8 @@ export * from "./icons";
 export * from "./image";
 export * from "./layout";
 export * from "./listitems";
-export * from "./logos";
 export * from "./loadingSpinner";
+export * from "./logos";
 export * from "./modules";
 export * from "./numberpad";
 export * from "./otpInput";
@@ -23,10 +23,11 @@ export * from "./pictograms";
 export * from "./progressLoader";
 export * from "./radio";
 export * from "./spacer";
+export * from "./stack";
 export * from "./stepper";
 export * from "./switch";
-export * from "./tag";
 export * from "./tabs";
+export * from "./tag";
+export * from "./textInput";
 export * from "./toast";
 export * from "./typography";
-export * from "./textInput";

package/src/components/listitems/ListItemCheckbox.tsx

@@ -36,12 +36,10 @@ type Props = {
 
 const DISABLED_OPACITY = 0.5;
 
-// disabled: the component is no longer touchable
-// onPress:
-type OwnProps = Props &
+type ListItemCheckboxProps = Props &
   Pick<
     React.ComponentProps<typeof Pressable>,
-    "onPress" | "accessibilityLabel" | "disabled"
+    "onPress" | "accessibilityLabel" | "accessibilityHint" | "disabled"
   >;
 
 /**
@@ -57,9 +55,10 @@ export const ListItemCheckbox = ({
   icon,
   selected,
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   onValueChange
-}: OwnProps) => {
+}: ListItemCheckboxProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
   // Animations
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
@@ -74,6 +73,12 @@ export const ListItemCheckbox = ({
   // Theme
   const theme = useIOTheme();
 
+  // Accessibility
+  // Comma = Small pause when announcing content
+  const fallbackAccessibilityLabel = description
+    ? `${value}, ${description}`
+    : value;
+
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -130,7 +135,8 @@ export const ListItemCheckbox = ({
       onTouchEnd={handlePressOut}
       testID="ListItemCheckbox"
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={accessibilityLabel || fallbackAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="checkbox"
       accessibilityState={{
         checked: selected ?? toggleValue,

package/src/components/listitems/ListItemNav.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ComponentProps, useCallback } from "react";
 import {
   GestureResponderEvent,
   Image,
@@ -44,16 +44,19 @@ type ListItemTopElementProps =
       dateValue: string;
     };
 
-type ListItemNavPartialProps = WithTestID<{
-  value: string | React.ReactNode;
-  description?: string | React.ReactNode;
-  loading?: boolean;
-  onPress: (event: GestureResponderEvent) => void;
-  // Accessibility
-  accessibilityLabel: string;
-  hideChevron?: boolean;
-  topElement?: ListItemTopElementProps;
-}>;
+type ListItemNavPartialProps = WithTestID<
+  {
+    value: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    loading?: boolean;
+    onPress: (event: GestureResponderEvent) => void;
+    hideChevron?: boolean;
+    topElement?: ListItemTopElementProps;
+  } & Pick<
+    ComponentProps<typeof Pressable>,
+    "accessibilityLabel" | "accessibilityHint"
+  >
+>;
 
 export type ListItemNavGraphicProps =
   | { icon?: never; iconColor?: never; paymentLogoUri: string }
@@ -77,6 +80,7 @@ export const ListItemNav = ({
   iconColor = "grey-450",
   paymentLogoUri,
   accessibilityLabel,
+  accessibilityHint,
   testID,
   hideChevron = false,
   topElement,
@@ -197,7 +201,9 @@ export const ListItemNav = ({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       accessible={true}
+      accessibilityState={{ busy: loading }}
       accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       testID={testID}
     >

package/src/components/listitems/ListItemRadio.tsx

@@ -57,18 +57,17 @@ type Props = WithTestID<{
 
 const DISABLED_OPACITY = 0.5;
 
-// disabled: the component is no longer touchable
-// onPress:
-type OwnProps = Props &
+type ListItemRadioProps = Props &
   Pick<
     React.ComponentProps<typeof Pressable>,
-    "onPress" | "accessibilityLabel" | "disabled"
+    "onPress" | "accessibilityLabel" | "accessibilityHint" | "disabled"
   >;
 
 const styles = StyleSheet.create({
   imageSize: {
     width: IOSelectionListItemVisualParams.iconSize,
-    height: IOSelectionListItemVisualParams.iconSize
+    height: IOSelectionListItemVisualParams.iconSize,
+    resizeMode: "contain"
   }
 });
 
@@ -86,9 +85,11 @@ export const ListItemRadio = ({
   selected,
   disabled,
   onValueChange,
+  accessibilityLabel,
+  accessibilityHint,
   loadingProps,
   testID
-}: OwnProps) => {
+}: ListItemRadioProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
   // Animations
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
@@ -216,6 +217,8 @@ export const ListItemRadio = ({
         checked: selected ?? toggleValue,
         disabled: !!disabled
       }}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       onPress={toggleRadioItem}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -14,24 +14,32 @@ export type ListItemRadioWithAmountProps = {
   selected?: boolean;
   label: string;
   formattedAmountString: string;
+  accessibilityLabel?: string;
 } & (
   | {
       isSuggested?: false;
+      suggestReason?: never;
     }
   | {
-      isSuggested: true;
+      isSuggested?: true;
       suggestReason: string;
     }
 );
-export const ListItemRadioWithAmount = (
-  props: ListItemRadioWithAmountProps
-) => {
-  const [toggleValue, setToggleValue] = React.useState(props.selected ?? false);
+export const ListItemRadioWithAmount = ({
+  onValueChange,
+  selected,
+  label,
+  accessibilityLabel,
+  isSuggested = false,
+  suggestReason,
+  formattedAmountString
+}: ListItemRadioWithAmountProps) => {
+  const [toggleValue, setToggleValue] = React.useState(selected ?? false);
   const pressHandler = () => {
     RNReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(val => !val);
-    if (props.onValueChange !== undefined) {
-      props.onValueChange(!toggleValue);
+    if (onValueChange !== undefined) {
+      onValueChange(!toggleValue);
     }
   };
   const theme = useIOTheme();
@@ -39,19 +47,26 @@ export const ListItemRadioWithAmount = (
   const suggestColor: IOColors = "hanPurple-500";
 
   return (
-    <PressableListItemBase onPress={pressHandler}>
+    <PressableListItemBase
+      onPress={pressHandler}
+      accessibilityRole="radio"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{
+        checked: selected ?? toggleValue
+      }}
+    >
       <View style={{ flexShrink: 1 }}>
         <LabelSmallAlt numberOfLines={1} color={theme["textBody-default"]}>
-          {props.label} con nome molto molto lungo
+          {label} con nome molto molto lungo
         </LabelSmallAlt>
-        {props.isSuggested && (
+        {isSuggested && (
           <>
             <VSpacer size={4} />
             <View style={styles.rowCenter}>
               <Icon name="sparkles" size={16} color={suggestColor} />
               <HSpacer size={4} />
               <LabelSmall weight="Regular" color={suggestColor}>
-                {props.suggestReason}
+                {suggestReason}
               </LabelSmall>
             </View>
           </>
@@ -60,10 +75,10 @@ export const ListItemRadioWithAmount = (
       <View pointerEvents="none" style={{ flexDirection: "row" }}>
         <HSpacer size={8} />
         <H6 color={theme["interactiveElem-default"]}>
-          {props.formattedAmountString}
+          {formattedAmountString}
         </H6>
         <HSpacer size={8} />
-        <AnimatedRadio checked={props.selected ?? toggleValue} />
+        <AnimatedRadio checked={selected ?? toggleValue} />
       </View>
     </PressableListItemBase>
   );

package/src/components/listitems/ListItemSwitch.tsx

@@ -98,6 +98,7 @@ export const ListItemSwitch = React.memo(
                   : "no-hide-descendants"
               }
             })}
+            accessibilityState={{ disabled }}
           >
             {icon && (
               <View

package/src/components/listitems/PressableListItemsBase.tsx

@@ -5,15 +5,23 @@ import { IOListItemStyles } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { useListItemSpringAnimation } from "./hooks/useListItemSpringAnimation";
 
-export type PressableBaseProps = WithTestID<{
-  accessibilityLabel?: string;
-  onPress?: () => void;
-}>;
+export type PressableBaseProps = WithTestID<
+  Pick<
+    React.ComponentProps<typeof Pressable>,
+    | "onPress"
+    | "accessibilityLabel"
+    | "accessibilityHint"
+    | "accessibilityState"
+    | "accessibilityRole"
+  >
+>;
+
 export const PressableListItemBase = ({
   onPress,
   testID,
-  accessibilityLabel,
-  children
+  children,
+  accessibilityRole,
+  ...props
 }: React.PropsWithChildren<PressableBaseProps>) => {
   const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
     useListItemSpringAnimation();
@@ -22,11 +30,11 @@ export const PressableListItemBase = ({
       onPress={onPress}
       testID={testID}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       onTouchEnd={onPressOut}
-      accessibilityRole="button"
+      accessibilityRole={accessibilityRole || "button"}
+      {...props}
     >
       <Animated.View
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}

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

@@ -931,11 +931,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
 
 exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmount Snapshot 1`] = `
 <View
-  accessibilityRole="button"
+  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": undefined,
+      "checked": true,
       "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
@@ -1348,11 +1348,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
 
 exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmount Snapshot 2`] = `
 <View
-  accessibilityRole="button"
+  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": undefined,
+      "checked": false,
       "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
@@ -2736,11 +2736,11 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
 
 exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
 <View
-  accessibilityRole="button"
+  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": undefined,
+      "checked": true,
       "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
@@ -3153,11 +3153,11 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
 
 exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
 <View
-  accessibilityRole="button"
+  accessibilityRole="radio"
   accessibilityState={
     {
       "busy": undefined,
-      "checked": undefined,
+      "checked": false,
       "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,

package/src/components/modules/ModuleAttachment.tsx

@@ -23,11 +23,11 @@ import {
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { Icon } from "../icons";
-import { LabelSmall } from "../typography";
-import { VSpacer } from "../spacer";
 import { Badge } from "../badge";
+import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
+import { VSpacer } from "../spacer";
+import { LabelSmall } from "../typography";
 
 type PartialProps = WithTestID<{
   title: string;
@@ -243,6 +243,7 @@ const SkeletonComponent = ({
   <View
     style={styles.button}
     accessible={true}
+    accessibilityState={{ busy: true }}
     accessibilityLabel={loadingAccessibilityLabel}
   >
     <View style={styles.innerContent}>

package/src/components/modules/ModuleCheckout.tsx

@@ -35,7 +35,7 @@ export type ModuleCheckoutProps = ModuleCheckoutPartialProps & {
   ctaText?: string;
 };
 
-type CtaOnlyProps = { text?: string };
+type ActionOnlyProps = { text?: string };
 
 // ---------------- component ----------------
 
@@ -75,7 +75,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
     return (
       <PressableModuleBase onPress={props.onPress}>
         <ModuleBaseContent />
-        {props.ctaText && <CTA text={props.ctaText} />}
+        {props.ctaText && <ModuleAction text={props.ctaText} />}
       </PressableModuleBase>
     );
   }
@@ -89,7 +89,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
 
 // ---------------- sub-components----------------
 
-const CTA = ({ text }: CtaOnlyProps) => (
+const ModuleAction = ({ text }: ActionOnlyProps) => (
   <View pointerEvents="none">
     <ButtonLink
       label={text ?? ""}
@@ -99,7 +99,7 @@ const CTA = ({ text }: CtaOnlyProps) => (
   </View>
 );
 
-const LoadingVersion = ({ text }: CtaOnlyProps) => (
+const LoadingVersion = ({ text }: ActionOnlyProps) => (
   <View style={IOModuleStyles.button}>
     <View style={styles.rowCenter}>
       <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
@@ -110,7 +110,7 @@ const LoadingVersion = ({ text }: CtaOnlyProps) => (
         <Placeholder.Box animate="fade" radius={8} height={16} width={116} />
       </View>
     </View>
-    <CTA text={text} />
+    <ModuleAction text={text} />
   </View>
 );
 

package/src/components/modules/ModuleCredential.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+  Image,
+  ImageSourcePropType,
+  ImageURISource,
+  StyleSheet,
+  View
+} from "react-native";
+import Placeholder from "rn-placeholder";
+import {
+  IOListItemVisualParams,
+  IOModuleStyles,
+  IOSelectionListItemVisualParams,
+  IOStyles,
+  useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { Badge } from "../badge";
+import { IOIcons, Icon } from "../icons";
+import { HSpacer } from "../spacer";
+import { LabelSmallAlt } from "../typography";
+import {
+  PressableModuleBase,
+  PressableModuleBaseProps
+} from "./PressableModuleBase";
+
+type LoadingProps = {
+  isLoading: true;
+};
+
+type ImageProps =
+  | { icon: IOIcons; image?: never }
+  | { icon?: never; image: ImageURISource | ImageSourcePropType };
+
+type BaseProps = {
+  isLoading?: false;
+  label: string;
+  badge?: Badge;
+} & ImageProps &
+  PressableModuleBaseProps;
+
+type ModuleCredentialProps = LoadingProps | BaseProps;
+
+const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
+  const theme = useIOTheme();
+
+  if (props.isLoading) {
+    return <ModuleCredentialSkeleton />;
+  }
+
+  const { icon, image, label, onPress, badge, ...pressableProps } = props;
+
+  const iconComponent = (
+    <>
+      {icon && <Icon name={icon} size={24} color="grey-300" />}
+      {image && (
+        <Image
+          source={image}
+          style={styles.image}
+          accessibilityIgnoresInvertColors={true}
+        />
+      )}
+    </>
+  );
+
+  return (
+    <PressableModuleBase {...pressableProps} onPress={onPress}>
+      <View>{iconComponent}</View>
+      <View style={{ flexGrow: 1, flexShrink: 1, paddingHorizontal: 8 }}>
+        <LabelSmallAlt
+          color="blueIO-500"
+          numberOfLines={2}
+          lineBreakMode="middle"
+        >
+          {label}
+        </LabelSmallAlt>
+      </View>
+      <View style={IOStyles.row}>
+        {badge && <Badge {...badge} />}
+        {onPress && (
+          <Icon
+            name="chevronRightListItem"
+            color={theme["interactiveElem-default"]}
+            size={IOListItemVisualParams.chevronSize}
+          />
+        )}
+      </View>
+    </PressableModuleBase>
+  );
+};
+
+const ModuleCredentialSkeleton = () => (
+  <View style={IOModuleStyles.button}>
+    <View style={[IOStyles.row, IOStyles.alignCenter]}>
+      <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+      <HSpacer size={8} />
+      <Placeholder.Box animate="fade" width={96} height={19} radius={8} />
+    </View>
+    <Placeholder.Box animate="fade" width={64} height={22} radius={8} />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  image: {
+    width: IOSelectionListItemVisualParams.iconSize,
+    height: IOSelectionListItemVisualParams.iconSize,
+    resizeMode: "contain"
+  }
+});
+
+export { ModuleCredential };

package/src/components/modules/PressableModuleBase.tsx

@@ -1,23 +1,28 @@
 import * as React from "react";
-import { GestureResponderEvent, Pressable } from "react-native";
+import { PropsWithChildren } from "react";
+import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOModuleIDPSavedVSpacing, IOModuleStyles } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { useModuleSpringAnimation } from "./hooks/useModuleSpringAnimation";
 
-export type PressableModuleBaseProps = WithTestID<{
-  accessibilityLabel?: string;
-  onPress?: (event: GestureResponderEvent) => void;
-  withLooseSpacing?: boolean;
-}>;
+export type PressableModuleBaseProps = WithTestID<
+  {
+    withLooseSpacing?: boolean;
+  } & Pick<
+    React.ComponentProps<typeof Pressable>,
+    "onPress" | "accessibilityLabel" | "accessibilityHint"
+  >
+>;
 
 export const PressableModuleBase = ({
   onPress,
-  testID,
-  accessibilityLabel,
   withLooseSpacing = false,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
   children
-}: React.PropsWithChildren<PressableModuleBaseProps>) => {
+}: PropsWithChildren<PressableModuleBaseProps>) => {
   const { handlePressIn, handlePressOut, animatedStyle } =
     useModuleSpringAnimation();
   return (
@@ -25,10 +30,11 @@ export const PressableModuleBase = ({
       onPress={onPress}
       testID={testID}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       onTouchEnd={handlePressOut}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
     >
       <Animated.View

package/src/components/modules/index.tsx

@@ -1,5 +1,6 @@
+export * from "./ModuleAttachment";
+export * from "./ModuleCheckout";
+export * from "./ModuleCredential";
 export * from "./ModuleIDP";
 export * from "./ModulePaymentNotice";
 export * from "./PressableModuleBase";
-export * from "./ModuleCheckout";
-export * from "./ModuleAttachment";

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