/* 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-unresolved import { html, ifDefined } from "lit.all.mjs"; import "./moz-widget.mjs"; export default { title: "Domain-specific UI Widgets/Widget", component: "moz-widget", parameters: { fluent: ` moz-widget-title = .title = Localized widget moz-widget-back-button = .title = Back .aria-label = Back moz-widget-units-button = .label = Units moz-widget-menu-refresh = Refresh moz-widget-menu-remove = Remove widget `, }, argTypes: { size: { options: ["small", "medium", "large"], control: { type: "select" }, }, l10nId: { options: [undefined, "moz-widget-title"], control: { type: "select" }, }, badge: { options: [undefined, "new"], control: { type: "select" }, }, }, }; const WIDGET_DOCUMENT = `data:text/html,${encodeURIComponent(`

Framed widget

A document of its own.

`)}`; const headerTemplate = ({ headerTitle, badge, backButton, trailingButton, menuLabel, }) => headerTitle || badge || backButton || trailingButton ? html` ${backButton ? html`` : ""} ${badge ? html`` : ""} ${trailingButton ? html`` : ""} ` : ""; const menuTemplate = menu => menu ? html`
` : ""; const Template = ({ size, widgetId, title, l10nId, padded, menu, menuLabel, ...header }) => html` ${headerTemplate({ ...header, menuLabel })} ${menuTemplate(menu)}

Any HTML can go in the default slot.

 `; const FramedTemplate = ({ size, widgetId, title, l10nId, padded, src, menu, menuLabel, ...header }) => html` ${headerTemplate({ ...header, menuLabel })} ${menuTemplate(menu)} `; export const Default = Template.bind({}); Default.args = { size: "medium", widgetId: "example", title: "Example widget", headerTitle: "Example widget", badge: undefined, backButton: false, trailingButton: false, menu: false, menuLabel: "Widget options", padded: false, }; export const Framed = FramedTemplate.bind({}); Framed.args = { ...Default.args, title: "Framed widget", headerTitle: "Framed widget", src: WIDGET_DOCUMENT, }; export const Padded = FramedTemplate.bind({}); Padded.args = { ...Framed.args, padded: true, }; export const HeaderActions = Template.bind({}); HeaderActions.args = { ...Default.args, badge: "new", backButton: true, trailingButton: true, menu: true, }; export const WithoutHeader = FramedTemplate.bind({}); WithoutHeader.args = { ...Framed.args, headerTitle: undefined, menu: true, };