@pagopa/io-app-design-system 1.3.2 → 1.4.0

package/src/components/accordion/AccordionItem.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import {
+  Text,
+  View,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  LayoutChangeEvent
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  withSpring
+} from "react-native-reanimated";
+import LinearGradient from "react-native-linear-gradient";
+import { IOAccordionRadius, type IOSpacingScale } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { IOColors, hexToRgba } from "../../core/IOColors";
+import { H6 } from "../typography";
+import { IOSpringValues } from "../../core/IOAnimations";
+import { Icon } from "../icons/Icon";
+
+export type AccordionItem = {
+  id: number;
+  title: string;
+  body: string | React.ReactNode;
+};
+
+type AccordionBody = {
+  children: React.ReactNode;
+  expanded: boolean;
+};
+
+const accordionBodySpacing: IOSpacingScale = 16;
+const accordionIconMargin: IOSpacingScale = 8;
+const accordionBorder: IOColors = "grey-200";
+const accordionBackground: IOColors = "white";
+
+/* The code below is a re-adaptation of Dima Portenko's code:
+https://github.com/dimaportenko/reanimated-collapsable-card-tutorial
+*/
+export const AccordionBody = ({ children, expanded }: AccordionBody) => {
+  const [height, setHeight] = useState(0);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height: onLayoutHeight } = event.nativeEvent.layout;
+
+    if (onLayoutHeight > 0 && height !== onLayoutHeight) {
+      setHeight(onLayoutHeight);
+    }
+  };
+
+  const animatedHeightStyle = useAnimatedStyle(
+    () => ({
+      height: expanded
+        ? withSpring(height, IOSpringValues.accordion)
+        : withSpring(0, IOSpringValues.accordion)
+    }),
+    [expanded]
+  );
+
+  return (
+    <Animated.View
+      style={[animatedHeightStyle, styles.accordionCollapsableContainer]}
+    >
+      <View style={styles.accordionBodyContainer} onLayout={onLayout}>
+        {children}
+      </View>
+    </Animated.View>
+  );
+};
+
+export const AccordionItem = ({ title, body }: AccordionItem) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const onItemPress = () => {
+    setExpanded(!expanded);
+  };
+
+  const animatedChevron = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          rotate: expanded
+            ? withSpring(`180deg`, IOSpringValues.accordion)
+            : withSpring(`0deg`, IOSpringValues.accordion)
+        }
+      ]
+    }),
+    [expanded]
+  );
+
+  return (
+    <View style={styles.accordionWrapper}>
+      <TouchableWithoutFeedback
+        accessible={true}
+        accessibilityRole="button"
+        accessibilityState={{ expanded }}
+        onPress={onItemPress}
+      >
+        <View style={styles.textContainer}>
+          <View style={{ flexShrink: 1, marginRight: accordionIconMargin }}>
+            <H6 color="black">{title}</H6>
+          </View>
+          <Animated.View style={animatedChevron}>
+            <Icon name="chevronBottom" color="blueIO-500" />
+          </Animated.View>
+        </View>
+      </TouchableWithoutFeedback>
+
+      <AccordionBody expanded={expanded}>
+        {typeof body === "string" ? (
+          <Text style={styles.accordionBodyText}>{body}</Text>
+        ) : (
+          body
+        )}
+      </AccordionBody>
+      {/* This gradient adds a smooth end to the content. If it is missing,
+      the content will be cut sharply during the height transition. */}
+      <LinearGradient
+        style={{
+          height: accordionBodySpacing,
+          position: "absolute",
+          // Place at the bottom
+          bottom: 0,
+          // Avoid gradient overlaps with border radius
+          left: accordionBodySpacing,
+          right: accordionBodySpacing
+        }}
+        colors={[
+          hexToRgba(IOColors[accordionBackground], 0),
+          IOColors[accordionBackground]
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  accordionWrapper: {
+    borderColor: IOColors[accordionBorder],
+    borderWidth: 1,
+    borderRadius: IOAccordionRadius,
+    backgroundColor: IOColors[accordionBackground]
+  },
+  accordionCollapsableContainer: {
+    overflow: "hidden"
+  },
+  accordionBodyContainer: {
+    position: "absolute",
+    padding: accordionBodySpacing,
+    paddingTop: 0
+  },
+  accordionBodyText: {
+    fontSize: 14,
+    lineHeight: 21,
+    color: IOColors["grey-700"],
+    ...makeFontStyleObject("Regular", undefined, "TitilliumWeb")
+  },
+  textContainer: {
+    padding: accordionBodySpacing,
+    flexGrow: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }
+});

package/src/components/accordion/index.tsx

@@ -1,2 +1,2 @@
 export * from "./RawAccordion";
-export * from "./IOAccordion";
+export * from "./AccordionItem";

package/src/components/common/LogoPaymentWithFallback.tsx

@@ -0,0 +1,60 @@
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import * as React from "react";
+import { findFirstCaseInsensitive } from "../../utils/object";
+import { IOColors } from "../../core";
+import { IOIconSizeScale, Icon } from "../icons";
+import {
+  IOLogoPaymentExtType,
+  IOLogoPaymentType,
+  IOPaymentExtLogos,
+  IOPaymentLogos,
+  LogoPayment,
+  LogoPaymentExt
+} from "../logos";
+
+export type LogoPaymentWithFallback = {
+  brand?: string;
+  fallbackIconColor?: IOColors;
+  size?: IOIconSizeScale;
+  isExtended?: boolean;
+};
+export type LogoPaymentExtOrDefaultIconProps = {
+  cardIcon?: IOLogoPaymentExtType;
+  fallbackIconColor?: IOColors;
+  size?: IOIconSizeScale;
+};
+/**
+ * This component renders either
+ * - a LogoPayment/LogoPaymentExt component
+ * - a default credit card icon
+ * @param cardIcon: IOLogoPaymentType icon
+ * @param size: the size of the icon (standard is 24/48)
+ * @param fallbackIconColor: default icon color (standard is grey-700)
+ * @param isExtended: if true, renders a LogoPaymentExt component
+ * @returns a LogoPayment/LogopaymentExt component if the cardIcon is supported, a default credit card icon otherwise
+ */
+export const LogoPaymentWithFallback = ({
+  brand,
+  fallbackIconColor = "grey-700",
+  isExtended = false,
+  size = isExtended ? 48 : 24
+}: LogoPaymentWithFallback) => {
+  const logos = isExtended ? IOPaymentExtLogos : IOPaymentLogos;
+
+  return pipe(
+    brand,
+    O.fromNullable,
+    O.chain(findFirstCaseInsensitive(logos)),
+    O.map(([brand]) => brand),
+    O.fold(
+      () => <Icon name="creditCard" size={size} color={fallbackIconColor} />,
+      brand =>
+        isExtended ? (
+          <LogoPaymentExt name={brand as IOLogoPaymentExtType} size={size} />
+        ) : (
+          <LogoPayment name={brand as IOLogoPaymentType} size={size} />
+        )
+    )
+  );
+};

package/src/components/index.tsx

@@ -17,3 +17,4 @@ export * from "./switch";
 export * from "./tag";
 export * from "./tabs";
 export * from "./typography";
+export * from "./textInput";

package/src/components/listitems/ListItemTransaction.tsx

@@ -3,19 +3,25 @@ import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
+
 import {
   IOColors,
+  IOListItemLogoMargin,
   IOListItemStyles,
   IOListItemVisualParams,
   IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
+
+import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
+import { isImageUri } from "../../utils/url";
 import { WithTestID } from "../../utils/types";
+import { getAccessibleAmountText } from "../../utils/accessibility";
 import { Avatar } from "../avatar/Avatar";
 import { Badge } from "../badge/Badge";
-import { Icon } from "../icons";
-import { IOLogoPaymentType, LogoPayment } from "../logos";
+import { IOIconSizeScale, Icon } from "../icons";
+import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
 import {
@@ -23,103 +29,144 @@ import {
   PressableListItemBase
 } from "./PressableListItemsBase";
 
-type LogoNameOrUri = IOLogoPaymentType | ImageURISource;
+export type ListItemTransactionStatus =
+  | "success"
+  | "failure"
+  | "pending"
+  | "cancelled"
+  | "refunded"
+  | "reversal";
+
+type PaymentLogoIcon = IOLogoPaymentType | ImageURISource | React.ReactNode;
+
 export type ListItemTransaction = WithTestID<
   PressableBaseProps & {
     hasChevronRight?: boolean;
     isLoading?: boolean;
-    paymentLogoOrUrl?: LogoNameOrUri;
+    /**
+     * A logo that will be displayed on the left of the list item.
+     *
+     * Must be a {@link IOLogoPaymentType} or an {@link ImageURISource} or an {@link Icon}.
+     */
+    paymentLogoIcon?: PaymentLogoIcon;
     subtitle: string;
     title: string;
   } & (
       | {
-          transactionStatus: "success";
+          transactionStatus: "success" | "refunded";
+          badgeText?: string;
           transactionAmount: string;
         }
       | {
-          transactionStatus: "failure" | "pending";
+          transactionStatus: "failure" | "pending" | "cancelled" | "reversal";
+          badgeText: string;
           transactionAmount?: string;
         }
     )
 >;
 
 type LeftComponentProps = {
-  logoNameOrUrl: LogoNameOrUri;
+  logoIcon: PaymentLogoIcon;
 };
 
-const isImageUrI = (
-  value: IOLogoPaymentType | ImageURISource
-): value is ImageURISource =>
-  typeof value === "object" && value.uri !== undefined;
+const CARD_LOGO_SIZE: IOIconSizeScale = 24;
+const MUNICIPALITY_LOGO_SIZE = 44;
+// this is the <Avatar/>'s "small" size,
+// since it is bigger than the card logos, we use
+// it as a base size for homogeneous sizing via container size.
 
-const LeftComponent = ({ logoNameOrUrl }: LeftComponentProps) => {
-  if (isImageUrI(logoNameOrUrl)) {
-    return <Avatar shape="circle" size="small" logoUri={[logoNameOrUrl]} />;
-  } else {
-    return (
-      <View
-        style={{
-          width: IOVisualCostants.avatarSizeSmall,
-          height: IOVisualCostants.avatarSizeSmall,
-          alignItems: "center",
-          justifyContent: "center"
-        }}
-      >
-        <LogoPayment name={logoNameOrUrl} />
-      </View>
-    );
+const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
+  if (isImageUri(logoIcon)) {
+    return <Avatar logoUri={[logoIcon]} size="small" shape="circle" />;
   }
+  if (React.isValidElement(logoIcon)) {
+    return <>{logoIcon}</>;
+  }
+  return (
+    <LogoPaymentWithFallback
+      brand={logoIcon as IOLogoPaymentType}
+      size={CARD_LOGO_SIZE}
+    />
+  );
 };
 
 export const ListItemTransaction = ({
   accessibilityLabel,
   hasChevronRight = false,
   isLoading = false,
-  paymentLogoOrUrl,
+  paymentLogoIcon,
   onPress,
   subtitle,
   testID,
   title,
   transactionAmount,
+  badgeText,
   transactionStatus = "success"
 }: ListItemTransaction) => {
   const theme = useIOTheme();
 
+  const maybeBadgeText = pipe(
+    badgeText,
+    O.fromNullable,
+    O.getOrElse(() => "-")
+  );
+
   if (isLoading) {
     return <SkeletonComponent />;
   }
 
-  const designSystemBlue: IOColors = "blue";
+  const designSystemBlue: IOColors = "blueIO-500";
   const ListItemTransactionContent = () => {
     const TransactionAmountOrBadgeComponent = () => {
       switch (transactionStatus) {
         case "success":
           return (
-            <H6 color={hasChevronRight ? designSystemBlue : "black"}>
-              {transactionAmount || "-"}
+            <H6
+              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
+              color={hasChevronRight ? designSystemBlue : "black"}
+            >
+              {transactionAmount || ""}
+            </H6>
+          );
+        case "refunded":
+          return (
+            <H6
+              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
+              color={hasChevronRight ? designSystemBlue : "success-700"}
+            >
+              {transactionAmount || ""}
             </H6>
           );
-
         case "failure":
-          return <Badge variant="error" text={"Failed"} />;
+        case "cancelled":
+          return <Badge variant="error" text={maybeBadgeText} />;
+        case "reversal":
+          return <Badge variant="lightBlue" text={maybeBadgeText} />;
         case "pending":
-          return <Badge variant="info" text={"Cancelled"} />;
+          return <Badge variant="info" text={maybeBadgeText} />;
       }
     };
 
     return (
       <>
-        {paymentLogoOrUrl && (
-          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-            <LeftComponent logoNameOrUrl={paymentLogoOrUrl} />
+        {paymentLogoIcon && (
+          <View
+            style={{
+              marginRight: IOListItemLogoMargin,
+              width: MUNICIPALITY_LOGO_SIZE,
+              alignItems: "center"
+            }}
+          >
+            <LeftComponent logoIcon={paymentLogoIcon} />
           </View>
         )}
         <View style={IOStyles.flex}>
-          <H6 color={theme["textBody-default"]}>{title}</H6>
+          <LabelSmall numberOfLines={2} color={theme["textBody-default"]}>
+            {title}
+          </LabelSmall>
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
           </LabelSmall>
-          <VSpacer size={4} />
         </View>
         <View style={Styles.rightSection}>
           <TransactionAmountOrBadgeComponent />

package/src/components/textInput/TextInput.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { TextInputBase } from "./TextInputBase";
+
+type TextInputProps = Omit<
+  React.ComponentProps<typeof TextInputBase>,
+  | "rightElement"
+  | "status"
+  | "bottomMessageColor"
+  | "isPassword"
+  | "errorMessage"
+>;
+
+export const TextInput = (props: TextInputProps) => (
+  <TextInputBase {...props} />
+);