chore: [IOAPPFD0-167] Add the new LogoPaymentCard component to the …

…Design System (#5077)

## Short description
This PR adds the documentation of the `LogoPaymentCard` to the `Logos`
DS page. To learn more, see the related PR:
* pagopa/io-app-design-system#92

## List of changes proposed in this pull request
- Update `io-app-design-system` to the `1.12.0`
- Add `LogoPaymentCard` to the relative DS page
- Update `DSComponentViewerBox` and `DSLogoPaymentViewerBox` components
to improve logo visualisation of the above component

### Preview
<img
src="https://github.com/pagopa/io-app/assets/1255491/64f71833-5003-4f79-ad0e-01439c280118"
width="320" />

## How to test
Go to the **Profile → Design System → Logos**

ts/features/design-system/components/DSComponentViewerBox.tsx

@@ -6,6 +6,9 @@ const styles = StyleSheet.create({
   componentWrapper: {
     marginBottom: 24
   },
+  componentWrapperFullWidth: {
+    flexGrow: 1
+  },
   lastItem: {
     marginBottom: 0
   },
@@ -26,6 +29,7 @@ const styles = StyleSheet.create({
 type DSComponentViewerBoxProps = {
   name: string;
   colorMode?: "dark" | "light";
+  fullWidth?: boolean;
   last?: boolean;
   children: React.ReactNode;
 };
@@ -34,12 +38,18 @@ export const DSComponentViewerBox = ({
   name,
   colorMode = "light",
   last = false,
+  fullWidth = false,
   children
 }: DSComponentViewerBoxProps) => {
   const theme = useIOTheme();
 
   return (
-    <View style={last ? styles.lastItem : styles.componentWrapper}>
+    <View
+      style={[
+        last ? styles.lastItem : styles.componentWrapper,
+        fullWidth && styles.componentWrapperFullWidth
+      ]}
+    >
       {children}
       <View style={styles.labelWrapper}>
         {name && (

ts/features/design-system/components/DSLogoPaymentViewerBox.tsx

@@ -19,12 +19,22 @@ const styles = StyleSheet.create({
   logoWrapperLarge: {
     width: "25%"
   },
+  logoWrapperFull: {
+    width: "100%"
+  },
   fakeTransparentBg: {
     position: "absolute",
     width: "275%",
     height: "275%",
     opacity: 0.4
   },
+  fakeTransparentBgFull: {
+    position: "absolute",
+    top: "-25%",
+    width: "150%",
+    height: "150%",
+    opacity: 0.4
+  },
   nameWrapper: {
     display: "flex",
     flexDirection: "row",
@@ -45,6 +55,9 @@ const styles = StyleSheet.create({
   logoItemLarge: {
     aspectRatio: 4 / 3
   },
+  logoItemFull: {
+    aspectRatio: undefined
+  },
   iconLabel: {
     fontSize: 10
   }
@@ -53,7 +66,7 @@ const styles = StyleSheet.create({
 type DSLogoPaymentViewerBoxProps = {
   name: string;
   image: React.ReactNode;
-  size: "medium" | "large";
+  size: "medium" | "large" | "full";
 };
 
 const sizeMap = {
@@ -64,6 +77,10 @@ const sizeMap = {
   large: {
     wrapper: styles.logoWrapperLarge,
     item: styles.logoItemLarge
+  },
+  full: {
+    wrapper: styles.logoWrapperFull,
+    item: styles.logoItemFull
   }
 };
 
@@ -78,7 +95,11 @@ export const DSLogoPaymentViewerBox = ({
     <View style={[styles.logoWrapper, sizeMap[size].wrapper]}>
       <View style={[styles.logoItem, sizeMap[size].item]}>
         <ImageBackground
-          style={styles.fakeTransparentBg}
+          style={
+            size === "full"
+              ? styles.fakeTransparentBgFull
+              : styles.fakeTransparentBg
+          }
           source={FakeTransparentBg}
         />
         {image}

ts/features/design-system/core/DSLogos.tsx

@@ -10,6 +10,11 @@ import {
   IOPaymentLogos,
   LogoPayment,
   LogoPaymentExt,
+  LogoPaymentCard,
+  IOPaymentCardLogos,
+  IOLogoPaymentCardType,
+  IOColors,
+  hexToRgba,
   Avatar,
   IOVisualCostants
 } from "@pagopa/io-app-design-system";
@@ -84,6 +89,17 @@ export const DSLogos = () => {
         Banks (Extended)
       </H2>
       {renderLogoPaymentExtended()}
+
+      <VSpacer size={16} />
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16 }}
+      >
+        Payment Networks (Card)
+      </H2>
+      {renderPaymentLogosCard()}
     </DesignSystemScreen>
   );
 };
@@ -244,17 +260,45 @@ const renderLogoPaymentExtended = () => (
         dimensions={{ height: 33, width: 150 }}
       />
     </DSComponentViewerBox>
-    <DSComponentViewerBox name={`LogoPaymentExtended · icon = payPal`}>
-      <LogoPaymentExtended
-        icon="payPal"
-        dimensions={{ height: 33, width: 150 }}
-      />
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name={`LogoPaymentExtended · icon = bpay`}>
-      <LogoPaymentExtended
-        icon="bpay"
-        dimensions={{ height: 33, width: 220 }}
+  </>
+);
+
+const renderPaymentLogosCard = () => (
+  <View style={styles.itemsWrapper}>
+    {Object.entries(IOPaymentCardLogos).map(([logoItemName]) => (
+      <DSLogoPaymentViewerBox
+        key={logoItemName}
+        name={logoItemName}
+        size="full"
+        image={
+          <LogoPaymentCard
+            align="start"
+            height={32}
+            name={logoItemName as IOLogoPaymentCardType}
+          />
+        }
       />
+    ))}
+    <VSpacer size={24} />
+    <DSComponentViewerBox
+      fullWidth
+      name="Debug mode enabled, possible align values"
+    >
+      <View
+        style={{
+          borderRadius: 16,
+          padding: 16,
+          backgroundColor: IOColors.white,
+          borderColor: hexToRgba(IOColors.black, 0.15),
+          borderWidth: 1
+        }}
+      >
+        <LogoPaymentCard debugMode height={32} name="payPal" align="start" />
+        <VSpacer size={8} />
+        <LogoPaymentCard debugMode height={32} name="payPal" align="center" />
+        <VSpacer size={8} />
+        <LogoPaymentCard debugMode height={32} name="payPal" align="end" />
+      </View>
     </DSComponentViewerBox>
-  </>
+  </View>
 );