@brightspace-ui/core 3.136.0 → 3.137.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.
- package/components/card/card.js +20 -15
- package/components/card/demo/card.html +113 -86
- package/package.json +1 -1
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.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",
|