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);