feat: support US onboarding modals

src/components/modal/v2/parts/BodyContent.jsx

@@ -63,6 +63,7 @@ const BodyContent = () => {
 
     const useV4Design = productMeta?.useV4Design === 'true';
     const useV5Design = productMeta?.useV5Design === 'true';
+    const use5Dot1Design = productMeta?.['v5.1'];
     const useNewCheckoutDesign = features?.includes('new-checkout-design') ? 'true' : 'false';
 
     // add v4Design or v5Design class to root html to update lander specific styles to v4 or v5 respectively
@@ -154,6 +155,7 @@ const BodyContent = () => {
                     viewName={viewName}
                     useV4Design={useV4Design}
                     useV5Design={useV5Design}
+                    use5Dot1Design={use5Dot1Design}
                 />
             )}
             <div

src/components/modal/v2/parts/Header.jsx

@@ -12,7 +12,8 @@ const Header = ({
     closeButtonLabel = 'Close',
     viewName,
     useV4Design,
-    useV5Design
+    useV5Design,
+    use5Dot1Design
 }) => {
     const { country } = useServerData();
     const [, handleClose] = useTransitionState();
@@ -61,14 +62,14 @@ const Header = ({
                     // We don't need to render an 'x' button if the target is a lander since you will close via a
                     // merchant-provided close button from their own iframe, or by closing the window in the case of a webpage.
                     <button
-                        className="close"
+                        className={`close ${useV5Design ? 'v5Design' : ''}`}
                         aria-label={closeButtonLabel}
                         type="button"
                         id="close-btn"
                         aria-keyshortcuts="escape"
                         onClick={() => handleClose('Close Button')}
                     >
-                        <Icon name="close" />
+                        <Icon name={useV5Design ? 'close_v5' : 'close'} />
                     </button>
                 )}
                 <div className="header__fixed-wrapper header__fixed-wrapper--front">
@@ -90,7 +91,9 @@ const Header = ({
                 <h2
                     // id used for aria-labelleby on modal container element
                     id="header__headline"
-                    className={`headline-${countryClassName} ${useV5Design ? 'v5Design' : ''}`}
+                    className={`headline-${countryClassName} ${useV5Design ? 'v5Design' : ''} ${
+                        use5Dot1Design ? 'headline-new' : ''
+                    }`}
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{ __html: headline }}
                 />

src/components/modal/v2/parts/Icon.jsx

@@ -214,6 +214,17 @@ const Icon = ({ name = '', color, content }) => {
                     />
                 </svg>
             );
+        case 'close_v5':
+            return (
+                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M14.7674 13.7707C14.729 13.6782 14.6728 13.5941 14.602 13.5232L10.0782 9.00012L14.602 4.47701C14.7451 4.33395 14.8254 4.13993 14.8254 3.93762C14.8254 3.73531 14.7451 3.54128 14.602 3.39823C14.459 3.25517 14.2649 3.1748 14.0626 3.1748C13.8603 3.1748 13.6663 3.25518 13.5232 3.39824L9.00012 7.92202L4.47701 3.39823C4.33395 3.25517 4.13993 3.1748 3.93762 3.1748C3.73531 3.1748 3.54128 3.25517 3.39823 3.39823C3.25517 3.54128 3.1748 3.73531 3.1748 3.93762C3.1748 4.13993 3.25518 4.33396 3.39824 4.47702L7.92202 9.00012L3.39823 13.5232C3.25517 13.6663 3.1748 13.8603 3.1748 14.0626C3.1748 14.2649 3.25517 14.459 3.39823 14.602C3.54128 14.7451 3.73531 14.8254 3.93762 14.8254C4.13993 14.8254 4.33396 14.7451 4.47702 14.602L9.00012 10.0782L13.5232 14.602C13.5941 14.6728 13.6782 14.729 13.7707 14.7674C13.8632 14.8057 13.9624 14.8254 14.0626 14.8254C14.1628 14.8254 14.262 14.8057 14.3545 14.7674C14.4471 14.729 14.5312 14.6728 14.602 14.602C14.6728 14.5312 14.729 14.4471 14.7674 14.3545C14.8057 14.262 14.8254 14.1628 14.8254 14.0626C14.8254 13.9624 14.8057 13.8632 14.7674 13.7707Z"
+                        fill="#696969"
+                    />
+                </svg>
+            );
         case 'chevron-left':
             return (
                 <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">

src/components/modal/v2/styles/components/_header.scss

@@ -187,6 +187,16 @@
                     stroke-width: 2.2;
                 }
             }
+
+            &.v5Design {
+                height: 50px;
+                width: 50px;
+
+                svg {
+                    height: 30px;
+                    width: 30px;
+                }
+            }
         }
 
         &.checkout {
@@ -323,7 +333,8 @@
             }
 
             &.v5Design {
-                &.headline-gb {
+                &.headline-gb,
+                &.headline-new {
                     font-family: $paypal-pro;
                     font-weight: bold;
                     font-size: 32px;