diff options
Diffstat (limited to 'browser/components/storybook/stories/message-bar.stories.mjs')
-rw-r--r-- | browser/components/storybook/stories/message-bar.stories.mjs | 48 |
1 files changed, 48 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..a8a7b7ddc7 --- /dev/null +++ b/browser/components/storybook/stories/message-bar.stories.mjs @@ -0,0 +1,48 @@ +/* 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.all.mjs"; +// 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: "UI Widgets/Message Bar", + component: "message-bar", + argTypes: { + type: { + options: Object.keys(MESSAGE_TYPES), + mapping: MESSAGE_TYPES, + control: { type: "select" }, + }, + }, + parameters: { + status: "stable", + fluent: ` +message-bar-text = A very expressive and slightly whimsical message goes here. +message-bar-button = Click me, please! + `, + }, +}; + +const Template = ({ dismissable, type }) => + html` + <message-bar type=${type} ?dismissable=${dismissable}> + <span data-l10n-id="message-bar-text"></span> + <button data-l10n-id="message-bar-button"></button> + </message-bar> + `; + +export const Basic = Template.bind({}); +Basic.args = { type: "", dismissable: false }; + +export const Dismissable = Template.bind({}); +Dismissable.args = { type: "", dismissable: true }; |