Add stepped class in wizard/tabs

adobe · Dec 2, 2024 · 5fb8969 · 5fb8969
1 parent 75e25e7
commit 5fb8969
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 2 deletions.
diff --git a/.../content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md b/.../content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md
@@ -50,6 +50,7 @@ BLOCK cmp-tabs
     ELEMENT cmp-tabs__tablist
     ELEMENT cmp-tabs__tab
         MOD cmp-tabs__tab--active
+        MOD cmp-tabs__tab--stepped
     ELEMENT cmp-tabs__title
     ELEMENT cmp-tabs__icon
     ELEMENT cmp-tabs__label

diff --git a/...t/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js b/...t/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js
@@ -27,6 +27,10 @@
                 tab: "cmp-tabs__tab--active",
                 tabpanel: "cmp-tabs__tabpanel--active"
             },
+            stepped: {
+                tab: "cmp-tabs__tab--stepped",
+                tabpanel: "cmp-tabs__tabpanel--stepped"
+            },
             label: `.${Tabs.bemBlock}__label`,
             description: `.${Tabs.bemBlock}__longdescription`,
             qm: `.${Tabs.bemBlock}__questionmark`,

diff --git a/...nt/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md b/...nt/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md
@@ -48,6 +48,7 @@ BLOCK cmp-verticaltabs
     ELEMENT cmp-verticaltabs__label-container
     ELEMENT cmp-verticaltabs__tab
         MOD cmp-verticaltabs__tab--active
+        MOD cmp-verticaltabs__tab--stepped
     ELEMENT cmp-verticaltabs__title
     ELEMENT cmp-verticaltabs__icon
     ELEMENT cmp-verticaltabs__label

diff --git a/...s/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js b/...s/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js
@@ -27,6 +27,10 @@
                 tab: "cmp-verticaltabs__tab--active",
                 tabpanel: "cmp-verticaltabs__tabpanel--active"
             },
+            stepped: {
+                tab: "cmp-verticaltabs__tab--stepped",
+                tabpanel: "cmp-verticaltabs__tabpanel--stepped"
+            },
             label: `.${VerticalTabs.bemBlock}__label`,
             description: `.${VerticalTabs.bemBlock}__longdescription`,
             qm: `.${VerticalTabs.bemBlock}__questionmark`,

diff --git a/...c/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md b/...c/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md
@@ -46,8 +46,10 @@ It is already included by its edit and policy dialogs.
 ```
 BLOCK cmp-adaptiveform-wizard
     ELEMENT cmp-adaptiveform-wizard__label
-    ELEMENT cmp-adaptiveform-wizard__label-container
+    ELEMENT cmp-adaptiveform-wizard__label-container 
     ELEMENT cmp-adaptiveform-wizard__tab
+        MOD cmp-adaptiveform-wizard__tab--active
+        MOD cmp-adaptiveform-wizard__tab--stepped
     ELEMENT cmp-adaptiveform-wizard__wizardpanel
     ELEMENT cmp-adaptiveform-wizard__previousNav
     ELEMENT cmp-adaptiveform-wizard__nextNav

diff --git a/...nt/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js b/...nt/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js
@@ -29,7 +29,11 @@
                 active: {
                     tab: "cmp-adaptiveform-wizard__tab--active",
                     wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--active"
-                }
+                },
+                stepped: {
+                    tab: "cmp-adaptiveform-wizard__tab--stepped",
+                    wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--stepped",
+                }    
             };
 
             _active;
@@ -126,6 +130,11 @@
                                 tabs[i].setAttribute("aria-selected", true);
                                 tabs[i].setAttribute("tabindex", "0");
                             } else {
+                                // If the panel/tab was previously active, mark it as stepped
+                                if (wizardPanels[i].classList.contains(this.constructor.selectors.active.wizardpanel)) {
+                                    wizardPanels[i].classList.add(this.constructor.selectors.stepped.wizardpanel);
+                                    tabs[i].classList.add(this.constructor.selectors.stepped.tab);
+                                }
                                 wizardPanels[i].classList.remove(this.constructor.selectors.active.wizardpanel);
                                 wizardPanels[i].setAttribute("aria-hidden", true);
                                 tabs[i].classList.remove(this.constructor.selectors.active.tab);

diff --git a/...t/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js b/...t/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js
@@ -41,6 +41,10 @@
                     tab: "cmp-adaptiveform-wizard__tab--active",
                     wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--active"
                 },
+                stepped: {
+                    tab: "cmp-adaptiveform-wizard__tab--stepped",
+                    wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--stepped",
+                },
                 label: `.${Wizard.bemBlock}__label`,
                 description: `.${Wizard.bemBlock}__longdescription`,
                 qm: `.${Wizard.bemBlock}__questionmark`,

diff --git a/ui.frontend/src/view/FormTabs.js b/ui.frontend/src/view/FormTabs.js
@@ -116,6 +116,11 @@ class FormTabs extends FormPanel {
                         tabs[i].setAttribute(Constants.TABINDEX, "0");
                         tabs[i].setAttribute(Constants.ARIA_CURRENT, "true");
                     } else {
+                         // If the panel/tab was previously active, mark it as stepped
+                         if (tabpanels[i].classList.contains(this.#_selectors.active.tabpanel)) {
+                            tabpanels[i].classList.add(this.#_selectors.stepped.tabpanel);
+                            tabs[i].classList.add(this.#_selectors.stepped.tab);
+                        }
                         tabpanels[i].classList.remove(this.#_selectors.active.tabpanel);
                         tabpanels[i].setAttribute(Constants.ARIA_HIDDEN, true);
                         tabs[i].classList.remove(this.#_selectors.active.tab);

diff --git a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js
@@ -90,10 +90,13 @@ describe("Form with Panel Container", () => {
         tab2().should('have.class', 'cmp-tabs__tab--active');
         tab2().should('have.attr', 'aria-selected', 'true');
         tab1().should('have.attr', 'aria-selected', 'false');
+        tab1().should('have.class', 'cmp-tabs__tab--stepped');
         tab1().click();
         tab1().should('have.class', 'cmp-tabs__tab--active');
+        tab1().should('have.class', 'cmp-tabs__tab--stepped');
         tab1().should('have.attr', 'aria-selected', 'true');
         tab2().should('have.attr', 'aria-selected', 'false');
+        tab2().should('have.class', 'cmp-tabs__tab--stepped');
     });
 
     it("switch tab in runtime using keyboard", () => {

diff --git a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js
@@ -90,8 +90,10 @@
         tab2().should('have.class','cmp-verticaltabs__tab--active');
         tab2().should('have.attr','aria-selected','true');
         tab1().should('have.attr','aria-selected','false');
+        tab1().should('have.class','cmp-verticaltabs__tab--stepped');
         tab1().click();
         tab1().should('have.class','cmp-verticaltabs__tab--active');
+        tab1().should('have.class','cmp-verticaltabs__tab--stepped');
         tab1().should('have.attr','aria-selected','true');
         tab2().should('have.attr','aria-selected','false');
     });

diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js
@@ -54,17 +54,21 @@ describe("Form with Wizard Layout Container", () => {
         cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true});
 
         cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active');
+        cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped');
         cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active');
 
         cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+        cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped');
         cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
 
         cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true});
 
         cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active');
+        cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped');
         cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active');
 
         cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+        cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped');
         cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
         cy.expectNoConsoleErrors();
     });
@@ -90,9 +94,11 @@ describe("Form with Wizard Layout Container", () => {
         cy.get(".cmp-adaptiveform-wizard__nav--previous").click({force: true});
 
         cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active');
+        cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped');
         cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active');
 
         cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
+        cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped');
         cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
         cy.expectNoConsoleErrors();
     });