diff --git a/.changeset/brown-lions-study.md b/.changeset/brown-lions-study.md new file mode 100644 index 000000000..394dbb2ed --- /dev/null +++ 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 index eeb130bd7..74631741f 100644 --- a/packages/lib/src/components/Donation/Donation.scss +++ b/packages/lib/src/components/Donation/Donation.scss @@ -20,10 +20,6 @@ } .adyen-checkout__campaign { - border-radius: token(border-radius-m); - background: token(color-label-primary); - height: 227px; - overflow: hidden; position: relative; } @@ -31,77 +27,67 @@ 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 deleted file mode 100644 index c546de66c..000000000 --- a/packages/lib/src/components/Donation/components/CampaignContainer.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { h } from 'preact'; -import CampaignContent, { CampaignContentProps } from './CampaignContent'; - -export default function CampaignContainer(props: CampaignContentProps) { - const { nonprofitUrl } = props; - - return ( -