tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

placeholder-message.stories.mjs (1610B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
      6 import "chrome://browser/content/preferences/widgets/placeholder-message.mjs";
      7 
      8 export default {
      9  title: "Domain-specific UI Widgets/Settings/Placeholder Message",
     10  component: "placeholder-message",
     11  argTypes: {
     12    l10nId: {
     13      options: [
     14        "placeholder-message-label",
     15        "placeholder-message-label-description",
     16      ],
     17      control: { type: "select" },
     18    },
     19  },
     20  parameters: {
     21    status: "in-development",
     22    fluent: `
     23 placeholder-message-label =
     24  .label = You’re not signed in
     25 placeholder-message-label-description =
     26  .label = You’re not signed in
     27  .description = Sign in to keep your data private, encrypted, and instantly accessible everywhere you use Firefox.
     28    `,
     29  },
     30 };
     31 
     32 const Template = ({ imageSrc = "", l10nId = "", supportPage = "" }) => html`
     33  <div style="max-width: 500px">
     34    <placeholder-message
     35      imageSrc=${ifDefined(imageSrc)}
     36      data-l10n-id=${l10nId}
     37      support-page=${ifDefined(supportPage)}
     38    ></placeholder-message>
     39  </div>
     40 `;
     41 
     42 export const Default = Template.bind({});
     43 Default.args = {
     44  imageSrc: "chrome://global/skin/illustrations/security-error.svg",
     45  l10nId: "placeholder-message-label-description",
     46  supportPage: "",
     47 };
     48 
     49 export const WithSupportPage = Template.bind({});
     50 WithSupportPage.args = {
     51  ...Default.args,
     52  supportPage: "test",
     53 };