@brightspace-ui/labs 2.60.0 → 2.61.0

package/package.json

@@ -19,6 +19,7 @@
     "./components/grade-result/grade-result-presentational.js": "./src/components/grade-result/grade-result-presentational.js",
     "./components/grade-result/grade-result-student-grade-preview.js": "./src/components/grade-result/grade-result-student-grade-preview.js",
     "./components/media-player.js": "./src/components/media-player/media-player.js",
+    "./components/menu-item-ai.js": "./src/components/menu-item-ai/menu-item-ai.js",
     "./components/navigation/navigation-band.js": "./src/components/navigation/navigation-band.js",
     "./components/navigation/navigation-button-icon.js": "./src/components/navigation/navigation-button-icon.js",
     "./components/navigation/navigation-dropdown-button-custom.js": "./src/components/navigation/navigation-dropdown-button-custom.js",
@@ -111,5 +112,5 @@
     "parse-srt": "^1.0.0-alpha",
     "webvtt-parser": "^2"
   },
-  "version": "2.60.0"
+  "version": "2.61.0"
 }

package/src/components/menu-item-ai/README.md

@@ -0,0 +1,35 @@
+# AI Menu Item
+
+A menu item that renders the AI icon before its text, used to draw extra attention to a new AI-powered feature within a `<d2l-menu>`; it is not an official design pattern and each usage should be carefully considered.
+
+It behaves like `<d2l-menu-item>` from `@brightspace-ui/core`, except the AI icon is always rendered before the text.
+
+## AI Menu Item [d2l-menu-item-ai]
+
+<!-- docs: demo code -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/menu/menu.js';
+  import '@brightspace-ui/labs/components/menu-item-ai.js';
+</script>
+<d2l-menu label="Astronomy">
+  <d2l-menu-item-ai text="Summarize with AI"></d2l-menu-item-ai>
+</d2l-menu>
+```
+
+<!-- docs: start hidden content -->
+
+**Properties:**
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text displayed by the menu item |
+| `description` | String | A description of the menu item that will be used by screen readers for additional context |
+| `disabled` | Boolean | Disables the menu item |
+| `lines` | Number | The number of lines to display before truncating text with an ellipsis. Defaults to 2 |
+
+**Events:**
+
+* `d2l-menu-item-select`: dispatched when the menu item is selected
+
+<!-- docs: end hidden content -->

package/src/components/menu-item-ai/menu-item-ai.js

@@ -0,0 +1,40 @@
+import '@brightspace-ui/core/components/icons/icon.js';
+import { css, html, LitElement } from 'lit';
+import { MenuItemMixin } from '@brightspace-ui/core/components/menu/menu-item-mixin.js';
+import { menuItemStyles } from '@brightspace-ui/core/components/menu/menu-item-styles.js';
+
+/**
+ * A menu item component that displays an AI icon before its text.
+ * @slot - Default content placed inside of the component
+ */
+class MenuItemAI extends MenuItemMixin(LitElement) {
+
+	static styles = [menuItemStyles, css`
+		:host {
+			align-items: center;
+			display: flex;
+			gap: 6px;
+			padding: 0.75rem 1rem;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-icon {
+			flex: none;
+		}
+	`];
+
+	render() {
+		const chevron = this.hasChildView ?
+			html`<d2l-icon icon="tier1:chevron-right"></d2l-icon>` : null;
+
+		return html`
+			<d2l-icon icon="tier1:ai"></d2l-icon>
+			<div class="d2l-menu-item-text">${this.text}</div>
+			${chevron}
+			<slot></slot>
+		`;
+	}
+}
+
+customElements.define('d2l-menu-item-ai', MenuItemAI);

package/src/components/wizard/README.md

@@ -61,14 +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

@@ -56,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'
@@ -106,6 +114,8 @@ class D2LStep extends LocalizeLabsElement(LitElement) {
 		this.primaryButton = PRIMARY_BUTTON.NEXT;
 		this.hideNextButton = false;
 		this.disableNextButton = false;
+		this.disableBackButton = false;
+		this.disableRestartButton = false;
 		this.nextButtonAriaLabel = '';
 		this.restartButtonAriaLabel = '';
 		this.ariaTitle = '';
@@ -166,6 +176,7 @@ 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}
@@ -190,6 +201,7 @@ 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}