@brightspace-ui/labs 2.59.2 → 2.60.0

package/package.json

@@ -111,5 +111,5 @@
     "parse-srt": "^1.0.0-alpha",
     "webvtt-parser": "^2"
   },
-  "version": "2.59.2"
+  "version": "2.60.0"
 }

package/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 |

package/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>`;