summaryrefslogtreecommitdiffstats
path: root/browser/components/storybook/stories/message-bar.stories.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/storybook/stories/message-bar.stories.mjs')
-rw-r--r--browser/components/storybook/stories/message-bar.stories.mjs40
1 files changed, 40 insertions, 0 deletions
diff --git a/browser/components/storybook/stories/message-bar.stories.mjs b/browser/components/storybook/stories/message-bar.stories.mjs
new file mode 100644
index 0000000000..ca57066408
--- /dev/null
+++ b/browser/components/storybook/stories/message-bar.stories.mjs
@@ -0,0 +1,40 @@
+/* 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 "lit";
+// Imported for side-effects.
+// eslint-disable-next-line import/no-unassigned-import
+import "toolkit-widgets/message-bar.js";
+
+const MESSAGE_TYPES = {
+ default: "",
+ success: "success",
+ error: "error",
+ warning: "warning",
+};
+
+export default {
+ title: "Design System/Components/Message Bar",
+ argTypes: {
+ type: {
+ options: Object.keys(MESSAGE_TYPES),
+ mapping: MESSAGE_TYPES,
+ control: { type: "select" },
+ },
+ },
+};
+
+const Template = ({ dismissable, type }) =>
+ html`
+ <message-bar type=${type} ?dismissable=${dismissable}>
+ <span>A very expressive and slightly whimsical message goes here.</span>
+ <button>Click me, please!</button>
+ </message-bar>
+ `;
+
+export const Basic = Template.bind({});
+Basic.args = { type: "", dismissable: false };
+
+export const Dismissable = Template.bind({});
+Dismissable.args = { type: "", dismissable: true };