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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
/* 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 import/no-unassigned-import */
import { html, ifDefined } from "../vendor/lit.all.mjs";
import "./moz-message-bar.mjs";
import "../moz-support-link/moz-support-link.mjs";
const fluentStrings = [
"moz-message-bar-message",
"moz-message-bar-message-heading",
"moz-message-bar-message-heading-long",
];
export default {
title: "UI Widgets/Message Bar",
component: "moz-message-bar",
argTypes: {
type: {
options: ["info", "warning", "success", "error"],
control: { type: "select" },
},
l10nId: {
options: fluentStrings,
control: { type: "select" },
},
heading: {
table: {
disable: true,
},
},
message: {
table: {
disable: true,
},
},
},
parameters: {
status: "stable",
fluent: `
moz-message-bar-message =
.message = For your information message
moz-message-bar-message-heading =
.heading = Heading
.message = For your information message
moz-message-bar-message-heading-long =
.heading = A longer heading to check text wrapping in the message bar
.message = Some message that we use to check text wrapping. Some message that we use to check text wrapping.
moz-message-bar-button = Click me!
`,
},
};
const Template = ({
type,
heading,
message,
l10nId,
dismissable,
hasSupportLink,
hasActionButton,
}) => html`
<moz-message-bar
type=${type}
heading=${ifDefined(heading)}
message=${ifDefined(message)}
data-l10n-id=${ifDefined(l10nId)}
data-l10n-attrs="heading, message"
?dismissable=${dismissable}
>
${hasSupportLink
? html`
<a
is="moz-support-link"
support-page="addons"
slot="support-link"
></a>
`
: ""}
${hasActionButton
? html`
<button data-l10n-id="moz-message-bar-button" slot="actions"></button>
`
: ""}
</moz-message-bar>
`;
export const Default = Template.bind({});
Default.args = {
type: "info",
l10nId: "moz-message-bar-message",
dismissable: false,
hasSupportLink: false,
hasActionButton: false,
};
export const Dismissable = Template.bind({});
Dismissable.args = {
type: "info",
l10nId: "moz-message-bar-message",
dismissable: true,
hasSupportLink: false,
hasActionButton: false,
};
export const WithActionButton = Template.bind({});
WithActionButton.args = {
type: "info",
l10nId: "moz-message-bar-message",
dismissable: false,
hasSupportLink: false,
hasActionButton: true,
};
export const WithSupportLink = Template.bind({});
WithSupportLink.args = {
type: "info",
l10nId: "moz-message-bar-message",
dismissable: false,
hasSupportLink: true,
hasActionButton: false,
};
export const WithHeading = Template.bind({});
WithHeading.args = {
...Default.args,
l10nId: "moz-message-bar-message-heading",
};
|
