@brightspace-ui/labs 2.34.0 → 2.34.1

package/package.json

@@ -114,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2.1.2"
   },
-  "version": "2.34.0"
+  "version": "2.34.1"
 }

package/src/components/grade-result/README.md

@@ -57,7 +57,7 @@ Components used for rendering grades in Brightspace.
 | `includeReportsButton`            | All            | `boolean`                   | `false`     | Determines whether the reports icon button is rendered.      |
 | `gradeButtonTooltip`              | All            | `string`                    | `''`        | The text that is inside of the tooltip when hovering over the grades button. |
 | `reportsButtonTooltip`            | All            | `string`                    | `''`        | The text that is inside of the tooltip when hovering over the reports button. |
-| `readOnly`                        | All            | `boolean`                   | `false`     | Set to `true` if the user does not have permissions to edit the grade. |
+| `readonly`                        | All            | `boolean`                   | `false`     | Set to `true` if the user does not have permissions to edit the grade. |
 | `isManualOverrideActive`          | All            | `boolean`                   | `false`     | Set to `true` if the user is currently manually overriding the grade. This will display the button to 'Clear Manual Override'. |
 | `hideTitle`                       | All            | `boolean`                   | `false`     | This property will hide the "Overall Grade" title above the component. |
 | `customManualOverrideClearText`   | All            | `string`                    | `undefined` | This property will substitute the stock text on the "Clear Manual Override" button. |

package/src/components/grade-result/grade-result-letter-score.js

@@ -12,8 +12,8 @@ export class D2LGradeResultLetterScore extends LocalizeLabsElement(LitElement) {
 		return {
 			availableOptions: { type: Object },
 			label: { type: String },
-			selectedOption: { type: String },
-			readOnly: { type: Boolean }
+			selectedOption: { attribute: 'selected-option', type: String },
+			readonly: { type: Boolean }
 		};
 	}
 
@@ -39,7 +39,7 @@ export class D2LGradeResultLetterScore extends LocalizeLabsElement(LitElement) {
 	}
 
 	render() {
-		if (!this.readOnly) {
+		if (!this.readonly) {
 			return html`
 				<div class="d2l-grade-result-letter-score-container">
 					<select

package/src/components/grade-result/grade-result-numeric-score.js

@@ -21,12 +21,12 @@ export class D2LGradeResultNumericScore extends LocalizeLabsElement(LitElement)
 	static get properties() {
 		return {
 			label: { type: String },
-			scoreNumerator: { type: Number, converter: numberConverter },
-			scoreDenominator: { type: Number },
-			readOnly: { type: Boolean },
+			scoreNumerator: { attribute: 'score-numerator', type: Number, converter: numberConverter },
+			scoreDenominator: { attribute: 'score-denominator', type: Number },
+			readonly: { type: Boolean },
 			required: { type: Boolean },
-			allowNegativeScore: { type: Boolean },
-			showFlooredScoreWarning: { type: Boolean },
+			allowNegativeScore: { attribute: 'allow-negative-score', type: Boolean },
+			showFlooredScoreWarning: { attribute: 'show-floored-score-warning', type: Boolean },
 		};
 	}
 
@@ -57,7 +57,7 @@ export class D2LGradeResultNumericScore extends LocalizeLabsElement(LitElement)
 
 		return html`
 			<div class="d2l-grade-result-numeric-score-container">
-				${!this.readOnly ? html`
+				${!this.readonly ? html`
 					<div class="d2l-grade-result-numeric-score-score">
 						<d2l-form>
 							<d2l-input-number

package/src/components/grade-result/grade-result-presentational.js

@@ -89,7 +89,7 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 			 * Set to true if the user does not have permissions to edit the grade
 			 * @type {boolean}
 			 */
-			readOnly: { type: Boolean },
+			readonly: { type: Boolean },
 			/**
 			 * The text that is inside of the tooltip when hovering over the reports button
 			 * @type {string}
@@ -167,7 +167,7 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 		this.includeReportsButton = false;
 		this.isManualOverrideActive = false;
 		this.labelHeadingLevel = undefined;
-		this.readOnly = false;
+		this.readonly = false;
 		this.selectedLetterGrade = '';
 		this.showFlooredScoreWarning = false;
 		this.subtitleText = undefined;
@@ -191,10 +191,6 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 		`;
 	}
 
-	_isReadOnly() {
-		return Boolean(this.readOnly);
-	}
-
 	_onGradeButtonClick() {
 		this.dispatchEvent(new CustomEvent('d2l-grade-result-grade-button-click', {
 			bubbles: true,
@@ -248,9 +244,9 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 		return html`
 			<d2l-labs-grade-result-letter-score
 				.availableOptions=${this.letterGradeOptions}
-				.label=${this.inputLabelText}
-				.readOnly=${this._isReadOnly()}
-				.selectedOption=${this.selectedLetterGrade}
+				label=${this.inputLabelText}
+				?readonly=${this.readonly}
+				selected-option=${ifDefined(this.selectedLetterGrade)}
 			></d2l-labs-grade-result-letter-score>
 		`;
 	}
@@ -275,13 +271,13 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 	_renderNumericScoreComponent() {
 		return html`
 			<d2l-labs-grade-result-numeric-score
-				?allowNegativeScore=${this.allowNegativeScore}
-				.label=${this.inputLabelText}
-				.readOnly=${this._isReadOnly()}
+				?allow-negative-score=${this.allowNegativeScore}
+				label=${this.inputLabelText}
+				?readonly=${this.readonly}
 				?required=${this.required}
-				.scoreDenominator=${this.scoreDenominator}
-				.scoreNumerator=${this.scoreNumerator}
-				?showFlooredScoreWarning=${this.showFlooredScoreWarning}
+				score-denominator=${ifDefined(this.scoreDenominator)}
+				score-numerator=${ifDefined(this.scoreNumerator)}
+				?show-floored-score-warning=${this.showFlooredScoreWarning}
 			></d2l-labs-grade-result-numeric-score>
 		`;
 	}