From 962aba4a20c3417517d250607d40449474846df5 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 3 Oct 2023 20:21:32 +0200 Subject: [PATCH] [IOAPPFD0-167] Add the new `LogoPaymentCard` component (#92) --- example/src/components/ComponentViewerBox.tsx | 12 +++- .../src/components/LogoPaymentViewerBox.tsx | 25 +++++++- example/src/pages/Logos.tsx | 54 ++++++++++++++++ src/components/logos/LogoPaymentCard.tsx | 62 +++++++++++++++++++ src/components/logos/LogoPaymentExt.tsx | 2 +- src/components/logos/README.md | 3 +- src/components/logos/index.tsx | 2 + .../logos/svg/LogoPaymentCardBancomatPay.tsx | 28 +++++++++ .../logos/svg/LogoPaymentCardPayPal.tsx | 38 ++++++++++++ .../originals/LogoPaymentCardBancomatPay.svg | 18 ++++++ .../svg/originals/LogoPaymentCardPayPal.svg | 30 +++++++++ 11 files changed, 269 insertions(+), 5 deletions(-) create mode 100644 src/components/logos/LogoPaymentCard.tsx create mode 100644 src/components/logos/svg/LogoPaymentCardBancomatPay.tsx create mode 100644 src/components/logos/svg/LogoPaymentCardPayPal.tsx create mode 100644 src/components/logos/svg/originals/LogoPaymentCardBancomatPay.svg create mode 100644 src/components/logos/svg/originals/LogoPaymentCardPayPal.svg diff --git a/example/src/components/ComponentViewerBox.tsx b/example/src/components/ComponentViewerBox.tsx index 634c92b9..4b996744 100644 --- 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) => ( - + {children} {name && ( diff --git a/example/src/components/LogoPaymentViewerBox.tsx b/example/src/components/LogoPaymentViewerBox.tsx index 7e0dbc59..309ac6de 100644 --- 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 = ({ {image} diff --git a/example/src/pages/Logos.tsx b/example/src/pages/Logos.tsx index bd13cf0f..a5882672 100644 --- 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) {renderPaymentLogosBig()} + +

+ Payment Networks (Card) +

+ {renderPaymentLogosCard()} ); }; @@ -213,3 +227,43 @@ const renderPaymentLogosBig = () => ( ))} ); + +const renderPaymentLogosCard = () => ( + + {Object.entries(IOPaymentCardLogos).map(([logoItemName]) => ( + + } + /> + ))} + + + + + + + + + + + +); diff --git a/src/components/logos/LogoPaymentCard.tsx b/src/components/logos/LogoPaymentCard.tsx new file mode 100644 index 00000000..a285cf2e --- /dev/null +++ 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 ( + + + + ); +}; + +export default LogoPaymentCard; diff --git a/src/components/logos/LogoPaymentExt.tsx b/src/components/logos/LogoPaymentExt.tsx index 71434da6..1985ccab 100644 --- 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 index 8be0149e..e21fc761 100644 --- 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 index 400631ec..9c89da9c 100644 --- 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 new file mode 100644 index 00000000..4649609b --- /dev/null +++ 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) => ( + + + + + + +); + +export default LogoPaymentCardBancomatPay; diff --git a/src/components/logos/svg/LogoPaymentCardPayPal.tsx b/src/components/logos/svg/LogoPaymentCardPayPal.tsx new file mode 100644 index 00000000..c40f7f75 --- /dev/null +++ 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) => ( + + + + + + + + + +); + +export default LogoPaymentCardPayPal; diff --git a/src/components/logos/svg/originals/LogoPaymentCardBancomatPay.svg b/src/components/logos/svg/originals/LogoPaymentCardBancomatPay.svg new file mode 100644 index 00000000..9ec2b9c4 --- /dev/null +++ b/src/components/logos/svg/originals/LogoPaymentCardBancomatPay.svg @@ -0,0 +1,18 @@ + + + + + + \ No newline at end of file diff --git a/src/components/logos/svg/originals/LogoPaymentCardPayPal.svg b/src/components/logos/svg/originals/LogoPaymentCardPayPal.svg new file mode 100644 index 00000000..add96dfc --- /dev/null +++ b/src/components/logos/svg/originals/LogoPaymentCardPayPal.svg @@ -0,0 +1,30 @@ + + + + + + + + +