Update DonationComponent UI (#2934)

(cherry picked from commit 1541573)
Adyen · Nov 22, 2024 · adf7133 · adf7133
1 parent 87194b5
commit adf7133
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 74 deletions.
diff --git a/.changeset/brown-lions-study.md b/.changeset/brown-lions-study.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Updated DonationComponent UI
diff --git a/packages/lib/src/components/Donation/Donation.scss b/packages/lib/src/components/Donation/Donation.scss
@@ -20,88 +20,74 @@
 }
 
 .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);
-    margin-bottom: token(spacer-070);
+    object-fit: cover;
+    object-position: center;
     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: cover;
-    height: 100%;
+    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%;
+    }
 }
 
 .adyen-checkout__campaign-link {
-    .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);
-        }
-    }
+    text-decoration: none;
 
-    .adyen-checkout__campaign-content {
-        pointer-events: none;
+    &:hover {
+        text-decoration: underline;
     }
 }
 
 .adyen-checkout__campaign-content {
-    bottom: 0;
-    padding: token(spacer-070);
-    position: absolute;
-    z-index: 2;
+    align-items: flex-start;
+    display: flex;
+    gap: token(spacer-060);
 }
 
 .adyen-checkout__campaign-title,
 .adyen-checkout__campaign-description {
-    color: token(color-label-on-color);
-    font-weight: normal;
+    color: token(color-label-primary);
     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 {

diff --git a/packages/lib/src/components/Donation/components/CampaignContainer.tsx b/packages/lib/src/components/Donation/components/CampaignContainer.tsx
diff --git a/packages/lib/src/components/Donation/components/CampaignContent.tsx b/packages/lib/src/components/Donation/components/CampaignContent.tsx
@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import Img from '../../internal/Img';
+import CampaignInfo from './CampaignInfo';
 
 export interface CampaignContentProps {
     logoUrl?: string;
@@ -18,23 +18,17 @@ export default function CampaignContent({
     nonprofitUrl = '',
     bannerUrl = ''
 }: CampaignContentProps) {
-    const backgroundImage = `linear-gradient(0, #000, #0003), url(${bannerUrl})`;
-
     return (
-        <div className="adyen-checkout__campaign-container">
-            <Img className="adyen-checkout__campaign-background-image" style={{ backgroundImage }} backgroundUrl={bannerUrl} />
+        <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-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>
+            {nonprofitDescription && <div className="adyen-checkout__campaign-description">{nonprofitDescription}</div>}
         </div>
     );
 }
diff --git a/packages/lib/src/components/Donation/components/CampaignInfo.tsx b/packages/lib/src/components/Donation/components/CampaignInfo.tsx
@@ -0,0 +1,27 @@
+import { Fragment, h } from 'preact';
+import Img from '../../internal/Img';
+
+export interface CampaignInfoProps {
+    logoUrl?: string;
+    nonprofitName?: string;
+    causeName?: string;
+    bannerUrl?: string;
+}
+
+export default function CampaignInfo({ logoUrl = '', nonprofitName = '', causeName = '', bannerUrl = '' }: CampaignInfoProps) {
+    const backgroundImage = `url(${bannerUrl})`;
+
+    return (
+        <Fragment>
+            <Img className="adyen-checkout__campaign-background-image" style={{ backgroundImage }} backgroundUrl={bannerUrl} />
+
+            <div className="adyen-checkout__campaign-content">
+                {logoUrl && <img src={logoUrl} className="adyen-checkout__campaign-logo" alt={nonprofitName} />}
+                <div>
+                    {nonprofitName && <div className="adyen-checkout__campaign-title">{nonprofitName}</div>}
+                    {causeName && <div className="adyen-checkout__campaign-cause">{causeName}</div>}
+                </div>
+            </div>
+        </Fragment>
+    );
+}
diff --git a/packages/lib/src/components/Donation/components/DonationComponent.tsx b/packages/lib/src/components/Donation/components/DonationComponent.tsx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
-import CampaignContainer from './CampaignContainer';
+import CampaignContent from './CampaignContent';
 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">
-            <CampaignContainer {...props} />
+            <CampaignContent {...props} />
 
             <div className="adyen-checkout__adyen-giving-actions">
                 {termsAndConditionsUrl && <DisclaimerMessage message={i18n.get('donationTermsCondition')} urls={[termsAndConditionsUrl]} />}

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