@brightspace-ui/core 2.76.1 → 2.76.3
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.
|
@@ -1,41 +1,86 @@
|
|
|
1
1
|
# Collapsible Panel
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The collapsible panel is a container that can show or hide additional content. It utilizes progressive disclosure by providing the option to hide content/controls until the user needs them.
|
|
4
4
|
|
|
5
5
|
<!-- docs: demo -->
|
|
6
6
|
```html
|
|
7
7
|
<script type="module">
|
|
8
|
+
import '@brightspace-ui/core/components/button/button-icon.js';
|
|
8
9
|
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
|
|
10
|
+
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-summary-item.js';
|
|
11
|
+
import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
|
|
12
|
+
import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
|
|
13
|
+
import '@brightspace-ui/core/components/menu/menu.js';
|
|
14
|
+
import '@brightspace-ui/core/components/menu/menu-item.js';
|
|
15
|
+
import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
|
|
9
16
|
</script>
|
|
10
17
|
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
<style>
|
|
19
|
+
.panel-container {
|
|
20
|
+
display: flex;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
padding: 1rem;
|
|
23
|
+
width: 100%;
|
|
24
|
+
}
|
|
25
|
+
d2l-collapsible-panel {
|
|
26
|
+
width: 500px;
|
|
27
|
+
}
|
|
28
|
+
.subtle {
|
|
29
|
+
background: var(--d2l-color-gypsum);
|
|
30
|
+
}
|
|
31
|
+
.inline d2l-collapsible-panel {
|
|
32
|
+
width: 100%;
|
|
33
|
+
}
|
|
34
|
+
</style>
|
|
35
|
+
|
|
36
|
+
<div class="panel-container">
|
|
37
|
+
<d2l-collapsible-panel panel-title="Default Collapsible Panel">
|
|
38
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Use in most situations"></d2l-collapsible-panel-summary-item>
|
|
39
|
+
<p>Use the default collapsible panel in most situations. The default panel type has a border.</p>
|
|
40
|
+
<p>For all the panel types, you can turn the summary off if you don't need it, add additional action buttons beside the expand/collapse arrow, and add HTML content under the header. See the other collapsible panel types below for examples of those options!</p>
|
|
41
|
+
</d2l-collapsible-panel>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="panel-container subtle">
|
|
44
|
+
<d2l-collapsible-panel type="subtle" panel-title="Subtle Collapsible Panel">
|
|
45
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Use on backgrounds that are not white"></d2l-collapsible-panel-summary-item>
|
|
46
|
+
<div slot="header" style="align-items: center; display: flex; gap: 0.6rem;">
|
|
47
|
+
<d2l-status-indicator text="Reading Today"></d2l-status-indicator>
|
|
48
|
+
<p class="d2l-body-small">Nickname: caketray</p>
|
|
49
|
+
</div>
|
|
50
|
+
<p>Use the subtle collapsible panel on backgrounds that are not white. The subtle collapsible panel has a shadow instead of a border, making it stand out more on darker backgrounds.</p>
|
|
51
|
+
<p>This panel also has some HTML content in the header (including some information about our collapsible panel’s nickname, caketray).</p>
|
|
52
|
+
</d2l-collapsible-panel>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="panel-container inline">
|
|
55
|
+
<d2l-collapsible-panel type="inline" panel-title="Inline Collapsible Panel">
|
|
56
|
+
<d2l-dropdown-more slot="actions">
|
|
57
|
+
<d2l-dropdown-menu>
|
|
58
|
+
<d2l-menu>
|
|
59
|
+
<d2l-menu-item text="Duplicate"></d2l-menu-item>
|
|
60
|
+
<d2l-menu-item text="Delete"></d2l-menu-item>
|
|
61
|
+
</d2l-menu>
|
|
62
|
+
</d2l-dropdown-menu>
|
|
63
|
+
</d2l-dropdown-more>
|
|
64
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Use to progressively disclose sections of a complex page, or simplify a complex page by hiding entire sections"></d2l-collapsible-panel-summary-item>
|
|
65
|
+
<p>Use an inline collapsible panel to progressively disclose sections of a complex page, or to allow users to simplify a complex page by hiding entire sections. The inline collapsible panel has only a top and bottom border, and the line between the header and summary is removed.</p>
|
|
66
|
+
<p>This panel also has an additional action (the menu). You can add more actions in that slot if you need them.</p>
|
|
67
|
+
</d2l-collapsible-panel>
|
|
68
|
+
</div>
|
|
22
69
|
```
|
|
23
70
|
|
|
24
71
|
## Best Practices
|
|
25
72
|
|
|
26
73
|
<!-- docs: start best practices -->
|
|
27
74
|
<!-- docs: start dos -->
|
|
28
|
-
* Use
|
|
29
|
-
*
|
|
75
|
+
* Use to progressively disclose information or settings to simplify a complex workflow
|
|
76
|
+
* Keep the header consistent across the collapsed and expanded states of the panel
|
|
77
|
+
* Use the subtle collapsible panel for backgrounds that aren't white
|
|
30
78
|
<!-- docs: end dos -->
|
|
31
79
|
|
|
32
80
|
<!-- docs: start donts -->
|
|
33
|
-
* Don't nest collapsible panels
|
|
34
|
-
* Don't
|
|
35
|
-
*
|
|
36
|
-
* For example, don't have a button that's only available in the collapsed state of the panel
|
|
37
|
-
* Avoid using a collapsible panel for required options in a form
|
|
38
|
-
* Avoid long lists of collapsible panels; consider using a nested [list](https://daylight.d2l.dev/components/list/) in this case (exceptions may apply)
|
|
81
|
+
* Don't nest collapsible panels
|
|
82
|
+
* Don't put required fields in a collapsible panel
|
|
83
|
+
* Avoid long lists of collapsible panels. Consider using the nested [list](https://daylight.d2l.dev/components/list/) in this case (exceptions may apply)
|
|
39
84
|
<!-- docs: end donts -->
|
|
40
85
|
<!-- docs: end best practices -->
|
|
41
86
|
|
|
@@ -50,7 +95,18 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
|
|
|
50
95
|
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
|
|
51
96
|
</script>
|
|
52
97
|
|
|
53
|
-
<
|
|
98
|
+
<style>
|
|
99
|
+
d2l-collapsible-panel {
|
|
100
|
+
width: 500px;
|
|
101
|
+
margin-block: 2rem;
|
|
102
|
+
}
|
|
103
|
+
/* TODO: remove this when daylight demo resizing is fixed */
|
|
104
|
+
d2l-collapsible-panel:not([expanded]) {
|
|
105
|
+
margin-bottom: 8rem;
|
|
106
|
+
}
|
|
107
|
+
</style>
|
|
108
|
+
|
|
109
|
+
<d2l-collapsible-panel panel-title="Cake Decoration">
|
|
54
110
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
|
|
55
111
|
</d2l-collapsible-panel>
|
|
56
112
|
```
|
|
@@ -82,66 +138,192 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
|
|
|
82
138
|
|
|
83
139
|
### Panel Types
|
|
84
140
|
|
|
141
|
+
#### Default
|
|
142
|
+
Use the default collapsible panel in most situations.
|
|
143
|
+
|
|
85
144
|
<!-- docs: demo -->
|
|
86
145
|
```html
|
|
87
146
|
<script type="module">
|
|
88
147
|
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
|
|
89
148
|
</script>
|
|
90
149
|
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
150
|
+
<style>
|
|
151
|
+
d2l-collapsible-panel {
|
|
152
|
+
width: 500px;
|
|
153
|
+
}
|
|
154
|
+
</style>
|
|
94
155
|
|
|
95
|
-
<d2l-collapsible-panel
|
|
96
|
-
|
|
156
|
+
<d2l-collapsible-panel panel-title="Default">
|
|
157
|
+
Expanded content
|
|
97
158
|
</d2l-collapsible-panel>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
#### Subtle
|
|
162
|
+
Use the subtle collapsible panel on backgrounds that are not white.
|
|
98
163
|
|
|
99
|
-
|
|
100
|
-
|
|
164
|
+
<!-- docs: demo -->
|
|
165
|
+
```html
|
|
166
|
+
<script type="module">
|
|
167
|
+
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
|
|
168
|
+
</script>
|
|
169
|
+
|
|
170
|
+
<style>
|
|
171
|
+
html {
|
|
172
|
+
background: var(--d2l-color-gypsum);
|
|
173
|
+
}
|
|
174
|
+
d2l-collapsible-panel {
|
|
175
|
+
width: 500px;
|
|
176
|
+
}
|
|
177
|
+
</style>
|
|
178
|
+
|
|
179
|
+
<d2l-collapsible-panel panel-title="Subtle" type="subtle">
|
|
180
|
+
Expanded content
|
|
101
181
|
</d2l-collapsible-panel>
|
|
102
182
|
```
|
|
103
183
|
|
|
104
|
-
|
|
105
|
-
|
|
184
|
+
#### Inline
|
|
185
|
+
Use an inline collapsible panel to progressively disclose sections of a complex page, or to allow users to simplify a complex page by hiding entire sections. The inline collapsible panel has only a top and bottom border, and the line between the header and summary is removed.
|
|
106
186
|
|
|
107
187
|
<!-- docs: demo -->
|
|
108
188
|
```html
|
|
109
189
|
<script type="module">
|
|
110
190
|
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
|
|
111
|
-
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-summary-item.js';
|
|
112
191
|
</script>
|
|
113
192
|
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
193
|
+
<style>
|
|
194
|
+
d2l-collapsible-panel {
|
|
195
|
+
width: 100%;
|
|
196
|
+
}
|
|
197
|
+
</style>
|
|
198
|
+
|
|
199
|
+
<d2l-collapsible-panel panel-title="Inline" type="inline">
|
|
200
|
+
Expanded content
|
|
121
201
|
</d2l-collapsible-panel>
|
|
122
202
|
```
|
|
123
203
|
|
|
204
|
+
## Summary Items [d2l-collapsible-panel-summary-item]
|
|
205
|
+
An optional summary can help the user understand what’s inside the collapsible panel without having to expand it. This can be helpful if the user needs more than the heading to explain what’s inside.
|
|
206
|
+
|
|
207
|
+
More than one d2l-collapsible-panel-summary-item can be added to the summary slot, and each will appear on its own line.
|
|
208
|
+
|
|
209
|
+
<!-- docs: demo live -->
|
|
210
|
+
```html
|
|
211
|
+
<script type="module">
|
|
212
|
+
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
|
|
213
|
+
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-summary-item.js';
|
|
214
|
+
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
215
|
+
import '@brightspace-ui/core/components/form/form.js';
|
|
216
|
+
import { css, html, LitElement } from 'lit';
|
|
217
|
+
import { labelStyles } from '@brightspace-ui/core/components/typography/styles.js';
|
|
218
|
+
import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
|
|
219
|
+
|
|
220
|
+
class CollapsiblePanelDaylightDemo extends LitElement {
|
|
221
|
+
|
|
222
|
+
static get properties() {
|
|
223
|
+
return {
|
|
224
|
+
_addons: { state: true },
|
|
225
|
+
_icingType: { state: true },
|
|
226
|
+
_icingTypes: { state: true },
|
|
227
|
+
};
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
static get styles() {
|
|
231
|
+
return [labelStyles, selectStyles, css`
|
|
232
|
+
d2l-collapsible-panel {
|
|
233
|
+
width: 500px;
|
|
234
|
+
}
|
|
235
|
+
/* TODO: remove this when daylight demo resizing is fixed */
|
|
236
|
+
d2l-collapsible-panel:not([expanded]) {
|
|
237
|
+
margin-bottom: 13rem;
|
|
238
|
+
}
|
|
239
|
+
`];
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
constructor() {
|
|
243
|
+
super();
|
|
244
|
+
this._addons = [
|
|
245
|
+
{ id: 'name', text: 'Personalized name', checked: false },
|
|
246
|
+
{ id: 'candles', text: 'Candles', checked: false },
|
|
247
|
+
{ id: 'cutlery', text: 'Plates and forks', checked: false },
|
|
248
|
+
];
|
|
249
|
+
this._icingTypes = ['Buttercream frosting', 'Cream cheese frosting', 'Royal icing', 'Swiss meringue buttercream'];
|
|
250
|
+
this._icingType = this._icingTypes[0];
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
render() {
|
|
254
|
+
return html`
|
|
255
|
+
<d2l-collapsible-panel panel-title="Cake Decoration">
|
|
256
|
+
${this._renderSummaryItems()}
|
|
257
|
+
|
|
258
|
+
<p class="d2l-label-text">Icing type</p>
|
|
259
|
+
<select class="d2l-input-select" @change="${this._onChangeSelect}">
|
|
260
|
+
${this._icingTypes.map((option) => html`<option>${option}</option>`)}
|
|
261
|
+
</select>
|
|
262
|
+
|
|
263
|
+
<p class="d2l-label-text">Add-ons</p>
|
|
264
|
+
${this._addons.map((item) => (
|
|
265
|
+
html`<d2l-input-checkbox id="${item.id}" @change="${this._onChangeCheckbox}">${item.text}</d2l-input-checkbox>`
|
|
266
|
+
))}
|
|
267
|
+
</d2l-collapsible-panel>
|
|
268
|
+
`;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
_onChangeCheckbox(e) {
|
|
272
|
+
const index = this._addons.findIndex((obj => obj.id === e.target.getAttribute('id')));
|
|
273
|
+
this._addons[index].checked = e.target.checked;
|
|
274
|
+
this.requestUpdate();
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
_onChangeSelect(e) {
|
|
278
|
+
this._icingType = e.target.value;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
_renderSummaryItems() {
|
|
282
|
+
return html`
|
|
283
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="${this._icingType}"></d2l-collapsible-panel-summary-item>
|
|
284
|
+
${this._addons.filter(item => item.checked).map((item) => (
|
|
285
|
+
html`<d2l-collapsible-panel-summary-item slot="summary" text="${item.text}"></d2l-collapsible-panel-summary-item>`
|
|
286
|
+
))}
|
|
287
|
+
`;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
customElements.define('d2l-collapsible-panel-daylight-demo', CollapsiblePanelDaylightDemo);
|
|
291
|
+
</script>
|
|
292
|
+
<d2l-collapsible-panel-daylight-demo></d2l-collapsible-panel-daylight-demo>
|
|
293
|
+
```
|
|
294
|
+
|
|
124
295
|
## Optional slots
|
|
125
296
|
|
|
126
297
|
Collapsible panels have two optional slots, `actions` and `header` that can be used to add more information to the header area.
|
|
127
298
|
|
|
128
299
|
|
|
129
|
-
<!-- docs: demo -->
|
|
300
|
+
<!-- docs: demo live -->
|
|
130
301
|
```html
|
|
131
302
|
<script type="module">
|
|
132
303
|
import '@brightspace-ui/core/components/button/button-icon.js';
|
|
133
304
|
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
|
|
134
|
-
import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-summary-item.js';
|
|
135
305
|
import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
|
|
136
306
|
import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
|
|
307
|
+
import '@brightspace-ui/core/components/link/link.js';
|
|
137
308
|
import '@brightspace-ui/core/components/menu/menu.js';
|
|
138
309
|
import '@brightspace-ui/core/components/menu/menu-item.js';
|
|
139
310
|
import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
|
|
140
311
|
</script>
|
|
141
312
|
|
|
142
|
-
<
|
|
313
|
+
<style>
|
|
314
|
+
d2l-collapsible-panel {
|
|
315
|
+
width: 800px;
|
|
316
|
+
}
|
|
317
|
+
/* TODO: remove this when daylight demo resizing is fixed */
|
|
318
|
+
d2l-collapsible-panel:not([expanded]) {
|
|
319
|
+
margin-bottom: 4rem;
|
|
320
|
+
}
|
|
321
|
+
</style>
|
|
322
|
+
|
|
323
|
+
<d2l-collapsible-panel panel-title="Submission 1">
|
|
143
324
|
<d2l-button-icon slot="actions" icon="tier1:fullscreen"></d2l-button-icon>
|
|
144
|
-
<d2l-button-icon slot="actions" icon="tier1:download"></d2l-button-icon
|
|
325
|
+
<d2l-button-icon slot="actions" icon="tier1:download"></d2l-button-icon>
|
|
326
|
+
<d2l-dropdown-more slot="actions">
|
|
145
327
|
<d2l-dropdown-menu>
|
|
146
328
|
<d2l-menu>
|
|
147
329
|
<d2l-menu-item text="Duplicate"></d2l-menu-item>
|
|
@@ -150,14 +332,11 @@ Collapsible panels have two optional slots, `actions` and `header` that can be u
|
|
|
150
332
|
</d2l-dropdown-menu>
|
|
151
333
|
</d2l-dropdown-more>
|
|
152
334
|
<div slot="header" style="align-items: center; display: flex; gap: 0.6rem;">
|
|
153
|
-
<d2l-status-indicator state="none" text="
|
|
154
|
-
<p class="d2l-body-small">
|
|
155
|
-
<d2l-link small href="https://www.d2l.com" target="blank">Link</d2l-link>
|
|
156
|
-
</div>
|
|
157
|
-
<div slot="summary">
|
|
158
|
-
<d2l-collapsible-panel-summary-item text="Always available"></d2l-collapsible-panel-summary-item>
|
|
335
|
+
<d2l-status-indicator state="none" text="Pending Evaluation"></d2l-status-indicator>
|
|
336
|
+
<p class="d2l-body-small">Submitted On: Jul 20, 2021 - 2:23 PM</p>
|
|
337
|
+
<d2l-link small href="https://www.d2l.com" target="blank">Link to post</d2l-link>
|
|
159
338
|
</div>
|
|
160
|
-
|
|
339
|
+
Expanded content
|
|
161
340
|
</d2l-collapsible-panel>
|
|
162
341
|
```
|
|
163
342
|
|
|
@@ -43,9 +43,7 @@
|
|
|
43
43
|
</d2l-collapsible-panel>
|
|
44
44
|
|
|
45
45
|
<d2l-collapsible-panel panel-title="Availability Dates and Conditions">
|
|
46
|
-
<
|
|
47
|
-
<d2l-collapsible-panel-summary-item text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
48
|
-
</div>
|
|
46
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
49
47
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
|
|
50
48
|
</d2l-collapsible-panel>
|
|
51
49
|
</div>
|
|
@@ -57,10 +55,9 @@
|
|
|
57
55
|
<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="subtle">
|
|
58
56
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
|
|
59
57
|
</d2l-collapsible-panel>
|
|
58
|
+
|
|
60
59
|
<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="subtle">
|
|
61
|
-
<
|
|
62
|
-
<d2l-collapsible-panel-summary-item text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
63
|
-
</div>
|
|
60
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
64
61
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
|
|
65
62
|
</d2l-collapsible-panel>
|
|
66
63
|
</div>
|
|
@@ -71,10 +68,9 @@
|
|
|
71
68
|
<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline">
|
|
72
69
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
|
|
73
70
|
</d2l-collapsible-panel>
|
|
71
|
+
|
|
74
72
|
<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline">
|
|
75
|
-
<
|
|
76
|
-
<d2l-collapsible-panel-summary-item text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
77
|
-
</div>
|
|
73
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
78
74
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
|
|
79
75
|
</d2l-collapsible-panel>
|
|
80
76
|
</d2l-demo-snippet>
|
|
@@ -85,9 +81,7 @@
|
|
|
85
81
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
|
|
86
82
|
</d2l-collapsible-panel>
|
|
87
83
|
<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding="large">
|
|
88
|
-
<
|
|
89
|
-
<d2l-collapsible-panel-summary-item text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
90
|
-
</div>
|
|
84
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
91
85
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
|
|
92
86
|
</d2l-collapsible-panel>
|
|
93
87
|
</d2l-demo-snippet>
|
|
@@ -95,11 +89,9 @@
|
|
|
95
89
|
<h2>Multi-line summary and interactive content</h2>
|
|
96
90
|
<d2l-demo-snippet>
|
|
97
91
|
<d2l-collapsible-panel panel-title="Availability Dates and Conditions">
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<d2l-collapsible-panel-summary-item text="Hidden by special access"></d2l-collapsible-panel-summary-item>
|
|
102
|
-
</div>
|
|
92
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
93
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="1 release condition"></d2l-collapsible-panel-summary-item>
|
|
94
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Hidden by special access"></d2l-collapsible-panel-summary-item>
|
|
103
95
|
<div style="display: flex; gap: 0.3rem; margin-bottom: 1.2rem;">
|
|
104
96
|
<d2l-input-search label="search" placeholder="Search Students"></d2l-input-search>
|
|
105
97
|
<d2l-button-subtle text="Evaluate All"></d2l-button-subtle>
|
|
@@ -118,7 +110,7 @@
|
|
|
118
110
|
<h2>With custom action and header content</h2>
|
|
119
111
|
<d2l-demo-snippet>
|
|
120
112
|
<d2l-collapsible-panel panel-title="Session: January 1, 2021: 10:00 AM" expand-collapse-label="Session on January 1">
|
|
121
|
-
<d2l-button-icon slot="actions" icon="tier1:fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download"></d2l-button-icon><d2l-dropdown-more>
|
|
113
|
+
<d2l-button-icon slot="actions" icon="tier1:fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download"></d2l-button-icon><d2l-dropdown-more slot="actions">
|
|
122
114
|
<d2l-dropdown-menu>
|
|
123
115
|
<d2l-menu>
|
|
124
116
|
<d2l-menu-item text="Duplicate"></d2l-menu-item>
|
|
@@ -131,9 +123,7 @@
|
|
|
131
123
|
<p class="d2l-body-small">Posts: 1 thread, 1 reply</p>
|
|
132
124
|
<d2l-link small href="https://www.d2l.com" target="blank">Link</d2l-link>
|
|
133
125
|
</div>
|
|
134
|
-
<
|
|
135
|
-
<d2l-collapsible-panel-summary-item text="Always available"></d2l-collapsible-panel-summary-item>
|
|
136
|
-
</div>
|
|
126
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Always available"></d2l-collapsible-panel-summary-item>
|
|
137
127
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
|
|
138
128
|
</d2l-collapsible-panel>
|
|
139
129
|
</d2l-demo-snippet>
|
|
@@ -168,11 +158,9 @@
|
|
|
168
158
|
<h2>Loooooong</h2>
|
|
169
159
|
<d2l-demo-snippet>
|
|
170
160
|
<d2l-collapsible-panel panel-title="Availability Dates and Conditions">
|
|
171
|
-
<
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
<d2l-collapsible-panel-summary-item text="Hidden by special access"></d2l-collapsible-panel-summary-item>
|
|
175
|
-
</div>
|
|
161
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
|
|
162
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="1 release condition"></d2l-collapsible-panel-summary-item>
|
|
163
|
+
<d2l-collapsible-panel-summary-item slot="summary" text="Hidden by special access"></d2l-collapsible-panel-summary-item>
|
|
176
164
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a feugiat mi, in consectetur justo. Suspendisse finibus placerat purus, quis volutpat libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempor bibendum tempor. Suspendisse potenti. Quisque auctor purus id magna laoreet finibus. Maecenas eleifend est id velit vulputate finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum semper lorem nibh, gravida maximus libero hendrerit eu. Sed congue turpis ac iaculis laoreet. In commodo orci sit amet mollis facilisis. Pellentesque eu viverra metus. Nunc convallis laoreet augue, vitae sollicitudin nisl facilisis id. Aliquam sollicitudin fermentum dui, non convallis nulla facilisis quis.</p>
|
|
177
165
|
|
|
178
166
|
<p>Fusce lacus magna, efficitur in bibendum sit amet, egestas sit amet libero. Aenean nec felis ut justo maximus scelerisque in eget eros. Nam tincidunt nisi ipsum, vitae pretium augue vehicula a. Donec eget diam et ex posuere dictum eget id dui. Sed elementum felis in condimentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas volutpat dui semper mi semper, id varius purus sagittis. Praesent fringilla vel magna nec porttitor. Nulla nec gravida magna. Donec vitae dui consequat, ornare velit at, maximus turpis. Morbi porttitor massa eu tempus pretium. Nunc at justo eu erat dictum volutpat et ac lacus. Etiam congue ut massa vel tempor. Curabitur pellentesque nec massa a elementum. Nulla non dictum velit.</p>
|
|
@@ -184,8 +172,6 @@
|
|
|
184
172
|
<p>Vestibulum enim leo, lobortis nec faucibus at, dictum rhoncus odio. Suspendisse dapibus, quam sed condimentum fermentum, est tellus malesuada justo, ut gravida libero dolor eu felis. Integer turpis dui, rhoncus sit amet dignissim eget, laoreet viverra magna. Nam varius arcu orci, sed consequat eros dictum nec. Nunc finibus quis diam id tincidunt. Quisque sed nunc ultrices, feugiat purus ac, iaculis leo. Morbi elementum, tellus sit amet eleifend tempor, magna massa eleifend turpis, id aliquam est ante vitae arcu. Vivamus non dapibus magna. Sed maximus fringilla sem, ac lacinia mi condimentum ac. Duis id eros nibh. Donec eget lectus et mi vulputate sollicitudin consequat quis lacus. Aliquam dui nibh, congue eu iaculis sed, fermentum a felis. Curabitur id magna sed urna lobortis hendrerit. Sed placerat nisl sit amet erat vulputate suscipit. Vestibulum sed efficitur odio. Sed dapibus nibh ac neque convallis tempus.</p>
|
|
185
173
|
</d2l-collapsible-panel>
|
|
186
174
|
</d2l-demo-snippet>
|
|
187
|
-
|
|
188
175
|
</d2l-demo-page>
|
|
189
|
-
|
|
190
176
|
</body>
|
|
191
177
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.76.
|
|
3
|
+
"version": "2.76.3",
|
|
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",
|