Revert "Update DonationComponent UI (#2934)"

packages/lib/src/components/Donation/Donation.scss

@@ -20,74 +20,88 @@
 }
 
 .adyen-checkout__campaign {
+    border-radius: token(border-radius-m);
+    background: token(color-label-primary);
+    height: 227px;
+    overflow: hidden;
     position: relative;
 }
 
 .adyen-checkout__campaign-link:hover .adyen-checkout__campaign-description {
     text-decoration: underline;
 }
 
+.adyen-checkout__campaign-container {
+    height: 100%;
+}
+
 .adyen-checkout__campaign-logo {
+    border: token(spacer-010) solid rgb(255 255 255 / 40%);
     border-radius: token(border-radius-s);
-    border: token(border-width-s) solid token(color-outline-primary);
     display: block;
-    flex-shrink: 0;
     height: token(spacer-120);
-    object-fit: cover;
-    object-position: center;
+    margin-bottom: token(spacer-070);
     overflow: hidden;
     width: token(spacer-120);
 }
 
 .adyen-checkout__campaign-background-image {
-    aspect-ratio: 5 / 2;
     background-color: token(color-label-primary);
     background-position: center;
-    background-size: 100%;
-    border-radius: token(border-radius-m);
-    margin-bottom: token(spacer-060);
-    overflow: hidden;
-    transition: background-size 0.6s ease-out;
-
-    &:hover {
-        background-size: 110%;
-    }
+    background-size: cover;
+    height: 100%;
 }
 
 .adyen-checkout__campaign-link {
-    text-decoration: none;
+    .adyen-checkout__campaign-background-image {
+        &::before {
+            background: inherit;
+            content: '';
+            height: 100%;
+            position: absolute;
+            transition: transform 0.6s ease-out;
+            width: 100%;
+        }
+
+        &:hover::before {
+            transform: scale(1.1);
+        }
+    }
 
-    &:hover {
-        text-decoration: underline;
+    .adyen-checkout__campaign-content {
+        pointer-events: none;
     }
 }
 
 .adyen-checkout__campaign-content {
-    align-items: flex-start;
-    display: flex;
-    gap: token(spacer-060);
+    bottom: 0;
+    padding: token(spacer-070);
+    position: absolute;
+    z-index: 2;
 }
 
 .adyen-checkout__campaign-title,
 .adyen-checkout__campaign-description {
-    color: token(color-label-primary);
+    color: token(color-label-on-color);
+    font-weight: normal;
     margin: 0;
 }
 
 .adyen-checkout__campaign-title {
     @include index.adyen-checkout-text-title;
+
+    margin-bottom: token(spacer-040);
 }
 
 .adyen-checkout__campaign-cause {
     @include index.adyen-checkout-text-caption;
 
+    color: token(color-label-on-color);
     font-weight: token(text-caption-stronger-font-weight);
 }
 
 .adyen-checkout__campaign-description {
     @include index.adyen-checkout-text-caption;
-
-    margin-top: token(spacer-060);
 }
 
 .adyen-checkout-roundup-description {

packages/lib/src/components/Donation/components/CampaignContainer.tsx

@@ -0,0 +1,18 @@
+import { h } from 'preact';
+import CampaignContent, { CampaignContentProps } from './CampaignContent';
+
+export default function CampaignContainer(props: CampaignContentProps) {
+    const { nonprofitUrl } = props;
+
+    return (
+        <div className="adyen-checkout__campaign">
+            {!nonprofitUrl && <CampaignContent {...props} />}
+
+            {nonprofitUrl && (
+                <a href={nonprofitUrl} className="adyen-checkout__campaign-link" target="_blank" rel="noopener noreferrer">
+                    <CampaignContent {...props} />
+                </a>
+            )}
+        </div>
+    );
+}

packages/lib/src/components/Donation/components/CampaignContent.tsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import CampaignInfo from './CampaignInfo';
+import Img from '../../internal/Img';
 
 export interface CampaignContentProps {
     logoUrl?: string;
@@ -18,17 +18,23 @@ export default function CampaignContent({
     nonprofitUrl = '',
     bannerUrl = ''
 }: CampaignContentProps) {
+    const backgroundImage = `linear-gradient(0, #000, #0003), url(${bannerUrl})`;
+
     return (
-        <div className="adyen-checkout__campaign">
-            {nonprofitUrl ? (
-                <a href={nonprofitUrl} className="adyen-checkout__campaign-link" target="_blank" rel="noopener noreferrer">
-                    <CampaignInfo logoUrl={logoUrl} nonprofitName={nonprofitName} causeName={causeName} bannerUrl={bannerUrl} />
-                </a>
-            ) : (
-                <CampaignInfo logoUrl={logoUrl} nonprofitName={nonprofitName} causeName={causeName} bannerUrl={bannerUrl} />
-            )}
+        <div className="adyen-checkout__campaign-container">
+            <Img className="adyen-checkout__campaign-background-image" style={{ backgroundImage }} backgroundUrl={bannerUrl} />
 
-            {nonprofitDescription && <div className="adyen-checkout__campaign-description">{nonprofitDescription}</div>}
+            <div className="adyen-checkout__campaign-content">
+                {logoUrl && <img src={logoUrl} className="adyen-checkout__campaign-logo" alt={nonprofitName} />}
+                {nonprofitName && <div className="adyen-checkout__campaign-title">{nonprofitName}</div>}
+                {causeName && <div className="adyen-checkout__campaign-cause">{causeName}</div>}
+                {nonprofitDescription && (
+                    <div className="adyen-checkout__campaign-description">
+                        {nonprofitDescription}
+                        {nonprofitUrl && ' ›'}
+                    </div>
+                )}
+            </div>
         </div>
     );
 }

packages/lib/src/components/Donation/components/DonationComponent.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
-import CampaignContent from './CampaignContent';
+import CampaignContainer from './CampaignContainer';
 import Button from '../../internal/Button';
 import Img from '../../internal/Img';
 import { useCoreContext } from '../../../core/Context/CoreProvider';
@@ -78,7 +78,7 @@ export default function DonationComponent(props: DonationComponentProps) {
 
     return (
         <div className="adyen-checkout__adyen-giving">
-            <CampaignContent {...props} />
+            <CampaignContainer {...props} />
 
             <div className="adyen-checkout__adyen-giving-actions">
                 {termsAndConditionsUrl && <DisclaimerMessage message={i18n.get('donationTermsCondition')} urls={[termsAndConditionsUrl]} />}

packages/playground/src/pages/Helpers/Helpers.js

@@ -35,8 +35,7 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse =
         termsAndConditionsUrl: 'https://www.adyen.com',
         bannerUrl: '/banner.png',
         logoUrl: '/logo.png',
-        nonprofitDescription:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        nonprofitDescription: 'Lorem ipsum...',
         nonprofitName: 'Test Charity',
         causeName: 'Earthquake Turkey & Syria',
         nonprofitUrl: 'https://example.org',