1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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",
};
|
