Merge branch 'develop' into feature/CXSPA-8195

SAP · Nov 4, 2024 · 369e5b8 · 369e5b8
2 parents 2e54e25 + 79c60bf
commit 369e5b8
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 0 deletions.
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -490,6 +490,11 @@ export interface FeatureTogglesInterface {
    */
   a11yFacetsDialogFocusHandling?: boolean;
 
+  /**
+   * `StorefrontComponent`: Prevents header links from wrapping on smaller screen sizes
+   */
+  headerLayoutForSmallerViewports?: boolean;
+
   /**
    * Enables radio group fieldset for 'CheckoutDeliveryModeComponent' form
    * and further improves its screen reader readout.
@@ -774,6 +779,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yNotificationsOnConsentChange: false,
   a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields: false,
   a11yFacetsDialogFocusHandling: false,
+  headerLayoutForSmallerViewports: false,
   a11yStoreFinderAlerts: false,
   a11yFormErrorMuteIcon: false,
   a11yCxMessageFocus: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -358,6 +358,7 @@ if (environment.cpq) {
         a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields:
           true,
         a11yFacetsDialogFocusHandling: true,
+        headerLayoutForSmallerViewports: true,
         a11yStoreFinderAlerts: true,
         a11yFormErrorMuteIcon: true,
         a11yCxMessageFocus: true,

diff --git a/projects/storefrontlib/layout/main/storefront.component.ts b/projects/storefrontlib/layout/main/storefront.component.ts
@@ -81,6 +81,7 @@ export class StorefrontComponent implements OnInit, OnDestroy {
   ) {
     useFeatureStyles('a11yImproveContrast');
     useFeatureStyles('cmsBottomHeaderSlotUsingFlexStyles');
+    useFeatureStyles('headerLayoutForSmallerViewports');
   }
 
   ngOnInit(): void {

diff --git a/projects/storefrontstyles/scss/components/layout/header/_header.scss b/projects/storefrontstyles/scss/components/layout/header/_header.scss
@@ -207,6 +207,10 @@ $space: 0.5rem;
     .SiteLinks {
       justify-content: flex-end;
       color: var(--cx-color-primary);
+
+      @include forFeature('headerLayoutForSmallerViewports') {
+        flex-wrap: nowrap;
+      }
     }
 
     .SiteLogin {