Skip to content

Commit

Permalink
Update DonationComponent UI (#2934)
Browse files Browse the repository at this point in the history
  • Loading branch information
joao-m-santos authored Nov 8, 2024
1 parent 0ebf396 commit 1541573
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 74 deletions.
5 changes: 5 additions & 0 deletions .changeset/brown-lions-study.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@adyen/adyen-web': minor
---

Updated DonationComponent UI
60 changes: 23 additions & 37 deletions packages/lib/src/components/Donation/Donation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

This file was deleted.

26 changes: 10 additions & 16 deletions packages/lib/src/components/Donation/components/CampaignContent.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { h } from 'preact';
import Img from '../../internal/Img';
import CampaignInfo from './CampaignInfo';

export interface CampaignContentProps {
logoUrl?: string;
Expand All @@ -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>
);
}
27 changes: 27 additions & 0 deletions packages/lib/src/components/Donation/components/CampaignInfo.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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]} />}
Expand Down
3 changes: 2 additions & 1 deletion packages/playground/src/pages/Helpers/Helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit 1541573

Please sign in to comment.