@paypal/checkout-components 5.0.256 → 5.0.258

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

@@ -1,11 +1,19 @@
 /* @flow */
 
-import { max, perc, roundUp } from '@krakenjs/belter/src';
-import { FUNDING, type FundingEligibilityType } from '@paypal/sdk-constants/src';
-
-import { BUTTON_SHAPE, BUTTON_LAYOUT, BUTTON_NUMBER, CLASS, ATTRIBUTE } from '../../../constants';
-import { BUTTON_SIZE_STYLE, BUTTON_RELATIVE_STYLE } from '../config';
-
+import { max, perc, roundUp } from "@krakenjs/belter/src";
+import {
+  FUNDING,
+  type FundingEligibilityType,
+} from "@paypal/sdk-constants/src";
+
+import {
+  BUTTON_SHAPE,
+  BUTTON_LAYOUT,
+  BUTTON_NUMBER,
+  CLASS,
+  ATTRIBUTE,
+} from "../../../constants";
+import { BUTTON_SIZE_STYLE, BUTTON_RELATIVE_STYLE } from "../config";
 
 const BUTTON_MIN_ASPECT_RATIO = 2.2;
 const MIN_SPLIT_BUTTON_WIDTH = 300;
@@ -13,197 +21,297 @@ const MIN_SPLIT_BUTTON_WIDTH = 300;
 const FIRST_BUTTON_PERC = 50;
 const WALLET_BUTTON_PERC = 60;
 
-export function buttonResponsiveStyle({ height, fundingEligibility } : {| height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
-
-    return Object.keys(BUTTON_SIZE_STYLE).map(size => {
-
-        const style = BUTTON_SIZE_STYLE[size];
-        const buttonHeight = height || style.defaultHeight;
-        const minDualWidth = Math.max(Math.round(buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)), MIN_SPLIT_BUTTON_WIDTH);
-
-        const { paylater } = fundingEligibility;
-        const shouldResizeLabel =
-            paylater?.products?.paylater?.variant === 'DE' ||
-            paylater?.products?.payIn3?.variant === 'IT' ||
-            paylater?.products?.payIn3?.variant === 'ES';
-
-        const textPercPercentage = shouldResizeLabel ? 32 : 36;
-        const labelPercPercentage = shouldResizeLabel ? 32 : 35;
-        const smallerLabelHeight = max(roundUp(perc(buttonHeight, labelPercPercentage) + 5, 2), 12);
-
-        const labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
-
-        return `
-            @media only screen and (min-width: ${ style.minWidth }px) {
-
-                .${ CLASS.CONTAINER } {
-                    min-width: ${ style.minWidth }px;
-                    max-width: ${ style.maxWidth }px;
-                }
-
-                .${ CLASS.CONTAINER } .${ CLASS.BUTTON_ROW } .${ CLASS.TEXT }, .${ CLASS.CONTAINER } .${ CLASS.BUTTON_ROW } .${ CLASS.SPACE } {
-                    font-size: ${ max(perc(buttonHeight, 36), 10) }px;
-                    margin-top: -${ perc(max(perc(buttonHeight, 36), 10), 10) }px;
-                    line-height: ${ labelHeight }px;
-                }
-
-                .${ CLASS.CONTAINER } .${ CLASS.BUTTON_ROW } .${ CLASS.TEXT } * {
-                    margin-top: ${ perc(max(perc(buttonHeight, 36), 10), 10) }px;
-                }
-
-                .${ CLASS.BUTTON_ROW } {
-                    height: ${ buttonHeight }px;
+export function buttonResponsiveStyle({
+  height,
+  fundingEligibility,
+}: {|
+  height?: ?number,
+  fundingEligibility: FundingEligibilityType,
+|}): string {
+  return Object.keys(BUTTON_SIZE_STYLE)
+    .map((size) => {
+      const style = BUTTON_SIZE_STYLE[size];
+      const buttonHeight = height || style.defaultHeight;
+      const minDualWidth = Math.max(
+        Math.round(
+          buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)
+        ),
+        MIN_SPLIT_BUTTON_WIDTH
+      );
+
+      const { paylater } = fundingEligibility;
+      const shouldResizeLabel =
+        paylater?.products?.paylater?.variant === "DE" ||
+        paylater?.products?.payIn3?.variant === "IT" ||
+        paylater?.products?.payIn3?.variant === "ES";
+
+      const textPercPercentage = shouldResizeLabel ? 32 : 36;
+      const labelPercPercentage = shouldResizeLabel ? 32 : 35;
+      const smallerLabelHeight = max(
+        roundUp(perc(buttonHeight, labelPercPercentage) + 5, 2),
+        12
+      );
+
+      const labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
+
+      return `
+            @media only screen and (min-width: ${style.minWidth}px) {
+
+                .${CLASS.CONTAINER} {
+                    min-width: ${style.minWidth}px;
+                    max-width: ${style.maxWidth}px;
+                }
+
+                .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, .${
+        CLASS.CONTAINER
+      } .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+                    font-size: ${max(perc(buttonHeight, 36), 10)}px;
+                    margin-top: -${perc(max(perc(buttonHeight, 36), 10), 10)}px;
+                    line-height: ${labelHeight}px;
+                }
+
+                .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT} * {
+                    margin-top: ${perc(max(perc(buttonHeight, 36), 10), 10)}px;
+                }
+
+                .${CLASS.BUTTON_ROW} {
+                    height: ${buttonHeight}px;
                     vertical-align: top;
-                    min-height: ${ height || style.minHeight }px;
-                    max-height: ${ height || style.maxHeight }px;
+                    min-height: ${height || style.minHeight}px;
+                    max-height: ${height || style.maxHeight}px;
                 }
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL } {
-                    margin-bottom: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN) }px;
+                .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL} {
+                    margin-bottom: ${perc(
+                      buttonHeight,
+                      BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN
+                    )}px;
                 }
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL }:last-of-type {
+                .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
+        BUTTON_LAYOUT.VERTICAL
+      }:last-of-type {
                     margin-bottom: 0;
                 }
 
-                .${ CLASS.BUTTON } {
+                .${CLASS.BUTTON} {
                     display: inline-block;
                     text-align: center;
                     height: 100%;
                 }
                 
-                .${ CLASS.BUTTON } .${ CLASS.SPINNER } {
-                    height: ${ perc(buttonHeight, 50) }px;
-                    width: ${ perc(buttonHeight, 50) }px;
+                .${CLASS.BUTTON} .${CLASS.SPINNER} {
+                    height: ${perc(buttonHeight, 50)}px;
+                    width: ${perc(buttonHeight, 50)}px;
                 }
 
-                .${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
+                .${CLASS.BUTTON} > .${CLASS.BUTTON_LABEL} {
                     margin: 0px 4vw;
-                    height: ${ labelHeight }px;
+                    height: ${labelHeight}px;
                 }
 
-                .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.APPLEPAY }] .${ CLASS.BUTTON_LABEL } {
-                    height: ${ perc(buttonHeight, 80) + 5 }px;
+                .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
+        FUNDING.APPLEPAY
+      }] .${CLASS.BUTTON_LABEL} {
+                    height: ${perc(buttonHeight, 80) + 5}px;
                 }
 
-                .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.APPLEPAY }] .${ CLASS.BUTTON_LABEL } .${ CLASS.TEXT } {
-                    line-height: ${ perc(buttonHeight, 80) + 5 }px;
+                .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
+        FUNDING.APPLEPAY
+      }] .${CLASS.BUTTON_LABEL} .${CLASS.TEXT} {
+                    line-height: ${perc(buttonHeight, 80) + 5}px;
                 }
 
-                .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL },
-                .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
-                    height: ${ perc(buttonHeight, 50) + 5 }px;
+                .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
+        CLASS.BUTTON_LABEL
+      },
+                .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
+        FUNDING.MYBANK
+      }] .${CLASS.BUTTON_LABEL} {
+                    height: ${perc(buttonHeight, 50) + 5}px;
                 }
 
-                .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL } .${ CLASS.TEXT },
-                .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL } .${ CLASS.SPACE },
-                .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } .${ CLASS.TEXT },
-                .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } .${ CLASS.SPACE } {
-                    line-height: ${ perc(buttonHeight, 50) + 5 }px;
+                .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
+        CLASS.BUTTON_LABEL
+      } .${CLASS.TEXT},
+                .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
+        CLASS.BUTTON_LABEL
+      } .${CLASS.SPACE},
+                .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
+        FUNDING.MYBANK
+      }] .${CLASS.BUTTON_LABEL} .${CLASS.TEXT},
+                .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
+        FUNDING.MYBANK
+      }] .${CLASS.BUTTON_LABEL} .${CLASS.SPACE} {
+                    line-height: ${perc(buttonHeight, 50) + 5}px;
                 }
 
-                .${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.RECT } {
+                .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
                     border-radius: 4px;
                 }
 
-                .${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.PILL } {
-                    border-radius: ${ Math.ceil(buttonHeight / 2) }px;
+                .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+                    border-radius: ${Math.ceil(buttonHeight / 2)}px;
                 }
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.RECT } .menu-button {
+                .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.RECT
+      } .menu-button {
                     border-top-right-radius: 4px;
                     border-bottom-right-radius: 4px;
                 }
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.PILL } .menu-button {
-                    border-top-right-radius: ${ Math.ceil(buttonHeight / 2) }px;
-                    border-bottom-right-radius: ${ Math.ceil(buttonHeight / 2) }px;
+                .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.PILL
+      } .menu-button {
+                    border-top-right-radius: ${Math.ceil(buttonHeight / 2)}px;
+                    border-bottom-right-radius: ${Math.ceil(
+                      buttonHeight / 2
+                    )}px;
                 }
                 
-                .${ CLASS.TAGLINE } .${ CLASS.TEXT } {
-                    height: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE) }px;
-                    line-height: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE) }px;
-                }
-
-                .${ CLASS.CARD } {
+                .${CLASS.TAGLINE} .${CLASS.TEXT} {
+                    height: ${perc(
+                      buttonHeight,
+                      BUTTON_RELATIVE_STYLE.TAGLINE
+                    )}px;
+                    line-height: ${perc(
+                      buttonHeight,
+                      BUTTON_RELATIVE_STYLE.TAGLINE
+                    )}px;
+                }
+
+                .${CLASS.CARD} {
                     display: inline-block;
                     height: 100%;
                 }
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.WALLET }.${ CLASS.WALLET_MENU } .${ CLASS.BUTTON } {
-                    width: calc(100% - ${ buttonHeight + 2 }px);
+                .${CLASS.BUTTON_ROW}.${CLASS.WALLET}.${CLASS.WALLET_MENU} .${
+        CLASS.BUTTON
+      } {
+                    width: calc(100% - ${buttonHeight + 2}px);
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
                 }
 
                 .menu-button {
-                    height: ${ buttonHeight }px;
-                    width: ${ buttonHeight }px;
+                    height: ${buttonHeight}px;
+                    width: ${buttonHeight}px;
                 }
             }
 
-            @media only screen and (min-width: ${ style.minWidth }px) and (max-width: 320px) {
+            @media only screen and (min-width: ${
+              style.minWidth
+            }px) and (max-width: 320px) {
 
-                .${ CLASS.CONTAINER } .${ CLASS.BUTTON_ROW } .${ CLASS.TEXT }, .${ CLASS.CONTAINER } .${ CLASS.BUTTON_ROW } .${ CLASS.SPACE } {
-                    font-size: ${ max(perc(buttonHeight, textPercPercentage), 10) }px;
-                    margin-top: -${ perc(max(perc(buttonHeight, textPercPercentage), 10), 10) }px;
-                    line-height: ${ smallerLabelHeight }px;
+                .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, .${
+        CLASS.CONTAINER
+      } .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+                    font-size: ${max(
+                      perc(buttonHeight, textPercPercentage),
+                      10
+                    )}px;
+                    margin-top: -${perc(
+                      max(perc(buttonHeight, textPercPercentage), 10),
+                      10
+                    )}px;
+                    line-height: ${smallerLabelHeight}px;
                 }
 
 
-                .${ CLASS.CONTAINER } .${ CLASS.BUTTON_ROW } .${ CLASS.TEXT } * {
-                    margin-top: ${ perc(max(perc(buttonHeight, textPercPercentage), 10), 10) }px;
+                .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT} * {
+                    margin-top: ${perc(
+                      max(perc(buttonHeight, textPercPercentage), 10),
+                      10
+                    )}px;
                 }
 
-                .${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
+                .${CLASS.BUTTON} > .${CLASS.BUTTON_LABEL} {
                     margin: 0px 4vw;
-                    height: ${ smallerLabelHeight }px;
+                    height: ${smallerLabelHeight}px;
                 }
             }
 
-            @media only screen and (min-width: ${ style.minWidth }px) and (max-width: ${ minDualWidth }px) {
+            @media only screen and (min-width: ${
+              style.minWidth
+            }px) and (max-width: ${minDualWidth}px) {
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.HORIZONTAL }.${ CLASS.NUMBER }-${ BUTTON_NUMBER.MULTIPLE }.${ CLASS.NUMBER }-0 {
+                .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
+        BUTTON_LAYOUT.HORIZONTAL
+      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
                     width: 100%;
                     margin-right: 0;
                 }
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.HORIZONTAL }.${ CLASS.NUMBER }-${ BUTTON_NUMBER.MULTIPLE }.${ CLASS.NUMBER }-1 {
+                .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
+        BUTTON_LAYOUT.HORIZONTAL
+      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
                     display: none;
                 }
 
-                .${ CLASS.CONTAINER }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.HORIZONTAL }.${ CLASS.NUMBER }-${ BUTTON_NUMBER.MULTIPLE } .${ CLASS.TAGLINE } {
+                .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${
+        BUTTON_LAYOUT.HORIZONTAL
+      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
                     display: none;
                 }
             }
 
-            @media only screen and (min-width: ${ max(style.minWidth, minDualWidth) }px) {
+            @media only screen and (min-width: ${max(
+              style.minWidth,
+              minDualWidth
+            )}px) {
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.HORIZONTAL }.${ CLASS.NUMBER }-${ BUTTON_NUMBER.MULTIPLE }.${ CLASS.NUMBER }-0 {
+                .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
+        BUTTON_LAYOUT.HORIZONTAL
+      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
                     display: inline-block;
-                    width: calc(${ FIRST_BUTTON_PERC }% - ${ perc(buttonHeight, 7) }px);
-                    margin-right: ${ perc(buttonHeight, 7) * 2 }px;
+                    width: calc(${FIRST_BUTTON_PERC}% - ${perc(
+        buttonHeight,
+        7
+      )}px);
+                    margin-right: ${perc(buttonHeight, 7) * 2}px;
                 }
 
-                .${ CLASS.BUTTON_ROW }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.HORIZONTAL }.${ CLASS.NUMBER }-${ BUTTON_NUMBER.MULTIPLE }.${ CLASS.NUMBER }-1 {
+                .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
+        BUTTON_LAYOUT.HORIZONTAL
+      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
                     display: inline-block;
-                    width: calc(${ 100 - FIRST_BUTTON_PERC }% - ${ perc(buttonHeight, 7) }px);
-                }
-
-                .${ CLASS.CONTAINER }.${ CLASS.WALLET } .${ CLASS.BUTTON_ROW }.${ CLASS.WALLET }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.HORIZONTAL }.${ CLASS.NUMBER }-${ BUTTON_NUMBER.MULTIPLE } {
-                    width: calc(${ WALLET_BUTTON_PERC }% - ${ perc(buttonHeight, 7) }px);
-                }
-
-                .${ CLASS.CONTAINER }.${ CLASS.WALLET } .${ CLASS.BUTTON_ROW }:not(.${ CLASS.WALLET }).${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.HORIZONTAL }.${ CLASS.NUMBER }-${ BUTTON_NUMBER.MULTIPLE } {
-                    width: calc(${ 100 - WALLET_BUTTON_PERC }% - ${ perc(buttonHeight, 7) }px);
-                }
-
-                .${ CLASS.CONTAINER }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.HORIZONTAL }.${ CLASS.NUMBER }-${ BUTTON_NUMBER.MULTIPLE } .${ CLASS.TAGLINE } {
+                    width: calc(${100 - FIRST_BUTTON_PERC}% - ${perc(
+        buttonHeight,
+        7
+      )}px);
+                }
+
+                .${CLASS.CONTAINER}.${CLASS.WALLET} .${CLASS.BUTTON_ROW}.${
+        CLASS.WALLET
+      }.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
+        BUTTON_NUMBER.MULTIPLE
+      } {
+                    width: calc(${WALLET_BUTTON_PERC}% - ${perc(
+        buttonHeight,
+        7
+      )}px);
+                }
+
+                .${CLASS.CONTAINER}.${CLASS.WALLET} .${CLASS.BUTTON_ROW}:not(.${
+        CLASS.WALLET
+      }).${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
+        BUTTON_NUMBER.MULTIPLE
+      } {
+                    width: calc(${100 - WALLET_BUTTON_PERC}% - ${perc(
+        buttonHeight,
+        7
+      )}px);
+                }
+
+                .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${
+        BUTTON_LAYOUT.HORIZONTAL
+      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
                     display: block;
                 }
             }
 
         `;
-
-    }).join('\n');
+    })
+    .join("\n");
 }

package/src/ui/buttons/tagline.jsx

@@ -1,58 +1,57 @@
 /* @flow */
 /** @jsx node */
 
-import { FUNDING, type LocaleType } from '@paypal/sdk-constants/src';
-import { node, Fragment, type ElementNode } from '@krakenjs/jsx-pragmatic/src';
-
-import { CLASS } from '../../constants';
-import { getFundingConfig } from '../../funding';
-import { TrackingBeacon } from '../tracking';
-
-import { type ButtonStyle, type Personalization } from './props';
-
-export function TagLine({ fundingSource, locale, multiple, nonce, personalization } :
-    {| fundingSource : $Values<typeof FUNDING>, style : ButtonStyle, locale : LocaleType, multiple : boolean, nonce : string, personalization : ?Personalization |}) : ?ElementNode {
-
-    const fundingConfig = getFundingConfig()[fundingSource];
-
-    if (!fundingConfig) {
-        throw new Error(`Can not get config for ${ fundingSource }`);
-    }
-
-    const { Tag } = fundingConfig;
-
-    if (!Tag) {
-        return;
-    }
-
-    const tagline = personalization && personalization.tagline;
-
-    return (
-        <div class={ CLASS.TAGLINE }>
-            {
-                (tagline)
-                    ? (
-                        <Fragment>
-                            <span>
-                                {
-                                    tagline.Component
-                                        ? <tagline.Component />
-                                        : tagline.text
-                                }
-                            </span>
-                            {
-                                tagline.tracking && tagline.tracking.impression &&
-                                    <TrackingBeacon url={ tagline.tracking.impression } nonce={ nonce } />
-                            }
-                        </Fragment>
-                    )
-                    : (
-                        <Tag
-                            locale={ locale }
-                            multiple={ multiple }
-                        />
-                    )
-            }
-        </div>
-    );
+import { FUNDING, type LocaleType } from "@paypal/sdk-constants/src";
+import { node, Fragment, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
+
+import { CLASS } from "../../constants";
+import { getFundingConfig } from "../../funding";
+import { TrackingBeacon } from "../tracking";
+
+import { type ButtonStyle, type Personalization } from "./props";
+
+export function TagLine({
+  fundingSource,
+  locale,
+  multiple,
+  nonce,
+  personalization,
+}: {|
+  fundingSource: $Values<typeof FUNDING>,
+  style: ButtonStyle,
+  locale: LocaleType,
+  multiple: boolean,
+  nonce: string,
+  personalization: ?Personalization,
+|}): ?ElementNode {
+  const fundingConfig = getFundingConfig()[fundingSource];
+
+  if (!fundingConfig) {
+    throw new Error(`Can not get config for ${fundingSource}`);
+  }
+
+  const { Tag } = fundingConfig;
+
+  if (!Tag) {
+    return;
+  }
+
+  const tagline = personalization && personalization.tagline;
+
+  return (
+    <div class={CLASS.TAGLINE}>
+      {tagline ? (
+        <Fragment>
+          <span>
+            {tagline.Component ? <tagline.Component /> : tagline.text}
+          </span>
+          {tagline.tracking && tagline.tracking.impression && (
+            <TrackingBeacon url={tagline.tracking.impression} nonce={nonce} />
+          )}
+        </Fragment>
+      ) : (
+        <Tag locale={locale} multiple={multiple} />
+      )}
+    </div>
+  );
 }

package/src/ui/chevron.jsx

@@ -1,24 +1,35 @@
 /* @flow */
 /** @jsx node */
 
-import { node, type ComponentNode } from '@krakenjs/jsx-pragmatic/src';
-import { SVGLogo } from '@paypal/sdk-logos/src/lib';
+import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src";
+import { SVGLogo } from "@paypal/sdk-logos/src/lib";
 
 type ChevronProps = {|
-    color? : string
+  color?: string,
 |};
 
-export function Chevron({ color = '#848484', ...props } : ChevronProps = {}) : ComponentNode<{||}> {
-    return (
-        <SVGLogo
-            { ...props }
-            name='chevron'
-            render={ () => (
-                <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)" fill={ color } />
-                </svg>
-            ) }
-        />
-    );
+export function Chevron({
+  color = "#848484",
+  ...props
+}: ChevronProps = {}): ComponentNode<{||}> {
+  return (
+    <SVGLogo
+      {...props}
+      name="chevron"
+      render={() => (
+        <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)"
+            fill={color}
+          />
+        </svg>
+      )}
+    />
+  );
 }
-

package/src/ui/index.js

@@ -1,5 +1,5 @@
 /* @flow */
 
-export * from './text';
-export * from './loading';
-export * from './buttons';
+export * from "./text";
+export * from "./loading";
+export * from "./buttons";