diff --git a/.eslintrc.js b/.eslintrc.js index d437d82..0151cac 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,4 +12,13 @@ module.exports = { // this was disabled already in all the logo files "flowtype/require-exact-type": "off", }, + overrides: [ + { + files: ["scripts/*"], + rules: { + "flowtype/require-valid-file-annotation": "off", + "no-sync": "off", + }, + }, + ], }; diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 63b7163..85c2fae 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -25,6 +25,10 @@ jobs: run: | git config --global user.email ${{ github.actor }}@users.noreply.github.com git config --global user.name ${{ github.actor }} + + - name: Update cdn folder with new svg files + run: npm run build-logos -- --commit + - name: Publish to npm run: npm run release env: diff --git a/.nodeops b/.nodeops new file mode 100644 index 0000000..2f3bf2f --- /dev/null +++ b/.nodeops @@ -0,0 +1,8 @@ +{ + "PROJECT_TYPE": "front-tier", + "web": { + "projectName": "@paypal/sdk-logos", + "staticDirectory": "cdn", + "staticNamespace": "js-sdk-logos" + } +} diff --git a/package.json b/package.json index 79a7e78..e1bf388 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "clean": "rimraf dist coverage", "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && flow-typed install", "debug": "cross-env NODE_ENV=debug", - "prepare": "husky install" + "prepare": "husky install", + "build-logos": "babel-node --config-file './scripts/babel.config.json' --ignore ./fake --plugins=transform-es2015-modules-commonjs ./scripts/buildLogos.js" }, "standard-version": { "types": [ @@ -95,7 +96,8 @@ "lint-staged": "^13.0.3", "mocha": "9.2.0", "prettier": "2.7.1", - "standard-version": "^9.5.0" + "standard-version": "^9.5.0", + "zx": "^4.3.0" }, "dependencies": { "@paypal/sdk-constants": "^1.0.128", diff --git a/scripts/babel.config.json b/scripts/babel.config.json new file mode 100644 index 0000000..5227cd7 --- /dev/null +++ b/scripts/babel.config.json @@ -0,0 +1,3 @@ +{ + "extends": "@krakenjs/babel-config-grumbler/babelrc-node" +} diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js new file mode 100644 index 0000000..080d599 --- /dev/null +++ b/scripts/buildLogos.js @@ -0,0 +1,170 @@ +/* @flow */ + +import fs from "fs-extra"; +import { $ } from "zx"; +import { html } from "@krakenjs/jsx-pragmatic"; + +import { getSVGFilename } from "../src/lib"; +import { LOGO } from "../src/constants"; +import { + APPLEPAY_LOGO_COLORS, + BANCONTACT_LOGO_COLORS, + BLIK_LOGO_COLORS, + BOLETO_LOGO_COLORS, + EPS_LOGO_COLORS, + getApplepaySVG, + getBancontactSVG, + getBlikSVG, + getBoletoSVG, + getEpsSVG, + getGiropaySVG, + getIdealSVG, + getItauSVG, + getMaximaSVG, + getMercadoPagoSVG, + getMultibancoSVG, + getMybankSVG, + getOxxoSVG, + getP24SVG, + getPaidySVG, + getPayuSVG, + getSatispaySVG, + getSepaSVG, + getSofortSVG, + getTrustlySVG, + getVerkkopankkiSVG, + getWechatpaySVG, + getZimplerSVG, + GIROPAY_LOGO_COLORS, + IDEAL_LOGO_COLORS, + ITAU_LOGO_COLORS, + MAXIMA_LOGO_COLORS, + MERCADOPAGO_LOGO_COLORS, + MULTIBANCO_LOGO_COLORS, + MYBANK_LOGO_COLORS, + OXXO_LOGO_COLORS, + P24_LOGO_COLORS, + PAIDY_LOGO_COLORS, + PAYU_LOGO_COLORS, + SATISPAY_LOGO_COLORS, + SEPA_LOGO_COLORS, + SOFORT_LOGO_COLORS, + TRUSTLY_LOGO_COLORS, + VERKKOPANKKI_LOGO_COLORS, + WECHATPAY_LOGO_COLORS, + ZIMPLER_LOGO_COLORS, +} from "../src/logos"; +import { version } from "../package.json"; + +import { getNodeOps, updateCDNUrl } from "./utils"; + +const LOGO_GETTERS = { + [LOGO.APPLEPAY]: getApplepaySVG, + [LOGO.BANCONTACT]: getBancontactSVG, + [LOGO.BLIK]: getBlikSVG, + [LOGO.BOLETO]: getBoletoSVG, + [LOGO.EPS]: getEpsSVG, + [LOGO.GIROPAY]: getGiropaySVG, + [LOGO.IDEAL]: getIdealSVG, + [LOGO.ITAU]: getItauSVG, + [LOGO.MAXIMA]: getMaximaSVG, + [LOGO.MERCADOPAGO]: getMercadoPagoSVG, + [LOGO.MULTIBANCO]: getMultibancoSVG, + [LOGO.MYBANK]: getMybankSVG, + [LOGO.OXXO]: getOxxoSVG, + [LOGO.P24]: getP24SVG, + [LOGO.PAIDY]: getPaidySVG, + [LOGO.PAYU]: getPayuSVG, + [LOGO.SATISPAY]: getSatispaySVG, + [LOGO.SEPA]: getSepaSVG, + [LOGO.SOFORT]: getSofortSVG, + [LOGO.TRUSTLY]: getTrustlySVG, + [LOGO.VERKKOPANKKI]: getVerkkopankkiSVG, + [LOGO.WECHATPAY]: getWechatpaySVG, + [LOGO.ZIMPLER]: getZimplerSVG, +}; + +const LOGO_COLOR_MAPS = { + [LOGO.APPLEPAY]: APPLEPAY_LOGO_COLORS, + [LOGO.BANCONTACT]: BANCONTACT_LOGO_COLORS, + [LOGO.BLIK]: BLIK_LOGO_COLORS, + [LOGO.BOLETO]: BOLETO_LOGO_COLORS, + [LOGO.EPS]: EPS_LOGO_COLORS, + [LOGO.GIROPAY]: GIROPAY_LOGO_COLORS, + [LOGO.IDEAL]: IDEAL_LOGO_COLORS, + [LOGO.ITAU]: ITAU_LOGO_COLORS, + [LOGO.MAXIMA]: MAXIMA_LOGO_COLORS, + [LOGO.MERCADOPAGO]: MERCADOPAGO_LOGO_COLORS, + [LOGO.MULTIBANCO]: MULTIBANCO_LOGO_COLORS, + [LOGO.MYBANK]: MYBANK_LOGO_COLORS, + [LOGO.OXXO]: OXXO_LOGO_COLORS, + [LOGO.P24]: P24_LOGO_COLORS, + [LOGO.PAIDY]: PAIDY_LOGO_COLORS, + [LOGO.PAYU]: PAYU_LOGO_COLORS, + [LOGO.SATISPAY]: SATISPAY_LOGO_COLORS, + [LOGO.SEPA]: SEPA_LOGO_COLORS, + [LOGO.SOFORT]: SOFORT_LOGO_COLORS, + [LOGO.TRUSTLY]: TRUSTLY_LOGO_COLORS, + [LOGO.VERKKOPANKKI]: VERKKOPANKKI_LOGO_COLORS, + [LOGO.WECHATPAY]: WECHATPAY_LOGO_COLORS, + [LOGO.ZIMPLER]: ZIMPLER_LOGO_COLORS, +}; + +async function buildLogos() { + let shouldCommit = false; + + if (process.argv.includes("--commit")) { + shouldCommit = true; + } + + if (!version) { + throw new Error(`Package version required`); + } + + const cdnNamespace = getNodeOps().web.staticNamespace; + + if (!cdnNamespace) { + throw new Error(`CDN namespace required`); + } + + if (cdnNamespace !== "js-sdk-logos") { + throw new Error("Expected cdnNamespace to be js-sdk-logos"); + } + + // updates CDN URL in src/constants.js with package version + updateCDNUrl(version); + + const outdir = `cdn/${version}`; + + await $`mkdir -p ${outdir}`; + + const logoPromises = []; + + for (const logoName of Object.keys(LOGO_GETTERS)) { + const logoGetter = LOGO_GETTERS[logoName]; + const logoColorMap = LOGO_COLOR_MAPS[logoName]; + + for (const [colorName, logoColors] of Object.entries(logoColorMap)) { + // $FlowFixMe + const svg = logoGetter(logoColors); + + // $FlowFixMe + const filename = getSVGFilename(logoName, colorName); + const filepath = `${outdir}/${filename}`; + + // $FlowFixMe + logoPromises.push(fs.writeFile(filepath, svg.render(html()))); + } + } + + // eslint-disable-next-line no-restricted-globals,compat/compat,promise/no-native + await Promise.all(logoPromises); + + if (shouldCommit) { + await $`git add cdn src/constants.js`; + await $`git commit -m "chore: generate CDN packages"`; + await $`git push`; + } +} + +buildLogos(); diff --git a/scripts/utils.js b/scripts/utils.js new file mode 100644 index 0000000..be373b4 --- /dev/null +++ b/scripts/utils.js @@ -0,0 +1,30 @@ +/* @flow */ + +// eslint-disable-next-line import/no-nodejs-modules +import fs from "fs"; + +type NodeOps = {| + web: {| + staticNamespace: string, + |}, +|}; + +export function getNodeOps(): NodeOps { + if (!fs.existsSync("./.nodeops")) { + throw new Error(`Node Ops file not found`); + } + return JSON.parse(fs.readFileSync("./.nodeops", "utf-8")); +} + +export function updateCDNUrl(packageVersion: string) { + const filepath = "src/constants.js"; + + let constantsFile = fs.readFileSync(filepath, "utf-8"); + + constantsFile = constantsFile.replace( + /const PACKAGE_VERSION = ".*";/, + `const PACKAGE_VERSION = "${packageVersion}";` + ); + + fs.writeFileSync(filepath, constantsFile); +} diff --git a/src/constants.js b/src/constants.js index 586d3e4..53ae781 100644 --- a/src/constants.js +++ b/src/constants.js @@ -47,3 +47,6 @@ export const LOGO_CLASS = { CARD: ("paypal-logo-card": "paypal-logo-card"), LOGO_COLOR: ("paypal-logo-color": "paypal-logo-color"), }; + +const PACKAGE_VERSION = "2.1.1"; +export const CDN_BASE_URL = `https://www.paypalobjects.com/js-sdk-logos/${PACKAGE_VERSION}`; diff --git a/src/lib/components.jsx b/src/lib/components.jsx index cf8d5f7..b1dcd65 100644 --- a/src/lib/components.jsx +++ b/src/lib/components.jsx @@ -13,11 +13,19 @@ import { LOGO_CLASS, LOGO_COLOR } from "../constants"; type SVGProps = {| svg: ElementNode, + cdnUrl?: string, + loadFromCDN?: boolean, [key: string]: mixed, |}; export function SVG(props: SVGProps): ElementNode { - let { svg, ...otherProps } = props; + let { svg, cdnUrl, loadFromCDN, ...otherProps } = props; + + if (loadFromCDN && cdnUrl) { + // $FlowFixMe + const svgProps: SVGProps = { src: cdnUrl, ...otherProps }; + return ; + } if (!svg) { throw new TypeError(`Expected svg prop`); @@ -42,6 +50,8 @@ export type SVGLogoProps = { render: () => ElementNode, name: string, logoColor?: $Values, + cdnUrl?: string, + loadFromCDN?: boolean, }; export function SVGLogo({ diff --git a/src/lib/util.js b/src/lib/util.js index 705a659..3f9d960 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -1,6 +1,6 @@ /* @flow */ -import { LOGO_COLOR } from "../constants"; +import { CDN_BASE_URL, LOGO, LOGO_COLOR } from "../constants"; import type { LogoColorMap, LogoColors } from "../types"; export function getLogoColors( @@ -26,3 +26,24 @@ export function getLogoColors( return colors; } + +export function getSVGFilename( + logoName: $Values, + logoColor: $Values +): string { + return `${logoName}-${logoColor}.svg`; +} + +export function getLogoCDNUrl( + logoName: $Values, + logoColorMap: LogoColorMap, + logoColor: $Values +): string { + if (!logoColorMap[logoColor]) { + logoColor = LOGO_COLOR.DEFAULT; + } + + const svgFilename = getSVGFilename(logoName, logoColor); + + return `${CDN_BASE_URL}/${svgFilename}`; +} diff --git a/src/logos/applepay/logo.jsx b/src/logos/applepay/logo.jsx index 0932b64..bc081ac 100644 --- a/src/logos/applepay/logo.jsx +++ b/src/logos/applepay/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const APPLEPAY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#ffffff", secondary: "#ffffff", @@ -22,13 +31,32 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getApplepaySVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + ); +}; + export function ApplePayLogo({ logoColor = LOGO_COLOR.DEFAULT, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.APPLEPAY, LOGO_COLORS, logoColor); + const svg = getApplepaySVG( + getLogoColors(LOGO.APPLEPAY, APPLEPAY_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.APPLEPAY, APPLEPAY_LOGO_COLORS, logoColor); return ( { - return ( - - - - ); + return svg; }} /> ); diff --git a/src/logos/bancontact/logo.jsx b/src/logos/bancontact/logo.jsx index 0ca6ab2..f2c7364 100644 --- a/src/logos/bancontact/logo.jsx +++ b/src/logos/bancontact/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const BANCONTACT_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -28,15 +37,72 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getBancontactSVG = ({ + primary, + secondary, + tertiary, + quaternary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + ); +}; + export function BancontactLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary } = getLogoColors( + const svg = getBancontactSVG( + getLogoColors(LOGO.BANCONTACT, BANCONTACT_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( LOGO.BANCONTACT, - LOGO_COLORS, + BANCONTACT_LOGO_COLORS, logoColor ); @@ -45,53 +111,9 @@ export function BancontactLogo({ {...props} name={LOGO.BANCONTACT} logoColor={logoColor} + cdnUrl={cdnUrl} render={() => { - return ( - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/blik/logo.jsx b/src/logos/blik/logo.jsx index 53707c5..1e0d2e3 100644 --- a/src/logos/blik/logo.jsx +++ b/src/logos/blik/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const BLIK_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FF0000", secondary: "#E83E49", @@ -31,94 +40,102 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getBlikSVG = ({ + primary, + secondary, + tertiary, + quaternary, + senary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + export function BlikLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary, senary } = getLogoColors( - LOGO.BLIK, - LOGO_COLORS, - logoColor - ); + const svg = getBlikSVG(getLogoColors(LOGO.BLIK, BLIK_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.BLIK, BLIK_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/boleto/logo.jsx b/src/logos/boleto/logo.jsx index addd4d7..4239a31 100644 --- a/src/logos/boleto/logo.jsx +++ b/src/logos/boleto/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const BOLETO_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", }, @@ -19,36 +28,44 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getBoletoSVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + ); +}; + export function BoletoLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.BOLETO, LOGO_COLORS, logoColor); + const svg = getBoletoSVG( + getLogoColors(LOGO.BOLETO, BOLETO_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.BOLETO, BOLETO_LOGO_COLORS, logoColor); return ( { - return ( - - - - ); + return svg; }} /> ); diff --git a/src/logos/eps/logo.jsx b/src/logos/eps/logo.jsx index 0a11834..ebc6080 100644 --- a/src/logos/eps/logo.jsx +++ b/src/logos/eps/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const EPS_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -22,124 +31,126 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getEpsSVG = ({ primary, secondary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + ); +}; + export function EpsLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.EPS, - LOGO_COLORS, - logoColor - ); + const svg = getEpsSVG(getLogoColors(LOGO.EPS, EPS_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.EPS, EPS_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/giropay/logo.jsx b/src/logos/giropay/logo.jsx index 94f1ddf..334e59e 100644 --- a/src/logos/giropay/logo.jsx +++ b/src/logos/giropay/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const GIROPAY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#003A7D", @@ -31,98 +40,108 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getGiropaySVG = ({ + primary, + secondary, + tertiary, + quaternary, + quinary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + ); +}; + export function GiropayLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary, quinary } = getLogoColors( - LOGO.GIROPAY, - LOGO_COLORS, - logoColor + const svg = getGiropaySVG( + getLogoColors(LOGO.GIROPAY, GIROPAY_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.GIROPAY, GIROPAY_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/ideal/logo.jsx b/src/logos/ideal/logo.jsx index e1379c7..ffdf1cb 100644 --- a/src/logos/ideal/logo.jsx +++ b/src/logos/ideal/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const IDEAL_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#CC0066", @@ -22,72 +31,79 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getIdealSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function IdealLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.IDEAL, - LOGO_COLORS, - logoColor + const svg = getIdealSVG( + getLogoColors(LOGO.IDEAL, IDEAL_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.IDEAL, IDEAL_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/itau/logo.jsx b/src/logos/itau/logo.jsx index b410434..c031ce3 100644 --- a/src/logos/itau/logo.jsx +++ b/src/logos/itau/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const ITAU_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#ffffff", }, @@ -22,144 +31,150 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getItauSVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function ItauLogo({ logoColor = LOGO_COLOR.DEFAULT, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.SOFORT, LOGO_COLORS, logoColor); + const svg = getItauSVG(getLogoColors(LOGO.ITAU, ITAU_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.ITAU, ITAU_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/maxima/logo.jsx b/src/logos/maxima/logo.jsx index 9fe850e..8493768 100644 --- a/src/logos/maxima/logo.jsx +++ b/src/logos/maxima/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const MAXIMA_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#004A91", secondary: "#ED1921", @@ -22,95 +31,99 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getMaximaSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function MaximaLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.MAXIMA, - LOGO_COLORS, - logoColor + const svg = getMaximaSVG( + getLogoColors(LOGO.MAXIMA, MAXIMA_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.MAXIMA, MAXIMA_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/mercadopago/logo.jsx b/src/logos/mercadopago/logo.jsx index 4c381c9..07e6c64 100644 --- a/src/logos/mercadopago/logo.jsx +++ b/src/logos/mercadopago/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const MERCADOPAGO_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#009EE3", secondary: "#FFFFFF", @@ -28,15 +37,138 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getMercadoPagoSVG = ({ + primary, + secondary, + tertiary, + quaternary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + export function MercadoPagoLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary } = getLogoColors( + const svg = getMercadoPagoSVG( + getLogoColors(LOGO.MERCADOPAGO, MERCADOPAGO_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( LOGO.MERCADOPAGO, - LOGO_COLORS, + MERCADOPAGO_LOGO_COLORS, logoColor ); @@ -45,119 +177,9 @@ export function MercadoPagoLogo({ {...props} name={LOGO.MERCADOPAGO} logoColor={logoColor} + cdnUrl={cdnUrl} render={() => { - return ( - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/multibanco/logo.jsx b/src/logos/multibanco/logo.jsx index 82dca98..f344b56 100644 --- a/src/logos/multibanco/logo.jsx +++ b/src/logos/multibanco/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const MULTIBANCO_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -22,15 +31,118 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getMultibancoSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + ); +}; + export function MultibancoLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( + const svg = getMultibancoSVG( + getLogoColors(LOGO.MULTIBANCO, MULTIBANCO_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( LOGO.MULTIBANCO, - LOGO_COLORS, + MULTIBANCO_LOGO_COLORS, logoColor ); @@ -39,101 +151,9 @@ export function MultibancoLogo({ {...props} name={LOGO.MULTIBANCO} logoColor={logoColor} + cdnUrl={cdnUrl} render={() => { - return ( - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/mybank/logo.jsx b/src/logos/mybank/logo.jsx index 00ee6c6..662c5ba 100644 --- a/src/logos/mybank/logo.jsx +++ b/src/logos/mybank/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const MYBANK_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#00C0EE", secondary: "#FFFFFF", @@ -22,85 +31,92 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getMybankSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + ); +}; + export function MybankLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.MYBANK, - LOGO_COLORS, - logoColor + const svg = getMybankSVG( + getLogoColors(LOGO.MYBANK, MYBANK_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.MYBANK, MYBANK_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/oxxo/logo.jsx b/src/logos/oxxo/logo.jsx index d062776..9dcbdb1 100644 --- a/src/logos/oxxo/logo.jsx +++ b/src/logos/oxxo/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const OXXO_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -22,64 +31,66 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getOxxoSVG = ({ primary, secondary }: LogoColors): ElementNode => { + return ( + + + + + + + + ); +}; + export function OxxoLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.OXXO, - LOGO_COLORS, - logoColor - ); + const svg = getOxxoSVG(getLogoColors(LOGO.OXXO, OXXO_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.OXXO, OXXO_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/p24/logo.jsx b/src/logos/p24/logo.jsx index a5c11bc..b3f5db6 100644 --- a/src/logos/p24/logo.jsx +++ b/src/logos/p24/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const P24_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -22,124 +31,126 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getP24SVG = ({ primary, secondary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + ); +}; + export function P24Logo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.P24, - LOGO_COLORS, - logoColor - ); + const svg = getP24SVG(getLogoColors(LOGO.P24, P24_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.P24, P24_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/paidy/logo.jsx b/src/logos/paidy/logo.jsx index cca2545..085b3bb 100644 --- a/src/logos/paidy/logo.jsx +++ b/src/logos/paidy/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const PAIDY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -25,105 +34,113 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getPaidySVG = ({ + primary, + secondary, + tertiary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function PaidyLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary } = getLogoColors( - LOGO.PAIDY, - LOGO_COLORS, - logoColor + const svg = getPaidySVG( + getLogoColors(LOGO.PAIDY, PAIDY_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.PAIDY, PAIDY_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/payu/logo.jsx b/src/logos/payu/logo.jsx index 2facc77..7b0941f 100644 --- a/src/logos/payu/logo.jsx +++ b/src/logos/payu/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const PAYU_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#A6C307", }, @@ -19,41 +28,47 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getPayuSVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + ); +}; + export function PayuLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.PAYU, LOGO_COLORS, logoColor); + const svg = getPayuSVG(getLogoColors(LOGO.PAYU, PAYU_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.PAYU, PAYU_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/satispay/logo.jsx b/src/logos/satispay/logo.jsx index c0e94e1..c706b83 100644 --- a/src/logos/satispay/logo.jsx +++ b/src/logos/satispay/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const SATISPAY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", }, @@ -19,43 +28,51 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getSatispaySVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + ); +}; + export function SatispayLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.SATISPAY, LOGO_COLORS, logoColor); + const svg = getSatispaySVG( + getLogoColors(LOGO.SATISPAY, SATISPAY_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.SATISPAY, SATISPAY_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/sepa/logo.jsx b/src/logos/sepa/logo.jsx index c6e8954..dcbd90e 100644 --- a/src/logos/sepa/logo.jsx +++ b/src/logos/sepa/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const SEPA_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { main: "#005DA0", card: "#AEB1BC", @@ -22,108 +31,114 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getSepaSVG = ({ main, card }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function SepaLogo({ logoColor = LOGO_COLOR.DEFAULT, ...props }: { logoColor?: $Values, }): ComponentNode { - const { main, card } = getLogoColors(LOGO.SEPA, LOGO_COLORS, logoColor); + const svg = getSepaSVG(getLogoColors(LOGO.SEPA, SEPA_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.SEPA, SEPA_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/sofort/logo.jsx b/src/logos/sofort/logo.jsx index 60d0368..70e8fe1 100644 --- a/src/logos/sofort/logo.jsx +++ b/src/logos/sofort/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const SOFORT_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#EDEDED", secondary: "#393A41", @@ -22,59 +31,66 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getSofortSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + ); +}; + export function SofortLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.SOFORT, - LOGO_COLORS, - logoColor + const svg = getSofortSVG( + getLogoColors(LOGO.SOFORT, SOFORT_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.SOFORT, SOFORT_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/trustly/logo.jsx b/src/logos/trustly/logo.jsx index b35509b..4bba879 100644 --- a/src/logos/trustly/logo.jsx +++ b/src/logos/trustly/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const TRUSTLY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#0EE06E", }, @@ -19,77 +28,85 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getTrustlySVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + ); +}; + export function TrustlyLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.TRUSTLY, LOGO_COLORS, logoColor); + const svg = getTrustlySVG( + getLogoColors(LOGO.TRUSTLY, TRUSTLY_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.TRUSTLY, TRUSTLY_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/verkkopankki/logo.jsx b/src/logos/verkkopankki/logo.jsx index b8402e0..87aed01 100644 --- a/src/logos/verkkopankki/logo.jsx +++ b/src/logos/verkkopankki/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const VERKKOPANKKI_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#2D59A1", secondary: "#1F3364", @@ -34,306 +43,324 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getVerkkopankkiSVG = ({ + primary, + secondary, + tertiary, + quaternary, + quinary, + senary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function VerkkopankkiLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary, quinary, senary } = - getLogoColors(LOGO.VERKKOPANKKI, LOGO_COLORS, logoColor); + const svg = getVerkkopankkiSVG( + getLogoColors(LOGO.VERKKOPANKKI, VERKKOPANKKI_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( + LOGO.VERKKOPANKKI, + VERKKOPANKKI_LOGO_COLORS, + logoColor + ); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/wechatpay/logo.jsx b/src/logos/wechatpay/logo.jsx index 26fcd27..39ca879 100644 --- a/src/logos/wechatpay/logo.jsx +++ b/src/logos/wechatpay/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const WECHATPAY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#1AAD19", secondary: "#FFFFFF", @@ -22,15 +31,94 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getWechatpaySVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + ); +}; + export function WechatpayLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( + const svg = getWechatpaySVG( + getLogoColors(LOGO.WECHATPAY, WECHATPAY_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( LOGO.WECHATPAY, - LOGO_COLORS, + WECHATPAY_LOGO_COLORS, logoColor ); @@ -39,77 +127,9 @@ export function WechatpayLogo({ {...props} name={LOGO.WECHATPAY} logoColor={logoColor} + cdnUrl={cdnUrl} render={() => { - return ( - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/zimpler/logo.jsx b/src/logos/zimpler/logo.jsx index 3d9f0b8..f097d15 100644 --- a/src/logos/zimpler/logo.jsx +++ b/src/logos/zimpler/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const ZIMPLER_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#00A599", }, @@ -19,40 +28,48 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getZimplerSVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + ); +}; + export function ZimplerLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.ZIMPLER, LOGO_COLORS, logoColor); + const svg = getZimplerSVG( + getLogoColors(LOGO.ZIMPLER, ZIMPLER_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.ZIMPLER, ZIMPLER_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - ); + return svg; }} /> );