AUT-5636: add property to choose primary button

src/components/wizard/README.md

@@ -61,6 +61,7 @@ The wizard component can be used to display a stepped workflow.
 | `back-button-title` | String | Text that is displayed within the button |
 | `back-button-tooltip` | String | Text that is displayed within the button tooltip |
 | `display-back-button` | Boolean | Display the Back button |
+| `primary-button` | String | Button to make primary: `next`, `back`, or `restart`. Defaults to `next` |
 | `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 |

src/components/wizard/wizard-step.js

@@ -3,6 +3,12 @@ import { css, html, LitElement, nothing } from 'lit';
 import { LocalizeLabsElement } from '../localize-labs-element.js';
 import { offscreenStyles } from '@brightspace-ui/core/components/offscreen/offscreen.js';
 
+const PRIMARY_BUTTON = Object.freeze({
+	NEXT: 'next',
+	BACK: 'back',
+	RESTART: 'restart'
+});
+
 class D2LStep extends LocalizeLabsElement(LitElement) {
 
 	static properties = {
@@ -34,6 +40,10 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 			type: Boolean,
 			attribute: 'display-back-button'
 		},
+		primaryButton: {
+			type: String,
+			attribute: 'primary-button'
+		},
 		hideRestartButton: {
 			type: Boolean,
 			attribute: 'hide-restart-button'
@@ -93,6 +103,7 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 		super();
 		this.displayBackButton = false;
 		this.hideRestartButton = false;
+		this.primaryButton = PRIMARY_BUTTON.NEXT;
 		this.hideNextButton = false;
 		this.disableNextButton = false;
 		this.nextButtonAriaLabel = '';
@@ -155,6 +166,7 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 		return html`
 			<d2l-button
 				@click="${this.#handleBackClick}"
+				?primary="${this.primaryButton === PRIMARY_BUTTON.BACK}"
 				title="${!this.backButtonTooltip ? this.localize('components:wizard:back.button.tooltip') : this.backButtonTooltip}">
 				${!this.backButtonTitle ? this.localize('components:wizard:stepper.defaults.back') : this.backButtonTitle}
 			</d2l-button>`;
@@ -167,7 +179,7 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 				class="d2l-labs-wizard-step-button-next"
 				@click="${this.#handleNextClick}"
 				?disabled="${this.disableNextButton}"
-				primary
+				?primary="${this.primaryButton === PRIMARY_BUTTON.NEXT}"
 				title="${!this.nextButtonTooltip ? this.localize('components:wizard:next.button.tooltip') : this.nextButtonTooltip}">
 				${!this.nextButtonTitle ? this.localize('components:wizard:stepper.defaults.next') : this.nextButtonTitle}
 			</d2l-button>`;
@@ -178,6 +190,7 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 			<d2l-button
 				aria-label="${this.restartButtonAriaLabel}"
 				@click="${this.#handleRestartClick}"
+				?primary="${this.primaryButton === PRIMARY_BUTTON.RESTART}"
 				title="${!this.restartButtonTooltip ? this.localize('components:wizard:restart.button.tooltip') : this.restartButtonTooltip}">
 				${!this.restartButtonTitle ? this.localize('components:wizard:stepper.defaults.restart') : this.restartButtonTitle}
 			</d2l-button>`;

test/components/wizard/wizard-step.test.js

@@ -28,6 +28,33 @@ describe('d2l-labs-wizard-step', () => {
 		});
 	});
 
+	it('should make Next primary by default', async() => {
+		const elem = await fixture(defaultFixture);
+		const buttons = elem.shadowRoot.querySelectorAll('d2l-button');
+		const nextButton = elem.shadowRoot.querySelector('.d2l-labs-wizard-step-button-next');
+
+		expect(buttons[0].hasAttribute('primary')).to.equal(false);
+		expect(nextButton.hasAttribute('primary')).to.equal(true);
+	});
+
+	it('should make Back primary when configured', async() => {
+		const elem = await fixture(html`<d2l-labs-wizard-step display-back-button primary-button="back"></d2l-labs-wizard-step>`);
+		const backButton = elem.shadowRoot.querySelector('d2l-button');
+		const nextButton = elem.shadowRoot.querySelector('.d2l-labs-wizard-step-button-next');
+
+		expect(backButton.hasAttribute('primary')).to.equal(true);
+		expect(nextButton.hasAttribute('primary')).to.equal(false);
+	});
+
+	it('should make Restart primary when configured', async() => {
+		const elem = await fixture(html`<d2l-labs-wizard-step primary-button="restart"></d2l-labs-wizard-step>`);
+		const buttons = elem.shadowRoot.querySelectorAll('d2l-button');
+		const nextButton = elem.shadowRoot.querySelector('.d2l-labs-wizard-step-button-next');
+
+		expect(buttons[0].hasAttribute('primary')).to.equal(true);
+		expect(nextButton.hasAttribute('primary')).to.equal(false);
+	});
+
 	describe('event', () => {
 
 		it('dispatches stepper-next event when next button clicked', async() => {