Source code
Revision control
Copy as Markdown
Other Tools
/* 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
import { html, ifDefined } from "../vendor/lit.all.mjs";
import "./moz-box-item.mjs";
export default {
title: "UI Widgets/Box Item",
component: "moz-box-item",
argTypes: {
l10nId: {
options: ["moz-box-item-label", "moz-box-item-label-description"],
control: { type: "select" },
},
},
parameters: {
status: "in-development",
fluent: `
moz-box-item-label =
.label = I'm a box item
moz-box-item-label-description =
.label = I'm a box item
.description = Some description of the item
`,
},
};
const Template = ({ l10nId, iconSrc, slottedContent, layout }) => html`
<style>
.container {
width: 300px;
}
.slotted {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
img {
width: 150px;
margin-block-end: var(--space-large);
}
</style>
<div class="container">
<moz-box-item
data-l10n-id=${l10nId}
iconsrc=${ifDefined(iconSrc)}
layout=${ifDefined(layout)}
>
${slottedContent
? html`<div class="slotted">
<img src="chrome://global/skin/illustrations/security-error.svg" />
<span>This is an example message</span>
<span class="text-deemphasized">
Message description would go down here
</span>
</div>`
: ""}
</moz-box-item>
</div>
`;
export const Default = Template.bind({});
Default.args = {
l10nId: "moz-box-item-label",
disabled: false,
iconSrc: "",
slottedContent: false,
};
export const WithDescription = Template.bind({});
WithDescription.args = {
...Default.args,
l10nId: "moz-box-item-label-description",
};
export const WithIcon = Template.bind({});
WithIcon.args = {
...WithDescription.args,
iconSrc: "chrome://global/skin/icons/highlights.svg",
};
export const WithSlottedContent = Template.bind({});
WithSlottedContent.args = {
slottedContent: true,
};
export const LargeIconLayout = Template.bind({});
LargeIconLayout.args = {
...WithIcon.args,
iconSrc: "chrome://global/skin/icons/info.svg",
layout: "large-icon",
};