@pagopa/io-app-design-system 1.16.0 → 1.17.0

package/src/components/listitems/ListItemInfo.tsx

@@ -10,6 +10,7 @@ import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { H6, LabelSmall } from "../typography";
 import { ButtonLink, IconButton } from "../buttons";
+import { Badge } from "../badge";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -21,14 +22,22 @@ type IconButtonActionProps = {
   componentProps: ComponentProps<typeof IconButton>;
 };
 
-type ActionProps = ButtonLinkActionProps | IconButtonActionProps;
+type BadgeProps = {
+  type: "badge";
+  componentProps: ComponentProps<typeof Badge>;
+};
+
+type EndElementProps =
+  | ButtonLinkActionProps
+  | IconButtonActionProps
+  | BadgeProps;
 
 export type ListItemInfo = WithTestID<{
   label: string;
   value: string | React.ReactNode;
   numberOfLines?: number;
   icon?: IOIcons;
-  action?: ActionProps;
+  endElement?: EndElementProps;
   // Accessibility
   accessibilityLabel?: string;
 }>;
@@ -38,7 +47,7 @@ export const ListItemInfo = ({
   value,
   numberOfLines = 2,
   icon,
-  action,
+  endElement,
   accessibilityLabel,
   testID
 }: ListItemInfo) => {
@@ -59,11 +68,15 @@ export const ListItemInfo = ({
   const itemInfoTextComponent = useMemo(
     () => (
       <View
-        accessible={action === undefined ? true : false}
+        accessible={endElement === undefined ? true : false}
         importantForAccessibility={
-          action === undefined ? "yes" : "no-hide-descendants"
+          endElement === undefined || endElement.type === "badge"
+            ? "yes"
+            : "no-hide-descendants"
+        }
+        accessibilityElementsHidden={
+          endElement !== undefined && endElement.type !== "badge"
         }
-        accessibilityElementsHidden={action !== undefined}
       >
         <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
           {label}
@@ -77,42 +90,46 @@ export const ListItemInfo = ({
         )}
       </View>
     ),
-    [label, value, numberOfLines, theme, action]
+    [label, value, numberOfLines, theme, endElement]
   );
 
   const listItemInfoAction = useCallback(() => {
-    if (action) {
-      const { type, componentProps } = action;
+    if (endElement) {
+      const { type, componentProps } = endElement;
 
-      const accessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
       switch (type) {
         case "buttonLink":
+          const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+
           return (
             <ButtonLink
               {...componentProps}
-              accessibilityLabel={accessibilityLabel}
+              accessibilityLabel={buttonLinkAccessibilityLabel}
             />
           );
         case "iconButton":
+          const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
           return (
             <IconButton
               {...componentProps}
-              accessibilityLabel={accessibilityLabel}
+              accessibilityLabel={iconButtonAccessibilityLabel}
             />
           );
+        case "badge":
+          return <Badge {...componentProps} />;
         default:
           return <></>;
       }
     }
     return <></>;
-  }, [action, listItemAccessibilityLabel]);
+  }, [endElement, listItemAccessibilityLabel]);
 
   return (
     <View
       style={IOListItemStyles.listItem}
       testID={testID}
-      accessible={action === undefined ? true : false}
-      accessibilityLabel={accessibilityLabel}
+      accessible={endElement === undefined ? true : false}
+      accessibilityLabel={listItemAccessibilityLabel}
     >
       <View style={IOListItemStyles.listItemInner}>
         {icon && (
@@ -125,7 +142,7 @@ export const ListItemInfo = ({
           </View>
         )}
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
-        {action && (
+        {endElement && (
           <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
             {listItemInfoAction()}
           </View>

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -1,11 +1,5 @@
 import React, { useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -26,11 +20,9 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { VSpacer } from "../spacer";
-import { Body, H6, LabelSmall } from "../typography";
+import { H6, LabelSmall } from "../typography";
 
 export type ListItemInfoCopy = WithTestID<{
   label: string;
@@ -42,15 +34,6 @@ export type ListItemInfoCopy = WithTestID<{
   accessibilityLabel: string;
 }>;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyStyles = StyleSheet.create({
-  textValue: {
-    fontSize: 18,
-    lineHeight: 24,
-    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
-  }
-});
-
 export const ListItemInfoCopy = ({
   label,
   value,
@@ -64,50 +47,26 @@ export const ListItemInfoCopy = ({
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyInfoCopyText = (
+  const foregroundColor = isExperimental
+    ? theme["interactiveElem-default"]
+    : "blue";
+
+  const listItemInfoCopyContent = (
     <>
-      <Body weight="Regular">{label}</Body>
-      <VSpacer size={4} />
+      <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+        {label}
+      </LabelSmall>
       {/* Let developer using a custom component (e.g: skeleton) */}
       {typeof value === "string" ? (
-        <Text
-          style={[legacyStyles.textValue, { color: IOColors.blue }]}
-          numberOfLines={numberOfLines}
-        >
+        <H6 color={foregroundColor} numberOfLines={numberOfLines}>
           {value}
-        </Text>
+        </H6>
       ) : (
         { value }
       )}
     </>
   );
 
-  const infoCopyText = (
-    <>
-      <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-              {label}
-            </LabelSmall>
-            {/* Let developer using a custom component (e.g: skeleton) */}
-            {typeof value === "string" ? (
-              <H6
-                color={theme["interactiveElem-default"]}
-                numberOfLines={numberOfLines}
-              >
-                {value}
-              </H6>
-            ) : (
-              { value }
-            )}
-    </>
-  );
-
-  const infoCopyTextComponent = isExperimental
-    ? infoCopyText
-    : legacyInfoCopyText;
-
-  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
-
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -180,13 +139,11 @@ export const ListItemInfoCopy = ({
               />
             </View>
           )}
-          <View style={IOStyles.flex}>
-            {infoCopyTextComponent}
-          </View>
+          <View style={IOStyles.flex}>{listItemInfoCopyContent}</View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="copy"
-              color={iconColor}
+              color={foregroundColor}
               size={IOListItemVisualParams.chevronSize}
             />
           </View>

package/src/components/listitems/ListItemNav.tsx

@@ -1,11 +1,5 @@
 import React, { useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -26,21 +20,12 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
+import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
-import { Body, H6, LabelSmall } from "../typography";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyStyles = StyleSheet.create({
-  textValue: {
-    fontSize: 18,
-    lineHeight: 24,
-    color: IOColors.bluegreyDark,
-    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
-  }
-});
+import { VSpacer } from "../spacer";
+import { H6, LabelSmall } from "../typography";
 
 type ListItemNavPartialProps = WithTestID<{
   value: string | React.ReactNode;
@@ -48,6 +33,8 @@ type ListItemNavPartialProps = WithTestID<{
   onPress: (event: GestureResponderEvent) => void;
   // Accessibility
   accessibilityLabel: string;
+  hideChevron?: boolean;
+  badgeProps?: React.ComponentProps<typeof Badge>;
 }>;
 
 export type ListItemNavGraphicProps =
@@ -65,25 +52,36 @@ export const ListItemNav = ({
   iconColor = "grey-450",
   paymentLogo,
   accessibilityLabel,
-  testID
+  testID,
+  hideChevron = false,
+  badgeProps
 }: ListItemNav) => {
   const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyNavText = (
+  const listItemNavContent = (
     <>
+      {badgeProps && (
+        <>
+          <View style={{ alignSelf: "flex-start" }}>
+            <Badge {...badgeProps} />
+          </View>
+          <VSpacer size={4} />
+        </>
+      )}
       {/* Let developer using a custom component (e.g: skeleton) */}
       {typeof value === "string" ? (
-        <Text style={legacyStyles.textValue}>{value}</Text>
+        <H6 color={theme["textBody-default"]}>{value}</H6>
       ) : (
         value
       )}
       {description && (
         <>
           {typeof description === "string" ? (
-            <Body weight="Regular">{description}</Body>
+            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              {description}
+            </LabelSmall>
           ) : (
             description
           )}
@@ -92,18 +90,6 @@ export const ListItemNav = ({
     </>
   );
 
-  const navText = (
-    <>
-      <H6 color={theme["textBody-default"]}>{value}</H6>
-      {description && (
-        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-          {description}
-        </LabelSmall>
-      )}
-    </>
-  );
-
-  const navTextComponent = isExperimental ? navText : legacyNavText;
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -188,14 +174,16 @@ export const ListItemNav = ({
               />
             </View>
           )}
-          <View style={IOStyles.flex}>{navTextComponent}</View>
-          <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-            <Icon
-              name="chevronRightListItem"
-              color={navIconColor}
-              size={IOListItemVisualParams.chevronSize}
-            />
-          </View>
+          <View style={IOStyles.flex}>{listItemNavContent}</View>
+          {!hideChevron && (
+            <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+              <Icon
+                name="chevronRightListItem"
+                color={navIconColor}
+                size={IOListItemVisualParams.chevronSize}
+              />
+            </View>
+          )}
         </Animated.View>
       </Animated.View>
     </Pressable>

package/src/components/listitems/ListItemNavAlert.tsx

@@ -1,11 +1,5 @@
 import React, { useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -26,29 +20,19 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
-import { Body, H6, LabelSmall } from "../typography";
+import { H6, LabelSmall } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
-  value: string;
-  description?: string;
+  value: string | React.ReactNode;
+  description?: string | React.ReactNode;
   withoutIcon?: boolean;
   onPress: (event: GestureResponderEvent) => void;
   // Accessibility
   accessibilityLabel: string;
 }>;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyStyles = StyleSheet.create({
-  textValue: {
-    fontSize: 18,
-    lineHeight: 24,
-    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
-  }
-});
-
 export const ListItemNavAlert = ({
   value,
   description,
@@ -63,33 +47,30 @@ export const ListItemNavAlert = ({
   const theme = useIOTheme();
 
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyNavAlertText = (
+  const listItemNavAlertContent = (
     <>
-      <Text style={[legacyStyles.textValue, { color: IOColors.bluegreyDark }]}>
-        {value}
-      </Text>
-      {description && (
-        <Body weight="SemiBold" color={theme.errorText}>
-          {description}
-        </Body>
+      {/* Let developer using a custom component (e.g: skeleton) */}
+      {typeof value === "string" ? (
+        <H6 color={theme["textBody-default"]}>{value}</H6>
+      ) : (
+        value
       )}
-    </>
-  );
-
-  const navAlertText = (
-    <>
-      <H6 color={theme["textBody-default"]}>{value}</H6>
       {description && (
-        <LabelSmall weight="SemiBold" color={theme.errorText}>
-          {description}
-        </LabelSmall>
+        <>
+          {typeof description === "string" ? (
+            <LabelSmall weight="SemiBold" color={theme.errorText}>
+              {description}
+            </LabelSmall>
+          ) : (
+            description
+          )}
+        </>
       )}
     </>
   );
 
-  const navAlertTextComponent = isExperimental ? navAlertText : legacyNavAlertText;
   const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
-  
+
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -162,9 +143,7 @@ export const ListItemNavAlert = ({
               />
             </View>
           )}
-          <View style={IOStyles.flex}>
-          {navAlertTextComponent}
-          </View>
+          <View style={IOStyles.flex}>{listItemNavAlertContent}</View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="chevronRightListItem"

package/src/components/listitems/ListItemRadio.tsx

@@ -11,6 +11,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
+import Placeholder from "rn-placeholder";
 import {
   IOColors,
   IOScaleValues,
@@ -26,13 +27,31 @@ import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
+import { IOLogoPaymentType, LogoPayment } from "../logos";
+
+type ListItemRadioGraphicProps =
+  | { icon?: never; paymentLogo: IOLogoPaymentType }
+  | { icon: IOIcons; paymentLogo?: never };
+
+type ListItemRadioLoadingProps =
+  | {
+      state: true;
+      skeletonDescription?: boolean;
+      skeletonIcon?: boolean;
+    }
+  | {
+      state?: false;
+      skeletonDescription?: never;
+      skeletonIcon?: never;
+    };
 
 type Props = WithTestID<{
   value: string;
   description?: string;
-  icon?: IOIcons;
   selected: boolean;
   onValueChange?: (newValue: boolean) => void;
+  startImage?: ListItemRadioGraphicProps;
+  loadingProps?: ListItemRadioLoadingProps;
 }>;
 
 const DISABLED_OPACITY = 0.5;
@@ -46,7 +65,7 @@ type OwnProps = Props &
   >;
 
 /**
- *  with the automatic state management that uses a {@link AnimatedCheckBox}
+ * `ListItemRadio` component with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
  *
  * @param props
@@ -55,16 +74,16 @@ type OwnProps = Props &
 export const ListItemRadio = ({
   value,
   description,
-  icon,
+  startImage,
   selected,
   disabled,
   onValueChange,
+  loadingProps,
   testID
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
   // Animations
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
@@ -123,7 +142,66 @@ export const ListItemRadio = ({
     }
   };
 
-  return (
+  const disabledStyle = { opacity: disabled ? DISABLED_OPACITY : 1 };
+
+  const SkeletonDescriptionLines = () => (
+    <>
+      <VSpacer size={8} />
+      <Placeholder.Box animate="fade" radius={8} width={"100%"} height={8} />
+      <VSpacer size={8} />
+      <Placeholder.Box animate="fade" radius={8} width={"100%"} height={8} />
+      <VSpacer size={8} />
+      <Placeholder.Box animate="fade" radius={8} width={"100%"} height={8} />
+    </>
+  );
+
+  const SkeletonIcon = () => (
+    <View
+      style={{
+        marginRight: IOSelectionListItemVisualParams.iconMargin
+      }}
+    >
+      <Placeholder.Box
+        animate="fade"
+        radius={4}
+        width={IOSelectionListItemVisualParams.iconSize}
+        height={IOSelectionListItemVisualParams.iconSize}
+      />
+    </View>
+  );
+
+  const SkeletonComponent = () => (
+    <View style={IOSelectionListItemStyles.listItem}>
+      <View style={IOSelectionListItemStyles.listItemInner}>
+        <View
+          style={[
+            IOStyles.flex,
+            IOStyles.rowSpaceBetween,
+            IOStyles.alignCenter
+          ]}
+        >
+          <View style={[IOStyles.row, IOStyles.alignCenter]}>
+            {loadingProps?.skeletonIcon && <SkeletonIcon />}
+            <Placeholder.Box
+              animate="fade"
+              radius={8}
+              width={179}
+              height={16}
+            />
+          </View>
+          <HSpacer size={8} />
+          <View pointerEvents="none" style={disabledStyle}>
+            <AnimatedRadio checked={toggleValue} />
+          </View>
+        </View>
+      </View>
+      {loadingProps?.skeletonDescription && <SkeletonDescriptionLines />}
+    </View>
+  );
+
+  return loadingProps?.state ? (
+    <SkeletonComponent />
+  ) : (
     <Pressable
       onPress={toggleRadioItem}
       onPressIn={handlePressIn}
@@ -136,7 +214,7 @@ export const ListItemRadio = ({
         style={[
           IOSelectionListItemStyles.listItem,
           animatedBackgroundStyle,
-          { opacity: disabled ? DISABLED_OPACITY : 1 }
+          disabledStyle
         ]}
         // This is required to avoid opacity
         // inheritance on Android
@@ -145,17 +223,26 @@ export const ListItemRadio = ({
         <Animated.View style={animatedScaleStyle}>
           <View style={IOSelectionListItemStyles.listItemInner}>
             <View style={[IOStyles.row, { flexShrink: 1 }]}>
-              {icon && (
+              {startImage && (
                 <View
                   style={{
                     marginRight: IOSelectionListItemVisualParams.iconMargin
                   }}
                 >
-                  <Icon
-                    name={icon}
-                    color="grey-300"
-                    size={IOSelectionListItemVisualParams.iconSize}
-                  />
+                  {/* icon or paymentLogo props are mutually exclusive */}
+                  {startImage.icon && (
+                    <Icon
+                      name={startImage.icon}
+                      color="grey-300"
+                      size={IOSelectionListItemVisualParams.iconSize}
+                    />
+                  )}
+                  {startImage.paymentLogo && (
+                    <LogoPayment
+                      name={startImage.paymentLogo}
+                      size={IOSelectionListItemVisualParams.iconSize}
+                    />
+                  )}
                 </View>
               )}