@paypal/common-components - npm Package Compare versions

Comparing version 1.0.24 to 1.0.25

CHANGELOG.md

@@ -0,1 +1,7 @@
+## <small>1.0.25 (2022-03-14)</small>
+
+* Add fullScreen prop (#44) ([b64e595](https://github.paypal.com/paypal/paypal-checkout/commit/b64e595)), closes [#44](https://github.paypal.com/paypal/paypal-checkout/issues/44)
+
+
+
 ## <small>1.0.24 (2022-03-09)</small>
@@ -2,0 +8,0 @@

package.json

 {
   "name": "@paypal/common-components",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "PayPal common components, for integrating checkout products.",
@@ -5,0 +5,0 @@ "main": "dist/ui.js",

src/overlay/style.js

@@ -215,2 +215,9 @@ /* @flow */
 
+        #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full,
+        #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full > .${ CLASS.OUTLET },
+        #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full > .${ CLASS.OUTLET } > iframe {
+            height: 100vh;
+            width: 100vw;
+        }
+
         @media screen and (max-width: 470px) {
@@ -222,2 +229,7 @@ #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container,
             }
+            #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full,
+            #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full > .${ CLASS.OUTLET },
+            #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full > .${ CLASS.OUTLET } > iframe {
+                height: 100vh;
+            }
         }
@@ -224,0 +236,0 @@

src/overlay/template.jsx

@@ -26,6 +26,7 @@ /* @flow */
     hideCloseButton? : boolean,
-    nonce : string
+    nonce : string,
+    fullScreen? : boolean
 |};
 
-export function Overlay({ context, close, focus, event, frame, prerenderFrame, content = {}, autoResize, hideCloseButton, nonce } : OverlayProps) : ElementNode {
+export function Overlay({ context, close, focus, event, frame, prerenderFrame, content = {}, autoResize, hideCloseButton, nonce, fullScreen = false } : OverlayProps) : ElementNode {
     const uid = `paypal-overlay-${ uniqueID() }`;
@@ -123,21 +124,21 @@
                             { !hideCloseButton && <a href='#' class="paypal-checkout-close" onClick={ closeCheckout } aria-label="close" role="button" /> }
-                            <div class="paypal-checkout-modal">
-                                <div class="paypal-checkout-logo">
-                                    <PPLogo logoColor={ LOGO_COLOR.WHITE } />
-                                    <PayPalLogo logoColor={ LOGO_COLOR.WHITE } />
-                                </div>
-                                {content.windowMessage &&
-                                    <div class="paypal-checkout-message">
-                                        {content.windowMessage}
-                                    </div>}
-                                {content.continueMessage &&
-                                    <div class="paypal-checkout-continue">
-                                        <a onClick={ focus } href='#'>{content.continueMessage}</a>
-                                    </div>}
-                                <div class="paypal-checkout-loader">
-                                    <div class="paypal-spinner" />
-                                </div>
-                            </div>
-
-                            <div class="paypal-checkout-iframe-container">
+                            { !fullScreen &&
+                                <div class="paypal-checkout-modal">
+                                    <div class="paypal-checkout-logo">
+                                        <PPLogo logoColor={ LOGO_COLOR.WHITE } />
+                                        <PayPalLogo logoColor={ LOGO_COLOR.WHITE } />
+                                    </div>
+                                    {content.windowMessage &&
+                                        <div class="paypal-checkout-message">
+                                            {content.windowMessage}
+                                        </div>}
+                                    {content.continueMessage &&
+                                        <div class="paypal-checkout-continue">
+                                            <a onClick={ focus } href='#'>{content.continueMessage}</a>
+                                        </div>}
+                                    <div class="paypal-checkout-loader">
+                                        <div class="paypal-spinner" />
+                                    </div>
+                                </div>}
+                            <div class={ fullScreen ? 'paypal-checkout-iframe-container-full' : 'paypal-checkout-iframe-container' }>
                                 { outlet }
@@ -144,0 +145,0 @@ </div>

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

Improved metrics

Total package byte prevSize

82106

increased by1.57%

Lines of code

1191

increased by1.1%

No dependency changes