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

package/lib/typescript/components/textInput/TextInputValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputValidation.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/TextInputValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,KAAK,wBAAwB,GAAG,IAAI,CAClC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAC1C,cAAc,GAAG,QAAQ,GAAG,oBAAoB,GAAG,YAAY,CAChE,GAAG;IACF,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,sBAsDlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/typescript/components/textInput/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./TextInput";
+export * from "./TextInputPassword";
+export * from "./TextInputValidation";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/textInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}

package/lib/typescript/core/IOAnimations.d.ts

@@ -7,6 +7,11 @@ export declare const IOSpringValues: {
         mass: number;
         stiffness: number;
     };
+    accordion: {
+        damping: number;
+        mass: number;
+        stiffness: number;
+    };
     selection: {
         damping: number;
         mass: number;

package/lib/typescript/core/IOAnimations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOAnimations.d.ts","sourceRoot":"","sources":["../../../src/core/IOAnimations.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;CAa1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;CAazB,CAAC"}
+{"version":3,"file":"IOAnimations.d.ts","sourceRoot":"","sources":["../../../src/core/IOAnimations.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;CAazB,CAAC"}

package/lib/typescript/core/IOShapes.d.ts

@@ -6,5 +6,6 @@ export declare const IOTagRadius: IORadiusScale;
 export declare const IOBottomSheetHeaderRadius: IORadiusScale;
 export declare const IOListItemIDPRadius: IORadiusScale;
 export declare const IOBadgeRadius: IORadiusScale;
+export declare const IOAccordionRadius: IORadiusScale;
 export {};
 //# sourceMappingURL=IOShapes.d.ts.map

package/lib/typescript/core/IOShapes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOShapes.d.ts","sourceRoot":"","sources":["../../../src/core/IOShapes.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,yBAA0B,CAAC;AACrD,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAOpD,eAAO,MAAM,aAAa,EAAE,aAA+B,CAAC;AAC5D,eAAO,MAAM,cAAc,EAAE,aAA+B,CAAC;AAC7D,eAAO,MAAM,WAAW,EAAE,aAAiB,CAAC;AAC5C,eAAO,MAAM,yBAAyB,EAAE,aAAkB,CAAC;AAC3D,eAAO,MAAM,mBAAmB,EAAE,aAA+B,CAAC;AAClE,eAAO,MAAM,aAAa,EAAE,aAAkB,CAAC"}
+{"version":3,"file":"IOShapes.d.ts","sourceRoot":"","sources":["../../../src/core/IOShapes.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,yBAA0B,CAAC;AACrD,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAOpD,eAAO,MAAM,aAAa,EAAE,aAA+B,CAAC;AAC5D,eAAO,MAAM,cAAc,EAAE,aAA+B,CAAC;AAC7D,eAAO,MAAM,WAAW,EAAE,aAAiB,CAAC;AAC5C,eAAO,MAAM,yBAAyB,EAAE,aAAkB,CAAC;AAC3D,eAAO,MAAM,mBAAmB,EAAE,aAA+B,CAAC;AAClE,eAAO,MAAM,aAAa,EAAE,aAAkB,CAAC;AAC/C,eAAO,MAAM,iBAAiB,EAAE,aAA+B,CAAC"}

package/lib/typescript/utils/accessibility.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This function is used to get the text that will be read by the screen reader
+ * with the correct minus symbol pronunciation.
+ */
+export declare const getAccessibleAmountText: (amount?: string) => string | undefined;
+//# sourceMappingURL=accessibility.d.ts.map

package/lib/typescript/utils/accessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/utils/accessibility.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,YAAa,MAAM,uBAQpD,CAAC"}

package/lib/typescript/utils/object.d.ts

@@ -0,0 +1,5 @@
+import * as O from "fp-ts/Option";
+export declare const findFirstCaseInsensitive: <T>(obj: {
+    [key: string]: T;
+}) => (key: string) => O.Option<[string, T]>;
+//# sourceMappingURL=object.d.ts.map

package/lib/typescript/utils/object.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"object.d.ts","sourceRoot":"","sources":["../../../src/utils/object.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAGlC,eAAO,MAAM,wBAAwB;;YAE7B,MAAM,0BAKT,CAAC"}

package/lib/typescript/utils/textInput/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { TextInputBase } from "../../components/textInput/TextInputBase";
+import { InputType } from "../types";
+type InputProps = Pick<React.ComponentProps<typeof TextInputBase>, "textInputProps"> & {
+    valueFormat?: (value: string) => string;
+};
+export declare const getInputPropsByType: (type: InputType) => InputProps | undefined;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/utils/textInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/textInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,UAAU,GAAG,IAAI,CACpB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAC1C,gBAAgB,CACjB,GAAG;IACF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,SACxB,SAAS,KACd,UAAU,GAAG,SAef,CAAC"}

package/lib/typescript/utils/types.d.ts

@@ -25,5 +25,6 @@ type Without<T, U> = {
  * Ensure that the types T and U are mutually exclusive
  */
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export type InputType = "credit-card" | "default";
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAGvC,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,GAAG,KAAK,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAExD;;GAEG;AACH,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAE,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,MAAM,GACxC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GACzC,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAGvC,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,GAAG,KAAK,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAExD;;GAEG;AACH,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAE,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,MAAM,GACxC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GACzC,CAAC,GAAG,CAAC,CAAC;AAEV,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC"}

package/lib/typescript/utils/url.d.ts

@@ -0,0 +1,8 @@
+import { ImageURISource } from "react-native";
+/**
+ * type guard to check if a value is an ImageURISource
+ * @argument value the value to check, can be anything
+ * @returns boolean
+ */
+export declare const isImageUri: (value: unknown) => value is ImageURISource;
+//# sourceMappingURL=url.d.ts.map

package/lib/typescript/utils/url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../src/utils/url.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,UAAU,UAAW,OAAO,4BACsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

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/pictograms/svg/PictogramFocusOn.tsx

@@ -1,37 +1,37 @@
 import React from "react";
-import { Svg, Path, G, Defs } from "react-native-svg";
+import { Svg, Path, G, Defs, ClipPath } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramFocusOn = ({ size, color, ...props }: SVGPictogramProps) => (
   <Svg fill="none" width={size} height={size} viewBox="0 0 80 80" {...props}>
-    <G clip-path="url(#a)">
+    <G clipPath="url(#a)">
       <Path
         fill="#AAEEEF"
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M37.0385 36.6024c2.6444-3.4677 4.2148-7.7986 4.2148-12.4963 0-11.3918-9.2348-20.62667-20.6266-20.62667C9.23488 3.47943 0 12.7143 0 24.1061s9.23488 20.6267 20.6267 20.6267c4.4277 0 8.5295-1.3951 11.89-3.7697l-1.5767-.6757-.7113-1.4226V37.798l1.6004-.8891 5.2094-.3065Z"
-        clip-rule="evenodd"
+        clipRule="evenodd"
       />
       <Path
         fill="#00C5CA"
         d="M20.5295 29.5c-.3443 0-.6293-.2724-.651-.6222l-.1207-1.9419c-.0817-1.313.7858-2.4577 1.9653-2.995.1316-.0599.2599-.1217.3849-.1853.7403-.3871 1.3506-.825 1.8308-1.3139.4801-.4889.8303-1.0389 1.0504-1.65.2401-.6111.3601-1.263.3601-1.9556 0-.7741-.1801-1.487-.5402-2.1389-.3601-.6518-.8904-1.1815-1.5906-1.5889-.6803-.4074-1.4906-.6111-2.431-.6111-.7203 0-1.4105.1426-2.0708.4278-.6403.2648-1.2305.6824-1.7707 1.2528-.3548.389-.6724.8538-.9527 1.3945-.2058.3968-.7123.5401-1.0638.2693-.244-.188-.3347-.5216-.2013-.802.3663-.7697.8154-1.4338 1.3475-1.9924.6402-.6722 1.3605-1.1815 2.1608-1.5278.8203-.3463 1.6907-.5194 2.611-.5194 1.2005 0 2.2609.2648 3.1813.7944.9404.5093 1.6706 1.2019 2.1909 2.0778.5202.8759.7803 1.8537.7803 2.9334 0 1.0388-.2401 2.0064-.7203 2.9027-.4602.876-1.1105 1.65-1.9508 2.3223-.4332.336-.9062.6314-1.4191.8862-.8979.4461-1.5879 1.2888-1.6416 2.3045l-.0873 1.6503c-.0186.3524-.3048.6284-.6514.6284Zm-1.1826 4.125c0-.4278.1101-.7741.3302-1.0389.2201-.2648.5202-.3972.9003-.3972.4002 0 .7003.1222.9004.3667.2201.2444.3301.6009.3301 1.0694 0 .387-.11.713-.3301.9778-.2201.2648-.5202.3972-.9004.3972-.4001 0-.7103-.1222-.9303-.3667-.2001-.2444-.3002-.5805-.3002-1.0083Z"
       />
-      <G fill="#0B3EE3" clip-path="url(#b)">
+      <G fill="#0B3EE3" clipPath="url(#b)">
         <Path d="M57.8921 36.9438c.0571.1885.4071.7038.5898.7809 2.0276 2.5853 9.2849 6.7823 22.9454 4.3214v-1.6532c-9.4293 2.1222-15.7294.5002-19.2706-1.5552-2.2284-1.2935-3.3109-3.7543-4.2552-6.1516-1.3778-3.4978-3.5629-7.8791-5.8681-8.0139-.5196-.0371-1.5274.1142-2.1613 1.459-1.1106 2.3441-.6024 7.4292.8109 10.2245-3.7688-.2599-14.2127-.8937-18.4212-.2713-2.581.3798-2.6324 1.8559-2.5867 2.2984.3112 3.0265 6.2584 4.6512 11.015 4.6826-.4796.9907-.9308 2.4925-.2455 3.903.9878 2.0301 3.9743 3.0751 8.8765 3.1036h.0342c1.3591 0 2.5754-.4483 3.4376-1.262 1.0535-.9993 1.1934-2.2356.3826-3.392-.8908-1.2705-2.4554-2.0014-4.1342-1.9615-1.3105.0314-2.6124.3398-3.8715.9108l.5567 1.2249c1.0907-.4968 2.2184-.7623 3.3462-.7909 1.2648-.0342 2.3669.4883 2.9979 1.3876.4282.6082.3654 1.0993-.2056 1.6418-.6082.5739-1.4989.8908-2.5097.8908h-.0285c-5.4076-.0314-7.1549-1.2905-7.6688-2.3413-.768-1.5732.7566-3.5889.7737-3.6089.1599-.2085.1827-.4911.06-.7252-.1228-.2313-.3712-.3712-.6339-.3569-6.8779.3911-10.718-2.2328-10.8436-3.4406-.0457-.4482.7166-.7223 1.4446-.8308 4.9194-.7252 19.3377.3683 19.4833.3797.294.0286.5367-.1285.6566-.3769.12-.2512.0771-.5482-.1113-.7509-1.6246-1.7588-2.4611-7.7176-1.399-9.9617.336-.7117.7084-.6971.8601-.6912l.005.0002c1.8672.1085 4.5967 6.4556 5.9386 10.9268Z" />
         <Path d="M48.1249 55.006c-.7652 0-1.5875-.0343-2.4697-.0999-2.1556-.1656-3.5146-.8623-4.0457-2.0758-.8993-2.0614 1.0593-4.6197 1.2848-4.9052l1.0536.8366c-.474.5996-1.5989 2.4041-1.1078 3.5319.394.8965 1.8015 1.1849 2.9122 1.2705 3.98.3055 6.6381-.1028 7.9229-1.2049.5425-.4654.8337-1.0621.8908-1.8216l1.3419.0999c-.0828 1.1164-.5396 2.0387-1.3562 2.741-1.2677 1.0907-3.3833 1.6275-6.4325 1.6275h.0057Z" />
         <Path d="M80.8936 54.09c-11.9529 4.5537-21.8188.2965-26.3249-1.6009l-.8894 1.0673c10.6723 5.5142 21.2853 4.1505 27.2143 2.1345V54.09Z" />
       </G>
     </G>
     <Defs>
-      <clipPath id="a">
+      <ClipPath id="a">
         <Path fill="#fff" d="M0 0h80v80H0z" />
-      </clipPath>
-      <clipPath id="b">
+      </ClipPath>
+      <ClipPath id="b">
         <Path
           fill="#fff"
           d="M0 0h52v44.6667H0z"
           transform="translate(29.6666 24.6667)"
         />
-      </clipPath>
+      </ClipPath>
     </Defs>
   </Svg>
 );

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} />
+);