From 628c8894e65ab66b4481fd3e591ee0c83d1dad93 Mon Sep 17 00:00:00 2001 From: Pavitra Khatri Date: Mon, 2 Dec 2024 12:05:56 +0530 Subject: [PATCH] Add stepped class in wizard/tabs --- .../accordion/clientlibs/commons/js/common.js | 14 ++++-- .../clientlibs/site/js/accordionview.js | 6 +++ .../form/tabsontop/v1/tabsontop/README.md | 1 + .../v1/tabsontop/clientlibs/site/js/tabs.js | 4 ++ .../verticaltabs/v1/verticaltabs/README.md | 1 + .../clientlibs/site/js/verticaltabs.js | 4 ++ .../form/wizard/v1/wizard/README.md | 4 +- .../v1/wizard/clientlibs/commons/js/common.js | 49 ++++++++++++++++++- .../wizard/clientlibs/site/js/wizardview.js | 34 +++++++------ ui.frontend/src/view/FormTabs.js | 28 +++++++++++ .../accordion.repeatability.runtime.cy.js | 35 +++++++++++++ .../specs/tabsontop/tabsontop.runtime.cy.js | 3 ++ .../tabsontop.runtime.repeatability.cy.js | 36 ++++++++++++++ .../verticaltabs/verticaltabs.runtime.cy.js | 2 + .../verticaltabs.runtime.repeatability.cy.js | 36 ++++++++++++++ .../specs/wizard/wizard.runtime.cy.js | 6 +++ .../wizard/wizard.runtime.repeatability.cy.js | 37 ++++++++++++++ 17 files changed, 279 insertions(+), 21 deletions(-) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js index ff44304bcf..977f8b7faa 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js @@ -42,11 +42,13 @@ static cssClasses = { button: { disabled: "cmp-accordion__button--disabled", - expanded: "cmp-accordion__button--expanded" + expanded: "cmp-accordion__button--expanded", + stepped: "cmp-accordion__button--stepped" }, panel: { hidden: "cmp-accordion__panel--hidden", - expanded: "cmp-accordion__panel--expanded" + expanded: "cmp-accordion__panel--expanded", + stepped: "cmp-accordion__panel--stepped" } }; @@ -239,6 +241,11 @@ item.removeAttribute(this.constructor.dataAttributes.item.expanded); var button = this.getCachedButtons()[index]; var panel = this.getCachedPanels()[index]; + if (button.classList.contains(this.constructor.cssClasses.button.expanded)) { + // Only apply `stepped` class if the tab was previously expanded + button.classList.add(this.constructor.cssClasses.button.stepped); + panel.classList.add(this.constructor.cssClasses.panel.stepped); + } button.classList.remove(this.constructor.cssClasses.button.expanded); // used to fix some known screen readers issues in reading the correct state of the 'aria-expanded' attribute // e.g. https://bugs.webkit.org/show_bug.cgi?id=210934 @@ -250,8 +257,9 @@ panel.setAttribute("aria-hidden", true); } } - } + }; } + window.Forms = window.Forms || {}; window.Forms.CoreComponentsCommons = window.Forms.CoreComponentsCommons || {}; diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js index a73d45d652..4ae139799e 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js @@ -258,6 +258,12 @@ } this.expandItem(itemDivToExpand); this.collapseAllOtherItems(itemDivToExpand.id); + + const cachedItems = this.getCachedItems(); + const newIndex = cachedItems.indexOf(itemDivToExpand); + this.getCachedButtons()[newIndex].classList.remove(this.constructor.cssClasses.button.stepped); + this.getCachedPanels()[newIndex].classList.remove(this.constructor.cssClasses.panel.stepped); + this.#showHideRepeatableButtons(childView.getInstanceManager()); } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md index 34f4f2afc0..95c3bffba8 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md +++ b/ui.af.apps/src/main/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/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js index 4dd738e70b..1489af4264 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js +++ b/ui.af.apps/src/main/content/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/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md index d616724e0c..8a5f4638b9 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md +++ b/ui.af.apps/src/main/content/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/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js index 69667ae682..5e0e654d42 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/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/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md index 19aa9653be..748e9ea4b4 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md +++ b/ui.af.apps/src/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/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js index 419285efb7..b2dc6ea8ab 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js +++ b/ui.af.apps/src/main/content/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; @@ -72,6 +76,48 @@ } } + addSteppedClass() { + const tabs = this.getCachedTabs(); + const wizardPanels = this.getCachedWizardPanels(); + const activeChildId = this.getActiveWizardTabId(tabs) + const activeTab = this.getTabNavElementById(activeChildId); + if (activeTab.classList.contains(this.constructor.selectors.active.tab)) { + activeTab.classList.add(this.constructor.selectors.stepped.tab); + + const correspondingPanel = Array.from(wizardPanels).find(panel => + panel.getAttribute("aria-labelledby") === activeTab.id + ); + + if (correspondingPanel) { + correspondingPanel.classList.add(this.constructor.selectors.stepped.wizardpanel); + } + } + } + + getTabNavElementById(tabId) { + let tabs = this.getCachedTabs(); + if (tabs) { + for (let i = 0; i < tabs.length; i++) { + if (tabs[i].id === tabId) { + return tabs[i]; + } + } + } + } + + getActiveWizardTabId(tabs) { + if (tabs) { + var result = tabs[0].id; + for (var i = 0; i < tabs.length; i++) { + if (tabs[i].classList.contains(this.constructor.selectors.active.tab)) { + result = tabs[i].id; + break; + } + } + return result; + } + } + /** * Returns the index of the active tab, if no tab is active returns 0 * @@ -105,6 +151,7 @@ */ navigate(index) { this._active = index; + this.addSteppedClass(); this.refreshActive(); } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js index 71f22f814e..61e8688b6e 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js +++ b/ui.af.apps/src/main/content/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`, @@ -331,7 +335,7 @@ this.navigate(index); this.focusWithoutScroll(this.getCachedTabs()[index]); } - + #syncWizardNavLabels() { const tabs = this.getCachedTabs(); const wizardPanels = this.getCachedWizardPanels(); @@ -382,12 +386,21 @@ } } else { let beforeTabNavElementId = childView.getInstanceManager().children[instanceIndex - 1].element.id + Wizard.#tabIdSuffix - let beforeElement = this.#getTabNavElementById(beforeTabNavElementId); + let beforeElement = this.getTabNavElementById(beforeTabNavElementId); beforeElement.after(navigationTabToBeRepeated); } this.cacheElements(this._elements.self); let repeatedWizardPanel = this.#getWizardPanelElementById(childView.id + Wizard.#wizardPanelIdSuffix); repeatedWizardPanel.setAttribute("aria-labelledby", childView.id + Wizard.#tabIdSuffix); + + const steppedTabClass = Array.from(navigationTabToBeRepeated.classList).find(cls => cls.includes('--stepped')); + if (steppedTabClass) { + navigationTabToBeRepeated.classList.remove(steppedTabClass); + } + const steppedWizardPanelClass = Array.from(repeatedWizardPanel.classList).find(cls => cls.includes('--stepped')); + if (steppedWizardPanelClass) { + repeatedWizardPanel.classList.remove(steppedWizardPanelClass); + } this.refreshActive(); this.#getTabIndexById(); if (childView.getInstanceManager().getModel().minOccur != undefined && childView.getInstanceManager().children.length > childView.getInstanceManager().getModel().minOccur) { @@ -400,7 +413,7 @@ let removedTabPanelId = removedInstanceView.element.id + Wizard.#wizardPanelIdSuffix; let removedTabNavId = removedTabPanelId.substring(0, removedTabPanelId.lastIndexOf("__")) + Wizard.#tabIdSuffix; let wizardPanelElement = this.#getWizardPanelElementById(removedTabPanelId); - let tabNavElement = this.#getTabNavElementById(removedTabNavId); + let tabNavElement = this.getTabNavElementById(removedTabNavId); tabNavElement.remove(); wizardPanelElement.remove(); this.children.splice(this.children.indexOf(removedInstanceView), 1); @@ -448,7 +461,7 @@ let tabId = childView.element.id + Wizard.#tabIdSuffix; let wizardPanelId = childView.element.id + Wizard.#wizardPanelIdSuffix; let instanceManagerId = childView.getInstanceManager().getId(); - let navigationTabToBeRepeated = this.#getTabNavElementById(tabId); + let navigationTabToBeRepeated = this.getTabNavElementById(tabId); let wizardPanelToBeRepeated = this.#getWizardPanelElementById(wizardPanelId) this._templateHTML[instanceManagerId] = {}; this._templateHTML[instanceManagerId]['navigationTab'] = navigationTabToBeRepeated; @@ -456,17 +469,6 @@ } } - #getTabNavElementById(tabId) { - let tabs = this.getCachedTabs(); - if (tabs) { - for (let i = 0; i < tabs.length; i++) { - if (tabs[i].id === tabId) { - return tabs[i]; - } - } - } - } - #getWizardPanelElementById(wizardPanelId) { let wizardPanels = this.getCachedWizardPanels(); if (wizardPanels) { @@ -516,7 +518,7 @@ } updateChildVisibility(visible, state) { - this.updateVisibilityOfNavigationElement(this.#getTabNavElementById(state.id + Wizard.#tabIdSuffix), visible); + this.updateVisibilityOfNavigationElement(this.getTabNavElementById(state.id + Wizard.#tabIdSuffix), visible); let activeTabNavElement = this.getCachedTabs()[this._active]; this.#setNavigationRange(); this.#hideUnhideNavButtons(this._active); diff --git a/ui.frontend/src/view/FormTabs.js b/ui.frontend/src/view/FormTabs.js index e432c30ca4..462d87d8e8 100644 --- a/ui.frontend/src/view/FormTabs.js +++ b/ui.frontend/src/view/FormTabs.js @@ -286,9 +286,29 @@ class FormTabs extends FormPanel { */ navigate(tabId) { this.#_active = tabId; + this.addSteppedClass(tabId); this.#refreshActive(); } + + addSteppedClass(tabId) { + var tabs = this.#getCachedTabs(); + var tabpanels= this.#getCachedTabPanels(); + const activeTabId = this.getActiveTabId(tabs); + const activeTabElement = this.#getTabNavElementById(activeTabId); + if (activeTabElement.classList.contains(this.#_selectors.active.tab)) { + activeTabElement.classList.add(this.#_selectors.stepped.tab); + + const correspondingPanel = Array.from(tabpanels).find(panel => + panel.getAttribute("aria-labelledby") === activeTabElement.id + ); + + if (correspondingPanel) { + correspondingPanel.classList.add(this.#_selectors.stepped.tabpanel); + } + } + } + /** * Returns the id of the active tab, if no tab is active returns 0th element id * @@ -384,6 +404,14 @@ class FormTabs extends FormPanel { this.#cacheElements(this._elements.self); var repeatedTabPanel = this.#getTabPanelElementById(childView.id + this.#tabPanelIdSuffix); repeatedTabPanel.setAttribute("aria-labelledby", childView.id + this.#tabIdSuffix); + const steppedTabClass = Array.from(navigationTabToBeRepeated.classList).find(cls => cls.includes('--stepped')); + if (steppedTabClass) { + navigationTabToBeRepeated.classList.remove(steppedTabClass); + } + const steppedTabpanelClass = Array.from(repeatedTabPanel.classList).find(cls => cls.includes('--stepped')); + if (steppedTabpanelClass) { + repeatedTabPanel.classList.remove(steppedTabpanelClass); + } this.#bindEventsToTab(navigationTabToBeRepeated.id); this.#refreshActive(); if (childView.getInstanceManager().getModel().minOccur != undefined && childView.getInstanceManager().children.length > childView.getInstanceManager().getModel().minOccur) { diff --git a/ui.tests/test-module/specs/accordion/accordion.repeatability.runtime.cy.js b/ui.tests/test-module/specs/accordion/accordion.repeatability.runtime.cy.js index 2b0f4993fc..d716a09330 100644 --- a/ui.tests/test-module/specs/accordion/accordion.repeatability.runtime.cy.js +++ b/ui.tests/test-module/specs/accordion/accordion.repeatability.runtime.cy.js @@ -212,6 +212,41 @@ describe("Form with Accordion Container with repeatable elements", () => { getAccordionButtons().should('have.length', 8); }) }); + + it("if item-1 is repeated, the repeated instance should not have stepped class", () => { + getItemDivs().should('have.length', 5); + getAccordionPanels().should('have.length', 5); + getAccordionButtons().should('have.length', 5); + getExpandedPanelDiv().should('have.length', 1); + getExpandedButtonDiv().should('have.length', 1); + getAccordionButtonsAtIndex(0).should('have.class', 'cmp-accordion__button--expanded'); + getAccordionPanelsAtIndex(0).should('have.class', 'cmp-accordion__panel--expanded'); + cy.get("button").contains("+RP1").click().then(() => { + getItemDivs().should('have.length', 6); + getAccordionPanels().should('have.length', 6); + getAccordionButtons().should('have.length', 6); + getExpandedPanelDiv().should('have.length', 1); + getExpandedButtonDiv().should('have.length', 1); + getAccordionButtonsAtIndex(1).should('have.class', 'cmp-accordion__button--expanded'); + getAccordionPanelsAtIndex(1).should('have.class', 'cmp-accordion__panel--expanded'); + getAccordionButtonsAtIndex(0).should('have.class', 'cmp-accordion__button--stepped'); + getAccordionPanelsAtIndex(0).should('have.class', 'cmp-accordion__panel--stepped'); + }); + cy.get("button").contains("+RP1").click().then(() => { + getItemDivs().should('have.length', 7); + getAccordionPanels().should('have.length', 7); + getAccordionButtons().should('have.length', 7); + getExpandedPanelDiv().should('have.length', 1); + getExpandedButtonDiv().should('have.length', 1); + getAccordionButtonsAtIndex(2).should('have.class', 'cmp-accordion__button--expanded'); + getAccordionPanelsAtIndex(2).should('have.class', 'cmp-accordion__panel--expanded'); + getAccordionButtonsAtIndex(1).should('have.class', 'cmp-accordion__button--stepped'); + getAccordionPanelsAtIndex(1).should('have.class', 'cmp-accordion__panel--stepped'); + getAccordionButtonsAtIndex(0).should('have.class', 'cmp-accordion__button--stepped'); + getAccordionPanelsAtIndex(0).should('have.class', 'cmp-accordion__panel--stepped'); + }); + cy.expectNoConsoleErrors(); + }) }) describe("Form with Accordion Container with nested repeatable elements", () => { diff --git a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js index e47f9aa364..94634c0248 100644 --- 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/tabsontop/tabsontop.runtime.repeatability.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js index 68b9332bfa..0e0becc251 100644 --- a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js +++ b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js @@ -145,4 +145,40 @@ describe("Form with TabsOnTop Container", () => { }) }); + it("After clicking on every tab, if tab-1 is repeated, the repeated instance should not have stepped class", () => { + getTabs().should('have.length', 4); + getTabPanels().should('have.length', 4); + getTabAtIndex(0).should('have.class', 'cmp-tabs__tab--active'); + getTabPanelAtIndex(0).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabAtIndex(1).click(); + getTabAtIndex(1).should('have.class', 'cmp-tabs__tab--active'); + getTabPanelAtIndex(1).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabAtIndex(0).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(2).click(); + getTabAtIndex(2).should('have.class', 'cmp-tabs__tab--active'); + getTabPanelAtIndex(2).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabAtIndex(1).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(3).click(); + getTabAtIndex(3).should('have.class', 'cmp-tabs__tab--active'); + getTabPanelAtIndex(3).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabAtIndex(2).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(2).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(1).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-tabs__tabpanel--stepped'); + cy.get("button").contains("+R1").click().then(() => { + getTabs().should('have.length', 5); + getTabPanels().should('have.length', 5); + getTabAtIndex(1).should('have.class', 'cmp-tabs__tab--active'); + getTabAtIndex(1).should('not.have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabPanelAtIndex(1).should('not.have.class', 'cmp-tabs__tabpanel--stepped'); + }) + }) + }) diff --git a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js index 860105eca4..e1c422bcc0 100644 --- 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/verticaltabs/verticaltabs.runtime.repeatability.cy.js b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.repeatability.cy.js index f8d0d04158..ac33bcc5a1 100644 --- a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.repeatability.cy.js +++ b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.repeatability.cy.js @@ -130,5 +130,41 @@ describe("Form with VerticalTabs Container", () => { }) }) + it("After clicking on every tab, if tab-1 is repeated, the repeated instance should not have stepped class", () => { + getTabs().should('have.length', 4); + getTabPanels().should('have.length', 4); + getTabAtIndex(0).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabPanelAtIndex(0).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabAtIndex(1).click(); + getTabAtIndex(1).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabPanelAtIndex(1).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabAtIndex(0).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(2).click(); + getTabAtIndex(2).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabPanelAtIndex(2).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabAtIndex(1).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(3).click(); + getTabAtIndex(3).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabPanelAtIndex(3).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabAtIndex(2).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(2).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(1).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + cy.get("button").contains("+R1").click().then(() => { + getTabs().should('have.length', 5); + getTabPanels().should('have.length', 5); + getTabAtIndex(1).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabAtIndex(1).should('not.have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabPanelAtIndex(1).should('not.have.class', 'cmp-verticaltabs__tabpanel--stepped'); + }) + }) + }) diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js index f8d003c23b..7d75be997b 100644 --- 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(); }); diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js index f749a1829b..6f03946a2f 100644 --- a/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js +++ b/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js @@ -151,6 +151,43 @@ describe("Form with Wizard Container", () => { getWizardPanels().should('have.length', 6); }) }); + + it("After clicking on every tab, if tab-1 is repeated, the repeated instance should not have stepped class", () => { + getTabs().should('have.length', 4); + getWizardPanels().should('have.length', 4); + getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); + getTabAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); + getTabAtIndex(2).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(2).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + getTabAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); + getTabAtIndex(3).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(3).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + getTabAtIndex(2).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(2).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + getTabAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + cy.get("button").contains("+R1").click().then(() => { + getTabs().should('have.length', 5); + getWizardPanels().should('have.length', 5); + getTabAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + getTabAtIndex(1).should('not.have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(1).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + }) + cy.expectNoConsoleErrors(); + }) }) describe('visibility of navigation buttons', function () {