/* @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, BADGE } from "../../constants";
import type { LogoColors, LogoColorMap } from "../../types";
// Credit Rebrand Badge (text only)
export const CREDIT_REBRAND_BADGE_COLORS: LogoColorMap = {
[LOGO_COLOR.DEFAULT]: {
background: "#60CDFF",
foreground: "#000000",
},
[LOGO_COLOR.BLACK]: {
background: "#000000",
foreground: "#FFFFFF",
},
[LOGO_COLOR.BLUE]: {
background: "#60CDFF",
foreground: "#000000",
},
[LOGO_COLOR.WHITE]: {
background: "#FFFFFF",
foreground: "#000000",
},
};
export const getCreditRebrandBadgeSVG = ({
background,
foreground,
}: LogoColors): ElementNode => {
return (
);
};
export function CreditRebrandBadgeExternalImage({
logoColor = LOGO_COLOR.DEFAULT,
...props
}: {
logoColor?: $Values,
}): ComponentNode {
const cdnUrl = getLogoCDNUrl(
BADGE.CREDIT_REBRAND,
CREDIT_REBRAND_BADGE_COLORS,
logoColor
);
return (
);
}
export function CreditRebrandBadgeInlineSVG({
logoColor = LOGO_COLOR.DEFAULT,
...props
}: {
logoColor?: $Values,
}): ComponentNode {
const svg = getCreditRebrandBadgeSVG(
getLogoColors(BADGE.CREDIT_REBRAND, CREDIT_REBRAND_BADGE_COLORS, logoColor)
);
return (
{
return svg;
}}
/>
);
}
export const CreditRebrandBadge = CreditRebrandBadgeInlineSVG;
// Credit Rebrand PP Badge (with PP monogram)
export const CREDIT_REBRAND_PP_BADGE_COLORS: LogoColorMap = {
[LOGO_COLOR.DEFAULT]: {
background: "#60CDFF",
foreground: "#000000",
primary: "#050A0E",
secondary: "#31677F",
tertiary: "#1E3E4C",
},
[LOGO_COLOR.BLACK]: {
background: "#000000",
foreground: "#FFFFFF",
primary: "#F3F3F3",
secondary: "#898989",
tertiary: "#B8B8B8",
},
[LOGO_COLOR.BLUE]: {
background: "#60CDFF",
foreground: "#000000",
primary: "#050A0E",
secondary: "#31677F",
tertiary: "#1E3E4C",
},
[LOGO_COLOR.WHITE]: {
background: "#FFFFFF",
foreground: "#000000",
primary: "#002991",
secondary: "#60CDFF",
tertiary: "#008CFF",
},
};
export const getCreditRebrandPPBadgeSVG = ({
background,
foreground,
primary,
secondary,
tertiary,
}: LogoColors): ElementNode => {
return (
);
};
export function CreditRebrandPPBadgeExternalImage({
logoColor = LOGO_COLOR.DEFAULT,
...props
}: {
logoColor?: $Values,
}): ComponentNode {
const cdnUrl = getLogoCDNUrl(
BADGE.CREDIT_REBRAND_PP,
CREDIT_REBRAND_PP_BADGE_COLORS,
logoColor
);
return (
);
}
export function CreditRebrandPPBadgeInlineSVG({
logoColor = LOGO_COLOR.DEFAULT,
...props
}: {
logoColor?: $Values,
}): ComponentNode {
const svg = getCreditRebrandPPBadgeSVG(
getLogoColors(
BADGE.CREDIT_REBRAND_PP,
CREDIT_REBRAND_PP_BADGE_COLORS,
logoColor
)
);
return (
{
return svg;
}}
/>
);
}
export const CreditRebrandPPBadge = CreditRebrandPPBadgeInlineSVG;