Source code
Revision control
Copy as Markdown
Other Tools
/* 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
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",
};