@pagopa/io-app-design-system 1.11.2 → 1.12.0

package/src/components/listitems/ListItemTransaction.tsx

@@ -14,12 +14,12 @@ import {
   useIOTheme
 } from "../../core";
 
-import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
-import { isImageUri } from "../../utils/url";
-import { WithTestID } from "../../utils/types";
 import { getAccessibleAmountText } from "../../utils/accessibility";
+import { WithTestID } from "../../utils/types";
+import { isImageUri } from "../../utils/url";
 import { Avatar } from "../avatar/Avatar";
 import { Badge } from "../badge/Badge";
+import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
@@ -37,7 +37,20 @@ export type ListItemTransactionStatus =
   | "refunded"
   | "reversal";
 
-type PaymentLogoIcon = IOLogoPaymentType | ImageURISource | React.ReactNode;
+export type ListItemTransactionStatusWithoutBadge = Extract<
+  ListItemTransactionStatus,
+  "success" | "refunded"
+>;
+
+export type ListItemTransactionStatusWithBadge = Exclude<
+  ListItemTransactionStatus,
+  "success" | "refunded"
+>;
+
+export type ListItemTransactionLogo =
+  | IOLogoPaymentType
+  | ImageURISource
+  | React.ReactNode;
 
 export type ListItemTransaction = WithTestID<
   PressableBaseProps & {
@@ -48,17 +61,18 @@ export type ListItemTransaction = WithTestID<
      *
      * Must be a {@link IOLogoPaymentType} or an {@link ImageURISource} or an {@link Icon}.
      */
-    paymentLogoIcon?: PaymentLogoIcon;
+    paymentLogoIcon?: ListItemTransactionLogo;
     subtitle: string;
     title: string;
+    accessible?: boolean;
   } & (
       | {
-          transactionStatus: "success" | "refunded";
+          transactionStatus: ListItemTransactionStatusWithoutBadge;
           badgeText?: string;
           transactionAmount: string;
         }
       | {
-          transactionStatus: "failure" | "pending" | "cancelled" | "reversal";
+          transactionStatus: ListItemTransactionStatusWithBadge;
           badgeText: string;
           transactionAmount?: string;
         }
@@ -66,7 +80,7 @@ export type ListItemTransaction = WithTestID<
 >;
 
 type LeftComponentProps = {
-  logoIcon: PaymentLogoIcon;
+  logoIcon: ListItemTransactionLogo;
 };
 
 const CARD_LOGO_SIZE: IOIconSizeScale = 24;
@@ -101,7 +115,8 @@ export const ListItemTransaction = ({
   title,
   transactionAmount,
   badgeText,
-  transactionStatus = "success"
+  transactionStatus = "success",
+  accessible
 }: ListItemTransaction) => {
   const theme = useIOTheme();
 
@@ -190,7 +205,7 @@ export const ListItemTransaction = ({
         <View
           style={IOListItemStyles.listItem}
           testID={testID}
-          accessible={true}
+          accessible={accessible}
           accessibilityLabel={accessibilityLabel}
         >
           <View style={IOListItemStyles.listItemInner}>

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

@@ -224,6 +224,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         color="bluegrey"
         defaultColor="bluegrey"
         defaultWeight="Regular"
@@ -350,6 +351,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           color="bluegrey"
           defaultColor="bluegrey"
           defaultWeight="Regular"

package/src/components/logos/LogoPaymentCard.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { hexToRgba, IOColors } from "../../core";
+
+/* Logos */
+import LogoPaymentCardPayPal from "./svg/LogoPaymentCardPayPal";
+import LogoPaymentCardBancomatPay from "./svg/LogoPaymentCardBancomatPay";
+
+export const IOPaymentCardLogos = {
+  payPal: LogoPaymentCardPayPal,
+  bancomatPay: LogoPaymentCardBancomatPay
+} as const;
+
+export type IOLogoPaymentCardType = keyof typeof IOPaymentCardLogos;
+
+type IOPaymentLogos = {
+  name: IOLogoPaymentCardType;
+  align: "start" | "center" | "end";
+  width?: "100%" | number;
+  height?: number;
+  debugMode?: boolean;
+};
+
+export type SVGCardLogoProps = {
+  preserveAspectRatio: "xMinYMin meet" | "xMidYMid meet" | "xMaxYMax meet";
+};
+
+const preserveAspectRatioValues: Record<
+  IOPaymentLogos["align"],
+  SVGCardLogoProps["preserveAspectRatio"]
+> = {
+  start: "xMinYMin meet",
+  center: "xMidYMid meet",
+  end: "xMaxYMax meet"
+};
+
+const styles = StyleSheet.create({
+  debugMode: {
+    backgroundColor: hexToRgba(IOColors["error-500"], 0.2)
+  }
+});
+
+const LogoPaymentCard = ({
+  name,
+  width = "100%",
+  height = 32,
+  align = "center",
+  debugMode = false,
+  ...props
+}: IOPaymentLogos) => {
+  const LogoElement = IOPaymentCardLogos[name];
+  return (
+    <View style={[{ width, height }, debugMode && styles.debugMode]}>
+      <LogoElement
+        preserveAspectRatio={preserveAspectRatioValues[align]}
+        {...props}
+      />
+    </View>
+  );
+};
+
+export default LogoPaymentCard;

package/src/components/logos/LogoPaymentExt.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import LogoPaymentExtAmex from "./svg/LogoPaymentExtAmex";
 
 /* Logos */
 import LogoPaymentExtMaestro from "./svg/LogoPaymentExtMaestro";
@@ -15,6 +14,7 @@ import LogoPaymentExtBancomatPay from "./svg/LogoPaymentExtBancomatPay";
 import LogoPaymentExtPostepay from "./svg/LogoPaymentExtPostepay";
 import LogoPaymentExtPagoBancomat from "./svg/LogoPaymentExtPagoBancomat";
 import LogoPaymentExtApplePay from "./svg/LogoPaymentExtApplePay";
+import LogoPaymentExtAmex from "./svg/LogoPaymentExtAmex";
 
 export const IOPaymentExtLogos = {
   maestro: LogoPaymentExtMaestro,

package/src/components/logos/README.md

@@ -5,7 +5,8 @@ There are different sets:
 
 ## Prefixes
 - **Payment Logos**: `LogoPayment…`
-- **Payment Logos (extended)**: `LogoPaymentExt…`
+- **Payment Logos**: `LogoPaymentExt…`
+- **Payment Card Logos**: `LogoPaymentCard…`
 
 ## Add a new logo
 First of all, follow the instructions stated in the main README (`Vector graphics` section).

package/src/components/logos/index.tsx

@@ -2,3 +2,5 @@ export { default as LogoPayment } from "./LogoPayment";
 export * from "./LogoPayment";
 export { default as LogoPaymentExt } from "./LogoPaymentExt";
 export * from "./LogoPaymentExt";
+export { default as LogoPaymentCard } from "./LogoPaymentCard";
+export * from "./LogoPaymentCard";

package/src/components/logos/svg/LogoPaymentCardBancomatPay.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGCardLogoProps } from "../LogoPaymentCard";
+
+const LogoPaymentCardBancomatPay = ({
+  preserveAspectRatio
+}: SVGCardLogoProps) => (
+  <Svg viewBox="0 0 137 24" preserveAspectRatio={preserveAspectRatio}>
+    <Path
+      fill="#3FBDEE"
+      d="M104.986 10.8594 94.6035.4745c-.6327-.63267-1.6562-.63267-2.2889 0L81.9323 10.8568c-.6327.6327-.6327 1.6563 0 2.2864l10.3823 10.3823c.6327.6327 1.6562.6327 2.2889 0l10.3825-10.3823c.632-.6327.632-1.6563 0-2.2864v.0026Zm-7.0932 3.634c-.2674 2.1757-1.8465 3.225-4.4209 3.225H88.246l.3035-2.4226h5.1873c.6635 0 1.021-.4012 1.1085-1.1111.0102-.0771.0128-.1466.0128-.216h3.0733c-.0051.1646-.0154.3369-.0386.5247Zm2.0806-1.376H88.817l.27-2.186h5.0381c.7381 0 .9696-.5092 1.0442-1.12643.0746-.61723-.0309-1.003-.787-1.003h-5.033l.3035-2.51521h5.1487c2.9319 0 3.7188 1.24989 3.508 2.9627-.0849.69953-.2855 1.25764-.571 1.68194h.3009c1.1728 0 2.0806 1.0236 1.9366 2.1886l-.0026-.0026Z"
+    />
+    <Path
+      fill="#223264"
+      d="M1.4042 6.28671h4.56494c2.93184 0 3.71881 1.2499 3.50793 2.96271-.16203 1.32708-.72525 2.14488-1.54051 2.49978 1.00043.4012 1.31676 1.219 1.12902 2.7467-.26747 2.1757-1.84655 3.225-4.42092 3.225H0L1.4042 6.28671Zm3.88856 4.64209c.74067 0 .97213-.5092 1.04929-1.12644.07458-.61723-.03086-1.003-.78697-1.003H4.10459l-.26233 2.12944h1.4505Zm-.38063 4.3643c.66352 0 1.021-.4012 1.10844-1.111.08745-.7098-.16202-1.0647-.8564-1.0647H3.5748l-.26747 2.1757h1.6048ZM61.772 6.28672 60.3678 17.7158H57.436l.7844-6.3858.0257-.2186-.0849.2032-2.7029 6.4012H53.55l-1.1625-6.3961-.036-.198-.0257.2006-.7844 6.3935h-2.6515l1.4042-11.42908h2.1706c.9927 0 1.8363.70982 2.006 1.68967l.7638 4.44151.018.1029.0412-.0978 2.5949-6.13885h3.8834M67.4454 6.28672c.9695 0 1.8054.69181 1.9854 1.64338l1.8543 9.7857h-3.0939l-.2572-1.6022-.0051-.0258h-3.3742l-.0077.018-.6533 1.6074H60.895l4.9739-11.42905h1.5765v.00257ZM65.55 13.5289h1.9983l-.0052-.036-.5632-3.1633-.018-.1003-.0412.0951-1.3527 3.1634-.018.0437M30.3394 6.28671 28.9352 17.7158h-2.775l-2.8264-5.9512-.0463-.0951-.0128.1054-.7304 5.9434h-2.8522l1.4042-11.42902h1.8852c.7844 0 1.5096.46036 1.8414 1.17017l1.9365 4.13035.0463.0977.0129-.1055.6506-5.29272h2.8702M36.3806 6.14787c1.2653 0 2.3634.30348 3.1813.87442l-1.9212 2.51007c-.4526-.29833-1.0518-.45521-1.7359-.45521-1.3116 0-1.9906.45264-2.3069 3.01925-.1723 1.4094-.0798 2.2272.3009 2.6593.2571.2906.6455.414 1.2962.414.7072 0 1.2576-.162 1.9519-.576l1.1985 2.3326c-.967.5581-1.9623.9284-3.6571.9284-1.5354 0-2.6181-.3806-3.3125-1.1676-.8229-.931-1.093-2.4612-.8204-4.6781.2392-1.9546.7253-3.29962 1.5277-4.23318.9438-1.09816 2.3506-1.63309 4.2975-1.63309"
+    />
+    <Path
+      fill="#223264"
+      d="M44.3918 6.14786c1.6228 0 2.7595.39348 3.4745 1.2036.8307.9387 1.075 2.37377.7947 4.65494-.2263 1.8491-.6738 3.1453-1.4094 4.0763-.9438 1.1959-2.3506 1.7745-4.3077 1.7745-1.6254 0-2.7673-.396-3.4874-1.2087-.8204-.9284-1.075-2.3995-.8024-4.6344.2289-1.8568.6764-3.15557 1.4119-4.08913.9439-1.19589 2.3584-1.77711 4.3207-1.77711h.0051Zm-1.1161 9.05784c1.7925 0 2.0985-1.3347 2.3146-3.081.1543-1.2499.1594-2.1243-.2855-2.62836-.2649-.3009-.6841-.4475-1.2782-.4475-.8152 0-1.3605.2649-1.7205.83069-.3601.56577-.5041 1.40937-.6044 2.23747-.1543 1.255-.1594 2.1346.2855 2.6412.2674.3035.6918.4501 1.2936.4501M80.7261 6.28671l-.337 2.74668h-3.423l-1.0622 8.68491h-3.0398l1.0621-8.68491h-3.0038l.3369-2.74668h9.4668ZM8.76221 17.7158h2.99869l.6533-1.6073.0077-.018h3.3742l.0051.0257.2572 1.6022h3.0939L17.298 7.93271c-.18-.95413-1.0159-1.64337-1.9854-1.64337h-1.5765L8.76221 17.7184v-.0026Zm6.61719-4.1843h-1.9622l.018-.0437 1.3527-3.1633.0412-.0952.018.1003.5632 3.1633.0051.036h-.036v.0026Z"
+    />
+    <Path
+      fill="#3EBEEF"
+      d="M121.736 6.28672c.969 0 1.805.69181 1.985 1.64338l1.855 9.7857h-3.094l-.257-1.6022-.006-.0258h-3.374l-.008.018-.653 1.6074h-2.998l4.973-11.42905h1.577v.00257Zm-1.895 7.24218h1.998l-.005-.036-.564-3.1633-.018-.1003-.041.0951-1.353 3.1634-.017.0437M116.279 7.26657c-.577-.65067-1.556-.97986-2.917-.97986h-4.765l-1.405 11.42909h2.963l.414-3.3691v-.0283h1.736c1.433 0 2.554-.4089 3.333-1.2164.671-.697 1.091-1.6871 1.245-2.9422.159-1.30643-.039-2.25286-.604-2.89323Zm-2.367 3.08873c-.123 1.0107-.511 1.4222-1.334 1.4222h-1.695l.005-.0334.347-2.8213v-.02829h1.69c.378 0 .64.09002.802.27261.198.22375.257.6018.185 1.18818ZM136.014 6.28671l-4.685 7.78479v.0052l-.005.0077-.445 3.6339h-3.009l.452-3.6879v-.0129l-2.754-7.72822h3.207l1.486 4.49292.021.0643.033-.0591 2.608-4.49812h3.091M135.66 17.3609c-.237.2366-.522.3549-.857.3549-.334 0-.619-.1183-.856-.3549-.234-.2366-.35-.5221-.35-.859s.118-.6172.355-.8538c.234-.2341.52-.3524.851-.3524.332 0 .62.1183.857.3524.236.2366.355.5195.355.8538 0 .3344-.119.6224-.355.859Zm-1.592-1.5945c-.203.2032-.304.45-.304.7381 0 .288.101.5375.301.7432.203.2058.448.3061.738.3061.291 0 .535-.1029.736-.3061.203-.2057.303-.4526.303-.7432 0-.2906-.1-.5324-.303-.7381-.203-.2058-.45-.3061-.736-.3061-.285 0-.532.1029-.735.3061Zm.712.0669c.165 0 .286.0154.363.0488.136.0566.206.1698.206.3369 0 .1183-.044.2058-.129.2623-.046.0309-.111.0515-.193.0643.103.0155.18.0592.229.1286.049.0695.072.1389.072.2058v.0977c0 .0309 0 .0643.003.1003 0 .036.005.0566.01.0694l.008.0155h-.219V17.15s-.005-.0103-.005-.0154l-.005-.0437v-.1055c0-.1543-.041-.2546-.126-.3035-.049-.0282-.137-.0437-.26-.0437h-.185v.5221h-.234v-1.3296h.465v.0026Zm.252.2083c-.059-.0335-.154-.0489-.283-.0489h-.2v.4809h.211c.1 0 .175-.0103.223-.0308.09-.036.137-.1055.137-.2083 0-.0978-.029-.1621-.088-.1955v.0026Z"
+    />
+  </Svg>
+);
+
+export default LogoPaymentCardBancomatPay;

package/src/components/logos/svg/LogoPaymentCardPayPal.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGCardLogoProps } from "../LogoPaymentCard";
+
+const LogoPaymentCardPayPal = ({ preserveAspectRatio }: SVGCardLogoProps) => (
+  <Svg viewBox="0 0 170 48" preserveAspectRatio={preserveAspectRatio}>
+    <Path
+      fill="#003087"
+      d="M62.56 28.672a10.111 10.111 0 0 0 9.983-8.56c.78-4.967-3.101-9.303-8.6-9.303H55.08a.689.689 0 0 0-.69.585l-3.95 25.072a.643.643 0 0 0 .634.742h4.69a.689.689 0 0 0 .688-.585l1.162-7.365a.689.689 0 0 1 .689-.586h4.257Zm3.925-8.786c-.29 1.836-1.709 3.189-4.425 3.189h-3.474l1.053-6.68h3.411c2.81.006 3.723 1.663 3.435 3.496v-.005Zm26.378-1.18H88.41a.69.69 0 0 0-.69.585l-.144.924s-3.457-3.775-9.575-1.225c-3.51 1.461-5.194 4.48-5.91 6.69 0 0-2.277 6.718 2.87 10.417 0 0 4.771 3.556 10.145-.22l-.093.589a.642.642 0 0 0 .634.742h4.451a.689.689 0 0 0 .69-.585l2.708-17.175a.643.643 0 0 0-.634-.742Zm-6.547 9.492a4.996 4.996 0 0 1-4.996 4.276 4.513 4.513 0 0 1-1.397-.205c-1.92-.616-3.015-2.462-2.7-4.462a4.996 4.996 0 0 1 5.014-4.277c.474-.005.946.065 1.398.206 1.913.614 3.001 2.46 2.686 4.462h-.005Z"
+    />
+    <Path
+      fill="#0070E0"
+      d="M126.672 28.672a10.115 10.115 0 0 0 9.992-8.56c.779-4.967-3.101-9.303-8.602-9.303h-8.86a.69.69 0 0 0-.689.585l-3.962 25.079a.637.637 0 0 0 .365.683.64.64 0 0 0 .269.06h4.691a.69.69 0 0 0 .689-.586l1.163-7.365a.688.688 0 0 1 .689-.586l4.255-.007Zm3.925-8.786c-.29 1.836-1.709 3.189-4.426 3.189h-3.473l1.054-6.68h3.411c2.808.006 3.723 1.663 3.434 3.496v-.005Zm26.377-1.18h-4.448a.69.69 0 0 0-.689.585l-.146.924s-3.456-3.775-9.574-1.225c-3.509 1.461-5.194 4.48-5.911 6.69 0 0-2.276 6.718 2.87 10.417 0 0 4.772 3.556 10.146-.22l-.093.589a.637.637 0 0 0 .365.683c.084.04.176.06.269.06h4.451a.686.686 0 0 0 .689-.586l2.709-17.175a.657.657 0 0 0-.148-.518.632.632 0 0 0-.49-.224Zm-6.546 9.492a4.986 4.986 0 0 1-4.996 4.276 4.513 4.513 0 0 1-1.399-.205c-1.921-.616-3.017-2.462-2.702-4.462a4.996 4.996 0 0 1 4.996-4.277c.475-.005.947.064 1.399.206 1.933.614 3.024 2.46 2.707 4.462h-.005Z"
+    />
+    <Path
+      fill="#003087"
+      d="m109.205 19.131-5.367 9.059-2.723-8.992a.69.69 0 0 0-.664-.492h-4.842a.516.516 0 0 0-.496.689l4.88 15.146-4.413 7.138a.517.517 0 0 0 .442.794h5.217a.858.858 0 0 0 .741-.418l13.632-22.552a.516.516 0 0 0-.446-.789h-5.215a.858.858 0 0 0-.746.417Z"
+    />
+    <Path
+      fill="#0070E0"
+      d="m161.982 11.387-3.962 25.079a.637.637 0 0 0 .365.683c.084.04.176.06.269.06h4.689a.688.688 0 0 0 .689-.586l3.963-25.079a.637.637 0 0 0-.146-.517.645.645 0 0 0-.488-.225h-4.69a.69.69 0 0 0-.689.585Z"
+    />
+    <Path
+      fill="#001C64"
+      d="M37.146 22.26c-1.006 5.735-5.685 10.07-11.825 10.07h-3.898c-.795 0-1.596.736-1.723 1.55l-1.707 10.835c-.099.617-.388.822-1.013.822h-6.27c-.634 0-.784-.212-.689-.837l.72-7.493-7.526-.389c-.633 0-.862-.345-.772-.977l5.135-32.56c.099-.617.483-.882 1.106-.882h13.023c6.269 0 10.235 4.22 10.72 9.692 3.73 2.52 5.474 5.873 4.72 10.168Z"
+    />
+    <Path
+      fill="#0070E0"
+      d="m12.649 25.075-1.907 12.133-1.206 7.612a1.034 1.034 0 0 0 1.016 1.19h6.622a1.27 1.27 0 0 0 1.253-1.072l1.743-11.06a1.27 1.27 0 0 1 1.253-1.071h3.898A12.46 12.46 0 0 0 37.617 22.26c.675-4.307-1.492-8.228-5.201-10.165a9.96 9.96 0 0 1-.12 1.37 12.461 12.461 0 0 1-12.295 10.54h-6.1a1.268 1.268 0 0 0-1.252 1.07Z"
+    />
+    <Path
+      fill="#003087"
+      d="M10.741 37.208H3.03a1.035 1.035 0 0 1-1.018-1.192L7.208 3.072A1.268 1.268 0 0 1 8.46 2H21.7c6.269 0 10.827 4.562 10.72 10.089a11.567 11.567 0 0 0-5.399-1.287H15.983a1.27 1.27 0 0 0-1.254 1.071l-2.08 13.202-1.908 12.133Z"
+    />
+  </Svg>
+);
+
+export default LogoPaymentCardPayPal;

package/src/components/logos/svg/originals/LogoPaymentCardBancomatPay.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 137 24">
+  <path
+    fill="#3FBDEE"
+    d="M104.986 10.8594 94.6035.4745c-.6327-.63267-1.6562-.63267-2.2889 0L81.9323 10.8568c-.6327.6327-.6327 1.6563 0 2.2864l10.3823 10.3823c.6327.6327 1.6562.6327 2.2889 0l10.3825-10.3823c.632-.6327.632-1.6563 0-2.2864v.0026Zm-7.0932 3.634c-.2674 2.1757-1.8465 3.225-4.4209 3.225H88.246l.3035-2.4226h5.1873c.6635 0 1.021-.4012 1.1085-1.1111.0102-.0771.0128-.1466.0128-.216h3.0733c-.0051.1646-.0154.3369-.0386.5247Zm2.0806-1.376H88.817l.27-2.186h5.0381c.7381 0 .9696-.5092 1.0442-1.12643.0746-.61723-.0309-1.003-.787-1.003h-5.033l.3035-2.51521h5.1487c2.9319 0 3.7188 1.24989 3.508 2.9627-.0849.69953-.2855 1.25764-.571 1.68194h.3009c1.1728 0 2.0806 1.0236 1.9366 2.1886l-.0026-.0026Z"
+  />
+  <path
+    fill="#223264"
+    d="M1.4042 6.28671h4.56494c2.93184 0 3.71881 1.2499 3.50793 2.96271-.16203 1.32708-.72525 2.14488-1.54051 2.49978 1.00043.4012 1.31676 1.219 1.12902 2.7467-.26747 2.1757-1.84655 3.225-4.42092 3.225H0L1.4042 6.28671Zm3.88856 4.64209c.74067 0 .97213-.5092 1.04929-1.12644.07458-.61723-.03086-1.003-.78697-1.003H4.10459l-.26233 2.12944h1.4505Zm-.38063 4.3643c.66352 0 1.021-.4012 1.10844-1.111.08745-.7098-.16202-1.0647-.8564-1.0647H3.5748l-.26747 2.1757h1.6048ZM61.772 6.28672 60.3678 17.7158H57.436l.7844-6.3858.0257-.2186-.0849.2032-2.7029 6.4012H53.55l-1.1625-6.3961-.036-.198-.0257.2006-.7844 6.3935h-2.6515l1.4042-11.42908h2.1706c.9927 0 1.8363.70982 2.006 1.68967l.7638 4.44151.018.1029.0412-.0978 2.5949-6.13885h3.8834M67.4454 6.28672c.9695 0 1.8054.69181 1.9854 1.64338l1.8543 9.7857h-3.0939l-.2572-1.6022-.0051-.0258h-3.3742l-.0077.018-.6533 1.6074H60.895l4.9739-11.42905h1.5765v.00257ZM65.55 13.5289h1.9983l-.0052-.036-.5632-3.1633-.018-.1003-.0412.0951-1.3527 3.1634-.018.0437M30.3394 6.28671 28.9352 17.7158h-2.775l-2.8264-5.9512-.0463-.0951-.0128.1054-.7304 5.9434h-2.8522l1.4042-11.42902h1.8852c.7844 0 1.5096.46036 1.8414 1.17017l1.9365 4.13035.0463.0977.0129-.1055.6506-5.29272h2.8702M36.3806 6.14787c1.2653 0 2.3634.30348 3.1813.87442l-1.9212 2.51007c-.4526-.29833-1.0518-.45521-1.7359-.45521-1.3116 0-1.9906.45264-2.3069 3.01925-.1723 1.4094-.0798 2.2272.3009 2.6593.2571.2906.6455.414 1.2962.414.7072 0 1.2576-.162 1.9519-.576l1.1985 2.3326c-.967.5581-1.9623.9284-3.6571.9284-1.5354 0-2.6181-.3806-3.3125-1.1676-.8229-.931-1.093-2.4612-.8204-4.6781.2392-1.9546.7253-3.29962 1.5277-4.23318.9438-1.09816 2.3506-1.63309 4.2975-1.63309"
+  />
+  <path
+    fill="#223264"
+    d="M44.3918 6.14786c1.6228 0 2.7595.39348 3.4745 1.2036.8307.9387 1.075 2.37377.7947 4.65494-.2263 1.8491-.6738 3.1453-1.4094 4.0763-.9438 1.1959-2.3506 1.7745-4.3077 1.7745-1.6254 0-2.7673-.396-3.4874-1.2087-.8204-.9284-1.075-2.3995-.8024-4.6344.2289-1.8568.6764-3.15557 1.4119-4.08913.9439-1.19589 2.3584-1.77711 4.3207-1.77711h.0051Zm-1.1161 9.05784c1.7925 0 2.0985-1.3347 2.3146-3.081.1543-1.2499.1594-2.1243-.2855-2.62836-.2649-.3009-.6841-.4475-1.2782-.4475-.8152 0-1.3605.2649-1.7205.83069-.3601.56577-.5041 1.40937-.6044 2.23747-.1543 1.255-.1594 2.1346.2855 2.6412.2674.3035.6918.4501 1.2936.4501M80.7261 6.28671l-.337 2.74668h-3.423l-1.0622 8.68491h-3.0398l1.0621-8.68491h-3.0038l.3369-2.74668h9.4668ZM8.76221 17.7158h2.99869l.6533-1.6073.0077-.018h3.3742l.0051.0257.2572 1.6022h3.0939L17.298 7.93271c-.18-.95413-1.0159-1.64337-1.9854-1.64337h-1.5765L8.76221 17.7184v-.0026Zm6.61719-4.1843h-1.9622l.018-.0437 1.3527-3.1633.0412-.0952.018.1003.5632 3.1633.0051.036h-.036v.0026Z"
+  />
+  <path
+    fill="#3EBEEF"
+    d="M121.736 6.28672c.969 0 1.805.69181 1.985 1.64338l1.855 9.7857h-3.094l-.257-1.6022-.006-.0258h-3.374l-.008.018-.653 1.6074h-2.998l4.973-11.42905h1.577v.00257Zm-1.895 7.24218h1.998l-.005-.036-.564-3.1633-.018-.1003-.041.0951-1.353 3.1634-.017.0437M116.279 7.26657c-.577-.65067-1.556-.97986-2.917-.97986h-4.765l-1.405 11.42909h2.963l.414-3.3691v-.0283h1.736c1.433 0 2.554-.4089 3.333-1.2164.671-.697 1.091-1.6871 1.245-2.9422.159-1.30643-.039-2.25286-.604-2.89323Zm-2.367 3.08873c-.123 1.0107-.511 1.4222-1.334 1.4222h-1.695l.005-.0334.347-2.8213v-.02829h1.69c.378 0 .64.09002.802.27261.198.22375.257.6018.185 1.18818ZM136.014 6.28671l-4.685 7.78479v.0052l-.005.0077-.445 3.6339h-3.009l.452-3.6879v-.0129l-2.754-7.72822h3.207l1.486 4.49292.021.0643.033-.0591 2.608-4.49812h3.091M135.66 17.3609c-.237.2366-.522.3549-.857.3549-.334 0-.619-.1183-.856-.3549-.234-.2366-.35-.5221-.35-.859s.118-.6172.355-.8538c.234-.2341.52-.3524.851-.3524.332 0 .62.1183.857.3524.236.2366.355.5195.355.8538 0 .3344-.119.6224-.355.859Zm-1.592-1.5945c-.203.2032-.304.45-.304.7381 0 .288.101.5375.301.7432.203.2058.448.3061.738.3061.291 0 .535-.1029.736-.3061.203-.2057.303-.4526.303-.7432 0-.2906-.1-.5324-.303-.7381-.203-.2058-.45-.3061-.736-.3061-.285 0-.532.1029-.735.3061Zm.712.0669c.165 0 .286.0154.363.0488.136.0566.206.1698.206.3369 0 .1183-.044.2058-.129.2623-.046.0309-.111.0515-.193.0643.103.0155.18.0592.229.1286.049.0695.072.1389.072.2058v.0977c0 .0309 0 .0643.003.1003 0 .036.005.0566.01.0694l.008.0155h-.219V17.15s-.005-.0103-.005-.0154l-.005-.0437v-.1055c0-.1543-.041-.2546-.126-.3035-.049-.0282-.137-.0437-.26-.0437h-.185v.5221h-.234v-1.3296h.465v.0026Zm.252.2083c-.059-.0335-.154-.0489-.283-.0489h-.2v.4809h.211c.1 0 .175-.0103.223-.0308.09-.036.137-.1055.137-.2083 0-.0978-.029-.1621-.088-.1955v.0026Z"
+  />
+</svg>

package/src/components/logos/svg/originals/LogoPaymentCardPayPal.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 170 48">
+  <path
+    fill="#003087"
+    d="M62.56 28.672a10.111 10.111 0 0 0 9.983-8.56c.78-4.967-3.101-9.303-8.6-9.303H55.08a.689.689 0 0 0-.69.585l-3.95 25.072a.643.643 0 0 0 .634.742h4.69a.689.689 0 0 0 .688-.585l1.162-7.365a.689.689 0 0 1 .689-.586h4.257Zm3.925-8.786c-.29 1.836-1.709 3.189-4.425 3.189h-3.474l1.053-6.68h3.411c2.81.006 3.723 1.663 3.435 3.496v-.005Zm26.378-1.18H88.41a.69.69 0 0 0-.69.585l-.144.924s-3.457-3.775-9.575-1.225c-3.51 1.461-5.194 4.48-5.91 6.69 0 0-2.277 6.718 2.87 10.417 0 0 4.771 3.556 10.145-.22l-.093.589a.642.642 0 0 0 .634.742h4.451a.689.689 0 0 0 .69-.585l2.708-17.175a.643.643 0 0 0-.634-.742Zm-6.547 9.492a4.996 4.996 0 0 1-4.996 4.276 4.513 4.513 0 0 1-1.397-.205c-1.92-.616-3.015-2.462-2.7-4.462a4.996 4.996 0 0 1 5.014-4.277c.474-.005.946.065 1.398.206 1.913.614 3.001 2.46 2.686 4.462h-.005Z"
+  />
+  <path
+    fill="#0070E0"
+    d="M126.672 28.672a10.115 10.115 0 0 0 9.992-8.56c.779-4.967-3.101-9.303-8.602-9.303h-8.86a.69.69 0 0 0-.689.585l-3.962 25.079a.637.637 0 0 0 .365.683.64.64 0 0 0 .269.06h4.691a.69.69 0 0 0 .689-.586l1.163-7.365a.688.688 0 0 1 .689-.586l4.255-.007Zm3.925-8.786c-.29 1.836-1.709 3.189-4.426 3.189h-3.473l1.054-6.68h3.411c2.808.006 3.723 1.663 3.434 3.496v-.005Zm26.377-1.18h-4.448a.69.69 0 0 0-.689.585l-.146.924s-3.456-3.775-9.574-1.225c-3.509 1.461-5.194 4.48-5.911 6.69 0 0-2.276 6.718 2.87 10.417 0 0 4.772 3.556 10.146-.22l-.093.589a.637.637 0 0 0 .365.683c.084.04.176.06.269.06h4.451a.686.686 0 0 0 .689-.586l2.709-17.175a.657.657 0 0 0-.148-.518.632.632 0 0 0-.49-.224Zm-6.546 9.492a4.986 4.986 0 0 1-4.996 4.276 4.513 4.513 0 0 1-1.399-.205c-1.921-.616-3.017-2.462-2.702-4.462a4.996 4.996 0 0 1 4.996-4.277c.475-.005.947.064 1.399.206 1.933.614 3.024 2.46 2.707 4.462h-.005Z"
+  />
+  <path
+    fill="#003087"
+    d="m109.205 19.131-5.367 9.059-2.723-8.992a.69.69 0 0 0-.664-.492h-4.842a.516.516 0 0 0-.496.689l4.88 15.146-4.413 7.138a.517.517 0 0 0 .442.794h5.217a.858.858 0 0 0 .741-.418l13.632-22.552a.516.516 0 0 0-.446-.789h-5.215a.858.858 0 0 0-.746.417Z"
+  />
+  <path
+    fill="#0070E0"
+    d="m161.982 11.387-3.962 25.079a.637.637 0 0 0 .365.683c.084.04.176.06.269.06h4.689a.688.688 0 0 0 .689-.586l3.963-25.079a.637.637 0 0 0-.146-.517.645.645 0 0 0-.488-.225h-4.69a.69.69 0 0 0-.689.585Z"
+  />
+  <path
+    fill="#001C64"
+    d="M37.146 22.26c-1.006 5.735-5.685 10.07-11.825 10.07h-3.898c-.795 0-1.596.736-1.723 1.55l-1.707 10.835c-.099.617-.388.822-1.013.822h-6.27c-.634 0-.784-.212-.689-.837l.72-7.493-7.526-.389c-.633 0-.862-.345-.772-.977l5.135-32.56c.099-.617.483-.882 1.106-.882h13.023c6.269 0 10.235 4.22 10.72 9.692 3.73 2.52 5.474 5.873 4.72 10.168Z"
+  />
+  <path
+    fill="#0070E0"
+    d="m12.649 25.075-1.907 12.133-1.206 7.612a1.034 1.034 0 0 0 1.016 1.19h6.622a1.27 1.27 0 0 0 1.253-1.072l1.743-11.06a1.27 1.27 0 0 1 1.253-1.071h3.898A12.46 12.46 0 0 0 37.617 22.26c.675-4.307-1.492-8.228-5.201-10.165a9.96 9.96 0 0 1-.12 1.37 12.461 12.461 0 0 1-12.295 10.54h-6.1a1.268 1.268 0 0 0-1.252 1.07Z"
+  />
+  <path
+    fill="#003087"
+    d="M10.741 37.208H3.03a1.035 1.035 0 0 1-1.018-1.192L7.208 3.072A1.268 1.268 0 0 1 8.46 2H21.7c6.269 0 10.827 4.562 10.72 10.089a11.567 11.567 0 0 0-5.399-1.287H15.983a1.27 1.27 0 0 0-1.254 1.071l-2.08 13.202-1.908 12.133Z"
+  />
+</svg>

package/src/components/radio/RadioGroup.tsx

@@ -4,7 +4,7 @@ import { Divider } from "../divider";
 import { IOIcons } from "../icons";
 import { ListItemRadio } from "../listitems/ListItemRadio";
 
-export type NewRadioItem<T> = {
+export type RadioItem<T> = {
   id: T;
   value: string;
   description?: string;
@@ -13,7 +13,7 @@ export type NewRadioItem<T> = {
 };
 
 type Props<T> = {
-  items: ReadonlyArray<NewRadioItem<T>>;
+  items: ReadonlyArray<RadioItem<T>>;
   selectedItem?: T;
   onPress: (selected: T) => void;
 };

package/src/components/toast/ToastNotification.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { Icon } from "../icons";
+import { IOColors, IOAlertRadius } from "../../core";
+import { ButtonText } from "../typography";
+import { Toast, ToastVariant } from "./types";
+
+type ColorVariant = {
+  background: IOColors;
+  stroke: IOColors;
+};
+
+const toastColorVariants: Record<ToastVariant, ColorVariant> = {
+  neutral: {
+    background: "turquoise-150",
+    stroke: "turquoise-850"
+  },
+  error: {
+    background: "error-100",
+    stroke: "error-850"
+  },
+  info: {
+    background: "info-100",
+    stroke: "info-850"
+  },
+  success: {
+    background: "success-100",
+    stroke: "success-850"
+  },
+  warning: {
+    background: "warning-100",
+    stroke: "warning-850"
+  }
+};
+
+type Props = Pick<Toast, "message" | "variant" | "icon">;
+
+const ToastNotification = ({ message, variant = "neutral", icon }: Props) => {
+  const colors = toastColorVariants[variant];
+
+  return (
+    <View
+      style={[
+        styles.toast,
+        {
+          backgroundColor: IOColors[colors.background],
+          borderColor: IOColors[colors.stroke]
+        }
+      ]}
+      accessible={true}
+      accessibilityRole={"alert"}
+      accessibilityLabel={message}
+    >
+      <ButtonText color={colors.stroke} style={styles.content}>
+        {message}
+      </ButtonText>
+      {icon && <Icon name={icon} size={24} color={colors.stroke} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  toast: {
+    borderRadius: IOAlertRadius,
+    borderWidth: 1,
+    padding: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  content: {
+    paddingVertical: 2
+  }
+});
+
+export { ToastNotification };

package/src/components/toast/ToastProvider.tsx

@@ -0,0 +1,153 @@
+import { throttle } from "lodash";
+import React from "react";
+import { SafeAreaView, StyleSheet, View } from "react-native";
+import Animated, {
+  Easing,
+  SequencedTransition,
+  SlideInUp,
+  SlideOutUp
+} from "react-native-reanimated";
+import { Dismissable } from "../layout/Dismissable";
+import { triggerHaptic } from "../../functions";
+import { ToastNotification } from "./ToastNotification";
+import { Toast } from "./types";
+import { IOToastRef, useIOToast } from "./useIOToast";
+import { ToastContext } from "./context";
+
+/**
+ * The maximum number of toasts that can be displayed at the same time
+ * If the number of the toasts exceeds this number, the oldest one will be removed
+ */
+export const MAX_TOAST_STACK_SIZE = 3;
+
+/**
+ * The time in milliseconds that a toast notification will be displayed
+ */
+export const TOAST_DURATION_TIME = 5000;
+
+/**
+ * This is the time in milliseconds between two toast notifications.
+ * This will throttle the toast notifications to avoid displaying too many of them at the same time
+ * and causing visual glitches.
+ */
+export const TOAST_THROTTLE_TIME = 500;
+
+type ToastNotificationStackItem = Toast & { id: number };
+type ToastNotificationStackItemProps = ToastNotificationStackItem &
+  Pick<Dismissable, "onDismiss">;
+
+/**
+ * A toast notification item that can be swiped to the right to dismiss it, with enter and exit animations
+ */
+const ToastNotificationStackItem = ({
+  onDismiss,
+  ...toast
+}: ToastNotificationStackItemProps) => (
+  <Animated.View
+    entering={SlideInUp.duration(300).easing(Easing.inOut(Easing.exp))}
+    exiting={SlideOutUp.duration(300).easing(Easing.inOut(Easing.exp))}
+    layout={SequencedTransition.duration(300)}
+    style={{ paddingBottom: 8 }}
+  >
+    <Dismissable onDismiss={onDismiss}>
+      <ToastNotification {...toast} />
+    </Dismissable>
+  </Animated.View>
+);
+
+type ToastProviderProps = {
+  children: React.ReactNode;
+};
+
+export const ToastProvider = ({ children }: ToastProviderProps) => {
+  const toastId = React.useRef(1);
+  const [toasts, setToasts] = React.useState<
+    ReadonlyArray<ToastNotificationStackItem>
+  >([]);
+
+  const addToast = React.useCallback((toast: Toast): number => {
+    const id = (toastId.current ?? 0) + 1;
+    setToasts(prevToasts => [{ id, ...toast }, ...prevToasts]);
+
+    setTimeout(() => {
+      setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
+    }, TOAST_DURATION_TIME);
+
+    if (toast.hapticFeedback) {
+      triggerHaptic(toast.hapticFeedback);
+    }
+
+    return id;
+  }, []);
+
+  const removeToast = React.useCallback((id: number) => {
+    setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
+  }, []);
+
+  const removeToastAtIndex = (index: number) => {
+    setToasts(prevToasts => [
+      ...prevToasts.slice(0, index),
+      ...prevToasts.slice(index + 1)
+    ]);
+  };
+
+  // If stack size exceed the maximum, remove the oldest toast
+  React.useEffect(() => {
+    if (toasts.length > MAX_TOAST_STACK_SIZE) {
+      removeToastAtIndex(MAX_TOAST_STACK_SIZE);
+    }
+  }, [toasts]);
+
+  const removeAllToasts = React.useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  const contextValue = React.useMemo(
+    () => ({
+      addToast: throttle(addToast, TOAST_THROTTLE_TIME),
+      removeToast: throttle(removeToast, TOAST_THROTTLE_TIME),
+      removeAllToasts
+    }),
+    [addToast, removeToast, removeAllToasts]
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue as ToastContext}>
+      <InitializeToastRef />
+      <SafeAreaView style={styles.container} pointerEvents="box-none">
+        <View style={styles.list} pointerEvents="box-none">
+          {toasts.map(toast => (
+            <ToastNotificationStackItem
+              key={toast.id}
+              {...toast}
+              onDismiss={() => removeToast(toast.id)}
+            />
+          ))}
+        </View>
+      </SafeAreaView>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+const InitializeToastRef = () => {
+  const toast = useIOToast();
+  // eslint-disable-next-line functional/immutable-data
+  IOToastRef.current = toast;
+  return null;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 1000,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    overflow: "visible"
+  },
+  list: {
+    padding: 24
+  }
+});

package/src/components/toast/context.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import { Toast } from "./types";
+
+export type ToastContext = {
+  addToast: (props: Toast) => number;
+  removeToast: (id: number) => void;
+  removeAllToasts: () => void;
+};
+
+export const ToastContext = createContext<ToastContext>({
+  addToast: () => 0,
+  removeToast: () => undefined,
+  removeAllToasts: () => undefined
+});

package/src/components/toast/index.ts

@@ -0,0 +1,3 @@
+export * from "./ToastNotification";
+export * from "./ToastProvider";
+export * from "./useIOToast";

package/src/components/toast/types.ts

@@ -0,0 +1,13 @@
+import { HapticFeedbackTypes } from "react-native-haptic-feedback";
+import { IOIcons } from "@pagopa/io-app-design-system";
+
+export type ToastVariant = "neutral" | "error" | "info" | "success" | "warning";
+
+export type Toast = {
+  message: string;
+  variant?: ToastVariant;
+  icon?: IOIcons;
+  hapticFeedback?: keyof typeof HapticFeedbackTypes;
+};
+
+export type ToastOptions = Omit<Toast, "message">;