summaryrefslogtreecommitdiffstats
path: root/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs')
-rw-r--r--toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs123
1 files changed, 123 insertions, 0 deletions
diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs b/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs
new file mode 100644
index 0000000000..65803eed9f
--- /dev/null
+++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs
@@ -0,0 +1,123 @@
+/* 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/. */
+/* eslint-disable import/no-unassigned-import */
+
+import { html, ifDefined } from "../vendor/lit.all.mjs";
+import "./moz-message-bar.mjs";
+import "../moz-support-link/moz-support-link.mjs";
+
+const fluentStrings = [
+ "moz-message-bar-message",
+ "moz-message-bar-message-heading",
+ "moz-message-bar-message-heading-long",
+];
+
+export default {
+ title: "UI Widgets/Message Bar",
+ component: "moz-message-bar",
+ argTypes: {
+ type: {
+ options: ["info", "warning", "success", "error"],
+ control: { type: "select" },
+ },
+ l10nId: {
+ options: fluentStrings,
+ control: { type: "select" },
+ },
+ heading: {
+ table: {
+ disable: true,
+ },
+ },
+ message: {
+ table: {
+ disable: true,
+ },
+ },
+ },
+ parameters: {
+ status: "stable",
+ fluent: `
+moz-message-bar-message =
+ .message = For your information message
+moz-message-bar-message-heading =
+ .heading = Heading
+ .message = For your information message
+moz-message-bar-message-heading-long =
+ .heading = A longer heading to check text wrapping in the message bar
+ .message = Some message that we use to check text wrapping. Some message that we use to check text wrapping.
+moz-message-bar-button = Click me!
+ `,
+ },
+};
+
+const Template = ({
+ type,
+ heading,
+ message,
+ l10nId,
+ dismissable,
+ hasSupportLink,
+ hasActionButton,
+}) => html`
+ <moz-message-bar
+ type=${type}
+ heading=${ifDefined(heading)}
+ message=${ifDefined(message)}
+ data-l10n-id=${ifDefined(l10nId)}
+ data-l10n-attrs="heading, message"
+ ?dismissable=${dismissable}
+ >
+ ${hasSupportLink
+ ? html`
+ <a
+ is="moz-support-link"
+ support-page="addons"
+ slot="support-link"
+ ></a>
+ `
+ : ""}
+ ${hasActionButton
+ ? html`
+ <button data-l10n-id="moz-message-bar-button" slot="actions"></button>
+ `
+ : ""}
+ </moz-message-bar>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+ type: "info",
+ l10nId: "moz-message-bar-message",
+ dismissable: false,
+ hasSupportLink: false,
+ hasActionButton: false,
+};
+
+export const Dismissable = Template.bind({});
+Dismissable.args = {
+ type: "info",
+ l10nId: "moz-message-bar-message",
+ dismissable: true,
+ hasSupportLink: false,
+ hasActionButton: false,
+};
+
+export const WithActionButton = Template.bind({});
+WithActionButton.args = {
+ type: "info",
+ l10nId: "moz-message-bar-message",
+ dismissable: false,
+ hasSupportLink: false,
+ hasActionButton: true,
+};
+
+export const WithSupportLink = Template.bind({});
+WithSupportLink.args = {
+ type: "info",
+ l10nId: "moz-message-bar-message",
+ dismissable: false,
+ hasSupportLink: true,
+ hasActionButton: false,
+};