@paypal/checkout-components 5.0.256 → 5.0.258

package/src/ui/buttons/script.jsx

@@ -1,176 +1,198 @@
 /* @flow */
 /** @jsx node */
 
-import { node, type ElementNode } from '@krakenjs/jsx-pragmatic/src';
-
-export function getComponentScript() : () => void {
-
-    /* istanbul ignore next */
-    return () => {
-
-        const ATTRIBUTE = {
-            OPTIONAL: 'optional'
-        };
-
-        const CLASS = {
-            HIDDEN:    'hidden',
-            DOM_READY: 'dom-ready'
-        };
-
-        const SELECTOR = {
-            OPTIONAL: `[${ ATTRIBUTE.OPTIONAL }]`
-        };
-
-        const TAG = {
-            STYLE: 'style'
-        };
-
-        function once(handler : Function) : Function {
-            let called = false;
-            return (...args) => {
-                if (!called) {
-                    called = true;
-                    handler(...args);
-                }
-            };
-        }
-
-        function debounce(handler : Function, time : number = 50) : Function {
-            let timeout;
-            return (...args) => {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => {
-                    handler(...args);
-                }, time);
-            };
-        }
-
-        // eslint-disable-next-line flowtype/no-mutable-array
-        function toArray<T>(item) : Array<T> {
-            // $FlowFixMe[method-unbinding]
-            return Array.prototype.slice.call(item);
-        }
-
-        function elementArray(elements : HTMLCollection<HTMLElement> | NodeList<HTMLElement> | $ReadOnlyArray<HTMLElement>) : $ReadOnlyArray<HTMLElement> {
-            return toArray(elements).filter(el => {
-                return el.tagName.toLowerCase() !== TAG.STYLE;
-            });
-        }
-
-        function getElements(selector, parent) : $ReadOnlyArray<HTMLElement> {
-            parent = parent || document;
-            return elementArray(parent.querySelectorAll(selector));
-        }
-
-        function getParent(element : HTMLElement) : HTMLElement {
-            // $FlowFixMe
-            return element.parentElement;
-        }
-
-        function showElement(el : HTMLElement) {
-            el.classList.remove(CLASS.HIDDEN);
-        }
-
-        function hideElement(el : HTMLElement) {
-            el.classList.add(CLASS.HIDDEN);
-        }
-
-        function sum(arr : $ReadOnlyArray<number>) : number {
-            let result = 0;
-            for (const item of arr) {
-                result += item;
-            }
-            return result;
-        }
-
-        function unique<T>(arr : $ReadOnlyArray<T>) : $ReadOnlyArray<T> {
-            const result = [];
+import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
 
-            for (const el of arr) {
-                if (result.indexOf(el) === -1) {
-                    result.push(el);
-                }
-            }
-
-            return result;
-        }
-
-        function getAllChildren(element : HTMLElement) : $ReadOnlyArray<HTMLElement> {
-            return elementArray(element.children);
-        }
-
-        function getOptionalIndex(element : HTMLElement) : number {
-            return parseInt(element.getAttribute(ATTRIBUTE.OPTIONAL) || 0, 10);
-        }
+export function getComponentScript(): () => void {
+  /* istanbul ignore next */
+  return () => {
+    const ATTRIBUTE = {
+      OPTIONAL: "optional",
+    };
 
-        function getElementsTotalWidth(elements : $ReadOnlyArray<HTMLElement>) : number {
-            return sum(elements.map(child => child.offsetWidth));
-        }
+    const CLASS = {
+      HIDDEN: "hidden",
+      DOM_READY: "dom-ready",
+    };
 
-        function getOptionalParents() : $ReadOnlyArray<HTMLElement> {
-            return unique(getElements(SELECTOR.OPTIONAL).map(getParent).filter(Boolean));
-        }
+    const SELECTOR = {
+      OPTIONAL: `[${ATTRIBUTE.OPTIONAL}]`,
+    };
 
-        function getOptionalChildren(parent : HTMLElement) : $ReadOnlyArray<HTMLElement> {
-            return toArray(getElements(SELECTOR.OPTIONAL, parent)).sort((first, second) => {
-                return getOptionalIndex(first) - getOptionalIndex(second);
-            });
-        }
+    const TAG = {
+      STYLE: "style",
+    };
 
-        const children = getOptionalParents().map(optionalParent => {
-            const allChildren = getAllChildren(optionalParent);
-            const optionalChildren = getOptionalChildren(optionalParent);
-
-            return {
-                optionalParent,
-                allChildren,
-                optionalChildren
-            };
-        });
-
-        function toggleOptionals() {
-            for (const { optionalParent, allChildren, optionalChildren } of children) {
-                const parentWidth = optionalParent.offsetWidth;
-                let usedWidth = getElementsTotalWidth(allChildren) - getElementsTotalWidth(optionalChildren);
-
-                for (const optionalChild of optionalChildren) {
-                    usedWidth += optionalChild.offsetWidth;
-
-                    if (usedWidth > parentWidth) {
-                        hideElement(optionalChild);
-                    } else {
-                        showElement(optionalChild);
-                    }
-                }
-            }
-        }
+    function once(handler: Function): Function {
+      let called = false;
+      return (...args) => {
+        if (!called) {
+          called = true;
+          handler(...args);
+        }
+      };
+    }
+
+    function debounce(handler: Function, time: number = 50): Function {
+      let timeout;
+      return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          handler(...args);
+        }, time);
+      };
+    }
+
+    // eslint-disable-next-line flowtype/no-mutable-array
+    function toArray<T>(item): Array<T> {
+      // $FlowFixMe[method-unbinding]
+      return Array.prototype.slice.call(item);
+    }
+
+    function elementArray(
+      elements:
+        | HTMLCollection<HTMLElement>
+        | NodeList<HTMLElement>
+        | $ReadOnlyArray<HTMLElement>
+    ): $ReadOnlyArray<HTMLElement> {
+      return toArray(elements).filter((el) => {
+        return el.tagName.toLowerCase() !== TAG.STYLE;
+      });
+    }
+
+    function getElements(selector, parent): $ReadOnlyArray<HTMLElement> {
+      parent = parent || document;
+      return elementArray(parent.querySelectorAll(selector));
+    }
+
+    function getParent(element: HTMLElement): HTMLElement {
+      // $FlowFixMe
+      return element.parentElement;
+    }
+
+    function showElement(el: HTMLElement) {
+      el.classList.remove(CLASS.HIDDEN);
+    }
+
+    function hideElement(el: HTMLElement) {
+      el.classList.add(CLASS.HIDDEN);
+    }
+
+    function sum(arr: $ReadOnlyArray<number>): number {
+      let result = 0;
+      for (const item of arr) {
+        result += item;
+      }
+      return result;
+    }
+
+    function unique<T>(arr: $ReadOnlyArray<T>): $ReadOnlyArray<T> {
+      const result = [];
+
+      for (const el of arr) {
+        if (result.indexOf(el) === -1) {
+          result.push(el);
+        }
+      }
+
+      return result;
+    }
+
+    function getAllChildren(element: HTMLElement): $ReadOnlyArray<HTMLElement> {
+      return elementArray(element.children);
+    }
+
+    function getOptionalIndex(element: HTMLElement): number {
+      return parseInt(element.getAttribute(ATTRIBUTE.OPTIONAL) || 0, 10);
+    }
+
+    function getElementsTotalWidth(
+      elements: $ReadOnlyArray<HTMLElement>
+    ): number {
+      return sum(elements.map((child) => child.offsetWidth));
+    }
+
+    function getOptionalParents(): $ReadOnlyArray<HTMLElement> {
+      return unique(
+        getElements(SELECTOR.OPTIONAL).map(getParent).filter(Boolean)
+      );
+    }
+
+    function getOptionalChildren(
+      parent: HTMLElement
+    ): $ReadOnlyArray<HTMLElement> {
+      return toArray(getElements(SELECTOR.OPTIONAL, parent)).sort(
+        (first, second) => {
+          return getOptionalIndex(first) - getOptionalIndex(second);
+        }
+      );
+    }
+
+    const children = getOptionalParents().map((optionalParent) => {
+      const allChildren = getAllChildren(optionalParent);
+      const optionalChildren = getOptionalChildren(optionalParent);
+
+      return {
+        optionalParent,
+        allChildren,
+        optionalChildren,
+      };
+    });
+
+    function toggleOptionals() {
+      for (const {
+        optionalParent,
+        allChildren,
+        optionalChildren,
+      } of children) {
+        const parentWidth = optionalParent.offsetWidth;
+        let usedWidth =
+          getElementsTotalWidth(allChildren) -
+          getElementsTotalWidth(optionalChildren);
+
+        for (const optionalChild of optionalChildren) {
+          usedWidth += optionalChild.offsetWidth;
+
+          if (usedWidth > parentWidth) {
+            hideElement(optionalChild);
+          } else {
+            showElement(optionalChild);
+          }
+        }
+      }
+    }
+
+    const setDomReady = once(
+      debounce(() => {
+        window.addEventListener("resize", toggleOptionals);
+        setTimeout(toggleOptionals);
+        if (document.body) {
+          document.body.classList.add(CLASS.DOM_READY);
+        }
+      })
+    );
 
-        const setDomReady = once(debounce(() => {
-            window.addEventListener('resize', toggleOptionals);
-            setTimeout(toggleOptionals);
-            if (document.body) {
-                document.body.classList.add(CLASS.DOM_READY);
-            }
-        }));
-
-        const load = () => {
-            toggleOptionals();
-            setDomReady();
-        };
-
-        toggleOptionals();
-        document.addEventListener('DOMContentLoaded', load);
-        window.addEventListener('load', load);
-        window.addEventListener('resize', load);
+    const load = () => {
+      toggleOptionals();
+      setDomReady();
     };
+
+    toggleOptionals();
+    document.addEventListener("DOMContentLoaded", load);
+    window.addEventListener("load", load);
+    window.addEventListener("resize", load);
+  };
 }
 
 type ScriptProps = {|
-    nonce : ?string
+  nonce: ?string,
 |};
 
-export function Script({ nonce } : ScriptProps) : ElementNode {
-    return (
-        <script nonce={ nonce } innerHTML={ `(${ getComponentScript().toString() })()` } />
-    );
+export function Script({ nonce }: ScriptProps): ElementNode {
+  return (
+    <script
+      nonce={nonce}
+      innerHTML={`(${getComponentScript().toString()})()`}
+    />
+  );
 }

package/src/ui/buttons/spinner.jsx

@@ -1,12 +1,10 @@
 /* @flow */
 /** @jsx node */
 
-import { node, type ElementNode } from '@krakenjs/jsx-pragmatic/src';
+import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
 
-import { CLASS } from '../../constants';
+import { CLASS } from "../../constants";
 
-export function Spinner() : ?ElementNode {
-    return (
-        <div class={ CLASS.SPINNER } />
-    );
+export function Spinner(): ?ElementNode {
+  return <div class={CLASS.SPINNER} />;
 }

package/src/ui/buttons/style.jsx

@@ -1,24 +1,25 @@
 /* @flow */
 /** @jsx node */
 
-import { node, type ElementNode } from '@krakenjs/jsx-pragmatic/src';
-import { type FundingEligibilityType } from '@paypal/sdk-constants/src';
+import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
+import { type FundingEligibilityType } from "@paypal/sdk-constants/src";
 
-import { type ButtonStyle } from './props';
-import { componentStyle } from './styles';
+import { type ButtonStyle } from "./props";
+import { componentStyle } from "./styles";
 
 type StyleProps = {|
-    style : ButtonStyle,
-    nonce : string,
-    fundingEligibility : FundingEligibilityType
+  style: ButtonStyle,
+  nonce: string,
+  fundingEligibility: FundingEligibilityType,
 |};
 
-export function Style({ style, nonce, fundingEligibility } : StyleProps) : ElementNode {
+export function Style({
+  style,
+  nonce,
+  fundingEligibility,
+}: StyleProps): ElementNode {
+  const { custom = { label: undefined, css: undefined }, height } = style;
+  const css = componentStyle({ custom, height, fundingEligibility });
 
-    const { custom = { label: undefined, css: undefined }, height } = style;
-    const css = componentStyle({ custom, height, fundingEligibility });
-
-    return (
-        <style nonce={ nonce } innerHTML={ css } />
-    );
+  return <style nonce={nonce} innerHTML={css} />;
 }

package/src/ui/buttons/styles/base.js

@@ -1,23 +1,31 @@
 /* @flow */
 
-import { type FundingEligibilityType } from '@paypal/sdk-constants/src';
+import { type FundingEligibilityType } from "@paypal/sdk-constants/src";
 
-import type { CustomStyle } from '../../../types';
+import type { CustomStyle } from "../../../types";
 
-import { pageStyle } from './page';
-import { buttonStyle } from './button';
-import { labelStyle } from './labels';
-import { buttonResponsiveStyle } from './responsive';
-import { buttonColorStyle } from './color';
-import { customStyle } from './custom';
+import { pageStyle } from "./page";
+import { buttonStyle } from "./button";
+import { labelStyle } from "./labels";
+import { buttonResponsiveStyle } from "./responsive";
+import { buttonColorStyle } from "./color";
+import { customStyle } from "./custom";
 
-export function componentStyle({ custom, height, fundingEligibility } : {| custom? : ?CustomStyle, height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
-    return `
-        ${ pageStyle }
-        ${ buttonStyle }
-        ${ buttonColorStyle }
-        ${ labelStyle }
-        ${ buttonResponsiveStyle({ height, fundingEligibility }) }
-        ${ customStyle({ custom }) }
+export function componentStyle({
+  custom,
+  height,
+  fundingEligibility,
+}: {|
+  custom?: ?CustomStyle,
+  height?: ?number,
+  fundingEligibility: FundingEligibilityType,
+|}): string {
+  return `
+        ${pageStyle}
+        ${buttonStyle}
+        ${buttonColorStyle}
+        ${labelStyle}
+        ${buttonResponsiveStyle({ height, fundingEligibility })}
+        ${customStyle({ custom })}
     `;
 }

package/src/ui/buttons/styles/button.js

@@ -1,15 +1,15 @@
 /* @flow */
 
-import { ENV } from '@paypal/sdk-constants/src';
-import { LOGO_CLASS } from '@paypal/sdk-logos/src';
+import { ENV } from "@paypal/sdk-constants/src";
+import { LOGO_CLASS } from "@paypal/sdk-logos/src";
 
-import { CLASS } from '../../../constants';
+import { CLASS } from "../../../constants";
 
 const MIN_VAULT_BUTTON_WIDTH = 250;
 
 export const buttonStyle = `
 
-    .${ CLASS.CONTAINER } {
+    .${CLASS.CONTAINER} {
         display: block;
         white-space: nowrap;
         margin: 0;
@@ -25,7 +25,7 @@ export const buttonStyle = `
         box-sizing: border-box;
     }
 
-    .${ CLASS.BUTTON } {
+    .${CLASS.BUTTON} {
         border: 1px solid transparent;
         border-radius: 0 3px 3px 0;
         position: relative;
@@ -37,22 +37,22 @@ export const buttonStyle = `
         overflow: hidden;
     }
 
-    .${ CLASS.BUTTON } * {
+    .${CLASS.BUTTON} * {
         cursor: pointer;
     }
 
-    .${ CLASS.CONTAINER }.${ CLASS.ENV }-${ ENV.TEST } .${ CLASS.TEXT } {
+    .${CLASS.CONTAINER}.${CLASS.ENV}-${ENV.TEST} .${CLASS.TEXT} {
         font-family: Arial !important;
         background: rgba(0, 0, 0, 0.5) !important;
         color: transparent  !important;
         text-shadow: none  !important;
     }
 
-    .${ CLASS.CARD } {
+    .${CLASS.CARD} {
         cursor: pointer;
     }
 
-    .${ LOGO_CLASS.LOGO } {
+    .${LOGO_CLASS.LOGO} {
         padding: 0;
         display: inline-block;
         background: none;
@@ -60,25 +60,25 @@ export const buttonStyle = `
         width: auto;
     }
 
-    .${ CLASS.TEXT }, .${ CLASS.SPACE } {
+    .${CLASS.TEXT}, .${CLASS.SPACE} {
         display: inline-block;
         white-space: pre;
         vertical-align: top;
     }
 
-    .${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
+    .${CLASS.BUTTON} > .${CLASS.BUTTON_LABEL} {
         position: relative;
         top: 50%;
         transform: translateY(-50%);
     }
 
-    .${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } * {
+    .${CLASS.BUTTON} > .${CLASS.BUTTON_LABEL} * {
         vertical-align: middle;
         height: 100%;
         text-align: left;
     }
 
-    .${ CLASS.TAGLINE } {
+    .${CLASS.TAGLINE} {
         max-width: 100%;
         font-size: initial;
         font-weight: normal;
@@ -87,7 +87,7 @@ export const buttonStyle = `
         width: auto;
     }
 
-    .${ CLASS.BUTTON } .${ CLASS.SPINNER } {
+    .${CLASS.BUTTON} .${CLASS.SPINNER} {
         position: absolute;
         height: 40px;
         width: 40px;
@@ -98,10 +98,10 @@ export const buttonStyle = `
         border: 3px solid rgba(0, 0, 0, .2);
         border-top-color: rgba(33, 128, 192, 0.8);
         border-radius: 100%;
-        animation: ${ CLASS.SPINNER }-rotation .7s infinite linear;
+        animation: ${CLASS.SPINNER}-rotation .7s infinite linear;
     }
 
-    @keyframes ${ CLASS.SPINNER }-rotation {
+    @keyframes ${CLASS.SPINNER}-rotation {
         from {
             transform: translateX(-50%) translateY(-50%) rotate(0deg);
         }
@@ -110,24 +110,26 @@ export const buttonStyle = `
         }
     }
 
-    .${ CLASS.BUTTON } .${ CLASS.SPINNER } {
+    .${CLASS.BUTTON} .${CLASS.SPINNER} {
         display: none !important;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.LOADING } * {
+    .${CLASS.BUTTON}.${CLASS.LOADING} * {
         display: none !important;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.LOADING } .${ CLASS.SPINNER } {
+    .${CLASS.BUTTON}.${CLASS.LOADING} .${CLASS.SPINNER} {
         display: block !important;
     }
 
-    .${ CLASS.CONTAINER } .${ CLASS.VAULT_HEADER } {
+    .${CLASS.CONTAINER} .${CLASS.VAULT_HEADER} {
         margin-top: 10px;
     }
 
-    @media only screen and (max-width: ${ MIN_VAULT_BUTTON_WIDTH - 1 }px) {
-        .${ CLASS.CONTAINER } .${ CLASS.BUTTON_ROW }.${ CLASS.WALLET }.${ CLASS.WALLET_MENU } .${ CLASS.BUTTON }  {
+    @media only screen and (max-width: ${MIN_VAULT_BUTTON_WIDTH - 1}px) {
+        .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW}.${CLASS.WALLET}.${
+  CLASS.WALLET_MENU
+} .${CLASS.BUTTON}  {
             border-top-right-radius: 4px;
             border-bottom-right-radius: 4px;
             width: 100%;