@paypal/checkout-components - npm Package Compare versions

Comparing version 5.0.81 to 5.0.82

package.json

 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.81",
+  "version": "5.0.82",
   "description": "PayPal Checkout components, for integrating checkout products.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/constants/button.js

@@ -22,2 +22,8 @@ /* @flow */
 
+export const TEXT_COLOR = {
+    BLACK:   ('black' : 'black'),
+    WHITE:   ('white' : 'white'),
+    DEFAULT: ('default' : 'default')
+};
+
 export const BUTTON_SIZE = {
@@ -24,0 +30,0 @@ TINY:       ('tiny' : 'tiny'),

src/constants/class.js

@@ -10,2 +10,3 @@ /* @flow */
     COLOR:      ('paypal-button-color' : 'paypal-button-color'),
+    TEXT_COLOR: ('paypal-button-text-color' : 'paypal-button-text-color'),
     SHAPE:      ('paypal-button-shape' : 'paypal-button-shape'),
@@ -12,0 +13,0 @@ LAYOUT:     ('paypal-button-layout' : 'paypal-button-layout'),

src/funding/common.jsx

@@ -32,2 +32,3 @@ /* @flow */
 export type LabelOptions = {|
+    i : number,
     logo : ChildType,
@@ -74,2 +75,3 @@ label : ?$Values<typeof BUTTON_LABEL>,
     colors : $ReadOnlyArray<$Values<typeof BUTTON_COLOR>>,
+    textColors : { [$Values<typeof BUTTON_COLOR>] : $Values<typeof BUTTON_COLOR> },
     secondaryColors : { [$Values<typeof BUTTON_COLOR>] : $Values<typeof BUTTON_COLOR> },
@@ -81,3 +83,3 @@ secondaryVaultColors : { [$Values<typeof BUTTON_COLOR>] : $Values<typeof BUTTON_COLOR> },
 
-export function BasicLabel({ logo, label, layout, multiple, period, locale: { lang } } : LabelOptions) : ChildType {
+export function BasicLabel({ i, logo, label, layout, multiple, period, locale: { lang } } : LabelOptions) : ChildType {
     if (layout === BUTTON_LAYOUT.HORIZONTAL && multiple) {
@@ -91,2 +93,6 @@ return logo;
 
+    if (i > 0) {
+        return logo;
+    }
+
     const { Checkout, Pay, BuyNow, Installment } = componentContent[lang];
@@ -139,2 +145,9 @@
 
+    textColors: {
+        [DEFAULT]:               BUTTON_COLOR.BLACK,
+        [BUTTON_COLOR.BLUE]:     BUTTON_COLOR.WHITE,
+        [BUTTON_COLOR.BLACK]:    BUTTON_COLOR.WHITE,
+        [BUTTON_COLOR.DARKBLUE]: BUTTON_COLOR.WHITE
+    },
+
     secondaryColors: {
@@ -141,0 +154,0 @@ [ DEFAULT ]:            BUTTON_COLOR.SILVER,

src/funding/funding.js

 /* @flow */
 
 import type { FundingEligibilityType } from '@paypal/sdk-client/src';
-import { PLATFORM, FUNDING, COMPONENTS, CARD } from '@paypal/sdk-constants/src';
+import { PLATFORM, FUNDING, COMPONENTS } from '@paypal/sdk-constants/src';
 import { SUPPORTED_FUNDING_SOURCES } from '@paypal/funding-components/src';
-import { values } from 'belter/src';
 
@@ -62,7 +61,3 @@ import { BUTTON_LAYOUT } from '../constants';
 
-export function isVaultedFundingEligible({ layout, onShippingChange } : { layout : $Values<typeof BUTTON_LAYOUT>, onShippingChange : ?OnShippingChange }) : boolean {
-    if (layout !== BUTTON_LAYOUT.VERTICAL) {
-        return false;
-    }
-
+export function isVaultedFundingEligible({ onShippingChange } : { onShippingChange : ?OnShippingChange }) : boolean {
     if (onShippingChange) {
@@ -74,32 +69,1 @@ return false;
 }
-
-export function determineVaultedFunding({ fundingEligibility } : {| fundingEligibility : FundingEligibilityType |}) :
-    $ReadOnlyArray<{ fundingSource : $Values<typeof FUNDING>, paymentMethodID : string, vendor? : $Values<typeof CARD>, label : string }>  {
-    
-    const vaultedFunding = [];
-
-    for (const fundingSource of values(FUNDING)) {
-        const fundingConfig = fundingEligibility[fundingSource];
-
-        if (fundingConfig && fundingConfig.eligible && fundingConfig.vaultedInstruments) {
-            for (const { id, label: { description } } of fundingConfig.vaultedInstruments) {
-                vaultedFunding.push({ fundingSource, label: description, paymentMethodID: id });
-            }
-        }
-
-        if (fundingConfig && fundingConfig.vendors) {
-            for (const vendor of values(CARD)) {
-                const vendorConfig = fundingConfig.vendors[vendor];
-
-                if (vendorConfig && vendorConfig.vaultedInstruments) {
-                    for (const { id, label: { description } } of vendorConfig.vaultedInstruments) {
-                        vaultedFunding.push({ fundingSource, vendor, label: description, paymentMethodID: id });
-                    }
-                }
-            }
-        }
-
-    }
-    
-    return vaultedFunding;
-}

src/funding/paypal/template.jsx

@@ -160,3 +160,3 @@ /* @flow */
         <Fragment>
-            <PPLogo logoColor={ logoColor } optional /> <Text className={ CLASS.VAULT_LABEL }>{label}</Text>
+            <PPLogo logoColor={ logoColor } optional /> <Text className={ CLASS.VAULT_LABEL }>{ label }</Text>
         </Fragment>
@@ -163,0 +163,0 @@ );

src/ui/buttons/button.jsx

 /* @flow */
 /** @jsx node */
 
-import type { FundingEligibilityType } from '@paypal/sdk-client/src';
+import type { FundingEligibilityType, VaultedInstrument } from '@paypal/sdk-client/src';
 import { FUNDING, ENV, type LocaleType, CARD } from '@paypal/sdk-constants/src';
@@ -10,11 +10,9 @@ import { node, type ElementNode } from 'jsx-pragmatic/src';
 
-import { ATTRIBUTE, CLASS, BUTTON_COLOR, BUTTON_NUMBER } from '../../constants';
-import { getFundingConfig } from '../../funding';
+import { ATTRIBUTE, CLASS, BUTTON_COLOR, BUTTON_NUMBER, TEXT_COLOR } from '../../constants';
+import { getFundingConfig, isVaultedFundingEligible } from '../../funding';
 
-import { type ButtonStyle, type Personalization } from './props';
+import type { ButtonStyle, Personalization, OnShippingChange } from './props';
 import { Spinner } from './spinner';
 import { MenuButton } from './menu';
 
-const ENABLE_VAULT_DROPDOWN = true;
-
 type BasicButtonProps = {|
@@ -28,2 +26,3 @@ style : ButtonStyle,
     fundingEligibility : FundingEligibilityType,
+    onShippingChange : OnShippingChange,
     i : number,
@@ -37,4 +36,34 @@ nonce : string,
 
-export function BasicButton({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, clientAccessToken, personalization, onClick = noop, content, tagline } : BasicButtonProps) : ElementNode {
+function getVaultedInstrument({ fundingEligibility, fundingSource, onShippingChange }) : ?{ vaultedInstrument : VaultedInstrument, vendor? : $Values<typeof CARD> } {
+    if (!isVaultedFundingEligible({ onShippingChange })) {
+        return;
+    }
 
+    const fundingSourceEligibility = fundingEligibility[fundingSource];
+
+    if (!fundingSourceEligibility) {
+        return;
+    }
+
+    if (fundingSourceEligibility.vaultedInstruments && fundingSourceEligibility.vaultedInstruments.length) {
+        return { vaultedInstrument: fundingSourceEligibility.vaultedInstruments[0] };
+    }
+
+    if (fundingSourceEligibility.vendors) {
+        for (const vendor of Object.keys(fundingSourceEligibility.vendors)) {
+            const vendorEligibility = fundingSourceEligibility.vendors[vendor];
+
+            if (!vendorEligibility) {
+                continue;
+            }
+
+            if (vendorEligibility.vaultedInstruments && vendorEligibility.vaultedInstruments.length) {
+                return { vendor, vaultedInstrument: vendorEligibility.vaultedInstruments[0] };
+            }
+        }
+    }
+}
+
+export function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, clientAccessToken, personalization, onShippingChange, onClick = noop, content, tagline } : BasicButtonProps) : ElementNode {
+
     const fundingConfig = getFundingConfig()[fundingSource];
@@ -48,2 +77,3 @@
     const secondaryColors = fundingConfig.secondaryColors || {};
+    const { vaultedInstrument, vendor } = getVaultedInstrument({ fundingEligibility, fundingSource, onShippingChange }) || {};
 
@@ -60,6 +90,8 @@ let {
 
-    const logoColors = fundingConfig.logoColors || {};
+    const { logoColors, textColors } = fundingConfig;
+
     const logoColor = logoColors[color] || logoColors[LOGO_COLOR.DEFAULT] || LOGO_COLOR.DEFAULT;
+    const textColor = textColors[color] || textColors[TEXT_COLOR.DEFAULT] || TEXT_COLOR.DEFAULT;
 
-    const { Label, Logo } = fundingConfig;
+    const { Label, VaultLabel, Logo } = fundingConfig;
 
@@ -93,6 +125,13 @@ const clickHandler = (event, opts) => {
 
-    const labelNode = (i !== 0 && fundingSource !== FUNDING.CARD)
-        ? logoNode
-        : (
+    const labelNode = (vaultedInstrument && VaultLabel)
+        ? (
+            <VaultLabel
+                nonce={ nonce }
+                logoColor={ logoColor }
+                label={ vaultedInstrument.label.description }
+                vendor={ vendor }
+            />
+        ) : (
             <Label
+                i={ i }
                 logo={ logoNode }
@@ -120,4 +159,5 @@ label={ label }
             { ...{
-                [ ATTRIBUTE.BUTTON ]:         true,
-                [ ATTRIBUTE.FUNDING_SOURCE ]: fundingSource
+                [ ATTRIBUTE.BUTTON ]:            true,
+                [ ATTRIBUTE.FUNDING_SOURCE ]:    fundingSource,
+                [ ATTRIBUTE.PAYMENT_METHOD_ID ]: vaultedInstrument ? vaultedInstrument.id : null
             } }
@@ -132,2 +172,3 @@ class={ [
                 `${ CLASS.COLOR }-${ color }`,
+                `${ CLASS.TEXT_COLOR }-${ textColor }`,
                 `${ LOGO_CLASS.LOGO_COLOR }-${ logoColor }`
@@ -144,87 +185,5 @@ ].join(' ') }
             <Spinner />
+            { vaultedInstrument ? <MenuButton color={ textColor } /> : null }
         </div>
     );
 }
-
-type VaultedButtonProps = {|
-    style : ButtonStyle,
-    fundingSource : $Values<typeof FUNDING>,
-    multiple : boolean,
-    locale : LocaleType,
-    onClick? : Function,
-    env : $Values<typeof ENV>,
-    fundingEligibility : FundingEligibilityType,
-    i : number,
-    nonce : string,
-    vendor : $Values<typeof CARD>,
-    label : string,
-    paymentMethodID : string
-|};
-
-export function VaultedButton({ fundingSource, paymentMethodID, style, multiple, env, nonce, vendor, label, onClick = noop } : VaultedButtonProps) : ElementNode {
-
-    const clickHandler = (event, opts) => {
-        event.preventDefault();
-        event.stopPropagation();
-        event.target.blur();
-        onClick(event, { fundingSource, ...opts });
-    };
-
-    const keyboardAccessibilityHandler = (event, opts) => {
-        if (event.keyCode === 13 || event.keyCode === 32) {
-            clickHandler(event, opts);
-        }
-    };
-
-    let { layout, shape, color } = style;
-
-    const fundingConfig = getFundingConfig()[fundingSource];
-
-    if (!fundingConfig) {
-        throw new Error(`Can not find funding config for ${ fundingSource }`);
-    }
-
-    const { VaultLabel, colors, logoColors = {}, secondaryVaultColors = {} } = fundingConfig;
-
-    if (!VaultLabel) {
-        throw new Error(`Could not find vault label for ${ fundingSource }`);
-    }
-
-    color = secondaryVaultColors[color] || secondaryVaultColors[BUTTON_COLOR.DEFAULT] || colors[0];
-    const logoColor = logoColors[color] || logoColors[LOGO_COLOR.DEFAULT] || LOGO_COLOR.DEFAULT;
-
-    return (
-        <div
-            role='button'
-            { ...{
-                [ ATTRIBUTE.BUTTON ]:            true,
-                [ ATTRIBUTE.FUNDING_SOURCE ]:    fundingSource,
-                [ ATTRIBUTE.PAYMENT_METHOD_ID ]: paymentMethodID
-            } }
-            class={ [
-                CLASS.BUTTON,
-                CLASS.VAULT,
-                `${ CLASS.LAYOUT }-${ layout }`,
-                `${ CLASS.SHAPE }-${ shape }`,
-                `${ CLASS.NUMBER }-${ multiple ? BUTTON_NUMBER.MULTIPLE : BUTTON_NUMBER.SINGLE }`,
-                `${ CLASS.ENV }-${ env }`,
-                `${ CLASS.COLOR }-${ color }`
-            ].join(' ') }
-            tabIndex='0'
-            onClick={ clickHandler }
-            onKeyPress={ keyboardAccessibilityHandler } >
-
-            <div class={ CLASS.BUTTON_LABEL }>
-                <VaultLabel
-                    nonce={ nonce }
-                    logoColor={ logoColor }
-                    vendor={ vendor }
-                    label={ label }
-                />
-            </div>
-
-            <Spinner />
-            { ENABLE_VAULT_DROPDOWN ? <MenuButton /> : null }
-        </div>
-    );
-}

src/ui/buttons/buttons.jsx

@@ -8,10 +8,9 @@ /* @flow */
 import { CLASS, BUTTON_NUMBER, BUTTON_LAYOUT } from '../../constants';
-import { determineEligibleFunding, determineVaultedFunding, isVaultedFundingEligible } from '../../funding';
+import { determineEligibleFunding } from '../../funding';
 
 import { normalizeButtonProps, type ButtonPropsInputs } from './props';
 import { Style } from './style';
-import { BasicButton, VaultedButton } from './button';
+import { Button } from './button';
 import { TagLine } from './tagline';
 import { Script } from './script';
-import { buttonContent } from './content';
 import { PoweredByPayPal } from './poweredBy';
@@ -32,3 +31,2 @@
     const { layout, shape, tagline } = style;
-    const { lang } = locale;
 
@@ -41,8 +39,2 @@ const fundingSources = determineEligibleFunding({ fundingSource, layout, remembered, platform, fundingEligibility, components, onShippingChange });
     }
-    
-    const vaultedFunding = isVaultedFundingEligible({ layout, onShippingChange })
-        ? determineVaultedFunding({ fundingEligibility })
-        : [];
-        
-    const { PayInstantly } = buttonContent[lang];
 
@@ -66,3 +58,3 @@ return (
                 fundingSources.map((source, i) => (
-                    <BasicButton
+                    <Button
                         content={ content }
@@ -77,2 +69,3 @@ i={ i }
                         fundingEligibility={ fundingEligibility }
+                        onShippingChange={ onShippingChange }
                         onClick={ onClick }
@@ -99,24 +92,2 @@ clientAccessToken={ clientAccessToken }
             {
-                vaultedFunding.length
-                    ? <p class={ `${ CLASS.VAULT_HEADER } ${ CLASS.TEXT }` }><PayInstantly /></p>
-                    : null
-            }
-
-            {
-                vaultedFunding.map(({ fundingSource: source, paymentMethodID, vendor, label }) => (
-                    <VaultedButton
-                        style={ style }
-                        fundingSource={ source }
-                        multiple={ multiple }
-                        env={ env }
-                        nonce={ nonce }
-                        onClick={ onClick }
-                        vendor={ vendor }
-                        label={ label }
-                        paymentMethodID={ paymentMethodID }
-                    />
-                ))
-            }
-
-            {
                 (layout === BUTTON_LAYOUT.VERTICAL && fundingSources.indexOf(FUNDING.CARD) !== -1)
@@ -123,0 +94,0 @@ ? <PoweredByPayPal

src/ui/buttons/content.jsx

@@ -13,3 +13,2 @@ /* @flow */
     [ $Values<typeof LANG> ] : {
-        PayInstantly : () => ChildType,
         PoweredBy : ({ logoColor : $Values<typeof LOGO_COLOR> }) => ChildType
@@ -21,101 +20,76 @@ }
     en: {
-        PayInstantly: () => <Text>Pay Instantly With</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     fr: {
-        PayInstantly: () => <Text>Payez instantanément avec</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Optimisé par </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Optimisé par </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     es: {
-        PayInstantly: () => <Text>Pagar en segundos con</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Desarrollado por </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Desarrollado por </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     zh: {
-        PayInstantly: () => <Text>使用以下付款方式即时付款</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>技术支持提供方： </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>技术支持提供方： </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     ar: {
-        PayInstantly: () => <Text>ادفع بشكل فوري باستخدام</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>مدعوم من </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>مدعوم من </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     de: {
-        PayInstantly: () => <Text>Sofort bezahlen mit</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Abgewickelt durch </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Abgewickelt durch </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     nl: {
-        PayInstantly: () => <Text>Direct betalen met</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Mogelijk gemaakt door </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Mogelijk gemaakt door </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     pt: {
-        PayInstantly: () => <Text>Pague imediatamente com</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     cs: {
-        PayInstantly: () => <Text>Výběr způsobu okamžité platby</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Využívá službu </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Využívá službu </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     da: {
-        PayInstantly: () => <Text>Betal med det samme med</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Leveret af </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Leveret af </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     ru: {
-        PayInstantly: () => <Text>Мгновенно оплачивайте счета с помощью</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Обработано </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Обработано </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     fi: {
-        PayInstantly: () => <Text>Maksa välittömästi</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Palvelun tarjoaa </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Palvelun tarjoaa </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     el: {
-        PayInstantly: () => <Text>Άμεση πληρωμή μέσω</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Με την υποστήριξη του </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Με την υποστήριξη του </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     hu: {
-        PayInstantly: () => <Text>Azonnali fizetés a következővel</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Üzemeltető: </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Üzemeltető: </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     id: {
-        PayInstantly: () => <Text>Bayar secara instan dengan</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Ditunjang teknologi </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Ditunjang teknologi </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     he: {
-        PayInstantly: () => <Text>שליחת תשלום באופן מיידי באמצעות</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><PayPalLogo logoColor={ logoColor } /> מופעל על-ידי</Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><PayPalLogo logoColor={ logoColor } /> מופעל על-ידי</Fragment>
     },
     it: {
-        PayInstantly: () => <Text>Paga subito con</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Con tecnologia </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Con tecnologia </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     ja: {
-        PayInstantly: () => <Text>よりスピーディな支払方法</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     ko: {
-        PayInstantly: () => <Text>다음으로 즉시 결제</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>제공: </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>제공: </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     no: {
-        PayInstantly: () => <Text>Betal umiddelbart med</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Leveres av </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Leveres av </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     pl: {
-        PayInstantly: () => <Text>Zapłać błyskawicznie za pomocą</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     sv: {
-        PayInstantly: () => <Text>Betala direkt med</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Tillhandahålls av </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Tillhandahålls av </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     sk: {
-        PayInstantly: () => <Text>Zaplaťte okamžite</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Používa technológiu </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Používa technológiu </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     th: {
-        PayInstantly: () => <Text>ชำระเงินได้ทันทีด้วย</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>ให้บริการโดย </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>ให้บริการโดย </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     },
     tr: {
-        PayInstantly: () => <Text>Pay Instantly With</Text>,
-        PoweredBy:    ({ logoColor }) => <Fragment><Text>Çalıştıran </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
+        PoweredBy: ({ logoColor }) => <Fragment><Text>Çalıştıran </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
     }
 };

src/ui/buttons/menu.jsx

@@ -6,6 +6,6 @@ /* @flow */
 
-import { ATTRIBUTE, CLASS } from '../../constants';
+import { ATTRIBUTE, CLASS, TEXT_COLOR } from '../../constants';
 import { Chevron } from '../chevron';
 
-export function MenuButton() : ElementNode {
+export function MenuButton({ color = TEXT_COLOR.BLACK } : { color? : $Values<typeof TEXT_COLOR> } = {}) : ElementNode {
     return (
@@ -17,5 +17,5 @@ <div
             class={ CLASS.MENU_TOGGLE }>
-            <Chevron />
+            <Chevron color={ color } />
         </div>
     );
 }

src/ui/buttons/styles/button.js

@@ -6,3 +6,3 @@ /* @flow */
 
-import { BUTTON_COLOR, CLASS } from '../../../constants';
+import { CLASS } from '../../../constants';
 
@@ -39,6 +39,2 @@ export const buttonStyle = `
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.TRANSPARENT } {
-        cursor: auto;
-    }
-
     .${ CLASS.BUTTON } * {
@@ -45,0 +41,0 @@ cursor: pointer;

src/ui/buttons/styles/color.js

 /* @flow */
 
-import { BUTTON_COLOR, CLASS } from '../../../constants';
+import { BUTTON_COLOR, CLASS, TEXT_COLOR } from '../../../constants';
 
 export const buttonColorStyle = `
 
+
+    .${ CLASS.BUTTON }.${ CLASS.TEXT_COLOR }-${ TEXT_COLOR.BLACK } {
+        color: #2C2E2F;
+    }
+
+    .${ CLASS.BUTTON }.${ CLASS.TEXT_COLOR }-${ TEXT_COLOR.WHITE } {
+        color: #fff;
+    }
+
+
     .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.GOLD } {
         background: #ffc439;
-        color: #111;
     }
@@ -26,3 +35,2 @@
         background: #009cde;
-        color: #fff;
     }
@@ -43,3 +51,2 @@
         background: #eee;
-        color: #111;
     }
@@ -60,3 +67,2 @@
         background: #003087;
-        color: #fff;
     }
@@ -77,3 +83,2 @@
         background: #2C2E2F;
-        color: #fff;
     }
@@ -94,3 +99,2 @@
         background: #fff;
-        color: #2C2E2F;
         border: 1px solid #2C2E2F;
@@ -109,10 +113,2 @@ }
 
-
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.TRANSPARENT } {
-        background: transparent;
-        color: #111;
-    }
-
-
-
     .${ CLASS.BUTTON } .${ CLASS.CARD } {
@@ -119,0 +115,0 @@ position: relative;

src/ui/chevron.jsx

@@ -7,3 +7,7 @@ /* @flow */
 
-export function Chevron() : ComponentNode<{||}> {
+type ChevronProps = {|
+    color? : string
+|};
+
+export function Chevron({ color = '#848484' } : ChevronProps = {}) : ComponentNode<{||}> {
     return (
@@ -14,3 +18,3 @@ <SVGLogo
                 <svg width="256" height="158.18601989746094" viewBox="-1.935 0.221 256 158.186" xmlns="http://www.w3.org/2000/svg">
-                    <polygon points="223.878 0.221 126.065 98.034 28.252 0.221 -1.935 30.407 126.065 158.407 254.065 30.407" transform="matrix(1, 0, 0, 1, 0, 0)" style="fill: rgb(134, 132, 132);" />
+                    <polygon points="223.878 0.221 126.065 98.034 28.252 0.221 -1.935 30.407 126.065 158.407 254.065 30.407" transform="matrix(1, 0, 0, 1, 0, 0)" fill={ color } />
                 </svg>
@@ -17,0 +21,0 @@ ) }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

751075

decreased by-1.02%

Lines of code

4602

decreased by-2.13%

No dependency changes