@brightspace-ui/core 3.169.1 → 3.171.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/icons/catalogue.md +78 -77
- package/components/icons/images/tier1/configure.svg +3 -0
- package/components/progress/demo/progress.html +6 -4
- package/components/progress/progress.js +52 -28
- package/custom-elements.json +9 -9
- package/generated/icons/presetIconLoader.js +2 -0
- package/generated/icons/tier1/configure.js +5 -0
- package/package.json +1 -1
|
@@ -39,83 +39,84 @@ Size: `18px` x `18`px
|
|
|
39
39
|
|
|
40
40
|
| Icon | Name | | Icon | Name | | Icon | Name |
|
|
41
41
|
| :---: | :--- | --- | :---: | :--- | --- | :---: | :--- |
|
|
42
|
-
|  | accelerator | |  | enrollment | |  | access-special | |  | eportfolio | |  | accessibility | |  | event-log | |  | add-file | |  | exemption-add | |  | add-message | |  | exemption-remove | |  | add-to-lor | |  | export | |  | add-user | |  | external | |  | add | |  | feed | |  | ai | |  | feedback | |  | alarmbell | |  | file-archive | |  | alert | |  | file-audio | |  | arrow-collapse-small | |  | file-document | |  | arrow-collapse | |  | file-image | |  | arrow-expand-small | |  | file-presentation | |  | arrow-expand | |  | file-video | |  | arrow-thin-down | |  | filter | |  | arrow-thin-left | |  | flag-filled | |  | arrow-thin-right | |  | flag-hollow | |  | arrow-thin-up | |  | folder-up-level | |  | arrow-toggle-down | |  | folder | |  | arrow-toggle-up | |  | forms | |  | assignments | |  | forward | |  | attach | |  | fullscreen | |  | attendance | |  | game | |  | awards | |  | gear | |  | binder | |  | glossary | |  | blocked | |  | google-drive | |  | blog | |  | grabber-small | |  | book-management | |  | grabber | |  | bookmark-filled | |  | grade-remove | |  | bookmark-hollow | |  | grade-visible | |  | broken-link | |  | grade | |  | browser | |  | group-locker | |  | bullet | |  | group | |  | bullseye | |  | help | |  | calculate | |  | history | |  | calendar | |  | home | |  | change-file | |  | import | |  | chat | |  | important | |  | check-circle | |  | insights-portal | |  | check-manual | |  | link | |  | check-user | |  | list-view | |  | check | |  | location | |  | checklist | |  | locations | |  | chevron-down-medium | |  | lock-locked | |  | chevron-down-small | |  | lock-unlock | |  | chevron-down | |  | locker | |  | chevron-left | |  | lor | |  | chevron-right | |  | low-priority | |  | chevron-up | |  | manage-dates-edit | |  | class | |  | manage-dates-offset | |  | classlist | |  | manage-dates | |  | close-circle | |  | manage-files | |  | close-default | |  | manual-run | |  | close-large-thick | |  | menu-hamburger | |  | close-large | |  | messages | |  | close-small | |  | mic | |  | comment-filled | |  | mobile | |  | comment-hollow | |  | more | |  | course | |  | my-computer | |  | edit | |  | pic | |  | email | |  | pin-hollow | |  | accelerator | |  | enrollment | |  | plus-large-thick |
|
|
43
|
+
|  | access-special | |  | eportfolio | |  | plus-large |
|
|
44
|
+
|  | accessibility | |  | event-log | |  | preview |
|
|
45
|
+
|  | add-file | |  | exemption-add | |  | print |
|
|
46
|
+
|  | add-message | |  | exemption-remove | |  | profile-default |
|
|
47
|
+
|  | add-to-lor | |  | export | |  | profile-pic |
|
|
48
|
+
|  | add-user | |  | external | |  | publish-to-lor |
|
|
49
|
+
|  | add | |  | feed | |  | quicklink |
|
|
50
|
+
|  | ai | |  | feedback | |  | quizzing |
|
|
51
|
+
|  | alarmbell | |  | file-archive | |  | read-unread |
|
|
52
|
+
|  | alert | |  | file-audio | |  | read |
|
|
53
|
+
|  | arrow-collapse-small | |  | file-document | |  | reading |
|
|
54
|
+
|  | arrow-collapse | |  | file-image | |  | redo |
|
|
55
|
+
|  | arrow-expand-small | |  | file-presentation | |  | reflection |
|
|
56
|
+
|  | arrow-expand | |  | file-video | |  | refresh |
|
|
57
|
+
|  | arrow-thin-down | |  | filter | |  | release-conditions |
|
|
58
|
+
|  | arrow-thin-left | |  | flag-filled | |  | remove-user |
|
|
59
|
+
|  | arrow-thin-right | |  | flag-hollow | |  | reorder |
|
|
60
|
+
|  | arrow-thin-up | |  | folder-up-level | |  | repeat |
|
|
61
|
+
|  | arrow-toggle-down | |  | folder | |  | replied |
|
|
62
|
+
|  | arrow-toggle-up | |  | forms | |  | reply |
|
|
63
|
+
|  | assignments | |  | forward | |  | reporting |
|
|
64
|
+
|  | attach | |  | fullscreen | |  | reports |
|
|
65
|
+
|  | attendance | |  | game | |  | resize-left |
|
|
66
|
+
|  | awards | |  | gear | |  | resize-right |
|
|
67
|
+
|  | binder | |  | glossary | |  | reverse-order |
|
|
68
|
+
|  | blocked | |  | google-drive | |  | role-switch |
|
|
69
|
+
|  | blog | |  | grabber-small | |  | rss |
|
|
70
|
+
|  | book-management | |  | grabber | |  | rubric-graded |
|
|
71
|
+
|  | bookmark-filled | |  | grade-remove | |  | rubric |
|
|
72
|
+
|  | bookmark-hollow | |  | grade-visible | |  | save |
|
|
73
|
+
|  | broken-link | |  | grade | |  | scorm |
|
|
74
|
+
|  | browser | |  | group-locker | |  | search |
|
|
75
|
+
|  | bullet | |  | group | |  | seating |
|
|
76
|
+
|  | bullseye | |  | help | |  | self-assessment |
|
|
77
|
+
|  | calculate | |  | history | |  | send |
|
|
78
|
+
|  | calendar | |  | home | |  | share-hollow |
|
|
79
|
+
|  | change-file | |  | import | |  | share-parent-filled |
|
|
80
|
+
|  | chat | |  | important | |  | share-parent-hollow |
|
|
81
|
+
|  | check-circle | |  | insights-portal | |  | share |
|
|
82
|
+
|  | check-manual | |  | link | |  | smallscreen |
|
|
83
|
+
|  | check-user | |  | list-view | |  | sort-type |
|
|
84
|
+
|  | check | |  | location | |  | spellcheck |
|
|
85
|
+
|  | checklist | |  | locations | |  | style |
|
|
86
|
+
|  | chevron-down-medium | |  | lock-locked | |  | subscribe-filled |
|
|
87
|
+
|  | chevron-down-small | |  | lock-unlock | |  | subscribe-hollow |
|
|
88
|
+
|  | chevron-down | |  | locker | |  | support |
|
|
89
|
+
|  | chevron-left | |  | lor | |  | surveys |
|
|
90
|
+
|  | chevron-right | |  | low-priority | |  | syllabus |
|
|
91
|
+
|  | chevron-up | |  | manage-dates-edit | |  | table-of-contents |
|
|
92
|
+
|  | class | |  | manage-dates-offset | |  | tag-hollow |
|
|
93
|
+
|  | classlist | |  | manage-dates | |  | tag |
|
|
94
|
+
|  | close-circle | |  | manage-files | |  | thumbs-down |
|
|
95
|
+
|  | close-default | |  | manual-run | |  | thumbs-up |
|
|
96
|
+
|  | close-large-thick | |  | menu-hamburger | |  | tile-view |
|
|
97
|
+
|  | close-large | |  | messages | |  | time |
|
|
98
|
+
|  | close-small | |  | mic | |  | tools |
|
|
99
|
+
|  | comment-filled | |  | mobile | |  | topic-last |
|
|
100
|
+
|  | comment-hollow | |  | more | |  | turnitin |
|
|
101
|
+
|  | configure | |  | move-down | |  | unapproved |
|
|
102
|
+
|  | contacts | |  | move-to | |  | undo |
|
|
103
|
+
|  | copy | |  | move-up | |  | unsaved |
|
|
104
|
+
|  | course-tile-sort | |  | my-computer | |  | upload |
|
|
105
|
+
|  | course | |  | navigate | |  | user-competencies |
|
|
106
|
+
|  | coursebuilder | |  | new-window | |  | user-progress |
|
|
107
|
+
|  | delete | |  | news | |  | video-assignment |
|
|
108
|
+
|  | disable | |  | no-entry | |  | virtual-classroom |
|
|
109
|
+
|  | discussions | |  | one-drive | |  | visibility-conditional |
|
|
110
|
+
|  | divider-solid | |  | online-rooms | |  | visibility-hide |
|
|
111
|
+
|  | dot | |  | online | |  | visibility-show |
|
|
112
|
+
|  | download | |  | outcomes | |  | volume-muted |
|
|
113
|
+
|  | draft | |  | password | |  | volume |
|
|
114
|
+
|  | dragger | |  | pause | |  | widgets |
|
|
115
|
+
|  | edit-bulk | |  | pic | |  | wizard |
|
|
116
|
+
|  | edit | |  | pin-filled | |  | zoom-in |
|
|
117
|
+
|  | email-read | |  | pin-hollow | |  | zoom-out |
|
|
118
|
+
|  | email | |  | play | | | |
|
|
119
|
+
|  | enable | |  | plus-default | | | |
|
|
119
120
|
|
|
120
121
|
## tier2
|
|
121
122
|
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
|
2
|
+
<path fill="#494c4e" fill-rule="evenodd" d="M6 2v3.17c1.165.413 2 1.024 2 2.33s-.835 1.917-2 2.33V16a1 1 0 1 1-2 0V9.83C2.835 9.416 2 8.805 2 7.5s.835-1.917 2-2.33V2a1 1 0 0 1 2 0M4 7.5c0-.552.448-.5 1-.5s1-.052 1 .5-.448.5-1 .5-1 .052-1-.5m9 9.5a1 1 0 0 1-1-1v-3.17c-1.165-.412-2-1.024-2-2.33s.835-1.917 2-2.33V2a1 1 0 1 1 2 0v6.17c1.165.413 2 1.024 2 2.33s-.835 1.918-2 2.33V16a1 1 0 0 1-1 1m0-7c-.552 0-1-.052-1 .5s.448.5 1 .5 1 .052 1-.5-.448-.5-1-.5" clip-rule="evenodd"/>
|
|
3
|
+
</svg>
|
|
@@ -17,15 +17,17 @@
|
|
|
17
17
|
|
|
18
18
|
<d2l-demo-snippet>
|
|
19
19
|
<template>
|
|
20
|
-
<d2l-progress label="Progress" value="
|
|
20
|
+
<d2l-progress label="Progress" value="1" max="3"></d2l-progress>
|
|
21
21
|
</template>
|
|
22
22
|
</d2l-demo-snippet>
|
|
23
23
|
|
|
24
|
-
<h2>
|
|
24
|
+
<h2>Sizes</h2>
|
|
25
25
|
|
|
26
26
|
<d2l-demo-snippet>
|
|
27
27
|
<template>
|
|
28
|
-
<d2l-progress small label="
|
|
28
|
+
<d2l-progress size="small" label="Small" value="8" max="10"></d2l-progress>
|
|
29
|
+
<d2l-progress size="medium" label="Medium(default)" value="8" max="10"></d2l-progress>
|
|
30
|
+
<d2l-progress size="large" label="Large" value="8" max="10"></d2l-progress>
|
|
29
31
|
</template>
|
|
30
32
|
</d2l-demo-snippet>
|
|
31
33
|
|
|
@@ -57,7 +59,7 @@
|
|
|
57
59
|
|
|
58
60
|
<d2l-demo-snippet>
|
|
59
61
|
<template>
|
|
60
|
-
<d2l-progress label="Progress" value-hidden label-hidden
|
|
62
|
+
<d2l-progress label="Progress" value-hidden label-hidden value="50"></d2l-progress>
|
|
61
63
|
</template>
|
|
62
64
|
</d2l-demo-snippet>
|
|
63
65
|
|
|
@@ -3,10 +3,10 @@ import { bodyCompactStyles, bodySmallStyles } from '../typography/styles.js';
|
|
|
3
3
|
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { formatPercent } from '@brightspace-ui/intl';
|
|
6
|
-
import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
|
|
7
6
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
|
+
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
8
8
|
|
|
9
|
-
class Progress extends LitElement {
|
|
9
|
+
class Progress extends LocalizeCoreElement(LitElement) {
|
|
10
10
|
|
|
11
11
|
static get properties() {
|
|
12
12
|
return {
|
|
@@ -36,26 +36,30 @@ class Progress extends LitElement {
|
|
|
36
36
|
*/
|
|
37
37
|
valueHidden: { type: Boolean, attribute: 'value-hidden' },
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
40
|
-
* @type {
|
|
39
|
+
* The size of the progress bar
|
|
40
|
+
* @type {'small'|'medium'|'large'}
|
|
41
41
|
*/
|
|
42
|
-
|
|
42
|
+
size: { type: String, reflect: true },
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
static get styles() {
|
|
47
47
|
return [bodySmallStyles, bodyCompactStyles, css`
|
|
48
48
|
:host {
|
|
49
|
-
|
|
49
|
+
align-items: center;
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-wrap: wrap;
|
|
50
52
|
min-width: 6rem;
|
|
51
53
|
}
|
|
52
|
-
:host([hidden])
|
|
53
|
-
.text[hidden] {
|
|
54
|
+
:host([hidden]) {
|
|
54
55
|
display: none;
|
|
55
56
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
:host([value-hidden]) {
|
|
58
|
+
row-gap: 0.3rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#label {
|
|
62
|
+
flex: 1 0 100%;
|
|
59
63
|
}
|
|
60
64
|
|
|
61
65
|
progress {
|
|
@@ -68,11 +72,36 @@ class Progress extends LitElement {
|
|
|
68
72
|
border-radius: 0.9rem;
|
|
69
73
|
box-shadow: inset 0 2px var(--d2l-color-mica);
|
|
70
74
|
display: block;
|
|
71
|
-
|
|
72
|
-
width: 100%;
|
|
73
|
-
}
|
|
74
|
-
:host([small]) progress {
|
|
75
|
+
flex: 1;
|
|
75
76
|
height: 0.6rem;
|
|
77
|
+
margin-inline-end: 0.4rem;
|
|
78
|
+
}
|
|
79
|
+
.value {
|
|
80
|
+
text-align: end;
|
|
81
|
+
width: 2.42rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:host([size="small"]) {
|
|
85
|
+
progress {
|
|
86
|
+
height: 0.3rem;
|
|
87
|
+
margin-inline-end: 0.3rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.value {
|
|
91
|
+
width: 2.15rem;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([size="large"]) {
|
|
96
|
+
line-height: 1.5rem;
|
|
97
|
+
progress {
|
|
98
|
+
height: 0.9rem;
|
|
99
|
+
margin-inline-end: 0.5rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.value {
|
|
103
|
+
width: 2.82rem;
|
|
104
|
+
}
|
|
76
105
|
}
|
|
77
106
|
|
|
78
107
|
progress.complete {
|
|
@@ -90,10 +119,7 @@ class Progress extends LitElement {
|
|
|
90
119
|
background-color: var(--d2l-progress-color);
|
|
91
120
|
border: 1px solid transparent;
|
|
92
121
|
border-radius: 0.9rem;
|
|
93
|
-
transition: width 0.
|
|
94
|
-
}
|
|
95
|
-
progress.complete::${unsafeCSS(selector)} {
|
|
96
|
-
transition: none;
|
|
122
|
+
transition: width 0.4s ease-out;
|
|
97
123
|
}
|
|
98
124
|
/* these are necessary to avoid showing border when value is 0 */
|
|
99
125
|
progress[value="0"]::${unsafeCSS(selector)} {
|
|
@@ -114,7 +140,7 @@ class Progress extends LitElement {
|
|
|
114
140
|
this.max = 100;
|
|
115
141
|
this.value = 0;
|
|
116
142
|
this.valueHidden = false;
|
|
117
|
-
this.
|
|
143
|
+
this.size = 'medium';
|
|
118
144
|
}
|
|
119
145
|
|
|
120
146
|
render() {
|
|
@@ -122,20 +148,16 @@ class Progress extends LitElement {
|
|
|
122
148
|
'complete': this.value === this.max
|
|
123
149
|
};
|
|
124
150
|
const textClasses = {
|
|
125
|
-
'
|
|
126
|
-
'd2l-body-
|
|
127
|
-
'd2l-body-compact': !this.small
|
|
151
|
+
'd2l-body-small': this.size === 'small',
|
|
152
|
+
'd2l-body-compact': this.size === 'medium'
|
|
128
153
|
};
|
|
154
|
+
const valueClasses = { ...textClasses, value: true };
|
|
129
155
|
|
|
130
156
|
const percentage = Math.floor(100 * this.value / this.max) / 100;
|
|
131
157
|
const perecentageText = formatPercent(percentage);
|
|
132
158
|
|
|
133
159
|
return html`
|
|
134
|
-
<div class=${classMap(textClasses)}
|
|
135
|
-
<span ?hidden=${this.labelHidden} id="label">${this.label}</span>
|
|
136
|
-
<span style="font-size: 0;">${getSeparator({ nonBreaking: true })}</span>
|
|
137
|
-
<span ?hidden=${this.valueHidden}>${perecentageText}</span>
|
|
138
|
-
</div>
|
|
160
|
+
<div ?hidden=${this.labelHidden} id="label" class=${classMap(textClasses)}>${this.label}</div>
|
|
139
161
|
<progress
|
|
140
162
|
aria-labelledby="${ifDefined(this.labelHidden ? undefined : 'label')}"
|
|
141
163
|
aria-label="${ifDefined(this.labelHidden ? this.label : undefined)}"
|
|
@@ -144,6 +166,8 @@ class Progress extends LitElement {
|
|
|
144
166
|
value="${this.value}"
|
|
145
167
|
max="${this.max}">
|
|
146
168
|
</progress>
|
|
169
|
+
<div ?hidden=${this.valueHidden} class=${classMap(valueClasses)}>${perecentageText}</div>
|
|
170
|
+
|
|
147
171
|
`;
|
|
148
172
|
}
|
|
149
173
|
|
package/custom-elements.json
CHANGED
|
@@ -11851,10 +11851,10 @@
|
|
|
11851
11851
|
"default": "false"
|
|
11852
11852
|
},
|
|
11853
11853
|
{
|
|
11854
|
-
"name": "
|
|
11855
|
-
"description": "
|
|
11856
|
-
"type": "
|
|
11857
|
-
"default": "
|
|
11854
|
+
"name": "size",
|
|
11855
|
+
"description": "The size of the progress bar",
|
|
11856
|
+
"type": "'small'|'medium'|'large'",
|
|
11857
|
+
"default": "\"medium\""
|
|
11858
11858
|
}
|
|
11859
11859
|
],
|
|
11860
11860
|
"properties": [
|
|
@@ -11893,11 +11893,11 @@
|
|
|
11893
11893
|
"default": "false"
|
|
11894
11894
|
},
|
|
11895
11895
|
{
|
|
11896
|
-
"name": "
|
|
11897
|
-
"attribute": "
|
|
11898
|
-
"description": "
|
|
11899
|
-
"type": "
|
|
11900
|
-
"default": "
|
|
11896
|
+
"name": "size",
|
|
11897
|
+
"attribute": "size",
|
|
11898
|
+
"description": "The size of the progress bar",
|
|
11899
|
+
"type": "'small'|'medium'|'large'",
|
|
11900
|
+
"default": "\"medium\""
|
|
11901
11901
|
}
|
|
11902
11902
|
]
|
|
11903
11903
|
},
|
|
@@ -229,6 +229,8 @@ export function loadSvg(icon) {
|
|
|
229
229
|
return import(/* webpackChunkName: "icon-comment-filled" */'./tier1/comment-filled.js');
|
|
230
230
|
case 'tier1:comment-hollow':
|
|
231
231
|
return import(/* webpackChunkName: "icon-comment-hollow" */'./tier1/comment-hollow.js');
|
|
232
|
+
case 'tier1:configure':
|
|
233
|
+
return import(/* webpackChunkName: "icon-configure" */'./tier1/configure.js');
|
|
232
234
|
case 'tier1:contacts':
|
|
233
235
|
return import(/* webpackChunkName: "icon-contacts" */'./tier1/contacts.js');
|
|
234
236
|
case 'tier1:copy':
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
// auto-generated
|
|
2
|
+
export const val = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
|
3
|
+
<path fill="#494c4e" fill-rule="evenodd" d="M6 2v3.17c1.165.413 2 1.024 2 2.33s-.835 1.917-2 2.33V16a1 1 0 1 1-2 0V9.83C2.835 9.416 2 8.805 2 7.5s.835-1.917 2-2.33V2a1 1 0 0 1 2 0M4 7.5c0-.552.448-.5 1-.5s1-.052 1 .5-.448.5-1 .5-1 .052-1-.5m9 9.5a1 1 0 0 1-1-1v-3.17c-1.165-.412-2-1.024-2-2.33s.835-1.917 2-2.33V2a1 1 0 1 1 2 0v6.17c1.165.413 2 1.024 2 2.33s-.835 1.918-2 2.33V16a1 1 0 0 1-1 1m0-7c-.552 0-1-.052-1 .5s.448.5 1 .5 1 .052 1-.5-.448-.5-1-.5" clip-rule="evenodd"/>
|
|
4
|
+
</svg>
|
|
5
|
+
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.171.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",
|