@brightspace-ui/labs 2.59.2 → 2.60.1

package/package.json

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

package/src/components/wizard/README.md

@@ -61,13 +61,16 @@ 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 |
+| `disable-back-button` | Boolean | Disable 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 |
+| `disable-restart-button` | Boolean | Disable 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 |
+| `disable-next-button` | Boolean | Disable the Next button |
 
 ### Events:
 - `stepper-next`: dispatched when the Next button is clicked

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'
@@ -46,6 +56,14 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 			type: Boolean,
 			attribute: 'disable-next-button'
 		},
+		disableBackButton: {
+			type: Boolean,
+			attribute: 'disable-back-button'
+		},
+		disableRestartButton: {
+			type: Boolean,
+			attribute: 'disable-restart-button'
+		},
 		nextButtonAriaLabel: {
 			type: String,
 			attribute: 'next-button-aria-label'
@@ -93,8 +111,11 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 		super();
 		this.displayBackButton = false;
 		this.hideRestartButton = false;
+		this.primaryButton = PRIMARY_BUTTON.NEXT;
 		this.hideNextButton = false;
 		this.disableNextButton = false;
+		this.disableBackButton = false;
+		this.disableRestartButton = false;
 		this.nextButtonAriaLabel = '';
 		this.restartButtonAriaLabel = '';
 		this.ariaTitle = '';
@@ -155,6 +176,8 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 		return html`
 			<d2l-button
 				@click="${this.#handleBackClick}"
+				?disabled="${this.disableBackButton}"
+				?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 +190,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 +201,8 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 			<d2l-button
 				aria-label="${this.restartButtonAriaLabel}"
 				@click="${this.#handleRestartClick}"
+				?disabled="${this.disableRestartButton}"
+				?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>`;