Bug 1971835 - Part 1: create an empty state component r=akulyk

Differential Revision: https://phabricator.services.mozilla.com/D268765

Author: hannajones

browser/components/preferences/jar.mn

@@ -24,6 +24,8 @@ browser.jar:
    content/browser/preferences/web-appearance-dark.svg
    content/browser/preferences/web-appearance-light.svg
    content/browser/preferences/widgets/dialog-button.mjs                (widgets/dialog-button/dialog-button.mjs)
+   content/browser/preferences/widgets/placeholder-message.mjs          (widgets/placeholder-message/placeholder-message.mjs)
+   content/browser/preferences/widgets/placeholder-message.css          (widgets/placeholder-message/placeholder-message.css)
    content/browser/preferences/widgets/nav-notice.mjs                   (widgets/nav-notice/nav-notice.mjs)
    content/browser/preferences/widgets/nav-notice.css                   (widgets/nav-notice/nav-notice.css)
    content/browser/preferences/widgets/setting-control.css              (widgets/setting-control/setting-control.css)

browser/components/preferences/preferences.xhtml

@@ -91,6 +91,7 @@
   <script src="chrome://browser/content/migration/migration-wizard.mjs" type="module"></script>
   <script type="module" src="chrome://browser/content/backup/backup-settings.mjs"></script>
   <script type="module" src="chrome://browser/content/preferences/widgets/dialog-button.mjs"></script>
+  <script type="module" src="chrome://browser/content/preferences/widgets/placeholder-message.mjs"></script>
   <script type="module" src="chrome://browser/content/preferences/widgets/nav-notice.mjs"></script>
   <script type="module" src="chrome://browser/content/preferences/widgets/setting-pane.mjs"></script>
   <script type="module" src="chrome://browser/content/preferences/widgets/setting-group.mjs"></script>

browser/components/preferences/widgets/placeholder-message/placeholder-message.css

@@ -0,0 +1,36 @@
+/* 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/. */
+
+moz-box-item {
+  --box-padding: var(--space-xxlarge);
+}
+
+.placeholder-container {
+  gap: var(--space-large);
+}
+
+.placeholder-container,
+.text-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.text-container {
+  gap: var(--space-xsmall);
+  text-align: center;
+}
+
+img {
+  max-width: 160px;
+}
+
+.label:has(+ .support-link),
+.description:has(+ .support-link) {
+  margin-inline-end: var(--space-xsmall);
+}
+
+.description {
+  color: var(--text-color-deemphasized);
+}

browser/components/preferences/widgets/placeholder-message/placeholder-message.mjs

@@ -0,0 +1,88 @@
+/* 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 { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+import { html } from "chrome://global/content/vendor/lit.all.mjs";
+
+class PlaceholderMessage extends MozLitElement {
+  static properties = {
+    imageSrc: { type: String },
+    label: { type: String, fluent: true },
+    description: { type: String, fluent: true },
+    supportPage: { type: String, attribute: "support-page" },
+  };
+
+  constructor() {
+    super();
+
+    /** @type {string} */
+    this.imageSrc = "";
+
+    /** @type {string} */
+    this.label = "";
+
+    /** @type {string} */
+    this.description = "";
+
+    /** @type {string} */
+    this.supportPage = "";
+  }
+
+  labelTemplate() {
+    if (!this.label) {
+      return "";
+    }
+    return html`<div class="label-wrapper">
+      <span class="label heading-medium" id="label">${this.label}</span>${!this
+        .description
+        ? this.supportLinkTemplate()
+        : ""}
+    </div>`;
+  }
+
+  descriptionTemplate() {
+    if (!this.description) {
+      return "";
+    }
+    return html`<div class="description-wrapper">
+      <span class="description" id="description"> ${this.description}</span
+      >${this.supportLinkTemplate()}
+    </div>`;
+  }
+
+  supportLinkTemplate() {
+    if (!this.supportPage) {
+      return "";
+    }
+    return html`<a
+      is="moz-support-link"
+      class="support-link"
+      support-page=${this.supportPage}
+      part="support-link"
+      aria-describedby="label description"
+    ></a>`;
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/preferences/widgets/placeholder-message.css"
+      />
+      <link
+        rel="stylesheet"
+        href="chrome://global/skin/design-system/text-and-typography.css"
+      />
+      <moz-box-item>
+        <div class="placeholder-container">
+          <img src=${this.imageSrc} role="presentation" />
+          <div class="text-container">
+            ${this.labelTemplate()} ${this.descriptionTemplate()}
+          </div>
+        </div>
+      </moz-box-item>
+    `;
+  }
+}
+customElements.define("placeholder-message", PlaceholderMessage);

browser/components/preferences/widgets/placeholder-message/placeholder-message.stories.mjs

@@ -0,0 +1,53 @@
+/* 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, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
+import "chrome://browser/content/preferences/widgets/placeholder-message.mjs";
+
+export default {
+  title: "Domain-specific UI Widgets/Settings/Placeholder Message",
+  component: "placeholder-message",
+  argTypes: {
+    l10nId: {
+      options: [
+        "placeholder-message-label",
+        "placeholder-message-label-description",
+      ],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    status: "in-development",
+    fluent: `
+placeholder-message-label =
+  .label = You are not signed in
+placeholder-message-label-description =
+  .label = You are not signed in
+  .description = With a Mozilla account, you can sync your bookmarks, history, tabs, passwords, add-ons, and settings across all your devices.
+    `,
+  },
+};
+
+const Template = ({ imageSrc = "", l10nId = "", supportPage = "" }) => html`
+  <div style="max-width: 500px">
+    <placeholder-message
+      imageSrc=${ifDefined(imageSrc)}
+      data-l10n-id=${l10nId}
+      support-page=${ifDefined(supportPage)}
+    ></placeholder-message>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  imageSrc: "chrome://global/skin/illustrations/security-error.svg",
+  l10nId: "placeholder-message-label-description",
+  supportPage: "",
+};
+
+export const WithSupportPage = Template.bind({});
+WithSupportPage.args = {
+  ...Default.args,
+  supportPage: "test",
+};