[IOAPPFD0-167] Add the new LogoPaymentCard component (#92)

pagopa · Oct 3, 2023 · 962aba4 · 962aba4
1 parent b887a4c
commit 962aba4
Show file tree

Hide file tree

Showing 11 changed files with 269 additions and 5 deletions.
diff --git a/example/src/components/ComponentViewerBox.tsx b/example/src/components/ComponentViewerBox.tsx
@@ -6,6 +6,9 @@ const styles = StyleSheet.create({
   componentWrapper: {
     marginBottom: 24
   },
+  componentWrapperFullWidth: {
+    flexGrow: 1
+  },
   lastItem: {
     marginBottom: 0
   },
@@ -31,15 +34,22 @@ type ComponentViewerBoxProps = {
   colorMode?: "dark" | "light";
   last?: boolean;
   children: React.ReactNode;
+  fullWidth?: boolean;
 };
 
 export const ComponentViewerBox = ({
   name,
   colorMode = "light",
   last = false,
+  fullWidth = false,
   children
 }: ComponentViewerBoxProps) => (
-  <View style={last ? styles.lastItem : styles.componentWrapper}>
+  <View
+    style={[
+      last ? styles.lastItem : styles.componentWrapper,
+      fullWidth && styles.componentWrapperFullWidth
+    ]}
+  >
     {children}
     <View style={styles.labelWrapper}>
       {name && (

diff --git a/example/src/components/LogoPaymentViewerBox.tsx b/example/src/components/LogoPaymentViewerBox.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,
     color: IOColors.bluegrey
@@ -54,7 +67,7 @@ const styles = StyleSheet.create({
 type LogoPaymentViewerBoxProps = {
   name: string;
   image: React.ReactNode;
-  size: "medium" | "large";
+  size: "medium" | "large" | "full";
 };
 
 const sizeMap = {
@@ -65,6 +78,10 @@ const sizeMap = {
   large: {
     wrapper: styles.logoWrapperLarge,
     item: styles.logoItemLarge
+  },
+  full: {
+    wrapper: styles.logoWrapperFull,
+    item: styles.logoItemFull
   }
 };
 
@@ -76,7 +93,11 @@ export const LogoPaymentViewerBox = ({
   <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}

diff --git a/example/src/pages/Logos.tsx b/example/src/pages/Logos.tsx
@@ -2,14 +2,19 @@ import {
   Avatar,
   H2,
   HSpacer,
+  IOColors,
+  IOLogoPaymentCardType,
   IOLogoPaymentExtType,
   IOLogoPaymentType,
+  IOPaymentCardLogos,
   IOPaymentExtLogos,
   IOPaymentLogos,
   IOVisualCostants,
   LogoPayment,
+  LogoPaymentCard,
   LogoPaymentExt,
   VSpacer,
+  hexToRgba,
   useIOTheme
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
@@ -73,6 +78,15 @@ export const Logos = () => {
         Payment Networks (Big)
       </H2>
       {renderPaymentLogosBig()}
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        Payment Networks (Card)
+      </H2>
+      {renderPaymentLogosCard()}
     </Screen>
   );
 };
@@ -213,3 +227,43 @@ const renderPaymentLogosBig = () => (
     ))}
   </View>
 );
+
+const renderPaymentLogosCard = () => (
+  <View style={styles.itemsWrapper}>
+    {Object.entries(IOPaymentCardLogos).map(([logoItemName]) => (
+      <LogoPaymentViewerBox
+        key={logoItemName}
+        name={logoItemName}
+        size="full"
+        image={
+          <LogoPaymentCard
+            align="start"
+            height={32}
+            name={logoItemName as IOLogoPaymentCardType}
+          />
+        }
+      />
+    ))}
+    <VSpacer size={24} />
+    <ComponentViewerBox
+      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>
+    </ComponentViewerBox>
+  </View>
+);
diff --git a/src/components/logos/LogoPaymentCard.tsx b/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;
diff --git a/src/components/logos/LogoPaymentExt.tsx b/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,

diff --git a/src/components/logos/README.md b/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).

diff --git a/src/components/logos/index.tsx b/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";
diff --git a/src/components/logos/svg/LogoPaymentCardBancomatPay.tsx b/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;
diff --git a/src/components/logos/svg/LogoPaymentCardPayPal.tsx b/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;