feat: added responsive behavior on input fields for card and stored card (#3583)

* feat: added responsive behavior on input fields for card and stored card fields

* refactor: extract `.adyen-checkout__field-group` to Address.scss, use `Fieldset` for CardFields.tsx

* refactor: rollback card expiration date and cvc fields

* refactor: added fieldset-fields-layout mixin

Author: Yu Long

.changeset/wide-mammals-repair.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Stacked the expiration date and security code fields on smaller screens to enhance layout and usability.

packages/lib/.storybook/main.css

@@ -21,7 +21,7 @@ button {
 
 .storybook-status-container {
     align-items: center;
-    background-color: #ffffff;
+    background-color: #fff;
     border: 1px solid #c9cdd3;
     border-radius: 8px;
     color: #00112c;

packages/lib/src/components/Card/components/CardInput/components/CardFields.scss

@@ -0,0 +1,11 @@
+@use 'styles/index';
+
+.adyen-checkout__card__exp-cvc {
+    @include index.fieldset-fields-layout;
+
+    @include index.screen-s-and-up {
+        .adyen-checkout__field {
+            margin-bottom: 0;
+        }
+    }
+}

packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx

@@ -13,6 +13,7 @@ import {
     ENCRYPTED_SECURITY_CODE
 } from '../../../../internal/SecuredFields/lib/constants';
 import AvailableBrands from './AvailableBrands';
+import './CardFields.scss';
 
 export default function CardFields({
     brand,
@@ -60,33 +61,33 @@ export default function CardFields({
             <AvailableBrands activeBrand={brand} brands={allowedBrands} />
 
             <div
-                className={classNames('adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper', {
+                className={classNames('adyen-checkout__card__exp-cvc', {
                     'adyen-checkout__card__exp-cvc__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN
                 })}
             >
                 <ExpirationDate
+                    classNameModifiers={['col-50']}
                     error={getError(errors, ENCRYPTED_EXPIRY_DATE)}
                     focused={focusedElement === ENCRYPTED_EXPIRY_DATE}
                     isValid={!!valid.encryptedExpiryMonth && !!valid.encryptedExpiryYear}
                     filled={!!errors.encryptedExpiryDate || !!valid.encryptedExpiryYear}
                     label={i18n.get('creditCard.expiryDate.label')}
                     onFocusField={onFocusField}
-                    className={'adyen-checkout__field--50'}
                     expiryDatePolicy={expiryDatePolicy}
                     showContextualElement={showContextualElement}
                     contextualText={i18n.get('creditCard.expiryDate.contextualText')}
                 />
 
                 {hasCVC && (
                     <CVC
+                        classNameModifiers={['col-50']}
                         error={getError(errors, ENCRYPTED_SECURITY_CODE)}
                         focused={focusedElement === ENCRYPTED_SECURITY_CODE}
                         cvcPolicy={cvcPolicy}
                         isValid={!!valid.encryptedSecurityCode}
                         filled={!!errors.encryptedSecurityCode || !!valid.encryptedSecurityCode}
                         label={i18n.get('creditCard.securityCode.label')}
                         onFocusField={onFocusField}
-                        className={'adyen-checkout__field--50'}
                         frontCVC={isAmex}
                         showContextualElement={showContextualElement}
                         contextualText={cvcContextualText}

packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.test.tsx

@@ -0,0 +1,36 @@
+import { h } from 'preact';
+import { render, screen } from '@testing-library/preact';
+import ExpirationDate from './ExpirationDate';
+import { CoreProvider } from '../../../../../core/Context/CoreProvider';
+import { DATE_POLICY_REQUIRED } from '../../../../internal/SecuredFields/lib/constants';
+
+const renderWithCoreContext = ui => {
+    return render(
+        <CoreProvider i18n={globalThis.i18n} resources={globalThis.resources} loadingContext="test">
+            {ui}
+        </CoreProvider>
+    );
+};
+
+describe('ExpirationDate', () => {
+    const defaultProps = {
+        label: 'Expiry date',
+        onFocusField: jest.fn(),
+        expiryDatePolicy: DATE_POLICY_REQUIRED,
+        focused: false,
+        filled: false,
+        error: '',
+        isValid: false,
+        showContextualElement: false,
+        contextualText: 'MM/YY'
+    };
+
+    test('should apply classNameModifiers to the Field component', () => {
+        const modifiers = ['custom-modifier-1', 'custom-modifier-2'];
+        renderWithCoreContext(<ExpirationDate {...defaultProps} classNameModifiers={modifiers} />);
+
+        const fieldElement = screen.getByTestId('form-field');
+        expect(fieldElement).toHaveClass('adyen-checkout__field--custom-modifier-1', 'adyen-checkout__field--custom-modifier-2');
+        expect(fieldElement).toHaveClass('adyen-checkout__field--expiryDate');
+    });
+});

packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx

@@ -21,6 +21,7 @@ export default function ExpirationDate(props: ExpirationDateProps) {
         filled,
         onFocusField,
         className = '',
+        classNameModifiers = [],
         error = '',
         isValid = false,
         expiryDatePolicy = DATE_POLICY_REQUIRED,
@@ -47,7 +48,7 @@ export default function ExpirationDate(props: ExpirationDateProps) {
     return (
         <Field
             label={fieldLabel}
-            classNameModifiers={['expiryDate']}
+            classNameModifiers={[...classNameModifiers, 'expiryDate']}
             className={fieldClassnames}
             focused={focused}
             filled={filled}

packages/lib/src/components/Card/components/CardInput/components/StoredCardFields.tsx

@@ -5,6 +5,7 @@ import { useCoreContext } from '../../../../../core/Context/CoreProvider';
 import { StoredCardFieldsProps } from './types';
 import { ENCRYPTED_SECURITY_CODE } from '../../../../internal/SecuredFields/lib/constants';
 import InputText from '../../../../internal/FormFields/InputText';
+import Fieldset from '../../../../internal/FormFields/Fieldset';
 
 export default function StoredCardFields({
     brand,
@@ -34,12 +35,11 @@ export default function StoredCardFields({
 
     return (
         <div className="adyen-checkout__card__form adyen-checkout__card__form--oneClick" aria-label={ariaLabel}>
-            <div className="adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper">
+            <Fieldset classNamesFields={['adyen-checkout__card__exp-cvc']}>
                 {expiryMonth && expiryYear && (
                     <Field
                         label={i18n.get('creditCard.expiryDate.label')}
-                        className="adyen-checkout__field--50"
-                        classNameModifiers={['storedCard']}
+                        classNameModifiers={['col-50', 'storedCard']}
                         name={'expiryDateField'}
                         disabled
                     >
@@ -62,14 +62,13 @@ export default function StoredCardFields({
                         isValid={!!valid.encryptedSecurityCode}
                         label={i18n.get('creditCard.securityCode.label')}
                         onFocusField={onFocusField}
-                        {...(expiryMonth && expiryYear && { className: 'adyen-checkout__field--50' })}
-                        classNameModifiers={['storedCard']}
+                        classNameModifiers={[...(expiryMonth && expiryYear ? ['col-50', 'storedCard'] : ['storedCard'])]}
                         frontCVC={isAmex}
                         showContextualElement={showContextualElement}
                         contextualText={cvcContextualText}
                     />
                 )}
-            </div>
+            </Fieldset>
         </div>
     );
 }

packages/lib/src/components/Card/components/CardInput/components/types.ts

@@ -87,6 +87,7 @@ export interface DualBrandingIconProps {
 
 export interface ExpirationDateProps {
     className?: string;
+    classNameModifiers?: string[];
     error?: string;
     filled?: boolean;
     focused?: boolean;

packages/lib/src/components/internal/Address/Address.scss

@@ -0,0 +1,21 @@
+@use 'styles/index';
+@import 'styles/variable-generator';
+
+.adyen-checkout__fieldset--address {
+    .adyen-checkout__field-group {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    .adyen-checkout__field-group:last-of-type .adyen-checkout__field {
+        @include index.screen-s-and-up {
+            margin-bottom: 0;
+        }
+
+        &:last-of-type {
+            margin-bottom: 0;
+        }
+    }
+}

packages/lib/src/components/internal/Address/Address.tsx

@@ -14,6 +14,7 @@ import { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils';
 import { useCoreContext } from '../../../core/Context/CoreProvider';
 import AddressSearch from './components/AddressSearch';
 import { ComponentMethodsRef } from '../UIElement/types';
+import './Address.scss';
 
 export default function Address(props: AddressProps) {
     const { i18n } = useCoreContext();
@@ -185,7 +186,7 @@ export default function Address(props: AddressProps) {
 
     return (
         <Fragment>
-            <Fieldset classNameModifiers={[label || 'address']} label={label}>
+            <Fieldset classNameModifiers={[label, 'address']} label={label}>
                 {showAddressSearch && (
                     <AddressSearch
                         onAddressLookup={props.onAddressLookup}