/* @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_LOGO_COLORS: LogoColorMap = {
[LOGO_COLOR.DEFAULT]: {
primary: "#003087",
secondary: "#009cde",
},
[LOGO_COLOR.BLUE]: {
primary: "#003087",
secondary: "#009cde",
},
[LOGO_COLOR.WHITE]: {
primary: "#ffffff",
secondary: "#ffffff",
},
[LOGO_COLOR.BLACK]: {
primary: "#333030",
secondary: "#636363",
},
[LOGO_COLOR.MONOCHROME]: {
primary: "#000000",
secondary: "#000000",
},
};
export const getPayPalSVG = ({
primary,
secondary,
}: LogoColors): ElementNode => {
return (
);
};
export function PayPalLogoExternalImage({
logoColor = LOGO_COLOR.DEFAULT,
...props
}: {
logoColor?: $Values,
}): ComponentNode {
const cdnUrl = getLogoCDNUrl(LOGO.PAYPAL, PAYPAL_LOGO_COLORS, logoColor);
return (
);
}
export function PayPalLogoInlineSVG({
logoColor = LOGO_COLOR.DEFAULT,
...props
}: {
logoColor?: $Values,
}): ComponentNode {
const svg = getPayPalSVG(
getLogoColors(LOGO.PAYPAL, PAYPAL_LOGO_COLORS, logoColor)
);
return (
{
return svg;
}}
/>
);
}
export const PayPalLogo = PayPalLogoInlineSVG;
const DEFAULT_OPACITY = "1";
export const PP_LOGO_COLORS: LogoColorMap = {
[LOGO_COLOR.DEFAULT]: {
primary: "#009cde",
secondary: "#012169",
tertiary: "#003087",
},
[LOGO_COLOR.BLUE]: {
primary: "#009cde",
secondary: "#012169",
tertiary: "#003087",
},
[LOGO_COLOR.WHITE]: {
primary: "#ffffff",
primaryOpacity: "0.7",
secondary: "#ffffff",
secondaryOpacity: "0.7",
tertiary: "#ffffff",
},
[LOGO_COLOR.BLACK]: {
primary: "#808080",
secondary: "#000000",
tertiary: "#1a1a1a",
},
};
export const getPPSVG = ({
primary,
secondary,
tertiary,
primaryOpacity = DEFAULT_OPACITY,
secondaryOpacity = DEFAULT_OPACITY,
tertiaryOpacity = DEFAULT_OPACITY,
}: LogoColors): ElementNode => {
return (
);
};
export function PPLogoExternalImage({
logoColor = LOGO_COLOR.DEFAULT,
...props
}: {
logoColor?: $Values,
}): ComponentNode {
const cdnUrl = getLogoCDNUrl(LOGO.PP, PP_LOGO_COLORS, logoColor);
return (
);
}
export function PPLogoInlineSVG({
logoColor = LOGO_COLOR.DEFAULT,
...props
}: {
logoColor?: $Values,
}): ComponentNode {
const svg = getPPSVG(getLogoColors(LOGO.PP, PP_LOGO_COLORS, logoColor));
return (
{
return svg;
}}
/>
);
}
export const PPLogo = PPLogoInlineSVG;
export const PPMONOCHROME_LOGO_COLORS: LogoColorMap = {
[LOGO_COLOR.MONOCHROME]: {
primary: "#000000",
secondary: "#000000",
tertiary: "#000000",
},
};
export const getPPMonochromeSVG = ({
primary,
secondary,
tertiary,
}: LogoColors): ElementNode => {
return (
);
};
export function PPMonochromeExternalImage({
logoColor = LOGO_COLOR.MONOCHROME,
}: {
logoColor?: $Values,
}): ComponentNode {
const cdnUrl = getLogoCDNUrl(
LOGO.PPMONOCHROME,
PPMONOCHROME_LOGO_COLORS,
logoColor
);
return (
);
}
export function PPMonochromeInlineSVG({
logoColor = LOGO_COLOR.MONOCHROME,
}: {
logoColor?: $Values,
}): ComponentNode {
const svg = getPPMonochromeSVG(
getLogoColors(LOGO.PPMONOCHROME, PPMONOCHROME_LOGO_COLORS, logoColor)
);
return (
{
return svg;
}}
/>
);
}
export const PPMonochrome = PPMonochromeInlineSVG;