feat: adding paypal rebranded Logo (#115)

* feat: adding paypal rebrand * feat: addressing pr comments, renamed missed values * feat: fixing pr comments * feat: updating the svg --------- Co-authored-by: Hai-Yen Nguyen <[email protected]>
paypal · Feb 11, 2025 · 4ba4794 · 4ba4794
1 parent 6e79d5f
commit 4ba4794
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 0 deletions.
diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js
@@ -52,6 +52,7 @@ import {
   getVenmoSVG,
   getVisaSVG,
   getWechatpaySVG,
+  getPayPalRebrandSVG,
   GIROPAY_LOGO_COLORS,
   GLYPH_BANK_LOGO_COLORS,
   GLYPH_CARD_LOGO_COLORS,
@@ -73,6 +74,7 @@ import {
   TRUSTLY_LOGO_COLORS,
   VENMO_LOGO_COLORS,
   WECHATPAY_LOGO_COLORS,
+  PAYPAL_REBRAND_LOGO_COLORS,
 } from "../src/logos";
 import { version } from "../package.json";
 
@@ -100,6 +102,7 @@ const LOGO_GETTERS = {
   [LOGO.P24]: getP24SVG,
   [LOGO.PAIDY]: getPaidySVG,
   [LOGO.PAYPAL]: getPayPalSVG,
+  [LOGO.PAYPAL_REBRAND]: getPayPalRebrandSVG,
   [LOGO.PAYU]: getPayuSVG,
   [LOGO.PP]: getPPSVG,
   [LOGO.PPMONOCHROME]: getPPMonochromeSVG,
@@ -141,6 +144,7 @@ const LOGO_COLOR_MAPS = {
   [LOGO.P24]: P24_LOGO_COLORS,
   [LOGO.PAIDY]: PAIDY_LOGO_COLORS,
   [LOGO.PAYPAL]: PAYPAL_LOGO_COLORS,
+  [LOGO.PAYPAL_REBRAND]: PAYPAL_REBRAND_LOGO_COLORS,
   [LOGO.PAYU]: PAYU_LOGO_COLORS,
   [LOGO.PP]: PP_LOGO_COLORS,
   [LOGO.PPMONOCHROME]: PPMONOCHROME_LOGO_COLORS,

diff --git a/src/constants.js b/src/constants.js
@@ -30,6 +30,7 @@ export const LOGO = {
   MULTIBANCO: ("multibanco": "multibanco"),
   SATISPAY: ("satispay": "satispay"),
   PAIDY: ("paidy": "paidy"),
+  PAYPAL_REBRAND: ("paypal-rebrand": "paypal-rebrand"),
 };
 
 export const MARK = {

diff --git a/src/logos/index.js b/src/logos/index.js
@@ -25,3 +25,4 @@ export * from "./mercadopago";
 export * from "./multibanco";
 export * from "./satispay";
 export * from "./paidy";
+export * from "./paypalRebrand";
diff --git a/src/logos/paypalRebrand/index.js b/src/logos/paypalRebrand/index.js
@@ -0,0 +1,3 @@
+/* @flow */
+
+export * from "./logo";
diff --git a/src/logos/paypalRebrand/logo.jsx b/src/logos/paypalRebrand/logo.jsx
@@ -0,0 +1,116 @@
+/* @flow */
+/** @jsx node */
+
+import {
+  node,
+  type ElementNode,
+  type ComponentNode,
+} from "@krakenjs/jsx-pragmatic/src";
+
+import {
+  getLogoCDNUrl,
+  getLogoColors,
+  SVGLogo,
+  type SVGLogoProps,
+} from "../../lib";
+import { LOGO_COLOR, LOGO } from "../../constants";
+import type { LogoColors, LogoColorMap } from "../../types";
+
+export const PAYPAL_REBRAND_LOGO_COLORS: LogoColorMap = {
+  [LOGO_COLOR.DEFAULT]: {
+    primary: "#333030",
+  },
+  [LOGO_COLOR.BLACK]: {
+    primary: "#333030",
+  },
+  [LOGO_COLOR.BLUE]: {
+    primary: "#60CDFF",
+  },
+};
+
+export const getPayPalRebrandSVG = ({ primary }: LogoColors): ElementNode => {
+  return (
+    <svg
+      width="99"
+      height="38"
+      viewBox="0 0 99 38"
+      preserveAspectRatio="xMinYMin meet"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill={primary}
+        d="M98.3435 5.00391V29.6505H92.7371V5.00391H98.3435Z"
+      />
+      <path
+        fill={primary}
+        d="M90.6684 13.3151V29.6849H85.6832V28.2761C85.0543 28.8886 84.334 29.3557 83.5336 29.6849C82.7294 30.0333 81.8605 30.2094 80.9267 30.2094C79.7528 30.2094 78.6666 29.9912 77.668 29.5548C76.6695 29.0954 75.8005 28.4752 75.0611 27.6904C74.3217 26.9056 73.7348 25.9868 73.3003 24.9417C72.8887 23.8736 72.6829 22.7251 72.6829 21.5038C72.6829 20.2826 72.8887 19.1456 73.3003 18.1005C73.7348 17.0324 74.3217 16.1021 75.0611 15.3173C75.8005 14.5325 76.6695 13.92 77.668 13.4835C78.6666 13.0241 79.7528 12.7944 80.9267 12.7944C81.8605 12.7944 82.7294 12.9705 83.5336 13.3189C84.3378 13.6481 85.0543 14.1152 85.6832 14.7277V13.3189H90.6684V13.3151ZM81.8338 25.2326C82.8552 25.2326 83.6899 24.8842 84.3416 24.1836C85.0162 23.4869 85.3516 22.5911 85.3516 21.5C85.3516 20.4089 85.0162 19.5131 84.3416 18.8164C83.6899 18.1196 82.8514 17.7674 81.8338 17.7674C80.8162 17.7674 79.9663 18.1158 79.2917 18.8164C78.6399 19.5131 78.3121 20.4089 78.3121 21.5C78.3121 22.5911 78.6399 23.4869 79.2917 24.1836C79.9663 24.8804 80.8124 25.2326 81.8338 25.2326Z"
+      />
+      <path
+        fill={primary}
+        d="M64.6887 5C66.1675 5 67.4252 5.20673 68.4695 5.62019C69.5138 6.03364 70.3942 6.61172 71.1107 7.35441C71.8501 8.12007 72.4256 8.99292 72.8372 9.97297C73.2489 10.9568 73.4547 12.0135 73.4547 13.1505C73.4547 14.2875 73.2489 15.3441 72.8372 16.328C72.4256 17.3118 71.8501 18.1847 71.1107 18.9465C70.3942 19.6892 69.5138 20.2673 68.4695 20.6807C67.4252 21.0942 66.1675 21.3009 64.6887 21.3009H61.9827V29.6811H56.2772V5H64.6849H64.6887ZM63.8731 16.2284C64.6353 16.2284 65.2185 16.1519 65.6339 15.9987C66.0684 15.8226 66.4266 15.6044 66.7087 15.3441C67.2956 14.7966 67.5891 14.0654 67.5891 13.1505C67.5891 12.2355 67.2956 11.5043 66.7087 10.9568C66.4266 10.6965 66.0684 10.486 65.6339 10.3367C65.2223 10.1606 64.6353 10.0763 63.8731 10.0763H61.9827V16.2323H63.8731V16.2284Z"
+      />
+      <path
+        fill={primary}
+        d="M35.2645 13.3149H41.4579L45.6617 21.1706H45.7265L49.473 13.3149H55.209L42.9214 37.9999H37.2159L42.8223 26.7064L35.2607 13.3149H35.2645Z"
+      />
+      <path
+        fill={primary}
+        d="M34.1543 13.3151V29.6849H29.1691V28.2761C28.5402 28.8886 27.8199 29.3557 27.0195 29.6849C26.2153 30.0333 25.3464 30.2094 24.4126 30.2094C23.2387 30.2094 22.1525 29.9912 21.1539 29.5548C20.1554 29.0954 19.2864 28.4752 18.547 27.6904C17.8076 26.9056 17.2207 25.9868 16.7862 24.9417C16.3746 23.8736 16.1688 22.7251 16.1688 21.5038C16.1688 20.2826 16.3746 19.1456 16.7862 18.1005C17.2207 17.0324 17.8076 16.1021 18.547 15.3173C19.2864 14.5325 20.1554 13.92 21.1539 13.4835C22.1525 13.0241 23.2387 12.7944 24.4126 12.7944C25.3464 12.7944 26.2153 12.9705 27.0195 13.3189C27.8237 13.6481 28.5402 14.1152 29.1691 14.7277V13.3189H34.1543V13.3151ZM25.3197 25.2326C26.3411 25.2326 27.1758 24.8842 27.8313 24.1836C28.5059 23.4869 28.8413 22.5911 28.8413 21.5C28.8413 20.4089 28.5059 19.5131 27.8313 18.8164C27.1796 18.1196 26.3411 17.7674 25.3197 17.7674C24.2983 17.7674 23.4521 18.1158 22.7775 18.8164C22.1258 19.5131 21.798 20.4089 21.798 21.5C21.798 22.5911 22.1258 23.4869 22.7775 24.1836C23.4521 24.8804 24.2983 25.2326 25.3197 25.2326Z"
+      />
+      <path
+        fill={primary}
+        d="M8.40772 5C9.8865 5 11.1442 5.20673 12.1885 5.62019C13.2328 6.03364 14.1132 6.61172 14.8298 7.35441C15.5691 8.12007 16.1447 8.99292 16.5563 9.97297C16.9679 10.9568 17.1737 12.0135 17.1737 13.1505C17.1737 14.2875 16.9679 15.3441 16.5563 16.328C16.1447 17.3118 15.5691 18.1847 14.8298 18.9465C14.1132 19.6892 13.2328 20.2673 12.1885 20.6807C11.1442 21.0942 9.8865 21.3009 8.40772 21.3009H5.7017V29.6811H0V5H8.40772ZM7.59591 16.2284C8.35817 16.2284 8.9413 16.1519 9.35673 15.9987C9.79122 15.8226 10.1495 15.6044 10.4315 15.3441C11.0185 14.7966 11.3119 14.0654 11.3119 13.1505C11.3119 12.2355 11.0185 11.5043 10.4315 10.9568C10.1495 10.6965 9.79122 10.486 9.35673 10.3367C8.94511 10.1606 8.35817 10.0763 7.59591 10.0763H5.70551V16.2323H7.59591V16.2284Z"
+      />
+    </svg>
+  );
+};
+
+export function PayPalRebrandLogoExternalImage({
+  logoColor = LOGO_COLOR.DEFAULT,
+  ...props
+}: {
+  logoColor?: $Values<typeof LOGO_COLOR>,
+}): ComponentNode<SVGLogoProps> {
+  const cdnUrl = getLogoCDNUrl(
+    LOGO.PAYPAL_REBRAND,
+    PAYPAL_REBRAND_LOGO_COLORS,
+    logoColor
+  );
+
+  return (
+    <SVGLogo
+      {...props}
+      name={LOGO.PAYPAL_REBRAND}
+      alt="PayPal"
+      role="presentation"
+      logoColor={logoColor}
+      cdnUrl={cdnUrl}
+    />
+  );
+}
+
+export function PayPalRebrandLogoInlineSVG({
+  logoColor = LOGO_COLOR.DEFAULT,
+  ...props
+}: {
+  logoColor?: $Values<typeof LOGO_COLOR>,
+}): ComponentNode<SVGLogoProps> {
+  const svg = getPayPalRebrandSVG(
+    getLogoColors(LOGO.PAYPAL_REBRAND, PAYPAL_REBRAND_LOGO_COLORS, logoColor)
+  );
+
+  return (
+    <SVGLogo
+      {...props}
+      name={LOGO.PAYPAL_REBRAND}
+      alt="PayPal"
+      role="presentation"
+      logoColor={logoColor}
+      render={() => {
+        return svg;
+      }}
+    />
+  );
+}
+
+export const PayPalRebrandLogo = PayPalRebrandLogoInlineSVG;
diff --git a/test/tests/funding/index.js b/test/tests/funding/index.js
@@ -23,3 +23,4 @@ import "./multibanco";
 import "./oxxo";
 import "./satispay";
 import "./paidy";
+import "./paypalRebrand";
diff --git a/test/tests/funding/paypalRebrand.jsx b/test/tests/funding/paypalRebrand.jsx
@@ -0,0 +1,46 @@
+/* @flow */
+/** @jsx node */
+
+import { node, html } from "@krakenjs/jsx-pragmatic/src";
+
+import {
+  PayPalRebrandLogo,
+  LOGO_COLOR,
+  PayPalRebrandLogoExternalImage,
+  PayPalRebrandLogoInlineSVG,
+} from "../../../src";
+import { validateExternalSVG, validateSVG } from "../common";
+
+describe("paypal logo rendering happy cases", () => {
+  it("should render the paypal logo in blue", () => {
+    const logo = <PayPalRebrandLogo logoColor={LOGO_COLOR.BLUE} />;
+
+    const logoHTML = logo.render(html());
+
+    validateSVG(logoHTML);
+  });
+
+  it("should render the paypal logo in black", () => {
+    const logo = <PayPalRebrandLogo logoColor={LOGO_COLOR.BLACK} />;
+
+    const logoHTML = logo.render(html());
+
+    validateSVG(logoHTML);
+  });
+
+  it("should render paypal rebrand logo external image", () => {
+    const logo = <PayPalRebrandLogoExternalImage />;
+
+    const logoRebrandHTML = logo.render(html());
+
+    validateExternalSVG(logoRebrandHTML);
+  });
+
+  it("should render paypal rebrand logo in line SVG", () => {
+    const logo = <PayPalRebrandLogoInlineSVG />;
+
+    const logoRebrandHTML = logo.render(html());
+
+    validateSVG(logoRebrandHTML);
+  });
+});