@brightspace-ui/labs 2.25.0 → 2.26.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/package.json
CHANGED
|
@@ -1,30 +1,49 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Grade Result
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Components used for rendering grades in Brightspace.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Presentation View [d2l-labs-grade-result-presentational]
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
7
|
+
<!-- docs: demo code -->
|
|
8
|
+
```html
|
|
9
|
+
<script type="module">
|
|
10
|
+
import '@brightspace-ui/labs/components/grade-result/grade-result-presentational.js';
|
|
11
|
+
</script>
|
|
12
|
+
<d2l-labs-grade-result-presentational
|
|
13
|
+
gradeType="Numeric"
|
|
14
|
+
labelText="Overall Grade"
|
|
15
|
+
labelHeadingLevel="3"
|
|
16
|
+
scoreNumerator="5"
|
|
17
|
+
scoreDenominator="20"
|
|
18
|
+
display-student-grade-preview
|
|
19
|
+
student-grade-preview='{"score": 5, "symbol": "Fine", "colour": "#FFCC00"}'
|
|
20
|
+
></d2l-labs-grade-result-presentational>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
<!-- docs: demo code -->
|
|
24
|
+
```html
|
|
25
|
+
<script type="module">
|
|
26
|
+
import '@brightspace-ui/labs/components/grade-result/grade-result-presentational.js';
|
|
27
|
+
</script>
|
|
28
|
+
<d2l-labs-grade-result-presentational
|
|
29
|
+
gradeType="LetterGrade"
|
|
30
|
+
labelText="Overall Grade"
|
|
31
|
+
letterGradeOptions='{ "0": { "LetterGrade": "None", "PercentStart": null}, "1": { "LetterGrade": "A", "PercentStart": "75"}, "2": { "LetterGrade": "B", "PercentStart": "50"}}'
|
|
32
|
+
selectedLetterGrade="2"
|
|
33
|
+
scoreDenominator="20"
|
|
34
|
+
isManualOverrideActive
|
|
35
|
+
includeGradeButton
|
|
36
|
+
gradeButtonTooltip="Assignment 1 Grade Item Attached"
|
|
37
|
+
includeReportsButton
|
|
38
|
+
reportsButtonTooltip="Class and user statistics"
|
|
39
|
+
display-student-grade-preview
|
|
40
|
+
student-grade-preview='{"score": 10, "symbol": "Very Good", "colour": "#00FFFF"}'
|
|
41
|
+
></d2l-labs-grade-result-presentational>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
<!-- docs: start hidden content -->
|
|
45
|
+
|
|
46
|
+
### Properties
|
|
28
47
|
|
|
29
48
|
| Property | GradeType | Type | Default | Description |
|
|
30
49
|
| ----------------------------------| -------------- | --------------------------- | ----------- | ------------------------------------------------------------ |
|
|
@@ -48,23 +67,7 @@ If you are only interested in rendering the presentational layer of the componen
|
|
|
48
67
|
| `allowNegativeScore` | Numeric | `boolean` | `'false'` | Set to `true` if negative scores can be entered |
|
|
49
68
|
| `showFlooredScoreWarning` | Numeric | `boolean` | `'false'` | Set to `true` if displaying a negative grade that has been floored at 0 |
|
|
50
69
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
#### d2l-labs-d2l-grade-result
|
|
54
|
-
|
|
55
|
-
| Event | Description |
|
|
56
|
-
| ----------------------------------------------- | ------------------------------------------------------------ |
|
|
57
|
-
| `@d2l-grade-result-initialized-success` | This event is fired when the component is successfully initialized and a grade is loaded from the API. |
|
|
58
|
-
| `@d2l-grade-result-initialized-error` | This event is fired when there is an error initializing the component. This is usually caused by an invalid `href` or `token`. |
|
|
59
|
-
| `@d2l-grade-result-grade-updated-success` | This event is fired when the grade is successfully updated on the frontend. |
|
|
60
|
-
| `@d2l-grade-result-grade-updated-error` | This event is fired when there is an error updating the grade on the frontend. |
|
|
61
|
-
| `@d2l-grade-result-grade-saved-success` | This event is fired when the grade is successfully saved to the server. |
|
|
62
|
-
| `@d2l-grade-result-grade-saved-error` | This event is fired when there is an error while saving the grade to the server. |
|
|
63
|
-
| `@d2l-grade-result-grade-button-click` | This event is fired when the grades button is clicked. |
|
|
64
|
-
| `@d2l-grade-result-reports-button-click` | This event is fired when the reports button is clicked. |
|
|
65
|
-
| `@d2l-grade-result-manual-override-clear-click` | This event is fired when the manual override clear is clicked. |
|
|
66
|
-
|
|
67
|
-
#### d2l-labs-grade-result-presentational
|
|
70
|
+
### Events
|
|
68
71
|
|
|
69
72
|
| Event | Description |
|
|
70
73
|
| ----------------------------------------------- | ------------------------------------------------------------ |
|
|
@@ -74,12 +77,17 @@ If you are only interested in rendering the presentational layer of the componen
|
|
|
74
77
|
| `@d2l-grade-result-letter-score-selected` | This event is fired on the change of the grade for a `gradeType="LetterGrade"` grade. |
|
|
75
78
|
| `@d2l-grade-result-manual-override-clear-click` | This event is fired when the manual override clear is clicked. |
|
|
76
79
|
|
|
80
|
+
<!-- docs: end hidden content -->
|
|
77
81
|
|
|
78
|
-
##
|
|
82
|
+
## Student Grade Preview [d2l-labs-grade-result-student-grade-preview]
|
|
79
83
|
|
|
84
|
+
<!-- docs: demo code -->
|
|
80
85
|
```html
|
|
81
86
|
<script type="module">
|
|
82
|
-
|
|
87
|
+
import '@brightspace-ui/labs/components/grade-result/grade-result-student-grade-preview.js';
|
|
83
88
|
</script>
|
|
84
|
-
<d2l-labs-
|
|
85
|
-
|
|
89
|
+
<d2l-labs-grade-result-student-grade-preview
|
|
90
|
+
out-of="10"
|
|
91
|
+
student-grade-preview='{"score":10, "symbol":"Very Good", "colour":"#00FFFF"}'
|
|
92
|
+
></d2l-labs-grade-result-student-grade-preview>
|
|
93
|
+
```
|
|
@@ -3,6 +3,9 @@ import { bodyStandardStyles } from '@brightspace-ui/core/components/typography/s
|
|
|
3
3
|
import { LocalizeLabsElement } from '../localize-labs-element.js';
|
|
4
4
|
import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* @fires d2l-grade-result-letter-score-selected - Dispatched on the change of the grade for a gradeType="LetterGrade" grade.
|
|
8
|
+
*/
|
|
6
9
|
export class D2LGradeResultLetterScore extends LocalizeLabsElement(LitElement) {
|
|
7
10
|
|
|
8
11
|
static get properties() {
|
|
@@ -14,6 +14,9 @@ const MIN_WIDTH = 5.5;
|
|
|
14
14
|
const MIN_NEGATIVE_GRADE = -9999999999;
|
|
15
15
|
const MIN_POSITIVE_GRADE = 0;
|
|
16
16
|
|
|
17
|
+
/**
|
|
18
|
+
* @fires d2l-grade-result-grade-change - Dispatched on the change of the grade for a gradeType="Numeric" grade.
|
|
19
|
+
*/
|
|
17
20
|
export class D2LGradeResultNumericScore extends LocalizeLabsElement(LitElement) {
|
|
18
21
|
static get properties() {
|
|
19
22
|
return {
|
|
@@ -14,30 +14,120 @@ const numberConverter = {
|
|
|
14
14
|
toAttribute: (prop) => { return String(prop); }
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
+
/**
|
|
18
|
+
* @fires d2l-grade-result-grade-button-click - Dispatched when the grade button is clicked.
|
|
19
|
+
* @fires d2l-grade-result-manual-override-clear-click - Dispatched when the manual override clear is clicked.
|
|
20
|
+
* @fires d2l-grade-result-reports-button-click - Dispatched when the reports button is clicked.
|
|
21
|
+
*/
|
|
17
22
|
export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement) {
|
|
18
23
|
static get properties() {
|
|
19
24
|
return {
|
|
25
|
+
/**
|
|
26
|
+
* Set to true if negative scores can be entered
|
|
27
|
+
* @type {boolean}
|
|
28
|
+
*/
|
|
20
29
|
allowNegativeScore: { type: Boolean },
|
|
30
|
+
/**
|
|
31
|
+
* This property will substitute the stock text on the "Clear Manual Override" button
|
|
32
|
+
* @type {string}
|
|
33
|
+
*/
|
|
21
34
|
customManualOverrideClearText: { type: String },
|
|
35
|
+
/**
|
|
36
|
+
* @type {boolean}
|
|
37
|
+
*/
|
|
22
38
|
displayStudentGradePreview: { type: Boolean, attribute: 'display-student-grade-preview' },
|
|
39
|
+
/**
|
|
40
|
+
* The text that is inside of the tooltip when hovering over the grades button
|
|
41
|
+
* @type {string}
|
|
42
|
+
*/
|
|
23
43
|
gradeButtonTooltip: { type: String },
|
|
44
|
+
/**
|
|
45
|
+
* Specifies the type of grade that the component is meant to render
|
|
46
|
+
* @type {'Numeric'|'LetterGrade'}
|
|
47
|
+
*/
|
|
24
48
|
gradeType: { type: String },
|
|
49
|
+
/**
|
|
50
|
+
* This property will hide the "Overall Grade" title above the component
|
|
51
|
+
* @type {boolean}
|
|
52
|
+
*/
|
|
25
53
|
hideTitle: { type: Boolean },
|
|
54
|
+
/**
|
|
55
|
+
* Determines whether the grades icon button is rendered
|
|
56
|
+
* @type {boolean}
|
|
57
|
+
*/
|
|
26
58
|
includeGradeButton: { type: Boolean },
|
|
59
|
+
/**
|
|
60
|
+
* Determines whether the reports icon button is rendered
|
|
61
|
+
* @type {boolean}
|
|
62
|
+
*/
|
|
27
63
|
includeReportsButton: { type: Boolean },
|
|
64
|
+
/**
|
|
65
|
+
* This property sets the label that will be used inside the aria-label and validation error tooltips
|
|
66
|
+
* @type {string}
|
|
67
|
+
*/
|
|
28
68
|
inputLabelText: { type: String },
|
|
69
|
+
/**
|
|
70
|
+
* Set to true if the user is currently manually overriding the grade. This will display the button to 'Clear Manual Override'.
|
|
71
|
+
* @type {boolean}
|
|
72
|
+
*/
|
|
29
73
|
isManualOverrideActive: { type: Boolean },
|
|
74
|
+
/**
|
|
75
|
+
* @type {number}
|
|
76
|
+
*/
|
|
30
77
|
labelHeadingLevel: { type: Number },
|
|
78
|
+
/**
|
|
79
|
+
* The text that appears above the component
|
|
80
|
+
* @type {string}
|
|
81
|
+
*/
|
|
31
82
|
labelText: { type: String },
|
|
83
|
+
/**
|
|
84
|
+
* A dictionary where the key is a unique id and the value is an object containing the LetterGrade text and the PercentStart
|
|
85
|
+
* @type {object}
|
|
86
|
+
*/
|
|
32
87
|
letterGradeOptions: { type: Object },
|
|
88
|
+
/**
|
|
89
|
+
* Set to true if the user does not have permissions to edit the grade
|
|
90
|
+
* @type {boolean}
|
|
91
|
+
*/
|
|
33
92
|
readOnly: { type: Boolean },
|
|
93
|
+
/**
|
|
94
|
+
* The text that is inside of the tooltip when hovering over the reports button
|
|
95
|
+
* @type {string}
|
|
96
|
+
*/
|
|
34
97
|
reportsButtonTooltip: { type: String },
|
|
98
|
+
/**
|
|
99
|
+
* Set to true if an undefined/blank grade is not considered valid
|
|
100
|
+
* @type {boolean}
|
|
101
|
+
*/
|
|
35
102
|
required: { type: Boolean },
|
|
103
|
+
/**
|
|
104
|
+
* The denominator of the numeric score that is given
|
|
105
|
+
* @type {number}
|
|
106
|
+
*/
|
|
36
107
|
scoreDenominator: { type: Number },
|
|
108
|
+
/**
|
|
109
|
+
* The numerator of the numeric score that is given
|
|
110
|
+
* @type {number}
|
|
111
|
+
*/
|
|
37
112
|
scoreNumerator: { type: Number, converter: numberConverter },
|
|
113
|
+
/**
|
|
114
|
+
* The current selected letter grade of the options given
|
|
115
|
+
* @type {string}
|
|
116
|
+
*/
|
|
38
117
|
selectedLetterGrade: { type: String },
|
|
118
|
+
/**
|
|
119
|
+
* Set to true if displaying a negative grade that has been floored at 0
|
|
120
|
+
* @type {boolean}
|
|
121
|
+
*/
|
|
39
122
|
showFlooredScoreWarning: { type: Boolean },
|
|
123
|
+
/**
|
|
124
|
+
* This property will show the given text under the title
|
|
125
|
+
* @type {string}
|
|
126
|
+
*/
|
|
40
127
|
subtitleText: { type: String },
|
|
128
|
+
/**
|
|
129
|
+
* @type {object}
|
|
130
|
+
*/
|
|
41
131
|
studentGradePreview: { type: Object, attribute: 'student-grade-preview' },
|
|
42
132
|
};
|
|
43
133
|
}
|