refactor: various fixes for style consistency

Adyen · Feb 5, 2024 · 4891f66 · 4891f66
1 parent ace45a2
commit 4891f66
Show file tree

Hide file tree

Showing 15 changed files with 66 additions and 34 deletions.
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/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);
 

diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.tsx b/packages/lib/src/components/Dropin/components/DropinComponent.tsx
@@ -131,7 +131,6 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
                 return status.props?.component?.render();
 
             default:
-                console.log('this.props.showRadioButton', this.props.showRadioButton);
                 return (
                     <div className={`adyen-checkout__dropin adyen-checkout__dropin--${status.type}`}>
                         {isRedirecting && status.props.component && status.props.component.render()}

diff --git a/...ges/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/ExpandButton.tsx b/...ges/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/ExpandButton.tsx
@@ -4,14 +4,14 @@ import { ComponentChildren, h } from 'preact';
 interface ExpandButton {
     buttonId: string;
     isSelected: boolean;
-    showRadioButton?: boolean;
     expandContentId: string;
     children: ComponentChildren;
+    showRadioButton?: boolean;
 }
 
 export function ExpandButton({ buttonId, showRadioButton, isSelected, expandContentId, children }: ExpandButton) {
     return (
-        // todo: fix it? See discussion: https://github.com/w3c/aria/issues/1404
+        // 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"

diff --git a/...b/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.scss b/...b/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.scss
@@ -13,10 +13,14 @@
         color 0.15s ease,
         box-shadow 0.15s ease,
         border-radius 0.15s ease;
-}
 
-.adyen-checkout__payment-method:focus {
-    outline: 0;
+    &:focus {
+        outline: 0;
+    }
+
+    &:hover:not(&--selected) {
+        border-color: var(--adyen-checkout-dropin-hover-item-border-color);
+    }
 }
 
 .adyen-checkout__payment-method--loading {

diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodList.test.tsx
@@ -106,7 +106,7 @@ test('should call onSelect when mounting the Component if openFirstPaymentMethod
         />
     );
 
-    expect(onSelectMock).toHaveBeenCalledTimes(1);
+    expect(onSelectMock).toHaveBeenCalledTimes(2);
     expect(onSelectMock).toHaveBeenCalledWith(paymentMethods[0]);
 });
 

diff --git a/...lickToPay/components/CtPOneTimePassword/CtPSaveCookiesCheckbox/CtPSaveCookiesCheckbox.tsx b/...lickToPay/components/CtPOneTimePassword/CtPSaveCookiesCheckbox/CtPSaveCookiesCheckbox.tsx
@@ -26,7 +26,13 @@ function CtPSaveCookiesCheckbox() {
                 'adyen-checkout-ctp__otp-checkbox-container--checked': checked
             })}
         >
-            <Field name={'clickToPayCookiesCheckbox'} showContextualElement={false} useLabelElement={false} i18n={i18n}>
+            <Field
+                classNameModifiers={['consentCheckbox']}
+                name={'clickToPayCookiesCheckbox'}
+                showContextualElement={false}
+                useLabelElement={false}
+                i18n={i18n}
+            >
                 <Checkbox
                     name={'clickToPayCookiesCheckbox'}
                     onInput={handleOnChange}

diff --git a/packages/lib/src/components/internal/FormFields/Checkbox/Checkbox.scss b/packages/lib/src/components/internal/FormFields/Checkbox/Checkbox.scss
@@ -91,7 +91,7 @@
         height: var(--adyen-checkout-spacer-070);
         border-radius: var(--adyen-checkout-border-radius-s);
         background-color: var(--adyen-checkout-color-background-primary);
-        border: var(--adyen-checkout-border-width-s) solid var(--adyen-checkout-color-outline-tertiary);
+        border: var(--adyen-checkout-border-width-s) solid var(--adyen-checkout-color-outline-primary);
         z-index: 0;
         transition: background 0.15s ease-out, border 0.05s ease-out, box-shadow 0.1s ease-out;
 
@@ -115,10 +115,11 @@
     }
 
     .adyen-checkout__input-wrapper {
+        @include index.adyen-checkout-input-wrapper-reset;
+
         flex: 1;
         justify-content: space-between;
 
-        @include index.adyen-checkout-input-wrapper-reset;
     }
 
     &.adyen-checkout__field--error {

diff --git a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.scss b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.scss
@@ -23,11 +23,10 @@
 }
 
 .adyen-checkout__fieldset__title {
-    color: var(--adyen-checkout-color-label-tertiary);
+    @include index.adyen-checkout-text-subtitle;
+
+    color: var(--adyen-checkout-color-label-primary);
     display: block;
-    font-size: var(--adyen-checkout-font-size-small);
-    font-weight: bold;
-    letter-spacing: 1px;
     margin: 0;
     padding: 0 0 var(--adyen-checkout-spacer-060);
 }

diff --git a/packages/lib/src/components/internal/FormInstruction/FormInstruction.scss b/packages/lib/src/components/internal/FormInstruction/FormInstruction.scss
@@ -2,7 +2,7 @@
 
 .adyen-checkout-form-instruction {
     line-height: var(--adyen-checkout-line-height-100);
-    color: var(--adyen-checkout-color-label-secondary);
+    color: var(--adyen-checkout-color-label-primary);
     font-size: var(--adyen-checkout-font-size-small);
     font-weight: normal;
     margin-top: 0;

diff --git a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss
@@ -2,7 +2,7 @@
 
 .adyen-checkout__field--separateDeliveryAddress {
     .adyen-checkout__input-wrapper {
-       @include index.adyen-checkout-input-wrapper-reset;
+        @include index.adyen-checkout-input-wrapper-reset;
     }
 }
 
@@ -24,5 +24,5 @@
 }
 
 .adyen-checkout__open-invoice .adyen-checkout__field--consentCheckbox {
-    margin-top: 16px;
+    margin-top: var(--adyen-checkout-spacer-070);
 }
diff --git a/packages/lib/src/components/internal/SendCopyToEmail/SendCopyToEmail.tsx b/packages/lib/src/components/internal/SendCopyToEmail/SendCopyToEmail.tsx
@@ -20,7 +20,12 @@ export default function SendCopyToEmail(props) {
 
     return (
         <div className={cx('adyen-checkout__fieldset', 'adyen-checkout__fieldset--sendCopyToEmail', props.classNames)}>
-            <Field classNameModifiers={['sendCopyToEmail']} name={'sendCopyToEmail'} useLabelElement={false} showErrorElement={false}>
+            <Field
+                classNameModifiers={['sendCopyToEmail', 'consentCheckbox']}
+                name={'sendCopyToEmail'}
+                useLabelElement={false}
+                showErrorElement={false}
+            >
                 <Checkbox onChange={toggleEmailField} label={i18n.get('boleto.sendCopyToEmail')} name={'sendCopyToEmail'} />
             </Field>
 

diff --git a/packages/lib/src/components/internal/Voucher/Voucher.tsx b/packages/lib/src/components/internal/Voucher/Voucher.tsx
@@ -90,7 +90,7 @@ export default function Voucher({ voucherDetails = [], className = '', ...props
                                         copyToClipboard(props.reference);
                                         complete();
                                     }}
-                                    icon={getImage({ imageFolder: 'components/' })('copy')}
+                                    icon={getImage({ imageFolder: 'components/' })('copy_white')}
                                     label={i18n.get('button.copy')}
                                 />
                             </li>
@@ -102,7 +102,7 @@ export default function Voucher({ voucherDetails = [], className = '', ...props
                                     inline
                                     variant="action"
                                     href={props.downloadUrl}
-                                    icon={getImage({ imageFolder: 'components/' })('download')}
+                                    icon={getImage({ imageFolder: 'components/' })('download_white')}
                                     label={props.downloadButtonText || i18n.get('button.download')}
                                     target="_blank"
                                     rel="noopener noreferrer"

diff --git a/packages/lib/src/style/design-tokens.scss b/packages/lib/src/style/design-tokens.scss
@@ -22,9 +22,13 @@
     --adyen-checkout-spacer-110: #{$spacer-110};
     --adyen-checkout-spacer-100: #{$spacer-100};
     --adyen-checkout-line-height-600: #{$line-height-600};
+    --adyen-checkout-line-height-400: #{$line-height-400};
     --adyen-checkout-line-height-200: #{$line-height-200};
     --adyen-checkout-line-height-100: #{$line-height-100};
     --adyen-checkout-font-weight-200: #{$font-weight-200};
+    --adyen-checkout-font-weight-500: #{$font-weight-500};
+    --adyen-checkout-font-weight-600: #{$font-weight-600};
+    --adyen-checkout-font-weight-700: #{$font-weight-700};
     --adyen-checkout-border-width-l: #{$border-width-l};
     --adyen-checkout-border-width-m: #{$border-width-m};
     --adyen-checkout-border-width-s: #{$border-width-s};
@@ -47,13 +51,16 @@
     --adyen-checkout-color-green: #{$color-green-1700};
     --adyen-checkout-color-blue: #{$color-blue-1700};
     --adyen-checkout-text-title-font-weight: #{$text-title-font-weight};
-    --adyen-checkout-text-body-strongest-font-weight: #{$text-body-strongest-font-weight};
-    --adyen-checkout-text-body-stronger-font-weight: #{$text-body-stronger-font-weight};
-    --adyen-checkout-text-body-font-weight: #{$text-body-font-weight};
-    --adyen-checkout-text-body-font-size: #{$text-body-font-size};
     --adyen-checkout-text-title-line-height: var(--adyen-checkout-line-height-600);
-    --adyen-checkout-text-caption-stronger-wide-line-height: var(--adyen-checkout-line-height-200);
+    --adyen-checkout-text-body-font-size: #{$text-body-font-size};
+    --adyen-checkout-text-body-font-weight: #{$text-body-font-weight};
+    --adyen-checkout-text-body-stronger-font-weight: #{$text-body-stronger-font-weight};
+    --adyen-checkout-text-body-strongest-font-weight: #{$text-body-strongest-font-weight};
     --adyen-checkout-text-caption-line-height: var(--adyen-checkout-line-height-100);
+    --adyen-checkout-text-subtitle-line-height: var(--adyen-checkout-line-height-400);
+    --adyen-checkout-text-subtitle-font-size: var(--adyen-checkout-font-size-medium);
+    --adyen-checkout-text-subtitle-font-weight: var(--adyen-checkout-font-weight-500);
+    --adyen-checkout-text-subtitle-stronger-font-weight: var(--adyen-checkout-font-weight-600);
     --adyen-checkout-focus-ring-color: var(--adyen-checkout-color-focus);
     --adyen-checkout-color-separator-primary: var(--adyen-checkout-color-grey-200);
     --adyen-checkout-color-outline-active: var(--adyen-checkout-color-grey-3200);
@@ -78,15 +85,15 @@
     --adyen-checkout-color-background-secondary: var(--adyen-checkout-color-grey-100);
 
     /* Drop-in */
+    --adyen-checkout-dropin-payment-list-gap: var(--adyen-checkout-spacer-100);
     --adyen-checkout-dropin-payment-item-gap: var(--adyen-checkout-spacer-070);
     --adyen-checkout-dropin-payment-item-border-color: var(--adyen-checkout-color-separator-primary);
     --adyen-checkout-dropin-payment-item-border-radius: var(--adyen-checkout-border-radius-m);
     --adyen-checkout-dropin-payment-item-border-width: var(--adyen-checkout-border-width-s);
     --adyen-checkout-dropin-selected-item-background: var(--adyen-checkout-color-grey-100);
-    --adyen-checkout-dropin-selected-item-border-color: var(--adyen-checkout-color-outline-secondary);
+    --adyen-checkout-dropin-selected-item-border-color: var(--adyen-checkout-color-outline-active);
+    --adyen-checkout-dropin-hover-item-border-color: var(--adyen-checkout-color-outline-secondary);
     --adyen-checkout-dropin-list-label-color: var(--adyen-checkout-color-label-primary);
-    --adyen-checkout-dropin-list-label-font-size: var(--adyen-checkout-font-size-small);
-    --adyen-checkout-dropin-list-label-font-weight: var(--adyen-checkout-text-body-strongest-font-weight);
 
     /* Spinner */
     --adyen-checkout-loading-indicator-color: var(--adyen-checkout-color-surface-inverse);
@@ -103,7 +110,7 @@
     --adyen-checkout-input-wrapper-hover-border-color: var(--adyen-checkout-color-outline-tertiary);
     --adyen-checkout-input-field-height: var(--adyen-checkout-spacer-110);
     --adyen-checkout-input-field-label-color: var(--adyen-checkout-color-label-primary);
-    --adyen-checkout-input-field-context-color: var(--adyen-checkout-color-label-secondary);
+    --adyen-checkout-input-field-context-color: var(--adyen-checkout-color-label-primary);
     --adyen-checkout-input-field-label-margin-bottom: var(--adyen-checkout-spacer-020);
     --adyen-checkout-input-field-context-margin-top: var(--adyen-checkout-spacer-020);
 

diff --git a/packages/lib/src/style/mixins.scss b/packages/lib/src/style/mixins.scss
@@ -91,3 +91,9 @@ $adyen-checkout-media-query-l-min: 1024px;
         box-shadow: none;
     }
 }
+
+@mixin adyen-checkout-text-subtitle {
+    font-size: var(--adyen-checkout-text-subtitle-font-size);
+    font-weight: var(--adyen-checkout-text-subtitle-stronger-font-weight);
+    line-height: var(--adyen-checkout-text-subtitle-line-height);
+}
-Original file line number
+Diff line change
@@ Expand Up @@
             />
         );
-        expect(onSelectMock).toHaveBeenCalledTimes(1);
+        expect(onSelectMock).toHaveBeenCalledTimes(2);
         expect(onSelectMock).toHaveBeenCalledWith(paymentMethods[0]);
     });
@@ Expand Down @@