npm - @pagopa/io-app-design-system - Versions diffs - 1.16.1 → 1.17.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/src/components/listitems/ListItemInfoCopy.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>
               )}

package/src/components/listitems/ListItemRadioWithAmount.tsx ADDED Viewed

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import RNReactNativeHapticFeedback from "react-native-haptic-feedback";
+import { IOColors, useIOExperimentalDesign } from "../../core";
+import { Icon } from "../icons";
+import { AnimatedRadio } from "../radio/AnimatedRadio";
+import { HSpacer, VSpacer } from "../spacer";
+import { H6, LabelSmallAlt } from "../typography";
+import { LabelSmall } from "../typography/LabelSmall";
+import { PressableListItemBase } from "./PressableListItemsBase";
+export type ListItemRadioWithAmountProps = {
+  selected?: boolean;
+  label: string;
+  formattedAmountString: string;
+} & (
+  | {
+      isSuggested?: false;
+    }
+  | {
+      isSuggested: true;
+      suggestReason: string;
+    }
+);
+export const ListItemRadioWithAmount = (
+  props: ListItemRadioWithAmountProps
+) => {
+  const [toggleValue, setToggleValue] = React.useState(props.selected ?? false);
+  const pressHandler = () => {
+    RNReactNativeHapticFeedback.trigger("impactLight");
+    setToggleValue(val => !val);
+  };
+  const isExperimental = useIOExperimentalDesign();
+  const interactiveColor: IOColors = isExperimental ? "blueIO-500" : "blue";
+  const suggestColor: IOColors = "hanPurple-500";
+  return (
+    <PressableListItemBase onPress={pressHandler}>
+      <View>
+        <LabelSmallAlt>{props.label}</LabelSmallAlt>
+        {props.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}
+              </LabelSmall>
+            </View>
+          </>
+        )}
+      </View>
+      <View pointerEvents="none" style={{ flexDirection: "row" }}>
+        <H6 color={interactiveColor}>{props.formattedAmountString}</H6>
+        <HSpacer size={8} />
+        <AnimatedRadio checked={toggleValue} />
+      </View>
+    </PressableListItemBase>
+  );
+};
+const styles = StyleSheet.create({
+  rowCenter: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});

package/src/components/listitems/ListItemTransaction.tsx CHANGED Viewed

@@ -11,6 +11,7 @@ import {
   IOListItemVisualParams,
   IOStyles,
   IOVisualCostants,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
@@ -23,7 +24,7 @@ import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, LabelSmall, LabelSmallAlt } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
@@ -118,6 +119,7 @@ export const ListItemTransaction = ({
   transactionStatus = "success",
   accessible
 }: ListItemTransaction) => {
+  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
   const maybeBadgeText = pipe(
@@ -130,7 +132,10 @@ export const ListItemTransaction = ({
     return <SkeletonComponent />;
   }
-  const designSystemBlue: IOColors = "blueIO-500";
+  const interactiveColor: IOColors = isExperimental
+    ? theme["interactiveElem-default"]
+    : "blue";
   const ListItemTransactionContent = () => {
     const TransactionAmountOrBadgeComponent = () => {
       switch (transactionStatus) {
@@ -138,7 +143,7 @@ export const ListItemTransaction = ({
           return (
             <H6
               accessibilityLabel={getAccessibleAmountText(transactionAmount)}
-              color={hasChevronRight ? designSystemBlue : "black"}
+              color={hasChevronRight ? interactiveColor : "black"}
             >
               {transactionAmount || ""}
             </H6>
@@ -147,7 +152,7 @@ export const ListItemTransaction = ({
           return (
             <H6
               accessibilityLabel={getAccessibleAmountText(transactionAmount)}
-              color={hasChevronRight ? designSystemBlue : "success-700"}
+              color={hasChevronRight ? interactiveColor : "success-700"}
             >
               {transactionAmount || ""}
             </H6>
@@ -176,9 +181,9 @@ export const ListItemTransaction = ({
           </View>
         )}
         <View style={IOStyles.flex}>
-          <LabelSmall numberOfLines={2} color={theme["textBody-default"]}>
+          <LabelSmallAlt numberOfLines={2} color={theme["textBody-default"]}>
             {title}
-          </LabelSmall>
+          </LabelSmallAlt>
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
           </LabelSmall>
@@ -188,7 +193,7 @@ export const ListItemTransaction = ({
           {hasChevronRight && (
             <Icon
               name="chevronRightListItem"
-              color={designSystemBlue}
+              color={interactiveColor}
               size={IOListItemVisualParams.chevronSize}
             />
           )}