@brightspace-ui/labs 2.60.1 → 2.61.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"./components/grade-result/grade-result-presentational.js": "./src/components/grade-result/grade-result-presentational.js",
|
|
20
20
|
"./components/grade-result/grade-result-student-grade-preview.js": "./src/components/grade-result/grade-result-student-grade-preview.js",
|
|
21
21
|
"./components/media-player.js": "./src/components/media-player/media-player.js",
|
|
22
|
+
"./components/menu-item-ai.js": "./src/components/menu-item-ai/menu-item-ai.js",
|
|
22
23
|
"./components/navigation/navigation-band.js": "./src/components/navigation/navigation-band.js",
|
|
23
24
|
"./components/navigation/navigation-button-icon.js": "./src/components/navigation/navigation-button-icon.js",
|
|
24
25
|
"./components/navigation/navigation-dropdown-button-custom.js": "./src/components/navigation/navigation-dropdown-button-custom.js",
|
|
@@ -111,5 +112,5 @@
|
|
|
111
112
|
"parse-srt": "^1.0.0-alpha",
|
|
112
113
|
"webvtt-parser": "^2"
|
|
113
114
|
},
|
|
114
|
-
"version": "2.
|
|
115
|
+
"version": "2.61.1"
|
|
115
116
|
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# AI Menu Item
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
It behaves like `<d2l-menu-item>` from `@brightspace-ui/core`, except the AI icon is always rendered before the text.
|
|
6
|
+
|
|
7
|
+
## AI Menu Item [d2l-labs-menu-item-ai]
|
|
8
|
+
|
|
9
|
+
<!-- docs: demo code -->
|
|
10
|
+
```html
|
|
11
|
+
<script type="module">
|
|
12
|
+
import '@brightspace-ui/core/components/menu/menu.js';
|
|
13
|
+
import '@brightspace-ui/labs/components/menu-item-ai.js';
|
|
14
|
+
</script>
|
|
15
|
+
<d2l-menu label="Astronomy">
|
|
16
|
+
<d2l-labs-menu-item-ai text="Summarize with AI"></d2l-labs-menu-item-ai>
|
|
17
|
+
</d2l-menu>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
<!-- docs: start hidden content -->
|
|
21
|
+
|
|
22
|
+
**Properties:**
|
|
23
|
+
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
|--|--|--|
|
|
26
|
+
| `text` | String, required | Text displayed by the menu item |
|
|
27
|
+
| `description` | String | A description of the menu item that will be used by screen readers for additional context |
|
|
28
|
+
| `disabled` | Boolean | Disables the menu item |
|
|
29
|
+
| `lines` | Number | The number of lines to display before truncating text with an ellipsis. Defaults to 2 |
|
|
30
|
+
|
|
31
|
+
**Events:**
|
|
32
|
+
|
|
33
|
+
* `d2l-menu-item-select`: dispatched when the menu item is selected
|
|
34
|
+
|
|
35
|
+
<!-- docs: end hidden content -->
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import '@brightspace-ui/core/components/icons/icon.js';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { MenuItemMixin } from '@brightspace-ui/core/components/menu/menu-item-mixin.js';
|
|
4
|
+
import { menuItemStyles } from '@brightspace-ui/core/components/menu/menu-item-styles.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* A menu item component that displays an AI icon before its text.
|
|
8
|
+
* @slot - Default content placed inside of the component
|
|
9
|
+
*/
|
|
10
|
+
class MenuItemAI extends MenuItemMixin(LitElement) {
|
|
11
|
+
|
|
12
|
+
static styles = [menuItemStyles, css`
|
|
13
|
+
:host {
|
|
14
|
+
align-items: center;
|
|
15
|
+
display: flex;
|
|
16
|
+
gap: 6px;
|
|
17
|
+
padding: 0.75rem 1rem;
|
|
18
|
+
}
|
|
19
|
+
:host([hidden]) {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
d2l-icon {
|
|
23
|
+
flex: none;
|
|
24
|
+
}
|
|
25
|
+
`];
|
|
26
|
+
|
|
27
|
+
render() {
|
|
28
|
+
const chevron = this.hasChildView ?
|
|
29
|
+
html`<d2l-icon icon="tier1:chevron-right"></d2l-icon>` : null;
|
|
30
|
+
|
|
31
|
+
return html`
|
|
32
|
+
<d2l-icon icon="tier1:ai"></d2l-icon>
|
|
33
|
+
<div class="d2l-menu-item-text">${this.text}</div>
|
|
34
|
+
${chevron}
|
|
35
|
+
<slot></slot>
|
|
36
|
+
`;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
class MenuItemAITemp extends MenuItemAI { }
|
|
41
|
+
|
|
42
|
+
customElements.define('d2l-menu-item-ai', MenuItemAITemp);
|
|
43
|
+
|
|
44
|
+
customElements.define('d2l-labs-menu-item-ai', MenuItemAI);
|