Bento style improvements (#2470)

* refactor: improve drop-in animation * refactor: fix ideal overflow issue due to animation * fix the label line-height * refactor: fix the selected IssuerButton.scss * refactor(personal-details): add the changes back * fix: remove the pm list rendering logic by only checking the regular pm methods * refactor(drop-in): add support for showing both radio and non-radio buttons * refactor(open-invoice): use consent checkbox style to delivery address * refactor: various fixes for style consistency
Adyen · Feb 7, 2024 · af6b3ad · af6b3ad
1 parent d3ccb8a
commit af6b3ad
Show file tree

Hide file tree

Showing 33 changed files with 210 additions and 164 deletions.
diff --git a/packages/lib/src/components/ApplePay/ApplePayService.ts b/packages/lib/src/components/ApplePay/ApplePayService.ts
@@ -28,18 +28,15 @@ class ApplePayService {
         this.session.oncancel = event => this.oncancel(event, options.onCancel);
 
         if (typeof options.onPaymentMethodSelected === 'function') {
-            this.session.onpaymentmethodselected = event =>
-                this.onpaymentmethodselected(event, options.onPaymentMethodSelected);
+            this.session.onpaymentmethodselected = event => this.onpaymentmethodselected(event, options.onPaymentMethodSelected);
         }
 
         if (typeof options.onShippingContactSelected === 'function') {
-            this.session.onshippingcontactselected = event =>
-                this.onshippingcontactselected(event, options.onShippingContactSelected);
+            this.session.onshippingcontactselected = event => this.onshippingcontactselected(event, options.onShippingContactSelected);
         }
 
         if (typeof options.onShippingMethodSelected === 'function') {
-            this.session.onshippingmethodselected = event =>
-                this.onshippingmethodselected(event, options.onShippingMethodSelected);
+            this.session.onshippingmethodselected = event => this.onshippingmethodselected(event, options.onShippingMethodSelected);
         }
     }
 

diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.scss b/packages/lib/src/components/Card/components/CardInput/CardInput.scss
@@ -87,7 +87,7 @@
     gap: var(--adyen-checkout-spacer-060);
     padding: var(--adyen-checkout-spacer-060) var(--adyen-checkout-spacer-070);
     margin-top: var(--adyen-checkout-spacer-070);
-    border: var(--adyen-checkout-border-width-s) solid var(--adyen-checkout-color-outline-secondary);
+    border: var(--adyen-checkout-border-width-s) solid var(--adyen-checkout-color-outline-primary);
     border-radius: var(--adyen-checkout-border-radius-m);
 }
 

diff --git a/packages/lib/src/components/Dropin/Dropin.test.ts b/packages/lib/src/components/Dropin/Dropin.test.ts
@@ -63,9 +63,7 @@ describe('Dropin', () => {
 
             dropin.handleAction(fingerprintAction);
             expect(dropin.componentFromAction instanceof ThreeDS2DeviceFingerprint).toEqual(true);
-            expect((dropin.componentFromAction as unknown as ThreeDS2DeviceFingerprint).props.showSpinner).toEqual(
-                false
-            );
+            expect((dropin.componentFromAction as unknown as ThreeDS2DeviceFingerprint).props.showSpinner).toEqual(false);
             expect(dropin.componentFromAction.props.statusType).toEqual('loading');
             expect(dropin.componentFromAction.props.isDropin).toBe(true);
         });
@@ -111,9 +109,7 @@ describe('Dropin', () => {
 
             dropin.handleAction(challengeAction);
             expect(dropin.componentFromAction instanceof ThreeDS2Challenge).toEqual(true);
-            expect((dropin.componentFromAction as unknown as ThreeDS2Challenge).props.challengeWindowSize).toEqual(
-                '02'
-            );
+            expect((dropin.componentFromAction as unknown as ThreeDS2Challenge).props.challengeWindowSize).toEqual('02');
         });
 
         test('new challenge action gets challengeWindowSize from handleAction config', async () => {
@@ -131,9 +127,7 @@ describe('Dropin', () => {
                 challengeWindowSize: '03'
             });
             expect(dropin.componentFromAction instanceof ThreeDS2Challenge).toEqual(true);
-            expect((dropin.componentFromAction as unknown as ThreeDS2Challenge).props.challengeWindowSize).toEqual(
-                '03'
-            );
+            expect((dropin.componentFromAction as unknown as ThreeDS2Challenge).props.challengeWindowSize).toEqual('03');
         });
     });
 

diff --git a/packages/lib/src/components/Dropin/Dropin.tsx b/packages/lib/src/components/Dropin/Dropin.tsx
@@ -48,11 +48,7 @@ class DropinElement extends UIElement<DropinConfiguration> {
     }
 
     get isValid() {
-        return (
-            !!this.dropinRef &&
-            !!this.dropinRef.state.activePaymentMethod &&
-            !!this.dropinRef.state.activePaymentMethod.isValid
-        );
+        return !!this.dropinRef && !!this.dropinRef.state.activePaymentMethod && !!this.dropinRef.state.activePaymentMethod.isValid;
     }
 
     showValidation() {
@@ -107,8 +103,7 @@ class DropinElement extends UIElement<DropinConfiguration> {
      * Creates the Drop-in elements
      */
     private handleCreate = () => {
-        const { paymentMethodsConfiguration, showStoredPaymentMethods, showPaymentMethods, instantPaymentTypes } =
-            this.props;
+        const { paymentMethodsConfiguration, showStoredPaymentMethods, showPaymentMethods, instantPaymentTypes } = this.props;
 
         const { paymentMethods, storedPaymentMethods, instantPaymentMethods } = splitPaymentMethods(
             this.core.paymentMethodsResponse,
@@ -120,15 +115,8 @@ class DropinElement extends UIElement<DropinConfiguration> {
         const storedElements = showStoredPaymentMethods
             ? createStoredElements(storedPaymentMethods, paymentMethodsConfiguration, commonProps, this.core)
             : [];
-        const elements = showPaymentMethods
-            ? createElements(paymentMethods, paymentMethodsConfiguration, commonProps, this.core)
-            : [];
-        const instantPaymentElements = createInstantPaymentElements(
-            instantPaymentMethods,
-            paymentMethodsConfiguration,
-            commonProps,
-            this.core
-        );
+        const elements = showPaymentMethods ? createElements(paymentMethods, paymentMethodsConfiguration, commonProps, this.core) : [];
+        const instantPaymentElements = createInstantPaymentElements(instantPaymentMethods, paymentMethodsConfiguration, commonProps, this.core);
 
         return [storedElements, elements, instantPaymentElements];
     };

diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.scss b/packages/lib/src/components/Dropin/components/DropinComponent.scss
@@ -1,17 +1,21 @@
 @use '../../../style/index';
 
+.adyen-checkout__dropin {
+    display: flex;
+    flex-direction: column;
+    gap: var(--adyen-checkout-dropin-payment-list-gap);
+}
+
 .adyen-checkout-payment-methods-container {
-    margin: var(--adyen-checkout-spacer-070) 0;
     display: flex;
     flex-direction: column;
     gap: var(--adyen-checkout-spacer-070);
 }
 
 .adyen-checkout-payment-methods-list-label {
+    @include index.adyen-checkout-text-subtitle;
+
     color: var(--adyen-checkout-dropin-list-label-color);
-    font-size: var(--adyen-checkout-dropin-list-label-font-size);
-    font-weight: var(--adyen-checkout-dropin-list-label-font-weight);
-    line-height: var(--adyen-checkout-text-caption-stronger-wide-line-height);
 }
 
 .adyen-checkout__payment-methods-list {
@@ -31,6 +35,7 @@
 .adyen-checkout__instant-payment-methods-list {
     list-style: none;
     padding: 0;
+    margin: 0;
     display: flex;
     gap: var(--adyen-checkout-spacer-070);
 
@@ -43,33 +48,32 @@
     display: block;
 
     &__details {
-        opacity: 0;
-        height: 0;
         overflow: hidden;
-        transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     }
 
     &__image {
         width: var(--adyen-checkout-spacer-110);
         height: 26px;
 
         &__wrapper {
-            margin-right: var(--adyen-checkout-spacer-040);
-
             [dir='rtl'] & {
                 margin-right: 0;
                 margin-left: var(--adyen-checkout-spacer-040);
             }
         }
     }
+}
 
-    &--selected {
-        max-height: 100%;
+.adyen-checkout-pm-details-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 250ms ease;
+}
 
-        .adyen-checkout__payment-method__details {
-            opacity: 1;
-            height: auto;
-            overflow: visible;
-        }
+.adyen-checkout-pm-details-wrapper[aria-hidden='false'] {
+    grid-template-rows: 1fr;
+
+    .adyen-checkout__payment-method__details__content {
+        overflow: visible;
     }
 }
diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.tsx b/packages/lib/src/components/Dropin/components/DropinComponent.tsx
@@ -153,6 +153,7 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
                                 openFirstStoredPaymentMethod={this.props.openFirstStoredPaymentMethod}
                                 onDisableStoredPaymentMethod={this.handleDisableStoredPaymentMethod}
                                 showRemovePaymentMethodButton={this.props.showRemovePaymentMethodButton}
+                                showRadioButton={this.props.showRadioButton}
                             />
                         )}
                     </div>

diff --git a/...ges/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/ExpandButton.tsx b/...ges/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/ExpandButton.tsx
@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import { ComponentChildren, h } from 'preact';
+
+interface ExpandButton {
+    buttonId: string;
+    isSelected: boolean;
+    expandContentId: string;
+    children: ComponentChildren;
+    showRadioButton?: boolean;
+}
+
+export function ExpandButton({ buttonId, showRadioButton, isSelected, expandContentId, children }: Readonly<ExpandButton>) {
+    return (
+        // See discussion: https://github.com/w3c/aria/issues/1404
+        // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+        <button
+            className="adyen-checkout__payment-method__header__title"
+            id={buttonId}
+            role={'radio'}
+            aria-checked={isSelected}
+            aria-expanded={isSelected}
+            aria-controls={expandContentId}
+            type="button"
+        >
+            {showRadioButton && (
+                <span
+                    className={classNames({
+                        'adyen-checkout__payment-method__radio': true,
+                        'adyen-checkout__payment-method__radio--selected': isSelected
+                    })}
+                    aria-hidden="true"
+                />
+            )}
+            {children}
+        </button>
+    );
+}
diff --git a/...ents/PaymentMethod/PaymentMethodItem.scss → .../PaymentMethodItem/PaymentMethodItem.scss b/...ents/PaymentMethod/PaymentMethodItem.scss → .../PaymentMethodItem/PaymentMethodItem.scss
@@ -1,4 +1,4 @@
-@use '../../../../style/index';
+@use '../../../../../style/index';
 
 .adyen-checkout__payment-method {
     position: relative;
@@ -7,11 +7,20 @@
     cursor: pointer;
     border-radius: var(--adyen-checkout-dropin-payment-item-border-radius);
     width: 100%;
-    transition: opacity 0.3s ease-out;
-}
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        color 0.15s ease,
+        box-shadow 0.15s ease,
+        border-radius 0.15s ease;
+
+    &:focus {
+        outline: 0;
+    }
 
-.adyen-checkout__payment-method:focus {
-    outline: 0;
+    &:hover:not(&--selected) {
+        border-color: var(--adyen-checkout-dropin-hover-item-border-color);
+    }
 }
 
 .adyen-checkout__payment-method--loading {
@@ -42,7 +51,6 @@
     font-weight: var(--adyen-checkout-text-body-font-weight);
     font-size: var(--adyen-checkout-font-size-medium);
     padding: var(--adyen-checkout-spacer-070);
-    padding-left: calc(var(--adyen-checkout-spacer-120) - var(--adyen-checkout-spacer-020));
     position: relative;
     transition: background 0.1s ease-out;
     width: 100%;
@@ -60,6 +68,7 @@
 .adyen-checkout__payment-method__header__title {
     max-height: 38px;
     display: flex;
+    gap: var(--adyen-checkout-spacer-060);
     align-items: center;
     flex-shrink: 0;
     margin-right: var(--adyen-checkout-spacer-070);
@@ -114,7 +123,8 @@
     align-items: center;
     border-radius: var(--adyen-checkout-border-radius-s);
     overflow: hidden;
-    box-shadow: 0 1px var(--adyen-checkout-spacer-010) 0 rgba(0 17 44 / 2%),
+    box-shadow:
+        0 1px var(--adyen-checkout-spacer-010) 0 rgba(0 17 44 / 2%),
         0 var(--adyen-checkout-spacer-010) var(--adyen-checkout-spacer-020) 0 rgba(0 17 44 / 4%);
 }
 
@@ -151,7 +161,6 @@
 
 .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper {
     display: inline-block;
-    margin-right: var(--adyen-checkout-spacer-020);
     height: var(--adyen-checkout-spacer-070);
     width: var(--adyen-checkout-spacer-090);
     transition: opacity 0.2s ease-out;
@@ -178,14 +187,15 @@
 
 /*  Payment Method Radio Button */
 .adyen-checkout__payment-method__radio {
-    position: absolute;
     background-color: var(--adyen-checkout-color-background-primary);
     border: var(--adyen-checkout-border-width-s) solid var(--adyen-checkout-color-outline-secondary);
     border-radius: 50%;
     height: var(--adyen-checkout-spacer-070);
     width: var(--adyen-checkout-spacer-070);
     left: var(--adyen-checkout-spacer-070);
-    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
+    transition:
+        border-color 0.2s ease-out,
+        box-shadow 0.2s ease-out;
 
     [dir='rtl'] & {
         right: var(--adyen-checkout-spacer-070);
@@ -200,7 +210,7 @@
 .adyen-checkout__payment-method__radio::after {
     content: '';
     display: block;
-    position: absolute;
+    position: relative;
     margin: 0 auto;
     left: 0;
     right: 0;

diff --git a/.../PaymentMethod/PaymentMethodItem.test.tsx → ...mentMethodItem/PaymentMethodItem.test.tsx b/.../PaymentMethod/PaymentMethodItem.test.tsx → ...mentMethodItem/PaymentMethodItem.test.tsx