@paypal/checkout-components 5.0.256 → 5.0.257

package/src/ui/buttons/config.js

@@ -1,78 +1,81 @@
 /* @flow */
 /* eslint no-template-curly-in-string: off, max-lines: off */
 
-import { BUTTON_SIZE, BUTTON_LAYOUT } from '../../constants';
+import { BUTTON_SIZE, BUTTON_LAYOUT } from "../../constants";
 
-export const MINIMUM_SIZE : {| [$Values<typeof BUTTON_LAYOUT>] : $Values<typeof BUTTON_SIZE> |} = {
-    [ BUTTON_LAYOUT.HORIZONTAL ]: BUTTON_SIZE.SMALL,
-    [ BUTTON_LAYOUT.VERTICAL ]:   BUTTON_SIZE.MEDIUM
+export const MINIMUM_SIZE: {|
+  [$Values<typeof BUTTON_LAYOUT>]: $Values<typeof BUTTON_SIZE>,
+|} = {
+  [BUTTON_LAYOUT.HORIZONTAL]: BUTTON_SIZE.SMALL,
+  [BUTTON_LAYOUT.VERTICAL]: BUTTON_SIZE.MEDIUM,
 };
 
-export const MAXIMUM_SIZE : {| [$Values<typeof BUTTON_LAYOUT>] : $Values<typeof BUTTON_SIZE> |} = {
-    [ BUTTON_LAYOUT.HORIZONTAL ]: BUTTON_SIZE.HUGE,
-    [ BUTTON_LAYOUT.VERTICAL ]:   BUTTON_SIZE.HUGE
+export const MAXIMUM_SIZE: {|
+  [$Values<typeof BUTTON_LAYOUT>]: $Values<typeof BUTTON_SIZE>,
+|} = {
+  [BUTTON_LAYOUT.HORIZONTAL]: BUTTON_SIZE.HUGE,
+  [BUTTON_LAYOUT.VERTICAL]: BUTTON_SIZE.HUGE,
 };
 
 export const BUTTON_RELATIVE_STYLE = {
-    TAGLINE:         50,
-    VERTICAL_MARGIN: 30
+  TAGLINE: 50,
+  VERTICAL_MARGIN: 30,
 };
 
 type ButtonStyleMap = {
-    [ $Values<typeof BUTTON_SIZE> ] : {|
-        defaultWidth : number,
-        defaultHeight : number,
-        minWidth : number,
-        maxWidth : number,
-        minHeight : number,
-        maxHeight : number
-    |}
+  [$Values<typeof BUTTON_SIZE>]: {|
+    defaultWidth: number,
+    defaultHeight: number,
+    minWidth: number,
+    maxWidth: number,
+    minHeight: number,
+    maxHeight: number,
+  |},
 };
 
-export const BUTTON_SIZE_STYLE : ButtonStyleMap = {
+export const BUTTON_SIZE_STYLE: ButtonStyleMap = {
+  [BUTTON_SIZE.TINY]: {
+    defaultWidth: 75,
+    defaultHeight: 25,
+    minWidth: 75,
+    maxWidth: 150,
+    minHeight: 25,
+    maxHeight: 30,
+  },
 
-    [ BUTTON_SIZE.TINY ]: {
-        defaultWidth:    75,
-        defaultHeight:   25,
-        minWidth:        75,
-        maxWidth:        150,
-        minHeight:       25,
-        maxHeight:       30
-    },
+  [BUTTON_SIZE.SMALL]: {
+    defaultWidth: 150,
+    defaultHeight: 25,
+    minWidth: 150,
+    maxWidth: 200,
+    minHeight: 25,
+    maxHeight: 55,
+  },
 
-    [ BUTTON_SIZE.SMALL ]: {
-        defaultWidth:    150,
-        defaultHeight:   25,
-        minWidth:        150,
-        maxWidth:        200,
-        minHeight:       25,
-        maxHeight:       55
-    },
+  [BUTTON_SIZE.MEDIUM]: {
+    defaultWidth: 250,
+    defaultHeight: 35,
+    minWidth: 200,
+    maxWidth: 300,
+    minHeight: 35,
+    maxHeight: 55,
+  },
 
-    [ BUTTON_SIZE.MEDIUM ]: {
-        defaultWidth:      250,
-        defaultHeight:     35,
-        minWidth:          200,
-        maxWidth:          300,
-        minHeight:         35,
-        maxHeight:         55
-    },
+  [BUTTON_SIZE.LARGE]: {
+    defaultWidth: 350,
+    defaultHeight: 45,
+    minWidth: 300,
+    maxWidth: 500,
+    minHeight: 30,
+    maxHeight: 55,
+  },
 
-    [ BUTTON_SIZE.LARGE ]: {
-        defaultWidth:      350,
-        defaultHeight:     45,
-        minWidth:          300,
-        maxWidth:          500,
-        minHeight:         30,
-        maxHeight:         55
-    },
-
-    [ BUTTON_SIZE.HUGE ]: {
-        defaultWidth:  500,
-        defaultHeight: 55,
-        minWidth:      500,
-        maxWidth:      750,
-        minHeight:     40,
-        maxHeight:     55
-    }
+  [BUTTON_SIZE.HUGE]: {
+    defaultWidth: 500,
+    defaultHeight: 55,
+    minWidth: 500,
+    maxWidth: 750,
+    minHeight: 40,
+    maxHeight: 55,
+  },
 };

package/src/ui/buttons/content.jsx

@@ -2,128 +2,313 @@
 /** @jsx node */
 /** @jsxFrag Fragment */
 
-import { node, Fragment, type ChildType } from '@krakenjs/jsx-pragmatic/src';
-import { LANG } from '@paypal/sdk-constants/src';
-import { PayPalLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
+import { node, Fragment, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+import { LANG } from "@paypal/sdk-constants/src";
+import { PayPalLogo, LOGO_COLOR } from "@paypal/sdk-logos/src";
 
-import { Text } from '../text';
+import { Text } from "../text";
 
 type ButtonContentMap = {
-    [ $Values<typeof LANG> ] : {|
-        PoweredBy : ({| logoColor : $Values<typeof LOGO_COLOR> |}) => ChildType
-    |}
+  [$Values<typeof LANG>]: {|
+    PoweredBy: ({| logoColor: $Values<typeof LOGO_COLOR> |}) => ChildType,
+  |},
 };
 
-export const buttonContent : ButtonContentMap = {
-    ar: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>مدعوم من </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    bg: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>С подкрепата на </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    cs: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Využívá službu </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    da: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Leveret af </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    de: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Abgewickelt durch </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    el: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Με την υποστήριξη του </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    en: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    es: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Desarrollado por </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    et: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    fi: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Palvelun tarjoaa </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    fr: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Optimisé par </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    he: {
-        PoweredBy: ({ logoColor }) => <Fragment><PayPalLogo logoColor={ logoColor } /> מופעל על-ידי</Fragment>
-    },
-    hu: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Üzemeltető: </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    id: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Ditunjang teknologi </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    it: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Con tecnologia </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    ja: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    ko: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>제공: </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    lt: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Sukurta </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    lv: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Darbojas ar </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    ms: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Dikuasakan oleh </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    nl: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Mogelijk gemaakt door </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    no: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Leveres av </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    pl: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    pt: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    ro: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Cu tehnologia </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    ru: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Обработано </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    si: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>බලගන්වන්නේ </Text><PayPalLogo logoColor={ logoColor } /><Text> විසිනි</Text></Fragment>
-    },
-    sk: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Používa technológiu </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    sl: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Powered by </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    sq: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Mundësuar nga </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    sv: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Tillhandahålls av </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    th: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>ให้บริการโดย </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    tl: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Pinapagana ng </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    tr: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Çalıştıran </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    vi: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>Được hỗ trợ bởi </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    zh: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>技术支持提供方： </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    },
-    zh_Hant: {
-        PoweredBy: ({ logoColor }) => <Fragment><Text>技術支持： </Text><PayPalLogo logoColor={ logoColor } /></Fragment>
-    }
+export const buttonContent: ButtonContentMap = {
+  ar: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>مدعوم من </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  bg: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>С подкрепата на </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  cs: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Využívá službu </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  da: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Leveret af </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  de: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Abgewickelt durch </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  el: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Με την υποστήριξη του </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  en: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Powered by </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  es: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Desarrollado por </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  et: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Powered by </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  fi: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Palvelun tarjoaa </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  fr: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Optimisé par </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  he: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <PayPalLogo logoColor={logoColor} /> מופעל על-ידי
+      </Fragment>
+    ),
+  },
+  hu: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Üzemeltető: </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  id: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Ditunjang teknologi </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  it: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Con tecnologia </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  ja: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Powered by </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  ko: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>제공: </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  lt: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Sukurta </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  lv: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Darbojas ar </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  ms: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Dikuasakan oleh </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  nl: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Mogelijk gemaakt door </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  no: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Leveres av </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  pl: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Powered by </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  pt: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Powered by </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  ro: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Cu tehnologia </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  ru: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Обработано </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  si: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>බලගන්වන්නේ </Text>
+        <PayPalLogo logoColor={logoColor} />
+        <Text> විසිනි</Text>
+      </Fragment>
+    ),
+  },
+  sk: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Používa technológiu </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  sl: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Powered by </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  sq: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Mundësuar nga </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  sv: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Tillhandahålls av </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  th: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>ให้บริการโดย </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  tl: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Pinapagana ng </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  tr: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Çalıştıran </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  vi: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>Được hỗ trợ bởi </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  zh: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>技术支持提供方： </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
+  zh_Hant: {
+    PoweredBy: ({ logoColor }) => (
+      <Fragment>
+        <Text>技術支持： </Text>
+        <PayPalLogo logoColor={logoColor} />
+      </Fragment>
+    ),
+  },
 };

package/src/ui/buttons/index.js

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

package/src/ui/buttons/menu-button/index.js

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

package/src/ui/buttons/menu-button/menu-button.jsx

@@ -1,29 +1,36 @@
 /* @flow */
 /** @jsx node */
 
-import { node, type ChildType, Style } from '@krakenjs/jsx-pragmatic/src';
+import { node, type ChildType, Style } from "@krakenjs/jsx-pragmatic/src";
 
-import { ATTRIBUTE, TEXT_COLOR } from '../../../constants';
-import { Chevron } from '../../chevron';
-import type { ContentType } from '../../../types';
+import { ATTRIBUTE, TEXT_COLOR } from "../../../constants";
+import { Chevron } from "../../chevron";
+import type { ContentType } from "../../../types";
 
-import css from './menu-button.scoped.scss';
+import css from "./menu-button.scoped.scss";
 
-export function MenuButton({ textColor = TEXT_COLOR.BLACK, content } : {| textColor? : $Values<typeof TEXT_COLOR>, content : ?ContentType |} = { }) : ChildType {
-    const labelText = content?.moreOptions;
-    return (
-        <Style css={ css }>
-            <div
-                { ...{
-                    [ATTRIBUTE.MENU]: true
-                } }
-                tabindex='0'
-                class='menu-button'
-                role='button'
-                aria-label={ labelText }
-                aria-haspopup='menu'>
-                <Chevron color={ textColor } />
-            </div>
-        </Style>
-    );
+export function MenuButton({
+  textColor = TEXT_COLOR.BLACK,
+  content,
+}: {|
+  textColor?: $Values<typeof TEXT_COLOR>,
+  content: ?ContentType,
+|} = {}): ChildType {
+  const labelText = content?.moreOptions;
+  return (
+    <Style css={css}>
+      <div
+        {...{
+          [ATTRIBUTE.MENU]: true,
+        }}
+        tabindex="0"
+        class="menu-button"
+        role="button"
+        aria-label={labelText}
+        aria-haspopup="menu"
+      >
+        <Chevron color={textColor} />
+      </div>
+    </Style>
+  );
 }