@paypal/checkout-components 5.0.256 → 5.0.258

package/src/ui/loading.jsx

@@ -1,14 +1,21 @@
 /* @flow */
 /** @jsx node */
 
-import { node, Fragment, type ChildType } from '@krakenjs/jsx-pragmatic/src';
+import { node, Fragment, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 
-export function LoadingDots({ color = 'rgba(0, 0, 0, 0.5)', delay = 0.2 } : {| color : string, delay : number |}) : ChildType {
-    return (
-        <Fragment>
-            <style innerHTML={ `
+export function LoadingDots({
+  color = "rgba(0, 0, 0, 0.5)",
+  delay = 0.2,
+}: {|
+  color: string,
+  delay: number,
+|}): ChildType {
+  return (
+    <Fragment>
+      <style
+        innerHTML={`
                 .loading-dots {
-                    color: ${ color };
+                    color: ${color};
                     font-size: inherit;
                     display: inline-block;
                 }
@@ -24,15 +31,15 @@ export function LoadingDots({ color = 'rgba(0, 0, 0, 0.5)', delay = 0.2 } : {| c
                 }
 
                 .loading-dot-0 {
-                    animation-delay: ${ delay.toFixed(1) }s;
+                    animation-delay: ${delay.toFixed(1)}s;
                 }
 
                 .loading-dot-1 {
-                    animation-delay: ${ (delay * 2).toFixed(1) }s;
+                    animation-delay: ${(delay * 2).toFixed(1)}s;
                 }
 
                 .loading-dot-2 {
-                    animation-delay: ${ (delay * 3).toFixed(1) }s;
+                    animation-delay: ${(delay * 3).toFixed(1)}s;
                 }
 
                 @keyframes loading-dot {
@@ -52,14 +59,14 @@ export function LoadingDots({ color = 'rgba(0, 0, 0, 0.5)', delay = 0.2 } : {| c
                         opacity: 0;
                     }
                 }
-            ` } />
+            `}
+      />
 
-            <div class='loading-dots'>
-                {
-                    [ 0, 1, 2 ].map(i =>
-                        <div class={ `loading-dot loading-dot-${ i }` }>•</div>)
-                }
-            </div>
-        </Fragment>
-    );
+      <div class="loading-dots">
+        {[0, 1, 2].map((i) => (
+          <div class={`loading-dot loading-dot-${i}`}>•</div>
+        ))}
+      </div>
+    </Fragment>
+  );
 }

package/src/ui/text/index.js

@@ -1,3 +1,3 @@
 /* @flow */
 
-export * from './text';
+export * from "./text";

package/src/ui/text/style.scoped.scss

@@ -1,32 +1,31 @@
-
 .placeholder {
-    display: inline-block;
-    color: transparent;
-    background: #fff;
-    opacity: 0.15;
-    border-radius: 2px;
-    animation: 1s loading-placeholder ease-in-out infinite;
-    position: relative;
-    top: 10%;
-    height: 80%;
+  display: inline-block;
+  color: transparent;
+  background: #fff;
+  opacity: 0.15;
+  border-radius: 2px;
+  animation: 1s loading-placeholder ease-in-out infinite;
+  position: relative;
+  top: 10%;
+  height: 80%;
 
-    &.color-black {
-        background: #000;
-    }
+  &.color-black {
+    background: #000;
+  }
 
-    &.color-white {
-        background: #fff;
-    }
+  &.color-white {
+    background: #fff;
+  }
 }
 
 @keyframes loading-placeholder {
-    0% {
-        opacity: 0.15;
-    }
-    50% {
-        opacity: 0.3
-    }
-    100% {
-        opacity: 0.15;
-    }
-}
+  0% {
+    opacity: 0.15;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}

package/src/ui/text/text.jsx

@@ -1,37 +1,59 @@
 /* @flow */
 /** @jsx node */
 
-import { node, Style, type ChildType, type NullableChildrenType } from '@krakenjs/jsx-pragmatic/src';
+import {
+  node,
+  Style,
+  type ChildType,
+  type NullableChildrenType,
+} from "@krakenjs/jsx-pragmatic/src";
 
-import { CLASS, TEXT_COLOR } from '../../constants';
+import { CLASS, TEXT_COLOR } from "../../constants";
 
-import css from './style.scoped.scss';
+import css from "./style.scoped.scss";
 
 type TextProps = {|
-    optional? : boolean | number,
-    className? : $ReadOnlyArray<string>,
-    animate? : boolean, children : NullableChildrenType
+  optional?: boolean | number,
+  className?: $ReadOnlyArray<string>,
+  animate?: boolean,
+  children: NullableChildrenType,
 |};
 
-export function Text({ optional, className = [], animate, ...rest } : TextProps, children : NullableChildrenType) : ChildType {
-    return (
-        <span class={ [ CLASS.TEXT, ...className, animate || CLASS.IMMEDIATE ].filter(Boolean).join(' ') } optional={ optional } { ...rest }>{ children }</span>
-    );
+export function Text(
+  { optional, className = [], animate, ...rest }: TextProps,
+  children: NullableChildrenType
+): ChildType {
+  return (
+    <span
+      class={[CLASS.TEXT, ...className, animate || CLASS.IMMEDIATE]
+        .filter(Boolean)
+        .join(" ")}
+      optional={optional}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
 }
 
-export function Space() : ChildType {
-    return <span class={ [ CLASS.SPACE ].join(' ') }>{' '}</span>;
+export function Space(): ChildType {
+  return <span class={[CLASS.SPACE].join(" ")}> </span>;
 }
 
 type PlaceHolderProps = {|
-    chars : number,
-    color? : $Values<typeof TEXT_COLOR>
+  chars: number,
+  color?: $Values<typeof TEXT_COLOR>,
 |};
 
-export function PlaceHolder({ chars, color = TEXT_COLOR.WHITE } : PlaceHolderProps) : ChildType {
-    return (
-        <Style css={ css }>
-            <div class={ [ 'placeholder', `color-${ color }`  ].join(' ') }>{ new Array(chars).fill('x').join('') }</div>
-        </Style>
-    );
+export function PlaceHolder({
+  chars,
+  color = TEXT_COLOR.WHITE,
+}: PlaceHolderProps): ChildType {
+  return (
+    <Style css={css}>
+      <div class={["placeholder", `color-${color}`].join(" ")}>
+        {new Array(chars).fill("x").join("")}
+      </div>
+    </Style>
+  );
 }

package/src/ui/tracking.jsx

@@ -1,22 +1,29 @@
 /* @flow */
 /** @jsx node */
 
-import { node, Fragment, type ChildType } from '@krakenjs/jsx-pragmatic/src';
+import { node, Fragment, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 
-export function TrackingBeacon({ url, nonce } : {| url : string, nonce : ?string |}) : ChildType {
-    return (
-        <Fragment>
-            <style
-                nonce={ nonce }
-                innerHTML={ `
+export function TrackingBeacon({
+  url,
+  nonce,
+}: {|
+  url: string,
+  nonce: ?string,
+|}): ChildType {
+  return (
+    <Fragment>
+      <style
+        nonce={nonce}
+        innerHTML={`
                     .tracking-beacon {
                         visibility: hidden;
                         position: absolute;
                         height: 1px;
                         width: 1px;
                     }
-                ` } />
-            <img class='tracking-beacon' src={ url } />
-        </Fragment>
-    );
+                `}
+      />
+      <img class="tracking-beacon" src={url} />
+    </Fragment>
+  );
 }