@brightspace-ui/labs 2.34.1 → 2.35.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
|
@@ -10,11 +10,11 @@ Components used for rendering grades in Brightspace.
|
|
|
10
10
|
import '@brightspace-ui/labs/components/grade-result/grade-result-presentational.js';
|
|
11
11
|
</script>
|
|
12
12
|
<d2l-labs-grade-result-presentational
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
grade-type="Numeric"
|
|
14
|
+
label-text="Overall Grade"
|
|
15
|
+
label-heading-level="3"
|
|
16
|
+
score-numerator="5"
|
|
17
|
+
score-denominator="20"
|
|
18
18
|
display-student-grade-preview
|
|
19
19
|
student-grade-preview='{"score": 5, "symbol": "Fine", "colour": "#FFCC00"}'
|
|
20
20
|
></d2l-labs-grade-result-presentational>
|
|
@@ -26,16 +26,16 @@ Components used for rendering grades in Brightspace.
|
|
|
26
26
|
import '@brightspace-ui/labs/components/grade-result/grade-result-presentational.js';
|
|
27
27
|
</script>
|
|
28
28
|
<d2l-labs-grade-result-presentational
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
29
|
+
grade-type="LetterGrade"
|
|
30
|
+
label-text="Overall Grade"
|
|
31
|
+
letter-grade-options='{ "0": { "LetterGrade": "None", "PercentStart": null}, "1": { "LetterGrade": "A", "PercentStart": "75"}, "2": { "LetterGrade": "B", "PercentStart": "50"}}'
|
|
32
|
+
selected-letter-grade="2"
|
|
33
|
+
score-denominator="20"
|
|
34
|
+
is-manual-override-active
|
|
35
|
+
include-grade-button
|
|
36
|
+
grade-button-tooltip="Assignment 1 Grade Item Attached"
|
|
37
|
+
include-reports-button
|
|
38
|
+
reports-button-tooltip="Class and user statistics"
|
|
39
39
|
display-student-grade-preview
|
|
40
40
|
student-grade-preview='{"score": 10, "symbol": "Very Good", "colour": "#00FFFF"}'
|
|
41
41
|
></d2l-labs-grade-result-presentational>
|
|
@@ -47,25 +47,25 @@ Components used for rendering grades in Brightspace.
|
|
|
47
47
|
|
|
48
48
|
| Property | GradeType | Type | Default | Description |
|
|
49
49
|
| ----------------------------------| -------------- | --------------------------- | ----------- | ------------------------------------------------------------ |
|
|
50
|
-
| `
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
50
|
+
| `grade-type` | All | `string ('Numeric' or 'LetterGrade')` | `'Numeric'` | Specifies the type of grade that the component is meant to render. |
|
|
51
|
+
| `label-text` | All | `string` | `''` | The text that appears above the component. |
|
|
52
|
+
| `score-numerator` | Numeric | `number` | `0` | The numerator of the numeric score that is given. |
|
|
53
|
+
| `score-denominator` | Numeric | `number` | `0` | The denominator of the numeric score that is given. |
|
|
54
|
+
| `selected-letter-grade` | LetterGrade | `string` | `''` | The current selected letter grade of the options given. |
|
|
55
|
+
| `letter-grade-options` | LetterGrade | `Object` | `null` | A dictionary where the key is a unique id and the value is an object containing the LetterGrade text and the PercentStart. |
|
|
56
|
+
| `include-grade-button` | All | `boolean` | `false` | Determines whether the grades icon button is rendered. |
|
|
57
|
+
| `include-reports-button` | All | `boolean` | `false` | Determines whether the reports icon button is rendered. |
|
|
58
|
+
| `grade-button-tooltip` | All | `string` | `''` | The text that is inside of the tooltip when hovering over the grades button. |
|
|
59
|
+
| `reports-button-tooltip` | All | `string` | `''` | The text that is inside of the tooltip when hovering over the reports button. |
|
|
60
60
|
| `readonly` | All | `boolean` | `false` | Set to `true` if the user does not have permissions to edit the grade. |
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
61
|
+
| `is-manual-override-active` | All | `boolean` | `false` | Set to `true` if the user is currently manually overriding the grade. This will display the button to 'Clear Manual Override'. |
|
|
62
|
+
| `hide-title` | All | `boolean` | `false` | This property will hide the "Overall Grade" title above the component. |
|
|
63
|
+
| `custom-manual-override-clear-text` | All | `string` | `undefined` | This property will substitute the stock text on the "Clear Manual Override" button. |
|
|
64
|
+
| `subtitle-text` | All | `string` | `undefined` | This property will show the given text under the title. |
|
|
65
65
|
| `required` | Numeric | `Boolean` | `false` | Set to `true` if an undefined/blank grade is not considered valid |
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
66
|
+
| `input-label-text` | Numeric | `string` | `''` | This property sets the label that will be used inside the aria-label and validation error tool-tips |
|
|
67
|
+
| `allow-negative-score` | Numeric | `boolean` | `'false'` | Set to `true` if negative scores can be entered |
|
|
68
|
+
| `show-floored-score-warning` | Numeric | `boolean` | `'false'` | Set to `true` if displaying a negative grade that has been floored at 0 |
|
|
69
69
|
|
|
70
70
|
### Events
|
|
71
71
|
|
|
@@ -7,19 +7,13 @@ export class D2LGradeResultIconButton extends LitElement {
|
|
|
7
7
|
return {
|
|
8
8
|
text: { type: String },
|
|
9
9
|
icon: { type: String },
|
|
10
|
-
_id: { type: String },
|
|
11
10
|
};
|
|
12
11
|
}
|
|
13
12
|
|
|
14
|
-
constructor() {
|
|
15
|
-
super();
|
|
16
|
-
this._id = getUniqueId();
|
|
17
|
-
}
|
|
18
|
-
|
|
19
13
|
render() {
|
|
20
14
|
return html`
|
|
21
15
|
<d2l-button-icon
|
|
22
|
-
id="d2l-grade-result-icon-button-${this
|
|
16
|
+
id="d2l-grade-result-icon-button-${this.#id}"
|
|
23
17
|
icon="${this.icon}"
|
|
24
18
|
@click="${this._onClick}"
|
|
25
19
|
text="${this.text}"
|
|
@@ -27,6 +21,8 @@ export class D2LGradeResultIconButton extends LitElement {
|
|
|
27
21
|
`;
|
|
28
22
|
}
|
|
29
23
|
|
|
24
|
+
#id = getUniqueId();
|
|
25
|
+
|
|
30
26
|
_onClick() {
|
|
31
27
|
this.dispatchEvent(new CustomEvent('d2l-grade-result-icon-button-click', {
|
|
32
28
|
bubbles: true,
|
|
@@ -10,7 +10,7 @@ export class D2LGradeResultLetterScore extends LocalizeLabsElement(LitElement) {
|
|
|
10
10
|
|
|
11
11
|
static get properties() {
|
|
12
12
|
return {
|
|
13
|
-
availableOptions: { type: Object },
|
|
13
|
+
availableOptions: { attribute: 'available-options', type: Object },
|
|
14
14
|
label: { type: String },
|
|
15
15
|
selectedOption: { attribute: 'selected-option', type: String },
|
|
16
16
|
readonly: { type: Boolean }
|
|
@@ -26,12 +26,12 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
|
|
|
26
26
|
* Set to true if negative scores can be entered
|
|
27
27
|
* @type {boolean}
|
|
28
28
|
*/
|
|
29
|
-
allowNegativeScore: { type: Boolean },
|
|
29
|
+
allowNegativeScore: { attribute: 'allow-negative-score', type: Boolean },
|
|
30
30
|
/**
|
|
31
31
|
* This property will substitute the stock text on the "Clear Manual Override" button
|
|
32
32
|
* @type {string}
|
|
33
33
|
*/
|
|
34
|
-
customManualOverrideClearText: { type: String },
|
|
34
|
+
customManualOverrideClearText: { attribute: 'custom-manual-override-clear-text', type: String },
|
|
35
35
|
/**
|
|
36
36
|
* @type {boolean}
|
|
37
37
|
*/
|
|
@@ -40,51 +40,51 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
|
|
|
40
40
|
* The text that is inside of the tooltip when hovering over the grades button
|
|
41
41
|
* @type {string}
|
|
42
42
|
*/
|
|
43
|
-
gradeButtonTooltip: { type: String },
|
|
43
|
+
gradeButtonTooltip: { attribute: 'grade-button-tooltip', type: String },
|
|
44
44
|
/**
|
|
45
45
|
* Specifies the type of grade that the component is meant to render
|
|
46
46
|
* @type {'Numeric'|'LetterGrade'}
|
|
47
47
|
*/
|
|
48
|
-
gradeType: { type: String },
|
|
48
|
+
gradeType: { attribute: 'grade-type', type: String },
|
|
49
49
|
/**
|
|
50
50
|
* This property will hide the "Overall Grade" title above the component
|
|
51
51
|
* @type {boolean}
|
|
52
52
|
*/
|
|
53
|
-
hideTitle: { type: Boolean },
|
|
53
|
+
hideTitle: { attribute: 'hide-title', type: Boolean },
|
|
54
54
|
/**
|
|
55
55
|
* Determines whether the grades icon button is rendered
|
|
56
56
|
* @type {boolean}
|
|
57
57
|
*/
|
|
58
|
-
includeGradeButton: { type: Boolean },
|
|
58
|
+
includeGradeButton: { attribute: 'include-grade-button', type: Boolean },
|
|
59
59
|
/**
|
|
60
60
|
* Determines whether the reports icon button is rendered
|
|
61
61
|
* @type {boolean}
|
|
62
62
|
*/
|
|
63
|
-
includeReportsButton: { type: Boolean },
|
|
63
|
+
includeReportsButton: { attribute: 'include-reports-button', type: Boolean },
|
|
64
64
|
/**
|
|
65
65
|
* This property sets the label that will be used inside the aria-label and validation error tooltips
|
|
66
66
|
* @type {string}
|
|
67
67
|
*/
|
|
68
|
-
inputLabelText: { type: String },
|
|
68
|
+
inputLabelText: { attribute: 'input-label-text', type: String },
|
|
69
69
|
/**
|
|
70
70
|
* Set to true if the user is currently manually overriding the grade. This will display the button to 'Clear Manual Override'.
|
|
71
71
|
* @type {boolean}
|
|
72
72
|
*/
|
|
73
|
-
isManualOverrideActive: { type: Boolean },
|
|
73
|
+
isManualOverrideActive: { attribute: 'is-manual-override-active', type: Boolean },
|
|
74
74
|
/**
|
|
75
75
|
* @type {number}
|
|
76
76
|
*/
|
|
77
|
-
labelHeadingLevel: { type: Number },
|
|
77
|
+
labelHeadingLevel: { attribute: 'label-heading-level', type: Number },
|
|
78
78
|
/**
|
|
79
79
|
* The text that appears above the component
|
|
80
80
|
* @type {string}
|
|
81
81
|
*/
|
|
82
|
-
labelText: { type: String },
|
|
82
|
+
labelText: { attribute: 'label-text', type: String },
|
|
83
83
|
/**
|
|
84
84
|
* A dictionary where the key is a unique id and the value is an object containing the LetterGrade text and the PercentStart
|
|
85
85
|
* @type {object}
|
|
86
86
|
*/
|
|
87
|
-
letterGradeOptions: { type: Object },
|
|
87
|
+
letterGradeOptions: { attribute: 'letter-grade-options', type: Object },
|
|
88
88
|
/**
|
|
89
89
|
* Set to true if the user does not have permissions to edit the grade
|
|
90
90
|
* @type {boolean}
|
|
@@ -94,7 +94,7 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
|
|
|
94
94
|
* The text that is inside of the tooltip when hovering over the reports button
|
|
95
95
|
* @type {string}
|
|
96
96
|
*/
|
|
97
|
-
reportsButtonTooltip: { type: String },
|
|
97
|
+
reportsButtonTooltip: { attribute: 'reports-button-tooltip', type: String },
|
|
98
98
|
/**
|
|
99
99
|
* Set to true if an undefined/blank grade is not considered valid
|
|
100
100
|
* @type {boolean}
|
|
@@ -104,27 +104,27 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
|
|
|
104
104
|
* The denominator of the numeric score that is given
|
|
105
105
|
* @type {number}
|
|
106
106
|
*/
|
|
107
|
-
scoreDenominator: { type: Number },
|
|
107
|
+
scoreDenominator: { attribute: 'score-denominator', type: Number },
|
|
108
108
|
/**
|
|
109
109
|
* The numerator of the numeric score that is given
|
|
110
110
|
* @type {number}
|
|
111
111
|
*/
|
|
112
|
-
scoreNumerator: { type: Number, converter: numberConverter },
|
|
112
|
+
scoreNumerator: { attribute: 'score-numerator', type: Number, converter: numberConverter },
|
|
113
113
|
/**
|
|
114
114
|
* The current selected letter grade of the options given
|
|
115
115
|
* @type {string}
|
|
116
116
|
*/
|
|
117
|
-
selectedLetterGrade: { type: String },
|
|
117
|
+
selectedLetterGrade: { attribute: 'selected-letter-grade', type: String },
|
|
118
118
|
/**
|
|
119
119
|
* Set to true if displaying a negative grade that has been floored at 0
|
|
120
120
|
* @type {boolean}
|
|
121
121
|
*/
|
|
122
|
-
showFlooredScoreWarning: { type: Boolean },
|
|
122
|
+
showFlooredScoreWarning: { attribute: 'show-floored-score-warning', type: Boolean },
|
|
123
123
|
/**
|
|
124
124
|
* This property will show the given text under the title
|
|
125
125
|
* @type {string}
|
|
126
126
|
*/
|
|
127
|
-
subtitleText: { type: String },
|
|
127
|
+
subtitleText: { attribute: 'subtitle-text', type: String },
|
|
128
128
|
/**
|
|
129
129
|
* @type {object}
|
|
130
130
|
*/
|
|
@@ -275,8 +275,8 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
|
|
|
275
275
|
label=${this.inputLabelText}
|
|
276
276
|
?readonly=${this.readonly}
|
|
277
277
|
?required=${this.required}
|
|
278
|
-
|
|
279
|
-
|
|
278
|
+
.scoreDenominator=${this.scoreDenominator}
|
|
279
|
+
.scoreNumerator=${this.scoreNumerator}
|
|
280
280
|
?show-floored-score-warning=${this.showFlooredScoreWarning}
|
|
281
281
|
></d2l-labs-grade-result-numeric-score>
|
|
282
282
|
`;
|