diff options
Diffstat (limited to 'browser/components/shopping/content/letter-grade.mjs')
-rw-r--r-- | browser/components/shopping/content/letter-grade.mjs | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/browser/components/shopping/content/letter-grade.mjs b/browser/components/shopping/content/letter-grade.mjs new file mode 100644 index 0000000000..71badb1c45 --- /dev/null +++ b/browser/components/shopping/content/letter-grade.mjs @@ -0,0 +1,78 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { html } from "chrome://global/content/vendor/lit.all.mjs"; + +import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; + +const VALID_LETTER_GRADE_L10N_IDS = new Map([ + ["A", "shopping-letter-grade-description-ab"], + ["B", "shopping-letter-grade-description-ab"], + ["C", "shopping-letter-grade-description-c"], + ["D", "shopping-letter-grade-description-df"], + ["F", "shopping-letter-grade-description-df"], +]); + +class LetterGrade extends MozLitElement { + #descriptionL10N; + + static properties = { + letter: { type: String, reflect: true }, + showdescription: { type: Boolean, reflect: true }, + }; + + get fluentStrings() { + if (!this._fluentStrings) { + this._fluentStrings = new Localization(["browser/shopping.ftl"], true); + } + return this._fluentStrings; + } + + descriptionTemplate() { + if (this.showdescription) { + return html`<p + id="letter-grade-description" + data-l10n-id=${this.#descriptionL10N} + ></p>`; + } + + return null; + } + + render() { + // Do not render if letter is invalid + if (!VALID_LETTER_GRADE_L10N_IDS.has(this.letter)) { + return null; + } + + this.#descriptionL10N = VALID_LETTER_GRADE_L10N_IDS.get(this.letter); + let tooltipL10NArgs; + // Do not localize tooltip if using Storybook. + if (!window.IS_STORYBOOK) { + const localizedDescription = this.fluentStrings.formatValueSync( + this.#descriptionL10N + ); + tooltipL10NArgs = `{"letter": "${this.letter}", "description": "${localizedDescription}"}`; + } + + return html` + <link + rel="stylesheet" + href="chrome://browser/content/shopping/letter-grade.css" + /> + <article + id="letter-grade-wrapper" + data-l10n-id="shopping-letter-grade-tooltip" + data-l10n-attrs="title" + data-l10n-args=${tooltipL10NArgs} + > + <p id="letter-grade-term">${this.letter}</p> + ${this.descriptionTemplate()} + </article> + `; + } +} + +customElements.define("letter-grade", LetterGrade); |