Skip to content

Commit

Permalink
Add stepped class in wizard/tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
Pavitra Khatri authored and Pavitra Khatri committed Dec 5, 2024
1 parent 75e25e7 commit de9c776
Show file tree
Hide file tree
Showing 14 changed files with 215 additions and 2 deletions.
1 change: 1 addition & 0 deletions .../content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions ...t/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
1 change: 1 addition & 0 deletions ...nt/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions ...s/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
4 changes: 3 additions & 1 deletion ...c/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion ...nt/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
49 changes: 49 additions & 0 deletions ...t/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down Expand Up @@ -332,6 +336,30 @@
this.focusWithoutScroll(this.getCachedTabs()[index]);
}

navigate(index) {
this._active = index;
this.#addSteppedClass();
this.refreshActive();
}

#addSteppedClass() {
const tabs = this.getCachedTabs();
const wizardPanels = this.getCachedWizardPanels();
const activeChildId = this.#getActiveWizardTabId(tabs)
const activeTab = this.#getTabNavElementById(activeChildId);
if (activeTab.classList.contains(Wizard.selectors.active.tab)) {
activeTab.classList.add(Wizard.selectors.stepped.tab);

const correspondingPanel = Array.from(wizardPanels).find(panel =>
panel.getAttribute("aria-labelledby") === activeTab.id
);

if (correspondingPanel) {
correspondingPanel.classList.add(Wizard.selectors.stepped.wizardpanel);
}
}
}

#syncWizardNavLabels() {
const tabs = this.getCachedTabs();
const wizardPanels = this.getCachedWizardPanels();
Expand Down Expand Up @@ -388,6 +416,14 @@
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) {
Expand Down Expand Up @@ -490,6 +526,19 @@
return -1;
}

#getActiveWizardTabId(tabs) {
if (tabs) {
var result = tabs[0].id;
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].classList.contains(Wizard.selectors.active.tab)) {
result = tabs[i].id;
break;
}
}
return result;
}
}

#getBeforeViewElement(instanceManager, instanceIndex) {
let result = {};
let instanceManagerId = instanceManager.getId();
Expand Down
28 changes: 28 additions & 0 deletions ui.frontend/src/view/FormTabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down Expand Up @@ -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) {
Expand Down
3 changes: 3 additions & 0 deletions ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down
36 changes: 36 additions & 0 deletions ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
})
})

})
2 changes: 2 additions & 0 deletions ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
36 changes: 36 additions & 0 deletions ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.repeatability.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
})
})


})
6 changes: 6 additions & 0 deletions ui.tests/test-module/specs/wizard/wizard.runtime.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand All @@ -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();
});
Expand Down
Loading

0 comments on commit de9c776

Please sign in to comment.