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
91
92
93
94
95
|
/* 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-next-line import/no-unassigned-import
import "toolkit-widgets/panel-list.js";
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
export default {
title: "Design System/Components/Panel Menu",
parameters: {
actions: {
handles: ["click"],
},
},
};
const openMenu = e => document.querySelector("panel-list").toggle(e);
const Template = ({ open, items }) =>
html`
<style>
panel-item[icon="passwords"]::part(button) {
background-image: url("chrome://browser/skin/login.svg");
}
panel-item[icon="settings"]::part(button) {
background-image: url("chrome://global/skin/icons/settings.svg");
}
button {
position: absolute;
background-image: url("chrome://global/skin/icons/more.svg");
}
.end {
inset-inline-end: 30px;
}
.bottom {
inset-block-end: 30px;
}
</style>
<button class="ghost-button icon-button" @click=${openMenu}></button>
<button class="ghost-button icon-button end" @click=${openMenu}></button>
<button class="ghost-button icon-button bottom" @click=${openMenu}></button>
<button
class="ghost-button icon-button bottom end"
@click=${openMenu}
></button>
<panel-list ?stay-open=${open} ?open=${open}>
${items.map(i =>
i == "<hr>"
? html`
<hr />
`
: html`
<panel-item
icon=${i.icon ?? ""}
?checked=${i.checked}
?badged=${i.badged}
accesskey=${ifDefined(i.accesskey)}
>
${i.text ?? i}
</panel-item>
`
)}
</panel-list>
`;
export const Simple = Template.bind({});
Simple.args = {
open: false,
items: [
"Item One",
{ text: "Item Two (accesskey w)", accesskey: "w" },
"Item Three",
"<hr>",
{ text: "Checked", checked: true },
{ text: "Badged, look at me", badged: true, icon: "settings" },
],
};
export const Icons = Template.bind({});
Icons.args = {
open: false,
items: [
{ text: "Passwords", icon: "passwords" },
{ text: "Settings", icon: "settings" },
],
};
export const Open = Template.bind({});
Open.args = {
...Simple.args,
open: true,
};
|
