@designcrowd/library.brand-page 6.1.10 → 6.1.11

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.fr-FR.json

@@ -1,10 +1,13 @@
 {
-  "pageSettingsSection" : {
-    "showNavigationBelow" : "Afficher la navigation sous le logo",
-    "previewDescription" : "L'aperçu n'est pas disponible pour cette taille d'écran.",
-    "navigationStyle" : "Style de navigation",
-    "logoSize" : "Taille du logo",
-    "socialLinks" : "Liens vers les réseaux sociaux",
-    "copyright" : "Droits d’auteur"
+  "pageSettingsSection": {
+    "showNavigationBelow": "Afficher la navigation sous le logo",
+    "previewDescription": "L'aperçu n'est pas disponible pour cette taille d'écran.",
+    "navigationStyle": "Style de navigation",
+    "navigationType": "Type de navigation",
+    "menuStyle": "Style de menu",
+    "iconStyle": "Style d'icône",
+    "logoSize": "Taille du logo",
+    "socialLinks": "Liens vers les réseaux sociaux",
+    "copyright": "Droits d’auteur"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.json

@@ -3,6 +3,9 @@
     "showNavigationBelow": "Show navigation below logo",
     "previewDescription": "Preview is not available on this screen size.",
     "navigationStyle": "Navigation style",
+    "navigationType": "Navigation type",
+    "menuStyle": "Menu style",
+    "iconStyle": "Icon style",
     "logoSize": "Logo Size",
     "socialLinks": "Social Links",
     "copyright": "Copyright"

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.pt-BR.json

@@ -1,10 +1,13 @@
 {
-  "pageSettingsSection" : {
-    "showNavigationBelow" : "Mostrar navegação abaixo do logotipo",
-    "previewDescription" : "A visualização não está disponível neste tamanho de tela.",
-    "navigationStyle" : "Estilo de navegação",
-    "logoSize" : "Tamanho do logotipo",
-    "socialLinks" : "Links de redes sociais",
-    "copyright" : "Direitos autorais"
+  "pageSettingsSection": {
+    "showNavigationBelow": "Mostrar navegação abaixo do logotipo",
+    "previewDescription": "A visualização não está disponível neste tamanho de tela.",
+    "navigationStyle": "Estilo de navegação",
+    "navigationType": "Tipo de navegação",
+    "menuStyle": "Estilo de menu",
+    "iconStyle": "Estilo de ícone",
+    "logoSize": "Tamanho do logotipo",
+    "socialLinks": "Links de redes sociais",
+    "copyright": "Direitos autorais"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.pt-PT.json

@@ -1,10 +1,13 @@
 {
-  "pageSettingsSection" : {
-    "showNavigationBelow" : "Mostrar a navegação por baixo do logótipo",
-    "previewDescription" : "A pré-visualização não está disponível neste tamanho de ecrã.",
-    "navigationStyle" : "Estilo de navegação",
-    "logoSize" : "Tamanho do logótipo",
-    "socialLinks" : "Links de redes sociais",
-    "copyright" : "Direitos de autor"
+  "pageSettingsSection": {
+    "showNavigationBelow": "Mostrar a navegação por baixo do logótipo",
+    "previewDescription": "A pré-visualização não está disponível neste tamanho de ecrã.",
+    "navigationStyle": "Estilo de navegação",
+    "navigationType": "Tipo de navegação",
+    "menuStyle": "Estilo de menu",
+    "iconStyle": "Estilo de Ícone",
+    "logoSize": "Tamanho do logótipo",
+    "socialLinks": "Links de redes sociais",
+    "copyright": "Direitos de autor"
   }
 }

package/src/shared/page-settings/store/page-settings-store.test.ts

@@ -273,4 +273,101 @@ describe('page store module', () => {
     // Assert
     expect(pageSettingsStore.currentPage.id).toEqual(PAGE_TWO.id);
   });
+
+  describe('setPreviousSelectedNavigationDisplayType', () => {
+    beforeEach(() => {
+      useUiPageSettingsStore().$patch(($state) => {
+        $state.previousSelectedNavigationDisplayTypes = {
+          desktop: {},
+          mobile: {},
+        };
+      });
+    });
+
+    test('remembers one display type per navigation type per viewport', () => {
+      const pageSettingsStore = useUiPageSettingsStore();
+
+      pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        'desktop',
+        'nav-tab-buttons',
+      );
+      pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        'desktop',
+        'nav-hamburger-hamburger',
+      );
+
+      expect(
+        pageSettingsStore.previousSelectedNavigationDisplayTypes?.desktop,
+      ).toEqual({
+        tabs: 'nav-tab-buttons',
+        hamburger: 'nav-hamburger-hamburger',
+      });
+    });
+
+    test('activity within one navigation type never evicts the other type (regression: MRU cap)', () => {
+      const pageSettingsStore = useUiPageSettingsStore();
+
+      // pick a bar style, switch to hamburger (default recorded), pick two more hamburger styles
+      pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        'desktop',
+        'nav-tab-buttons',
+      );
+      pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        'desktop',
+        'nav-hamburger-hamburger',
+      );
+      pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        'desktop',
+        'nav-hamburger-hamburger-light',
+      );
+
+      expect(
+        pageSettingsStore.previousSelectedNavigationDisplayTypes?.desktop?.tabs,
+      ).toEqual('nav-tab-buttons');
+      expect(
+        pageSettingsStore.previousSelectedNavigationDisplayTypes?.desktop
+          ?.hamburger,
+      ).toEqual('nav-hamburger-hamburger-light');
+    });
+
+    test('viewports are remembered independently', () => {
+      const pageSettingsStore = useUiPageSettingsStore();
+
+      pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        'desktop',
+        'nav-tab-buttons',
+      );
+      pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+        'mobile',
+        'nav-hamburger-hamburger',
+      );
+
+      expect(
+        pageSettingsStore.previousSelectedNavigationDisplayTypes?.desktop,
+      ).toEqual({ tabs: 'nav-tab-buttons' });
+      expect(
+        pageSettingsStore.previousSelectedNavigationDisplayTypes?.mobile,
+      ).toEqual({ hamburger: 'nav-hamburger-hamburger' });
+    });
+
+    test('re-initialises itself if a setState payload wiped the default', () => {
+      const pageSettingsStore = useUiPageSettingsStore();
+
+      pageSettingsStore.$patch(($state) => {
+        Object.assign($state, {
+          previousSelectedNavigationDisplayTypes: undefined,
+        });
+      });
+
+      expect(() =>
+        pageSettingsStore.setPreviousSelectedNavigationDisplayType(
+          'desktop',
+          'nav-tab-buttons',
+        ),
+      ).not.toThrow();
+      expect(
+        pageSettingsStore.previousSelectedNavigationDisplayTypes?.desktop?.tabs,
+      ).toEqual('nav-tab-buttons');
+    });
+  });
 });

package/src/shared/page-settings/store/page-settings-store.ts

@@ -7,7 +7,9 @@ import {
   PageFooterDesktop,
   PageFooterMobile,
   VIEWPORTS,
+  getNavigationType,
 } from '@brand-page';
+import type { NavigationType } from '@brand-page';
 import type {
   Content,
   ImageGalleryItem,
@@ -77,6 +79,10 @@ export interface PageSettingsState {
     [VIEWPORTS.desktop]: string[];
     [VIEWPORTS.mobile]: string[];
   };
+  previousSelectedNavigationDisplayTypes?: {
+    [VIEWPORTS.desktop]: Partial<Record<NavigationType, string>>;
+    [VIEWPORTS.mobile]: Partial<Record<NavigationType, string>>;
+  };
 }
 
 export const useUiPageSettingsStore = defineStore('uiPageSettings', {
@@ -104,6 +110,10 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
       [VIEWPORTS.desktop]: [],
       [VIEWPORTS.mobile]: [],
     },
+    previousSelectedNavigationDisplayTypes: {
+      [VIEWPORTS.desktop]: {},
+      [VIEWPORTS.mobile]: {},
+    },
   }),
   actions: {
     setState({
@@ -493,7 +503,16 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
         this.sectionCollapsedStates[key] = true;
       });
     },
-    setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string) {
+    setPreviousSelectedDisplayStyle(
+      viewport: string,
+      displayStyle: string,
+    ): void {
+      // guard against a setState payload wiping the initialized default
+      this.previousSelectedDisplayStyles ??= {
+        [VIEWPORTS.desktop]: [],
+        [VIEWPORTS.mobile]: [],
+      };
+
       // filter out duplicate
       this.previousSelectedDisplayStyles[viewport] =
         this.previousSelectedDisplayStyles[viewport].filter(
@@ -506,6 +525,22 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
         ...this.previousSelectedDisplayStyles[viewport].splice(0, 1),
       ];
     },
+    setPreviousSelectedNavigationDisplayType(
+      viewport: string,
+      displayType: string,
+    ): void {
+      // guard against a setState payload wiping the initialized default
+      this.previousSelectedNavigationDisplayTypes ??= {
+        [VIEWPORTS.desktop]: {},
+        [VIEWPORTS.mobile]: {},
+      };
+
+      // one remembered style per navigation type, so switching type restores it
+      this.previousSelectedNavigationDisplayTypes[viewport] = {
+        ...this.previousSelectedNavigationDisplayTypes[viewport],
+        [getNavigationType(displayType)]: displayType,
+      };
+    },
   },
   getters: {
     // Single source of truth for the page-limit paywall. Admin-maker (template