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-breadcrumb-group.mjs";
export default {
title: "UI Widgets/Breadcrumb Group",
component: "moz-breadcrumbs-group",
parameters: {
status: "in-development",
fluent: `
moz-breadcrumb-first =
.label = First page
moz-breadcrumb-second =
.label = Previous page
moz-breadcrumb-third =
.label = Current page
`,
},
};
const Template = ({ l10nId, width }) => {
return html`
<style>
${width
? `moz-breadcrumb-group {
width: ${width}px;
overflow: hidden;
}`
: ""}
</style>
<moz-breadcrumb-group>
<moz-breadcrumb
href="about#firstpage"
data-l10n-id=${ifDefined(l10nId + "-first")}
></moz-breadcrumb>
<moz-breadcrumb
data-l10n-id=${ifDefined(l10nId + "-second")}
href="about#prevpage"
></moz-breadcrumb>
<moz-breadcrumb
href="about#currentpage"
data-l10n-id=${ifDefined(l10nId + "-third")}
></moz-breadcrumb>
</moz-breadcrumb-group>
`;
};
export const Default = Template.bind({});
Default.args = {
l10nId: "moz-breadcrumb",
};
export const NarrowWidth = Template.bind({});
NarrowWidth.args = {
...Default.args,
width: 180,
};