diff options
Diffstat (limited to 'browser/components/storybook/stories/login-command-button.stories.mjs')
-rw-r--r-- | browser/components/storybook/stories/login-command-button.stories.mjs | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/browser/components/storybook/stories/login-command-button.stories.mjs b/browser/components/storybook/stories/login-command-button.stories.mjs new file mode 100644 index 0000000000..7ebdd23142 --- /dev/null +++ b/browser/components/storybook/stories/login-command-button.stories.mjs @@ -0,0 +1,90 @@ +/* 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 "../../aboutlogins/content/components/login-command-button.mjs"; + +const BUTTON_TYPES = { + Edit: "login-item-edit-button", + "Copy Username": "login-item-copy-username-button-text", + "Copy Password": "login-item-copy-password-button-text", + Remove: "about-logins-login-item-remove-button", +}; + +const BUTTON_ICONS = { + Edit: "chrome://global/skin/icons/edit.svg", + "Copy Username": "chrome://global/skin/icons/edit-copy.svg", + "Copy Password": "chrome://global/skin/icons/edit-copy.svg", + Remove: "chrome://global/skin/icons/delete.svg", +}; + +const BUTTON_VARIANT = { + Regular: "", + Danger: "primary danger-button", + Primary: "primary", + Icon: "ghost-button icon-button", +}; + +export default { + title: "Domain-specific UI Widgets/Credential Management/Command Button", + component: "login-command-button", + argTypes: { + l10nId: { + options: Object.keys(BUTTON_TYPES), + mapping: BUTTON_TYPES, + control: { type: "select" }, + defaultValue: "Edit", + }, + icon: { + options: Object.keys(BUTTON_ICONS), + mapping: BUTTON_ICONS, + control: { type: "select" }, + defaultValue: "Edit", + }, + variant: { + options: Object.keys(BUTTON_VARIANT), + mapping: BUTTON_VARIANT, + control: { type: "select" }, + defaultValue: "Regular", + }, + }, +}; + +window.MozXULElement.insertFTLIfNeeded("browser/aboutLogins.ftl"); + +const Template = ({ onClick, l10nId, icon, variant, disabled, tooltip }) => { + return html` + <login-command-button + .onClick=${onClick} + .l10nId=${l10nId} + .icon=${icon} + .variant=${variant} + .disabled=${disabled} + .tooltip=${tooltip} + > + </login-command-button> + `; +}; + +export const WorkingButton = Template.bind({}); +WorkingButton.args = { + onClick: () => alert("I work Woohoo!!"), + l10nId: "login-item-edit-button", + icon: "chrome://global/skin/icons/edit.svg", + variant: "", + disabled: false, + tooltip: "Lorem ipsum dolor", +}; + +export const DisabledButton = Template.bind({}); +DisabledButton.args = { + onClick: () => alert("I shouldn't be working..."), + l10nId: "login-item-edit-button", + icon: "chrome://global/skin/icons/edit.svg", + variant: "", + disabled: true, + tooltip: "Lorem ipsum dolor", +}; |