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 ci-build committed Dec 2, 2024
1 parent b8bd79e commit 86bf897
Show file tree
Hide file tree
Showing 11 changed files with 38 additions and 1 deletion.
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
5 changes: 5 additions & 0 deletions ...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 @@ -126,6 +126,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);
Expand Down
4 changes: 4 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
5 changes: 5 additions & 0 deletions ui.frontend/src/view/FormTabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
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
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
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

0 comments on commit 86bf897

Please sign in to comment.