diff --git a/demo/components/wizard/index.html b/demo/components/wizard/index.html
new file mode 100644
index 0000000..6a35604
--- /dev/null
+++ b/demo/components/wizard/index.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+ Basic Wizard
+
+
+
+ first step
+
+
+
+ second step
+
+
+
+ Last step
+
+
+
+
+
+
+
+ first step
+
+
+ Last step
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
index 563cb3f..2fd8333 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,7 @@ Components
Opt-In Flyout
Pagination
View Toggle
+ Wizard
Controllers
diff --git a/package.json b/package.json
index 92736e5..2a25853 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
"./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
"./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
"./components/view-toggle.js": "./src/components/view-toggle/view-toggle.js",
+ "./components/wizard.js": "./src/components/wizard/wizard.js",
+ "./components/wizard-step.js": "./src/components/wizard/step.js",
"./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
"./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
"./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"
diff --git a/src/components/view-toggle/README.md b/src/components/view-toggle/README.md
index 834e5e0..2aa1b62 100644
--- a/src/components/view-toggle/README.md
+++ b/src/components/view-toggle/README.md
@@ -6,7 +6,7 @@ A Lit element component for toggling between views.
```html
` can be used to be display a stepped workflow.
+
+## Usage
+
+```html
+
+
+
+ First step
+
+
+
+ Second step
+
+
+
+```
+
+
+### Properties:
+
+| Properties | Type | Description |
+|--|--|--|
+| `step-title` | String | Text displayed in the wizard step |
+| `restart-button-title` | String | Text that is displayed within the button |
+| `restart-button-tooltip` | String | Text that is displayed within the button tooltip |
+| `hide-restart-button` | Boolean | Hide the Restart button |
+| `next-button-title` | String | Text that is displayed within the button |
+| `next-button-tooltip` | String | Text that is displayed within the button tooltip |
+| `disable-next-button` | Boolean | Disable the Next button |
+| `hide-next-button` | Boolean | Hide the Next button |
+
+### Events:
+- `stepper-next`: dispatched when the Next button is clicked
+- `stepper-restart`: dispatched when the Restart button is clicked
+
diff --git a/src/components/wizard/single-step-header.js b/src/components/wizard/single-step-header.js
new file mode 100644
index 0000000..61a3d32
--- /dev/null
+++ b/src/components/wizard/single-step-header.js
@@ -0,0 +1,187 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { bodySmallStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+
+class D2LSingleStepHeader extends LocalizeLabsElement(LitElement) {
+
+ static get properties() {
+ return {
+ stepTitle: {
+ type: String,
+ attribute: 'step-title'
+ },
+ totalSteps: {
+ type: Number,
+ attribute: 'total-steps'
+ },
+ currentStep: {
+ type: Number,
+ attribute: 'current-step'
+ },
+ selectedStep: {
+ type: Number,
+ attribute: 'selected-step'
+ },
+ fillHeaderWidth: {
+ type: Boolean,
+ attribute: 'fill-header-width',
+ reflect: true
+ }
+ };
+ }
+
+ static get styles() {
+ return [bodySmallStyles, css`
+ .d2l-labs-single-step-header-circle {
+ border: 2px solid;
+ border-radius: 50%;
+ height: 26px;
+ width: 26px;
+ }
+
+ .d2l-labs-single-step-header-inner-progress-circle {
+ background-color: var(--d2l-color-celestine);
+ border-radius: 50%;
+ height: 22px;
+ margin: 2px;
+ width: 22px;
+ }
+
+ .d2l-labs-single-step-header-step {
+ display: inline-block;
+ text-align: center;
+ }
+
+ hr {
+ height: 4px;
+ margin: auto;
+ width: 60px;
+ }
+
+ .d2l-labs-single-step-header-step-header {
+ display: flex;
+ }
+
+ .d2l-labs-single-step-header-step-title {
+ background: none !important;
+ border: none !important;
+ color: var(--d2l-color-ferrite);
+ margin: auto;
+ max-width: 120px;
+ overflow-wrap: break-word;
+ }
+
+ :host([fill-header-width]) .d2l-labs-single-step-header-step-title {
+ max-width: 150px;
+ }
+
+ .d2l-labs-single-step-header-done-icon {
+ color: var(--d2l-color-olivine);
+ height: 20px;
+ padding: 2px;
+ width: 20px;
+ }
+
+ .d2l-labs-single-step-header-done {
+ border-color: var(--d2l-color-olivine);
+ color: var(--d2l-color-olivine);
+ }
+
+ .d2l-labs-single-step-header-done hr,
+ .d2l-labs-single-step-header-in-progress hr:first-child {
+ background: var(--d2l-color-olivine);
+ border: var(--d2l-color-olivine);
+ }
+
+ .d2l-labs-single-step-header-in-progress {
+ border-color: var(--d2l-color-celestine);
+ color: var(--d2l-color-celestine);
+ }
+
+ .d2l-labs-single-step-header-not-started .d2l-labs-single-step-header-circle {
+ background-color: var(--d2l-color-mica);
+ border-color: var(--d2l-color-mica);
+ }
+
+ .d2l-labs-single-step-header-in-progress hr:last-child,
+ .d2l-labs-single-step-header-not-started hr {
+ background: var(--d2l-color-mica);
+ border: var(--d2l-color-mica);
+ }
+
+ .d2l-labs-single-step-header-first hr:first-child,
+ .d2l-labs-single-step-header-last hr:last-child {
+ visibility: hidden;
+ }
+ `];
+ }
+
+ constructor() {
+ super();
+
+ this.stepTitle = '';
+ this.totalSteps = 0;
+ this.currentStep = 0;
+ this.selectedStep = 0;
+ this.fillHeaderWidth = false;
+ }
+
+ render() {
+ return html`
+
+
+
+ `;
+ }
+
+ _getIsFirst() {
+ if (this.currentStep === 0) {
+ return 'd2l-labs-single-step-header-first';
+ }
+ return '';
+ }
+
+ _getIsLast() {
+ if (this.totalSteps === this.currentStep + 1) {
+ return 'd2l-labs-single-step-header-last';
+ }
+ return '';
+ }
+
+ _getProgressStatus() {
+ let className = 'd2l-labs-single-step-header-not-started';
+ if (this._isDone()) {
+ className = 'd2l-labs-single-step-header-done';
+ } else if (this._isInProgress()) {
+ className = 'd2l-labs-single-step-header-in-progress';
+ }
+ return className;
+ }
+
+ _getStepLabel() {
+ return this.localize('components:wizard:aria.steplabel', 'totalSteps', this.totalSteps, 'currentStep', this.currentStep + 1);
+ }
+
+ _isDone() {
+ return this.currentStep < this.selectedStep;
+ }
+
+ _isInProgress() {
+ return this.currentStep === this.selectedStep;
+ }
+
+}
+
+customElements.define('d2l-labs-single-step-header', D2LSingleStepHeader);
diff --git a/src/components/wizard/step.js b/src/components/wizard/step.js
new file mode 100644
index 0000000..bb22b9e
--- /dev/null
+++ b/src/components/wizard/step.js
@@ -0,0 +1,147 @@
+import '@brightspace-ui/core/components/button/button.js';
+import { css, html, LitElement } from 'lit';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js';
+
+class D2LStep extends LocalizeLabsElement(LitElement) {
+ static get properties() {
+ return {
+ nextButtonTitle: {
+ type: String,
+ attribute: 'next-button-title'
+ },
+ nextButtonTooltip: {
+ type: String,
+ attribute: 'next-button-tooltip'
+ },
+ restartButtonTitle: {
+ type: String,
+ attribute: 'restart-button-title'
+ },
+ restartButtonTooltip: {
+ type: String,
+ attribute: 'restart-button-tooltip'
+ },
+ hideRestartButton: {
+ type: Boolean,
+ attribute: 'hide-restart-button'
+ },
+ hideNextButton: {
+ type: Boolean,
+ attribute: 'hide-next-button'
+ },
+ disableNextButton: {
+ type: Boolean,
+ attribute: 'disable-next-button'
+ },
+ nextButtonAriaLabel: {
+ type: String,
+ attribute: 'next-button-aria-label'
+ },
+ restartButtonAriaLabel: {
+ type: String,
+ attribute: 'restart-button-aria-label'
+ },
+ ariaTitle: {
+ type: String,
+ attribute: 'aria-title'
+ },
+ stepTitle: {
+ type: String,
+ attribute: 'step-title'
+ },
+ stepCount: {
+ type: Number,
+ attribute: 'step-count'
+ },
+ thisStep: {
+ type: Number,
+ attribute: 'this-step'
+ }
+ };
+ }
+
+ static get styles() {
+ return [offscreenStyles, css`
+ .d2l-labs-wizard-step-footer {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ .d2l-labs-wizard-step-button-next {
+ float: right;
+ }
+ `];
+ }
+
+ constructor() {
+ super();
+ this.hideRestartButton = false;
+ this.hideNextButton = false;
+ this.disableNextButton = false;
+ this.nextButtonAriaLabel = '';
+ this.restartButtonAriaLabel = '';
+ this.ariaTitle = '';
+ this.stepTitle = '';
+ this.stepCount = 1;
+ this.thisStep = 1;
+ }
+
+ render() {
+ return html`
+ ${this._getAriaTitle()}
+
+
+ `;
+ }
+
+ _getAriaTitle() {
+ if (this.ariaTitle) {
+ return this.ariaTitle;
+ } else if (this.stepTitle) {
+ return `${this.stepTitle}. ${this._getStepLabel()}`;
+ }
+ return this._getStepLabel();
+ }
+
+ _getStepLabel() {
+ return this.localize('components:wizard:aria.steplabel', 'totalSteps', this.stepCount, 'currentStep', this.thisStep);
+ }
+
+ _nextClick() {
+ this.dispatchEvent(new CustomEvent('stepper-next', { bubbles: true, composed: true }));
+ }
+
+ _restartClick() {
+ this.dispatchEvent(new CustomEvent('stepper-restart', { bubbles: true, composed: true }));
+ }
+}
+
+customElements.define('d2l-labs-wizard-step', D2LStep);
diff --git a/src/components/wizard/wizard.js b/src/components/wizard/wizard.js
new file mode 100644
index 0000000..f013bc3
--- /dev/null
+++ b/src/components/wizard/wizard.js
@@ -0,0 +1,122 @@
+import './single-step-header.js';
+import { css, html, LitElement } from 'lit';
+
+class D2LWizard extends LitElement {
+ static get properties() {
+ return {
+ stepTitles: {
+ type: Array,
+ attribute: 'step-titles'
+ },
+ stepCount: {
+ type: Number,
+ attribute: 'step-count'
+ },
+ selectedStep: {
+ type: Number,
+ attribute: 'selected-step'
+ },
+ fillHeaderWidth: {
+ type: Boolean,
+ attribute: 'fill-header-width',
+ reflect: true
+ }
+ };
+ }
+
+ static get styles() {
+ return css`
+ .d2l-labs-wizard-header {
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ margin: 30px 0;
+ overflow-x: auto;
+ width: 100%;
+ }
+ `;
+ }
+
+ constructor() {
+ super();
+
+ this.stepTitles = [];
+ this.stepCount = 0;
+ this.selectedStep = 0;
+ this.fillHeaderWidth = false;
+ }
+
+ render() {
+ return html`
+
+
+ `;
+ }
+
+ currentStep() {
+ return this.selectedStep;
+ }
+
+ next() {
+ this.selectedStep = (this.selectedStep + 1) === this.stepCount ? this.selectedStep : (this.selectedStep + 1);
+
+ this.#updateStep();
+
+ if (window.parentIFrame) {
+ window.parentIFrame.scrollTo(0, 0);
+ }
+
+ this.#focusAriaTitleOfStep();
+ }
+
+ restart() {
+ this.selectedStep = 0;
+
+ this.#updateStep();
+
+ this.#focusAriaTitleOfStep();
+ }
+
+ #focusAriaTitleOfStep() {
+ const slotChildren = this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true }).filter(node => node.nodeType === Node.ELEMENT_NODE);
+ slotChildren.forEach(child => {
+ if (child.style.display !== 'none') {
+ const ariaTitle = child.shadowRoot.getElementById('aria-title');
+ if (ariaTitle) {
+ ariaTitle.focus();
+ return;
+ }
+ }
+ });
+ }
+
+ #handleSlotChange() {
+ this.#updateStep();
+ }
+
+ #updateStep() {
+ const steps = this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
+ this.stepCount = steps.length;
+
+ this.stepTitles = [];
+
+ steps.forEach((element, index) => {
+
+ this.stepTitles.push(element.stepTitle);
+ element.setAttribute('step-count', this.stepCount);
+ element.setAttribute('this-step', index + 1);
+ element.style.display = index !== this.selectedStep ? 'none' : '';
+ });
+
+ this.stepCount = steps.length;
+ }
+
+}
+
+customElements.define('d2l-labs-wizard', D2LWizard);
diff --git a/src/lang/ar.js b/src/lang/ar.js
index 2965bf4..62a8b36 100644
--- a/src/lang/ar.js
+++ b/src/lang/ar.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "رقم الصفحة {pageNumber} من {maxPageNumber}",
"components:pagination:nextPage": "الصفحة التالية",
"components:pagination:previousPage": "الصفحة السابقة",
- "components:pagination:resultsPerPage": "النتائج لكل صفحة"
+ "components:pagination:resultsPerPage": "النتائج لكل صفحة",
+ "components:wizard:aria.steplabel": "الخطوة {currentStep} من أصل {totalSteps}",
+ "components:wizard:stepper.defaults.next": "التالي",
+ "components:wizard:stepper.defaults.restart": "إعادة تشغيل",
+ "components:wizard:restart.button.tooltip": "العودة إلى الخطوة الأولى",
+ "components:wizard:next.button.tooltip": "المتابعة إلى الخطوة التالية"
};
diff --git a/src/lang/cy.js b/src/lang/cy.js
index 88a2d7b..16922d8 100644
--- a/src/lang/cy.js
+++ b/src/lang/cy.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Rhif tudalen {pageNumber} o {maxPageNumber}",
"components:pagination:nextPage": "Tudalen nesaf",
"components:pagination:previousPage": "Y dudalen flaenorol",
- "components:pagination:resultsPerPage": "Canlyniadau fesul tudalen"
+ "components:pagination:resultsPerPage": "Canlyniadau fesul tudalen",
+ "components:wizard:aria.steplabel": "Cam {currentStep} o {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Nesaf",
+ "components:wizard:stepper.defaults.restart": "Ailddechrau",
+ "components:wizard:restart.button.tooltip": "Back to first step",
+ "components:wizard:next.button.tooltip": "Proceed to next step"
};
diff --git a/src/lang/da.js b/src/lang/da.js
index 3fabe27..ecd3296 100644
--- a/src/lang/da.js
+++ b/src/lang/da.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Sidenummer {pageNumber} af {maxPageNumber}",
"components:pagination:nextPage": "Næste side",
"components:pagination:previousPage": "Forrige side",
- "components:pagination:resultsPerPage": "Resultater pr. side"
+ "components:pagination:resultsPerPage": "Resultater pr. side",
+ "components:wizard:aria.steplabel": "Step {currentStep} of {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Next",
+ "components:wizard:stepper.defaults.restart": "Restart",
+ "components:wizard:restart.button.tooltip": "Back to first step",
+ "components:wizard:next.button.tooltip": "Proceed to next step"
};
diff --git a/src/lang/de.js b/src/lang/de.js
index 9fffbc6..dcaf17b 100644
--- a/src/lang/de.js
+++ b/src/lang/de.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Seitennummer {pageNumber} von {maxPageNumber}",
"components:pagination:nextPage": "Nächste Seite",
"components:pagination:previousPage": "Vorherige Seite",
- "components:pagination:resultsPerPage": "Ergebnisse pro Seite"
+ "components:pagination:resultsPerPage": "Ergebnisse pro Seite",
+ "components:wizard:aria.steplabel": "Schritt {currentStep} von {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Weiter",
+ "components:wizard:stepper.defaults.restart": "Neu starten",
+ "components:wizard:restart.button.tooltip": "Zurück zum ersten Schritt",
+ "components:wizard:next.button.tooltip": "Fahren Sie mit dem nächsten Schritt fort"
};
diff --git a/src/lang/en-gb.js b/src/lang/en-gb.js
index 58b1e20..ca5a4a4 100644
--- a/src/lang/en-gb.js
+++ b/src/lang/en-gb.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Page number {pageNumber} of {maxPageNumber}",
"components:pagination:nextPage": "Next page",
"components:pagination:previousPage": "Previous page",
- "components:pagination:resultsPerPage": "Results per page"
+ "components:pagination:resultsPerPage": "Results per page",
+ "components:wizard:aria.steplabel": "Step {currentStep} of {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Next",
+ "components:wizard:stepper.defaults.restart": "Restart",
+ "components:wizard:restart.button.tooltip": "Back to first step",
+ "components:wizard:next.button.tooltip": "Proceed to next step"
};
diff --git a/src/lang/en.js b/src/lang/en.js
index 778f066..d490c48 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Page number {pageNumber} of {maxPageNumber}",
"components:pagination:nextPage": "Next page",
"components:pagination:previousPage": "Previous page",
- "components:pagination:resultsPerPage": "Results per page"
+ "components:pagination:resultsPerPage": "Results per page",
+ "components:wizard:aria.steplabel": "Step {currentStep} of {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Next",
+ "components:wizard:stepper.defaults.restart": "Restart",
+ "components:wizard:restart.button.tooltip": "Back to first step",
+ "components:wizard:next.button.tooltip": "Proceed to next step"
};
diff --git a/src/lang/es-es.js b/src/lang/es-es.js
index 9b4cfdb..2f7f85d 100644
--- a/src/lang/es-es.js
+++ b/src/lang/es-es.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Página número {pageNumber} de {maxPageNumber}",
"components:pagination:nextPage": "Página siguiente",
"components:pagination:previousPage": "Página anterior",
- "components:pagination:resultsPerPage": "Resultados por página"
+ "components:pagination:resultsPerPage": "Resultados por página",
+ "components:wizard:aria.steplabel": "Paso {currentStep} de {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Siguiente",
+ "components:wizard:stepper.defaults.restart": "Reiniciar",
+ "components:wizard:restart.button.tooltip": "Volver al primer paso",
+ "components:wizard:next.button.tooltip": "Avanzar al siguiente paso"
};
diff --git a/src/lang/es.js b/src/lang/es.js
index 93b3957..177b693 100644
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Página número {pageNumber} de {maxPageNumber}",
"components:pagination:nextPage": "Página siguiente",
"components:pagination:previousPage": "Página anterior",
- "components:pagination:resultsPerPage": "Resultados por página"
+ "components:pagination:resultsPerPage": "Resultados por página",
+ "components:wizard:aria.steplabel": "Paso {currentStep} de {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Siguiente",
+ "components:wizard:stepper.defaults.restart": "Reiniciar",
+ "components:wizard:restart.button.tooltip": "Volver al primer paso",
+ "components:wizard:next.button.tooltip": "Avanzar al siguiente paso"
};
diff --git a/src/lang/fr-fr.js b/src/lang/fr-fr.js
index 7491c48..fb52b07 100644
--- a/src/lang/fr-fr.js
+++ b/src/lang/fr-fr.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Page numéro {pageNumber} sur {maxPageNumber}",
"components:pagination:nextPage": "Page suivante",
"components:pagination:previousPage": "Page précédente",
- "components:pagination:resultsPerPage": "Résultats par page"
+ "components:pagination:resultsPerPage": "Résultats par page",
+ "components:wizard:aria.steplabel": "Étape {currentStep} sur {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Suivant",
+ "components:wizard:stepper.defaults.restart": "Redémarrer",
+ "components:wizard:restart.button.tooltip": "Revenir à la première étape",
+ "components:wizard:next.button.tooltip": "Passer à l’étape suivante"
};
diff --git a/src/lang/fr-on.js b/src/lang/fr-on.js
index 9504458..42e89c0 100644
--- a/src/lang/fr-on.js
+++ b/src/lang/fr-on.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Numéro de page {pageNumber} de {maxPageNumber}",
"components:pagination:nextPage": "Page suivante",
"components:pagination:previousPage": "Page précédente",
- "components:pagination:resultsPerPage": "Résultats par page"
+ "components:pagination:resultsPerPage": "Résultats par page",
+ "components:wizard:aria.steplabel": "Étape {currentStep} de {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Page suivante",
+ "components:wizard:stepper.defaults.restart": "Redémarrer",
+ "components:wizard:restart.button.tooltip": "Retour à la première étape",
+ "components:wizard:next.button.tooltip": "Passer à la prochaine étape"
};
diff --git a/src/lang/fr.js b/src/lang/fr.js
index 9504458..4717840 100644
--- a/src/lang/fr.js
+++ b/src/lang/fr.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Numéro de page {pageNumber} de {maxPageNumber}",
"components:pagination:nextPage": "Page suivante",
"components:pagination:previousPage": "Page précédente",
- "components:pagination:resultsPerPage": "Résultats par page"
+ "components:pagination:resultsPerPage": "Résultats par page",
+ "components:wizard:aria.steplabel": "Étape {currentStep} de {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Suivant",
+ "components:wizard:stepper.defaults.restart": "Redémarrer",
+ "components:wizard:restart.button.tooltip": "Retour à la première étape",
+ "components:wizard:next.button.tooltip": "Passer à la prochaine étape"
};
diff --git a/src/lang/hi.js b/src/lang/hi.js
index 857939f..5cb5615 100644
--- a/src/lang/hi.js
+++ b/src/lang/hi.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "{maxPageNumber} में से पेज नंबर {pageNumber}",
"components:pagination:nextPage": "अगला पेज",
"components:pagination:previousPage": "पिछला पेज",
- "components:pagination:resultsPerPage": "प्रति पेज के परिणाम"
+ "components:pagination:resultsPerPage": "प्रति पेज के परिणाम",
+ "components:wizard:aria.steplabel": "{totalSteps} में से {currentStep} चरण",
+ "components:wizard:stepper.defaults.next": "अगला",
+ "components:wizard:stepper.defaults.restart": "रीस्टार्ट करें",
+ "components:wizard:restart.button.tooltip": "पहले चरण पर वापस जाएँ",
+ "components:wizard:next.button.tooltip": "अगले चरण पर आगे बढ़ें"
};
diff --git a/src/lang/ja.js b/src/lang/ja.js
index 74ddfcd..70b6acf 100644
--- a/src/lang/ja.js
+++ b/src/lang/ja.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "{maxPageNumber} のページ番号 {pageNumber}",
"components:pagination:nextPage": "次のページ",
"components:pagination:previousPage": "前のページ",
- "components:pagination:resultsPerPage": "ページごとの結果"
+ "components:pagination:resultsPerPage": "ページごとの結果",
+ "components:wizard:aria.steplabel": "ステップ {currentStep}/{totalSteps}",
+ "components:wizard:stepper.defaults.next": "次へ",
+ "components:wizard:stepper.defaults.restart": "再開",
+ "components:wizard:restart.button.tooltip": "最初の手順に戻る",
+ "components:wizard:next.button.tooltip": "次の手順に進む"
};
diff --git a/src/lang/ko.js b/src/lang/ko.js
index 88e31a0..9472ccf 100644
--- a/src/lang/ko.js
+++ b/src/lang/ko.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "페이지 번호 {pageNumber} / {maxPageNumber}",
"components:pagination:nextPage": "다음 페이지",
"components:pagination:previousPage": "이전 페이지",
- "components:pagination:resultsPerPage": "페이지당 결과 수"
+ "components:pagination:resultsPerPage": "페이지당 결과 수",
+ "components:wizard:aria.steplabel": "{currentStep}/{totalSteps} 단계",
+ "components:wizard:stepper.defaults.next": "다음",
+ "components:wizard:stepper.defaults.restart": "다시 시작",
+ "components:wizard:restart.button.tooltip": "첫 번째 단계로 돌아갑니다",
+ "components:wizard:next.button.tooltip": "다음 단계로 진행합니다"
};
diff --git a/src/lang/nl.js b/src/lang/nl.js
index da96487..e160916 100644
--- a/src/lang/nl.js
+++ b/src/lang/nl.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Paginanummer {pageNumber} van {maxPageNumber}",
"components:pagination:nextPage": "Volgende pagina",
"components:pagination:previousPage": "Vorige pagina",
- "components:pagination:resultsPerPage": "Resultaten per pagina"
+ "components:pagination:resultsPerPage": "Resultaten per pagina",
+ "components:wizard:aria.steplabel": "Stap {currentStep} van {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Volgende",
+ "components:wizard:stepper.defaults.restart": "Opnieuw starten",
+ "components:wizard:restart.button.tooltip": "Terug naar eerste stap",
+ "components:wizard:next.button.tooltip": "Ga verder naar de volgende stap"
};
diff --git a/src/lang/pt.js b/src/lang/pt.js
index fb84726..e63ba38 100644
--- a/src/lang/pt.js
+++ b/src/lang/pt.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Número da página {pageNumber} de {maxPageNumber}",
"components:pagination:nextPage": "Próxima página",
"components:pagination:previousPage": "Página anterior",
- "components:pagination:resultsPerPage": "Resultados por página"
+ "components:pagination:resultsPerPage": "Resultados por página",
+ "components:wizard:aria.steplabel": "Etapa {currentStep} de {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Avançar",
+ "components:wizard:stepper.defaults.restart": "Reiniciar",
+ "components:wizard:restart.button.tooltip": "Voltar para a primeira etapa",
+ "components:wizard:next.button.tooltip": "Ir para a próxima etapa"
};
diff --git a/src/lang/sv.js b/src/lang/sv.js
index 85bd4f1..60f1146 100644
--- a/src/lang/sv.js
+++ b/src/lang/sv.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Sidnummer {pageNumber} av {maxPageNumber}",
"components:pagination:nextPage": "Nästa sida",
"components:pagination:previousPage": "Föregående sida",
- "components:pagination:resultsPerPage": "Resultat per sida"
+ "components:pagination:resultsPerPage": "Resultat per sida",
+ "components:wizard:aria.steplabel": "Steg {currentStep} av {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Nästa",
+ "components:wizard:stepper.defaults.restart": "Starta om",
+ "components:wizard:restart.button.tooltip": "Tillbaka till första steget",
+ "components:wizard:next.button.tooltip": "Gå vidare till nästa steg"
};
diff --git a/src/lang/tr.js b/src/lang/tr.js
index 4d10b86..cd3a378 100644
--- a/src/lang/tr.js
+++ b/src/lang/tr.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "Sayfa numarası {pageNumber} / {maxPageNumber}",
"components:pagination:nextPage": "Sonraki sayfa",
"components:pagination:previousPage": "Önceki sayfa",
- "components:pagination:resultsPerPage": "Sayfa başına sonuç"
+ "components:pagination:resultsPerPage": "Sayfa başına sonuç",
+ "components:wizard:aria.steplabel": "Adım {currentStep} / {totalSteps}",
+ "components:wizard:stepper.defaults.next": "İleri",
+ "components:wizard:stepper.defaults.restart": "Yeniden Başlat",
+ "components:wizard:restart.button.tooltip": "İlk adıma geri dön",
+ "components:wizard:next.button.tooltip": "Sonraki adıma ilerle"
};
diff --git a/src/lang/zh-cn.js b/src/lang/zh-cn.js
index 4ec10e0..eec2cd6 100644
--- a/src/lang/zh-cn.js
+++ b/src/lang/zh-cn.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "第 {pageNumber} 页，共 {maxPageNumber} 页",
"components:pagination:nextPage": "下一页",
"components:pagination:previousPage": "上一页",
- "components:pagination:resultsPerPage": "每页结果数"
+ "components:pagination:resultsPerPage": "每页结果数",
+ "components:wizard:aria.steplabel": "Step {currentStep} of {totalSteps}",
+ "components:wizard:stepper.defaults.next": "Next",
+ "components:wizard:stepper.defaults.restart": "Restart",
+ "components:wizard:restart.button.tooltip": "Back to first step",
+ "components:wizard:next.button.tooltip": "Proceed to next step"
};
diff --git a/src/lang/zh-tw.js b/src/lang/zh-tw.js
index f229b96..bc0627a 100644
--- a/src/lang/zh-tw.js
+++ b/src/lang/zh-tw.js
@@ -42,5 +42,10 @@ export default {
"components:pagination:currentPage": "頁碼 {pageNumber} / {maxPageNumber}",
"components:pagination:nextPage": "下一頁",
"components:pagination:previousPage": "上一頁",
- "components:pagination:resultsPerPage": "每頁結果"
+ "components:pagination:resultsPerPage": "每頁結果",
+ "components:wizard:aria.steplabel": "第 {currentStep} 步，共 {totalSteps} 步",
+ "components:wizard:stepper.defaults.next": "下一個",
+ "components:wizard:stepper.defaults.restart": "重新開始",
+ "components:wizard:restart.button.tooltip": "返回第一個步驟",
+ "components:wizard:next.button.tooltip": "繼續前往下一個步驟"
};
diff --git a/test/components/wizard/single-step-header.axe.js b/test/components/wizard/single-step-header.axe.js
new file mode 100644
index 0000000..8c61490
--- /dev/null
+++ b/test/components/wizard/single-step-header.axe.js
@@ -0,0 +1,13 @@
+import '../../../src/components/wizard/single-step-header.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+
+describe('d2l-labs-single-step-header', () => {
+
+ describe('accessibility', () => {
+ it('should pass all axe tests', async() => {
+ const el = await fixture(html``);
+ await expect(el).to.be.accessible();
+ });
+ });
+
+});
diff --git a/test/components/wizard/single-step-header.test.js b/test/components/wizard/single-step-header.test.js
new file mode 100644
index 0000000..cc962bd
--- /dev/null
+++ b/test/components/wizard/single-step-header.test.js
@@ -0,0 +1,57 @@
+import '../../../src/components/wizard/single-step-header.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+import { runConstructor } from '@brightspace-ui/core/tools/constructor-test-helper.js';
+
+const defaultFixture = html`
+
+`;
+
+const firstFixture = html`
+
+`;
+
+const lastFixture = html`
+
+`;
+
+const firstAndLastFixture = html`
+
+`;
+
+describe('d2l-labs-single-step-header', () => {
+
+ describe('constructor', () => {
+ it('should construct', () => {
+ runConstructor('d2l-labs-single-step-header');
+ });
+ });
+
+ describe('basic', () => {
+ it('should instantiate the element', async() => {
+ const elem = await fixture(defaultFixture);
+ expect(elem.localName).to.equal('d2l-labs-single-step-header');
+ });
+ });
+
+ describe('first', () => {
+ it('should have class name first', async() => {
+ const elem = await fixture(firstFixture);
+ expect(elem.shadowRoot.children[0].className).to.equal('d2l-labs-single-step-header-first ');
+ });
+ });
+
+ describe('last', () => {
+ it('should have class name last', async() => {
+ const elem = await fixture(lastFixture);
+ expect(elem.shadowRoot.children[0].className).to.equal(' d2l-labs-single-step-header-last');
+ });
+ });
+
+ describe('first and last', () => {
+ it('should have class name first and last', async() => {
+ const elem = await fixture(firstAndLastFixture);
+ expect(elem.shadowRoot.children[0].className).to.equal('d2l-labs-single-step-header-first d2l-labs-single-step-header-last');
+ });
+ });
+
+});
diff --git a/test/components/wizard/step.axe.js b/test/components/wizard/step.axe.js
new file mode 100644
index 0000000..ac3c1b4
--- /dev/null
+++ b/test/components/wizard/step.axe.js
@@ -0,0 +1,13 @@
+import '../../../src/components/wizard/step.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+
+describe('d2l-labs-wizard-step', () => {
+
+ describe('accessibility', () => {
+ it('should pass all axe tests', async() => {
+ const elem = await fixture(html``);
+ await expect(elem).to.be.accessible();
+ });
+ });
+
+});
diff --git a/test/components/wizard/step.test.js b/test/components/wizard/step.test.js
new file mode 100644
index 0000000..4c9202d
--- /dev/null
+++ b/test/components/wizard/step.test.js
@@ -0,0 +1,50 @@
+import '../../../src/components/wizard/step.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+import { runConstructor } from '@brightspace-ui/core/tools/constructor-test-helper.js';
+
+const defaultFixture = html`
+
+`;
+
+describe('d2l-labs-wizard-step', () => {
+
+ describe('accessibility', () => {
+ it('should pass all axe tests', async() => {
+ const elem = await fixture(defaultFixture);
+ await expect(elem).to.be.accessible();
+ });
+ });
+
+ describe('constructor', () => {
+ it('should construct', () => {
+ runConstructor('d2l-labs-wizard-step');
+ });
+ });
+
+ describe('basic', () => {
+ it('should instantiate the element', async() => {
+ const elem = await fixture(defaultFixture);
+ expect(elem.localName).to.equal('d2l-labs-wizard-step');
+ });
+ });
+
+ describe('event', () => {
+
+ it('should create stepper-next event', async() => {
+ const elem = await fixture(defaultFixture);
+ elem.addEventListener('stepper-next', (event) => {
+ expect(event.type).to.equal('stepper-next');
+ });
+ elem._nextClick();
+ });
+
+ it('should create stepper-restart event', async() => {
+ const elem = await fixture(defaultFixture);
+ elem.addEventListener('stepper-restart', (event) => {
+ expect(event.type).to.equal('stepper-restart');
+ });
+ elem._restartClick();
+ });
+ });
+
+});
diff --git a/test/components/wizard/wizard.axe.js b/test/components/wizard/wizard.axe.js
new file mode 100644
index 0000000..3267380
--- /dev/null
+++ b/test/components/wizard/wizard.axe.js
@@ -0,0 +1,13 @@
+import '../../../src/components/wizard/wizard.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+
+describe('d2l-labs-wizard', () => {
+
+ describe('accessibility', () => {
+ it('should pass all axe tests', async() => {
+ const el = await fixture(html``);
+ await expect(el).to.be.accessible();
+ });
+ });
+
+});
diff --git a/test/components/wizard/wizard.test.js b/test/components/wizard/wizard.test.js
new file mode 100644
index 0000000..6761ae3
--- /dev/null
+++ b/test/components/wizard/wizard.test.js
@@ -0,0 +1,31 @@
+import '../../../src/components/wizard/wizard.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+import { runConstructor } from '@brightspace-ui/core/tools/constructor-test-helper.js';
+
+const defaultFixture = html`
+
+`;
+
+describe('d2l-labs-wizard', () => {
+
+ describe('accessibility', () => {
+ it('should pass all axe tests', async() => {
+ const el = await fixture(defaultFixture);
+ await expect(el).to.be.accessible();
+ });
+ });
+
+ describe('constructor', () => {
+ it('should construct', () => {
+ runConstructor('d2l-labs-wizard');
+ });
+ });
+
+ describe('basic', () => {
+ it('should instantiate the element', async() => {
+ const elem = await fixture(defaultFixture);
+ expect(elem.localName).to.equal('d2l-labs-wizard');
+ });
+ });
+
+});