@brightspace-ui/core 3.123.2 → 3.124.0

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.
@@ -26,20 +26,18 @@
26
26
  <d2l-form>
27
27
  <d2l-input-group>
28
28
  <d2l-input-text label="Name" required></d2l-input-text>
29
- <d2l-input-fieldset label="Options">
30
- <d2l-input-checkbox-group>
31
- <d2l-input-checkbox>Option 1</d2l-input-checkbox>
32
- <d2l-input-checkbox checked>Option 2</d2l-input-checkbox>
33
- <d2l-input-checkbox>Option 3</d2l-input-checkbox>
34
- </d2l-input-checkbox-group>
35
- </d2l-input-fieldset>
36
- <d2l-input-fieldset label="Address" label-hidden>
29
+ <d2l-input-textarea label="Description" rows="3"></d2l-input-textarea>
30
+ <d2l-input-checkbox-group label="Options">
31
+ <d2l-input-checkbox>Option 1</d2l-input-checkbox>
32
+ <d2l-input-checkbox checked>Option 2</d2l-input-checkbox>
33
+ <d2l-input-checkbox>Option 3</d2l-input-checkbox>
34
+ </d2l-input-checkbox-group>
35
+ <d2l-input-fieldset label="Address" label-style="heading">
37
36
  <d2l-input-group>
38
37
  <d2l-input-text label="Street" required></d2l-input-text>
39
38
  <d2l-input-text label="City" required></d2l-input-text>
40
39
  </d2l-input-group>
41
40
  </d2l-input-fieldset>
42
- <d2l-input-textarea label="Description" rows="3"></d2l-input-textarea>
43
41
  </d2l-input-group>
44
42
  </d2l-form>
45
43
  <d2l-floating-buttons>
@@ -62,7 +62,7 @@ When provided with a `name`, the group will participate in forms with the `value
62
62
  When the radio group's state changes, it dispatches the `change` event:
63
63
 
64
64
  ```javascript
65
- checkbox.addEventListener('change', e => {
65
+ group.addEventListener('change', e => {
66
66
  const newValue = e.target.detail.value;
67
67
  const oldValue = e.target.detail.oldValue; // may be undefined
68
68
  });
@@ -1,6 +1,7 @@
1
1
  import { css, html, LitElement } from 'lit';
2
2
  import { classMap } from 'lit/directives/class-map.js';
3
3
  import { getUniqueId } from '../../helpers/uniqueId.js';
4
+ import { heading4Styles } from '../typography/styles.js';
4
5
  import { ifDefined } from 'lit/directives/if-defined.js';
5
6
  import { InputInlineHelpMixin } from './input-inline-help.js';
6
7
  import { inputLabelStyles } from './input-label-styles.js';
@@ -26,6 +27,11 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
26
27
  * @type {boolean}
27
28
  */
28
29
  labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
30
+ /**
31
+ * Style of the fieldset label
32
+ * @type {'default'|'heading'}
33
+ */
34
+ labelStyle: { type: String, attribute: 'label-style', reflect: true },
29
35
  /**
30
36
  * Indicates that a value is required for inputs in the fieldset
31
37
  * @type {boolean}
@@ -35,7 +41,7 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
35
41
  }
36
42
 
37
43
  static get styles() {
38
- return [ super.styles, inputLabelStyles, offscreenStyles,
44
+ return [ super.styles, heading4Styles, inputLabelStyles, offscreenStyles,
39
45
  css`
40
46
  :host {
41
47
  display: block;
@@ -43,6 +49,13 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
43
49
  :host([hidden]) {
44
50
  display: none;
45
51
  }
52
+ :host([label-style="heading"]:not([label-hidden])) {
53
+ margin-block-start: 0.3rem;
54
+ }
55
+ legend.d2l-heading-4 {
56
+ margin-block: 0 0.6rem;
57
+ padding: 0;
58
+ }
46
59
  `
47
60
  ];
48
61
  }
@@ -50,21 +63,22 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
50
63
  constructor() {
51
64
  super();
52
65
  this.labelHidden = false;
66
+ this.labelStyle = 'default';
53
67
  this.required = false;
54
68
  this._inlineHelpId = getUniqueId();
55
69
  }
56
70
 
57
71
  render() {
58
72
  const legendClasses = {
59
- 'd2l-input-label': true,
73
+ 'd2l-heading-4': this.labelStyle === 'heading',
74
+ 'd2l-input-label': this.labelStyle !== 'heading',
60
75
  'd2l-offscreen': this.labelHidden,
61
76
  'd2l-skeletize': true
62
77
  };
63
78
  return html`
64
79
  <fieldset
65
80
  class="d2l-input-label-fieldset"
66
- aria-describedby="${ifDefined(this._hasInlineHelp ? this._inlineHelpId : undefined)}"
67
- >
81
+ aria-describedby="${ifDefined(this._hasInlineHelp ? this._inlineHelpId : undefined)}">
68
82
  <legend class="${classMap(legendClasses)}">${this.label}</legend>
69
83
  <slot></slot>
70
84
  ${this._renderInlineHelp(this._inlineHelpId)}
@@ -11,7 +11,7 @@ class InputGroup extends LitElement {
11
11
  :host {
12
12
  display: flex;
13
13
  flex-direction: column;
14
- gap: 1rem;
14
+ gap: 0.9rem;
15
15
  }
16
16
  :host([hidden]) {
17
17
  display: none;
@@ -0,0 +1,162 @@
1
+ import '../../icons/icon.js';
2
+ import '../list-item-content.js';
3
+ import '../list-item-nav-button.js';
4
+ import '../list.js';
5
+ import '../../tooltip/tooltip-help.js';
6
+ import { css, html, LitElement, nothing } from 'lit';
7
+ import { ifDefined } from 'lit/directives/if-defined.js';
8
+ import { listDemos } from './list-demo-scenarios.js';
9
+ import { moveLocations } from '../list-item-drag-drop-mixin.js';
10
+ import { repeat } from 'lit/directives/repeat.js';
11
+
12
+ class ListDemoNav extends LitElement {
13
+
14
+ static get properties() {
15
+ return {
16
+ _currentItem: { state: true }
17
+ };
18
+ }
19
+
20
+ static get styles() {
21
+ return [
22
+ css`
23
+ :host {
24
+ display: block;
25
+ max-width: 400px;
26
+ }
27
+ d2l-icon {
28
+ margin-right: 0.7rem;
29
+ }
30
+ d2l-tooltip-help {
31
+ padding: 5px;
32
+ }
33
+ `
34
+ ];
35
+ }
36
+
37
+ constructor() {
38
+ super();
39
+ this._currentItem = null;
40
+ }
41
+
42
+ render() {
43
+ return html`
44
+ <div @d2l-list-items-move="${this._handleListItemsMove}">
45
+ <d2l-list
46
+ grid
47
+ drag-multiple
48
+ @d2l-list-item-button-click="${this._handleItemClick}">
49
+ ${repeat(this.#list, (item) => item.key, (item) => this._renderItem(item))}
50
+ </d2l-list>
51
+ </div>
52
+ `;
53
+ }
54
+
55
+ #list = listDemos.nav;
56
+
57
+ _handleItemClick(e) {
58
+ if (!e.target.expandable) {
59
+ this._currentItem = e.target;
60
+ return;
61
+ }
62
+
63
+ if (this._currentItem !== e.target) {
64
+ e.target.expanded = true;
65
+ this._currentItem = e.target;
66
+ } else {
67
+ e.target.expanded = !e.target.expanded;
68
+ }
69
+ }
70
+
71
+ async _handleListItemsMove(e) {
72
+
73
+ const sourceListItems = e.detail.sourceItems;
74
+ const target = e.detail.target;
75
+
76
+ // helper that gets the array containing item data, the item data, and the index within the array
77
+ const getItemInfo = (items, key) => {
78
+ for (let i = 0; i < items.length; i++) {
79
+ if (items[i].key === key) {
80
+ return { owner: items, item: items[i], index: i };
81
+ }
82
+ if (items[i].items && items[i].items.length > 0) {
83
+ const tempItemData = getItemInfo(items[i].items, key);
84
+ if (tempItemData) return tempItemData;
85
+ }
86
+ }
87
+ };
88
+
89
+ const dataToMove = [];
90
+
91
+ // remove data elements from original locations
92
+ sourceListItems.forEach(sourceListItem => {
93
+ const info = getItemInfo(this.#list, sourceListItem.key);
94
+ if (info?.owner) {
95
+ info.owner.splice(info.index, 1);
96
+ }
97
+ if (info?.item) {
98
+ dataToMove.push(info.item);
99
+ }
100
+ });
101
+
102
+ // append data elements to new location
103
+ const targetInfo = getItemInfo(this.#list, target.item.key);
104
+ let targetItems;
105
+ let targetIndex;
106
+ if (target.location === moveLocations.nest) {
107
+ if (!targetInfo.item.items) targetInfo.item.items = [];
108
+ targetItems = targetInfo.item.items;
109
+ targetIndex = targetItems.length;
110
+ } else {
111
+ targetItems = targetInfo?.owner;
112
+ if (!targetItems) return;
113
+ if (target.location === moveLocations.above) targetIndex = targetInfo.index;
114
+ else if (target.location === moveLocations.below) targetIndex = targetInfo.index + 1;
115
+ }
116
+ for (let i = dataToMove.length - 1; i >= 0; i--) {
117
+ targetItems.splice(targetIndex, 0, dataToMove[i]);
118
+ }
119
+
120
+ this.requestUpdate();
121
+ await this.updateComplete;
122
+
123
+ if (e.detail.keyboardActive) {
124
+ setTimeout(() => {
125
+ if (!this.shadowRoot) return;
126
+ const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
127
+ newItem.activateDragHandle();
128
+ });
129
+ }
130
+ }
131
+
132
+ _renderItem(item) {
133
+ const hasSubList = item.items && item.items.length > 0;
134
+ return html`
135
+ <d2l-list-item-nav-button
136
+ key="${ifDefined(item.key)}"
137
+ draggable
138
+ drag-handle-text="${item.primaryText}"
139
+ color="${ifDefined(item.color)}"
140
+ ?expandable="${hasSubList}"
141
+ ?expanded="${hasSubList}"
142
+ drop-nested
143
+ label="${item.primaryText}">
144
+ <d2l-list-item-content>
145
+ <div>${item.hasIcon ? html`<d2l-icon icon="tier2:file-document"></d2l-icon>` : nothing}${item.primaryText}</div>
146
+ ${item.tooltipOpenerText && item.tooltipText
147
+ ? html`<div slot="secondary"><d2l-tooltip-help text="${item.tooltipOpenerText}">${item.tooltipText}</d2l-tooltip-help></div>`
148
+ : nothing
149
+ }
150
+ </d2l-list-item-content>
151
+ ${hasSubList ? html`
152
+ <d2l-list slot="nested">
153
+ ${repeat(item.items, (subItem) => subItem.key, (subItem) => this._renderItem(subItem))}
154
+ </d2l-list>`
155
+ : nothing
156
+ }
157
+ </d2l-list-item-nav-button>
158
+ `;
159
+ }
160
+ }
161
+
162
+ customElements.define('d2l-demo-list-nav', ListDemoNav);
@@ -317,5 +317,56 @@ export const listDemos = {
317
317
  primaryText: 'Applied Wetland Science',
318
318
  dropNested: true,
319
319
  items: []
320
- }]
320
+ }],
321
+ nav: [{
322
+ key: '1',
323
+ primaryText: 'Introductory Earth Sciences',
324
+ dropNested: true,
325
+ color: '#006fbf',
326
+ items: [{
327
+ key: '1-1',
328
+ primaryText: 'Glaciation',
329
+ dropNested: true,
330
+ items: [],
331
+ color: '#29a6ff',
332
+ tooltipText: 'Starts: 2023-09-01, Ends: 2023-12-01',
333
+ tooltipOpenerText: 'Due: 2023-10-10',
334
+ hasIcon: true
335
+ }, {
336
+ key: '1-2',
337
+ primaryText: 'Weathering',
338
+ dropNested: true,
339
+ items: [],
340
+ color: '#29a6ff',
341
+ tooltipText: 'Starts: 2023-10-01, Ends: 2023-12-01',
342
+ tooltipOpenerText: 'Due: 2023-11-10',
343
+ hasIcon: true
344
+ }, {
345
+ key: '1-3',
346
+ primaryText: 'Volcanism',
347
+ dropNested: true,
348
+ items: [],
349
+ color: '#29a6ff',
350
+ hasIcon: true
351
+ }]
352
+ }, {
353
+ key: '2',
354
+ primaryText: 'Applied Wetland Science',
355
+ color: '#cd2026',
356
+ items: [{
357
+ key: '2-1',
358
+ primaryText: 'Carbon & Nitrogen Cycling',
359
+ dropNested: true,
360
+ items: [],
361
+ color: '#ff575a',
362
+ hasIcon: true
363
+ }, {
364
+ key: '2-2',
365
+ primaryText: 'Wetland Engineering',
366
+ dropNested: true,
367
+ items: [],
368
+ color: '#ff575a',
369
+ hasIcon: true
370
+ }]
371
+ }],
321
372
  };
@@ -25,6 +25,7 @@
25
25
  import '../../switch/switch.js';
26
26
  import '../../tooltip/tooltip-help.js';
27
27
 
28
+ import './demo-list-nav.js';
28
29
  import './demo-list-nested-iterations-helper.js';
29
30
  </script>
30
31
  </head>
@@ -226,36 +227,36 @@
226
227
  </template>
227
228
  </d2l-demo-snippet>
228
229
 
229
- <h2>Side nav item</h2>
230
+ <h2>Side nav list (simple)</h2>
230
231
 
231
232
  <d2l-demo-snippet>
232
233
  <template>
233
234
  <d2l-list grid style="width: 334px;">
234
- <d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded draggable>
235
+ <d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded>
235
236
  <d2l-list-item-content>
236
237
  <div>Welcome!</div>
237
238
  </d2l-list-item-content>
238
239
  <d2l-list slot="nested" grid>
239
- <d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation" draggable>
240
+ <d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation">
240
241
  <d2l-list-item-content>
241
242
  <div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
242
- <div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm">Due: May 2, 2023</d2l-tooltip-help></div>
243
+ <div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm" style="padding: 5px;">Start: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
243
244
  </d2l-list-item-content>
244
245
  </d2l-list-item-nav-button>
245
246
  </d2l-list>
246
247
  </d2l-list-item-nav-button>
247
- <d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded draggable>
248
+ <d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
248
249
  <d2l-list-item-content>
249
250
  <div>Unit 1: Fiction</div>
250
- <div slot="secondary"><d2l-tooltip-help text="Starts: May 2, 2023 at 2 pm">Starts: May 2, 2023</d2l-tooltip-help></div>
251
+ <div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 5 pm" style="padding: 5px;">Starts: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
251
252
  </d2l-list-item-content>
252
253
  <d2l-list slot="nested" grid>
253
- <d2l-list-item-nav-button key="L3-2" label="Fiction" draggable>
254
+ <d2l-list-item-nav-button key="L3-2" label="Fiction">
254
255
  <d2l-list-item-content>
255
256
  <div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
256
257
  </d2l-list-item-content>
257
258
  </d2l-list-item-nav-button>
258
- <d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction" draggable>
259
+ <d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction">
259
260
  <d2l-list-item-content>
260
261
  <div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
261
262
  </d2l-list-item-content>
@@ -286,6 +287,14 @@
286
287
  </template>
287
288
  </d2l-demo-snippet>
288
289
 
290
+ <h2>Side nav list (more complex with drag & drop)</h2>
291
+
292
+ <d2l-demo-snippet>
293
+ <template>
294
+ <d2l-demo-list-nav></d2l-demo-list-nav>
295
+ </template>
296
+ </d2l-demo-snippet>
297
+
289
298
  <h2>All Iterations</h2>
290
299
 
291
300
  <d2l-demo-snippet full-width>
@@ -6406,6 +6406,12 @@
6406
6406
  "type": "boolean",
6407
6407
  "default": "false"
6408
6408
  },
6409
+ {
6410
+ "name": "label-style",
6411
+ "description": "Style of the fieldset label",
6412
+ "type": "'default'|'heading'",
6413
+ "default": "\"default\""
6414
+ },
6409
6415
  {
6410
6416
  "name": "required",
6411
6417
  "description": "Indicates that a value is required for inputs in the fieldset",
@@ -6432,6 +6438,13 @@
6432
6438
  "type": "boolean",
6433
6439
  "default": "false"
6434
6440
  },
6441
+ {
6442
+ "name": "labelStyle",
6443
+ "attribute": "label-style",
6444
+ "description": "Style of the fieldset label",
6445
+ "type": "'default'|'heading'",
6446
+ "default": "\"default\""
6447
+ },
6435
6448
  {
6436
6449
  "name": "required",
6437
6450
  "attribute": "required",
@@ -8364,6 +8377,10 @@
8364
8377
  }
8365
8378
  ]
8366
8379
  },
8380
+ {
8381
+ "name": "d2l-demo-list-nav",
8382
+ "path": "./components/list/demo/demo-list-nav.js"
8383
+ },
8367
8384
  {
8368
8385
  "name": "d2l-demo-list-nested-iterations-helper",
8369
8386
  "path": "./components/list/demo/demo-list-nested-iterations-helper.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.123.2",
3
+ "version": "3.124.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",