@brightspace-ui/core 3.136.0 → 3.137.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/components/calendar/calendar.js +43 -33
- package/components/card/card.js +20 -15
- package/components/card/demo/card.html +113 -86
- package/package.json +1 -1
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import '../button/button-icon.js';
|
|
2
2
|
import '../colors/colors.js';
|
|
3
3
|
import { bodySmallStyles, heading4Styles } from '../typography/styles.js';
|
|
4
|
-
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
+
import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
|
|
5
5
|
import { formatDate, getDateTimeDescriptor } from '@brightspace-ui/intl/lib/dateTime.js';
|
|
6
6
|
import { formatDateInISO, getClosestValidDate, getDateFromDateObj, getDateFromISODate, getToday, isDateInRange } from '../../helpers/dateTime.js';
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
8
|
import { findComposedAncestor } from '../../helpers/dom.js';
|
|
9
|
+
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
9
10
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
10
11
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
12
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
@@ -278,6 +279,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
278
279
|
margin-left: auto;
|
|
279
280
|
margin-right: auto;
|
|
280
281
|
opacity: 0;
|
|
282
|
+
outline-offset: -1px;
|
|
281
283
|
padding: 3px;
|
|
282
284
|
position: relative;
|
|
283
285
|
text-align: center;
|
|
@@ -360,57 +362,46 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
360
362
|
background-color: var(--d2l-color-gypsum);
|
|
361
363
|
}
|
|
362
364
|
|
|
363
|
-
td
|
|
364
|
-
td:focus button:not(.d2l-calendar-date-selected):not(:disabled).d2l-calendar-date-hover {
|
|
365
|
-
box-shadow: 0 0 0 2px var(--d2l-color-gypsum), 0 0 0 4px var(--d2l-color-celestine);
|
|
366
|
-
transition: none;
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
td, .d2l-calendar-date:focus {
|
|
365
|
+
td, .d2l-calendar-date:${unsafeCSS(getFocusPseudoClass())} {
|
|
370
366
|
outline: none;
|
|
371
367
|
}
|
|
372
368
|
|
|
373
|
-
td
|
|
374
|
-
|
|
375
|
-
padding: 0;
|
|
369
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date:not(:disabled) {
|
|
370
|
+
outline: 2px solid var(--d2l-color-celestine);
|
|
376
371
|
}
|
|
377
372
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
373
|
+
@keyframes initial-focus {
|
|
374
|
+
from {
|
|
375
|
+
outline: 0 solid var(--d2l-color-celestine);
|
|
376
|
+
padding: 0;
|
|
377
|
+
}
|
|
381
378
|
}
|
|
382
379
|
|
|
383
|
-
td
|
|
384
|
-
|
|
380
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date.d2l-calendar-date-initial {
|
|
381
|
+
animation: 200ms ease-in initial-focus;
|
|
385
382
|
}
|
|
386
383
|
|
|
387
384
|
@media (prefers-reduced-motion: reduce) {
|
|
388
|
-
td
|
|
389
|
-
|
|
385
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date.d2l-calendar-date-initial,
|
|
386
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date-initial.d2l-calendar-date-day-info::after {
|
|
387
|
+
animation: none;
|
|
390
388
|
}
|
|
391
389
|
}
|
|
392
390
|
|
|
393
391
|
.d2l-calendar-date.d2l-calendar-date-selected {
|
|
394
392
|
background-color: var(--d2l-color-celestine-plus-2);
|
|
395
|
-
|
|
396
|
-
padding: 2px;
|
|
393
|
+
outline: 1px solid var(--d2l-color-celestine);
|
|
397
394
|
}
|
|
398
395
|
|
|
399
396
|
.d2l-calendar-date.d2l-calendar-date-selected:disabled {
|
|
400
397
|
background-color: white;
|
|
401
|
-
border-style: none;
|
|
402
398
|
color: rgba(73, 76, 78, 0.5);
|
|
399
|
+
outline: none;
|
|
403
400
|
}
|
|
404
401
|
|
|
405
|
-
td
|
|
406
|
-
border-width: 0;
|
|
407
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine-plus-2), 0 0 0 4px var(--d2l-color-celestine);
|
|
408
|
-
padding: 0;
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
td:focus .d2l-calendar-date.d2l-calendar-date-selected:disabled {
|
|
412
|
-
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--d2l-color-celestine);
|
|
402
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date.d2l-calendar-date-selected:disabled {
|
|
413
403
|
opacity: 1;
|
|
404
|
+
outline: 2px solid var(--d2l-color-celestine);
|
|
414
405
|
}
|
|
415
406
|
|
|
416
407
|
.d2l-calendar-date.d2l-calendar-date-today,
|
|
@@ -419,6 +410,16 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
419
410
|
font-weight: 700;
|
|
420
411
|
}
|
|
421
412
|
|
|
413
|
+
@keyframes initial-focus-day-info {
|
|
414
|
+
from {
|
|
415
|
+
bottom: 1px;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date-initial.d2l-calendar-date-day-info::after {
|
|
420
|
+
animation: 200ms ease-in initial-focus-day-info;
|
|
421
|
+
}
|
|
422
|
+
|
|
422
423
|
.d2l-calendar-date-day-info::after {
|
|
423
424
|
background-color: var(--d2l-color-celestine);
|
|
424
425
|
border-radius: 3px;
|
|
@@ -429,11 +430,20 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
429
430
|
position: absolute;
|
|
430
431
|
width: 6px;
|
|
431
432
|
}
|
|
432
|
-
|
|
433
|
-
|
|
433
|
+
|
|
434
|
+
.d2l-calendar-date-selected.d2l-calendar-date-day-info::after,
|
|
435
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date-day-info::after {
|
|
436
|
+
bottom: 3px;
|
|
434
437
|
}
|
|
435
|
-
|
|
436
|
-
|
|
438
|
+
@media (prefers-contrast: more) {
|
|
439
|
+
.d2l-calendar-date-day-info::after {
|
|
440
|
+
background-color: FieldText;
|
|
441
|
+
forced-color-adjust: none;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date {
|
|
445
|
+
outline-color: Highlight !important;
|
|
446
|
+
}
|
|
437
447
|
}
|
|
438
448
|
|
|
439
449
|
`];
|
package/components/card/card.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
|
-
import { css, html, LitElement } from 'lit';
|
|
2
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
4
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
@@ -93,16 +93,19 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
|
|
|
93
93
|
position: relative;
|
|
94
94
|
}
|
|
95
95
|
.d2l-card-link-container {
|
|
96
|
-
border-radius: 6px;
|
|
97
96
|
flex-basis: auto;
|
|
98
97
|
flex-grow: 1;
|
|
99
98
|
flex-shrink: 1;
|
|
100
|
-
overflow: hidden;
|
|
101
99
|
width: 100%; /* required for Legacy-Edge and FF when align-items: flex-start is specified */
|
|
102
100
|
}
|
|
103
101
|
.d2l-card-link-text {
|
|
104
102
|
display: inline-block;
|
|
105
103
|
}
|
|
104
|
+
.d2l-card-header {
|
|
105
|
+
border-start-end-radius: 6px;
|
|
106
|
+
border-start-start-radius: 6px;
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
}
|
|
106
109
|
|
|
107
110
|
a {
|
|
108
111
|
bottom: -1px;
|
|
@@ -280,18 +283,20 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
|
|
|
280
283
|
@d2l-dropdown-close="${this._onDropdownClose}"
|
|
281
284
|
@d2l-tooltip-show="${this._onTooltipShow}"
|
|
282
285
|
@d2l-tooltip-hide="${this._onTooltipHide}">
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
286
|
+
${ this.href ? html`
|
|
287
|
+
<a @blur="${this._onLinkBlur}"
|
|
288
|
+
?download="${this.download}"
|
|
289
|
+
@focus="${this._onLinkFocus}"
|
|
290
|
+
href="${ifDefined(this.href ? this.href : undefined)}"
|
|
291
|
+
hreflang="${ifDefined(this.hreflang)}"
|
|
292
|
+
@mouseenter="${this._onLinkMouseEnter}"
|
|
293
|
+
@mouseleave="${this._onLinkMouseLeave}"
|
|
294
|
+
rel="${ifDefined(this.rel)}"
|
|
295
|
+
target="${ifDefined(this.target)}"
|
|
296
|
+
type="${ifDefined(this.type)}">
|
|
297
|
+
<span class="d2l-card-link-text d2l-offscreen">${this.text}</span>
|
|
298
|
+
</a>
|
|
299
|
+
` : nothing}
|
|
295
300
|
<div class="${classMap(linkContainerClass)}">
|
|
296
301
|
<div class="d2l-card-header"><slot name="header"></slot></div>
|
|
297
302
|
<div class="d2l-card-badge" style="${styleMap(badgeStyle)}"><slot name="badge"></slot></div>
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
import '../../dropdown/dropdown-content.js';
|
|
13
13
|
import '../../status-indicator/status-indicator.js';
|
|
14
14
|
import '../../tooltip/tooltip.js';
|
|
15
|
+
import '../../tooltip/tooltip-help.js';
|
|
15
16
|
import '../card.js';
|
|
16
17
|
import '../card-loading-shimmer.js';
|
|
17
18
|
import '../card-content-meta.js';
|
|
@@ -19,13 +20,18 @@
|
|
|
19
20
|
import '../card-footer-link.js';
|
|
20
21
|
</script>
|
|
21
22
|
<style>
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
.cards {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-wrap: wrap;
|
|
26
|
+
gap: 0.6rem;
|
|
24
27
|
}
|
|
25
|
-
.subtle
|
|
28
|
+
.cards-subtle {
|
|
26
29
|
background-color: #f6f7f8;
|
|
27
30
|
padding: 20px;
|
|
28
31
|
}
|
|
32
|
+
d2l-card {
|
|
33
|
+
flex: none;
|
|
34
|
+
}
|
|
29
35
|
.badge {
|
|
30
36
|
text-align: center;
|
|
31
37
|
}
|
|
@@ -49,6 +55,16 @@
|
|
|
49
55
|
#toggleLoading {
|
|
50
56
|
margin-top: 20px;
|
|
51
57
|
}
|
|
58
|
+
.truncate {
|
|
59
|
+
-webkit-box-orient: vertical;
|
|
60
|
+
display: -webkit-box;
|
|
61
|
+
-webkit-line-clamp: 2;
|
|
62
|
+
overflow-clip-margin: 0.2em;
|
|
63
|
+
overflow-wrap: anywhere;
|
|
64
|
+
overflow-x: clip;
|
|
65
|
+
overflow-y: clip;
|
|
66
|
+
white-space: normal;
|
|
67
|
+
}
|
|
52
68
|
</style>
|
|
53
69
|
</head>
|
|
54
70
|
<body unresolved>
|
|
@@ -59,7 +75,7 @@
|
|
|
59
75
|
|
|
60
76
|
<d2l-demo-snippet>
|
|
61
77
|
<template>
|
|
62
|
-
<div class="subtle
|
|
78
|
+
<div class="cards cards-subtle">
|
|
63
79
|
|
|
64
80
|
<d2l-card subtle align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
|
|
65
81
|
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
@@ -90,7 +106,7 @@
|
|
|
90
106
|
|
|
91
107
|
<d2l-demo-snippet>
|
|
92
108
|
<template>
|
|
93
|
-
<div class="subtle
|
|
109
|
+
<div class="cards cards-subtle">
|
|
94
110
|
|
|
95
111
|
<d2l-card subtle align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;">
|
|
96
112
|
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
@@ -119,13 +135,16 @@
|
|
|
119
135
|
</div>
|
|
120
136
|
</d2l-card>
|
|
121
137
|
|
|
122
|
-
<d2l-card subtle align-center text="Grade 2"
|
|
138
|
+
<d2l-card subtle align-center text="Grade 2" style="height: 300px; width: 245px;">
|
|
123
139
|
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-low-density-max-size.jpg">
|
|
124
140
|
<d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
|
|
125
141
|
<d2l-dropdown-content><div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div></d2l-dropdown-content>
|
|
126
142
|
</d2l-dropdown-more>
|
|
127
143
|
<d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
|
|
128
|
-
<div slot="content">
|
|
144
|
+
<div slot="content">
|
|
145
|
+
<div class="truncate">No Link. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</div>
|
|
146
|
+
<d2l-tooltip-help text="Help Tooltip!">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
|
|
147
|
+
</div>
|
|
129
148
|
<div slot="footer">
|
|
130
149
|
<d2l-card-footer-link id="googleDriveLink2" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
|
|
131
150
|
<d2l-tooltip slot="tooltip" for="googleDriveLink2">Go to Google Drive</d2l-tooltip>
|
|
@@ -157,28 +176,30 @@
|
|
|
157
176
|
|
|
158
177
|
<d2l-demo-snippet>
|
|
159
178
|
<template>
|
|
179
|
+
<div class="cards">
|
|
160
180
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
181
|
+
<d2l-card align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
|
|
182
|
+
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
183
|
+
<div slot="badge" class="badge">
|
|
184
|
+
<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Stick_Figure.svg/340px-Stick_Figure.svg.png">
|
|
185
|
+
</div>
|
|
186
|
+
<div slot="content">Image Badge</div>
|
|
187
|
+
</d2l-card>
|
|
168
188
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
189
|
+
<d2l-card align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
|
|
190
|
+
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
191
|
+
<div class="badge-status" slot="badge">
|
|
192
|
+
<d2l-status-indicator text="Success" state="success"></d2l-status-indicator>
|
|
193
|
+
</div>
|
|
194
|
+
<div slot="content">Status Badge</div>
|
|
195
|
+
</d2l-card>
|
|
176
196
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
197
|
+
<d2l-card align-center text="No Link" style="height: 280px; width: 245px;">
|
|
198
|
+
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
199
|
+
<div slot="content">No Link</div>
|
|
200
|
+
</d2l-card>
|
|
181
201
|
|
|
202
|
+
</div>
|
|
182
203
|
</template>
|
|
183
204
|
</d2l-demo-snippet>
|
|
184
205
|
|
|
@@ -186,64 +207,69 @@
|
|
|
186
207
|
|
|
187
208
|
<d2l-demo-snippet>
|
|
188
209
|
<template>
|
|
210
|
+
<div class="cards">
|
|
189
211
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
212
|
+
<d2l-card align-center text="Hydrology" style="height: 300px; width: 245px;">
|
|
213
|
+
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
214
|
+
<d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
|
|
215
|
+
<d2l-dropdown-content>
|
|
216
|
+
<div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div>
|
|
217
|
+
<div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div>
|
|
218
|
+
<div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div>
|
|
219
|
+
</d2l-dropdown-content>
|
|
220
|
+
</d2l-dropdown-more>
|
|
221
|
+
<d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
|
|
222
|
+
<div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
|
|
223
|
+
<div slot="footer">
|
|
224
|
+
<d2l-card-footer-link id="googleDriveLink3" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
|
|
225
|
+
<d2l-tooltip slot="tooltip" for="googleDriveLink3">Go to Google Drive</d2l-tooltip>
|
|
226
|
+
</d2l-card-footer-link>
|
|
227
|
+
<d2l-card-footer-link id="rssFeedLink3" icon="tier1:rss" text="RSS Feed" secondary-count="1">
|
|
228
|
+
<d2l-tooltip slot="tooltip" for="rssFeedLink3">RSS Feed</d2l-tooltip>
|
|
229
|
+
</d2l-card-footer-link>
|
|
230
|
+
<d2l-card-footer-link id="outcomesLink3" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
|
|
231
|
+
<d2l-tooltip slot="tooltip" for="outcomesLink3">Outcomes</d2l-tooltip>
|
|
232
|
+
</d2l-card-footer-link>
|
|
233
|
+
<d2l-card-footer-link id="assignmentsLink3" icon="tier1:assignments" text="Assignments" secondary-count="3">
|
|
234
|
+
<d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink3">You have 3 assignments due tomorrow.</d2l-tooltip>
|
|
235
|
+
</d2l-card-footer-link>
|
|
236
|
+
</div>
|
|
237
|
+
</d2l-card>
|
|
216
238
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
239
|
+
<d2l-card align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="height: 300px; width: 245px;">
|
|
240
|
+
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-low-density-max-size.jpg">
|
|
241
|
+
<d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
|
|
242
|
+
<d2l-dropdown-content><div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div></d2l-dropdown-content>
|
|
243
|
+
</d2l-dropdown-more>
|
|
244
|
+
<d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
|
|
245
|
+
<div slot="content">Painting</div>
|
|
246
|
+
<d2l-button slot="footer" style="width: 100%;">Shiny Button</d2l-button>
|
|
247
|
+
</d2l-card>
|
|
226
248
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
249
|
+
<d2l-card align-center text="Grade 2" style="height: 300px; width: 245px;">
|
|
250
|
+
<img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-low-density-max-size.jpg">
|
|
251
|
+
<d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
|
|
252
|
+
<d2l-dropdown-content><div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div></d2l-dropdown-content>
|
|
253
|
+
</d2l-dropdown-more>
|
|
254
|
+
<d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
|
|
255
|
+
<div slot="content">
|
|
256
|
+
<div class="truncate">No Link. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</div>
|
|
257
|
+
<d2l-tooltip-help text="Help Tooltip!">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
|
|
258
|
+
</div>
|
|
259
|
+
<div slot="footer">
|
|
260
|
+
<d2l-card-footer-link id="googleDriveLink4" icon="tier1:google-drive" text="Google Drive" secondary-count-type="count" secondary-count="100" href="https://www.google.ca/drive/">
|
|
261
|
+
<d2l-tooltip slot="tooltip" for="googleDriveLink4">Go to Google Drive</d2l-tooltip>
|
|
262
|
+
</d2l-card-footer-link>
|
|
263
|
+
<d2l-card-footer-link id="rssFeedLink4" icon="tier1:rss" text="RSS Feed" secondary-count-type="count" secondary-count="1">
|
|
264
|
+
<d2l-tooltip slot="tooltip" for="rssFeedLink4">RSS Feed</d2l-tooltip>
|
|
265
|
+
</d2l-card-footer-link>
|
|
266
|
+
<d2l-card-footer-link id="outcomesLink4" icon="tier1:outcomes" text="Outcomes" secondary-count-type="count" secondary-count="5">
|
|
267
|
+
<d2l-tooltip slot="tooltip" for="outcomesLink4">Outcomes</d2l-tooltip>
|
|
268
|
+
</d2l-card-footer-link>
|
|
269
|
+
</div>
|
|
270
|
+
</d2l-card>
|
|
246
271
|
|
|
272
|
+
</div>
|
|
247
273
|
</template>
|
|
248
274
|
</d2l-demo-snippet>
|
|
249
275
|
|
|
@@ -251,18 +277,19 @@
|
|
|
251
277
|
|
|
252
278
|
<d2l-demo-snippet>
|
|
253
279
|
<template>
|
|
280
|
+
<div class="cards">
|
|
254
281
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
282
|
+
<d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;">
|
|
283
|
+
<d2l-card-loading-shimmer slot="header" loading style="display: block; height: 103.5px; width: 100%;">
|
|
284
|
+
<img alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
285
|
+
</d2l-card-loading-shimmer>
|
|
286
|
+
<div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
|
|
287
|
+
</d2l-card>
|
|
261
288
|
|
|
289
|
+
</div>
|
|
262
290
|
<div>
|
|
263
291
|
<d2l-button id="toggleLoading">Toggle Loading State</d2l-button>
|
|
264
292
|
</div>
|
|
265
|
-
|
|
266
293
|
<script>
|
|
267
294
|
document.querySelector('#toggleLoading').addEventListener('click', () => {
|
|
268
295
|
const loadingContainer = document.querySelector('d2l-card-loading-shimmer');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.137.1",
|
|
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",
|