diff options
Diffstat (limited to 'browser/components/storybook/stories/fxview-tab-list.stories.mjs')
| -rw-r--r-- | browser/components/storybook/stories/fxview-tab-list.stories.mjs | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/browser/components/storybook/stories/fxview-tab-list.stories.mjs b/browser/components/storybook/stories/fxview-tab-list.stories.mjs new file mode 100644 index 0000000000..692577d378 --- /dev/null +++ b/browser/components/storybook/stories/fxview-tab-list.stories.mjs @@ -0,0 +1,210 @@ +/* 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/. */ + +import { html } from "lit.all.mjs"; +// eslint-disable-next-line import/no-unassigned-import +import "browser/components/firefoxview/fxview-tab-list.mjs"; + +const DATE_TIME_FORMATS = { + relative: "relative", + dateTime: "dateTime", + date: "date", + time: "time", +}; + +export default { + title: "Domain-specific UI Widgets/Firefox View/Tab List", + component: "fxview-tab-list", + argTypes: { + dateTimeFormat: { + options: Object.keys(DATE_TIME_FORMATS), + mapping: DATE_TIME_FORMATS, + control: { type: "select" }, + }, + }, +}; + +const Template = ({ + listClass, + dateTimeFormat, + hasPopup, + maxTabsLength, + primaryAction, + secondaryAction, + tabItems, +}) => html` + <style> + main { + max-width: 750px; + } + fxview-tab-list.menu::part(secondary-button) { + background-image: url("chrome://global/skin/icons/more.svg"); + } + fxview-tab-list.dismiss::part(secondary-button) { + background-image: url("chrome://global/skin/icons/close.svg"); + } + :host panel-item::part(button) { + padding-inline-start: 12px; + cursor: pointer; + } + </style> + <main> + <fxview-tab-list + class=${listClass} + .hasPopup=${hasPopup} + .dateTimeFormat=${dateTimeFormat} + .maxTabsLength=${maxTabsLength} + .tabItems=${tabItems} + @fxview-tab-list-secondary-action=${secondaryAction} + @fxview-tab-list-primary-action=${primaryAction} + > + <panel-list slot="menu"> + <panel-item data-l10n-id="fxviewtabrow-delete"></panel-item> + <panel-item + data-l10n-id="fxviewtabrow-forget-about-this-site" + ></panel-item> + <hr /> + <panel-item data-l10n-id="fxviewtabrow-open-in-window"></panel-item> + <panel-item + data-l10n-id="fxviewtabrow-open-in-private-window" + ></panel-item> + <hr /> + <panel-item data-l10n-id="fxviewtabrow-add-bookmark"></panel-item> + <panel-item data-l10n-id="fxviewtabrow-save-to-pocket"></panel-item> + <panel-item data-l10n-id="fxviewtabrow-copy-link"></panel-item> + </panel-list> + </fxview-tab-list> + </main> +`; + +const MAX_TABS_LENGTH = 25; + +let secondaryAction = e => { + e.target.querySelector("panel-list").toggle(e.detail.originalEvent); +}; + +let primaryAction = e => { + // Open in new tab +}; + +const tabItems = [ + { + icon: "chrome://global/skin/icons/defaultFavicon.svg", + title: "Example Domain", + url: "example.net", + time: 1678141738136, + primaryL10nId: "fxviewtabrow-tabs-list-tab", + primaryL10nArgs: JSON.stringify({ targetURI: "example.net" }), + secondaryL10nId: "fxviewtabrow-open-menu-button", + }, + { + icon: "chrome://global/skin/icons/defaultFavicon.svg", + title: "Example Domain", + url: "example.org", + time: 1678141738136, + primaryL10nId: "fxviewtabrow-tabs-list-tab", + primaryL10nArgs: JSON.stringify({ targetURI: "example.org" }), + secondaryL10nId: "fxviewtabrow-open-menu-button", + }, + { + icon: "chrome://global/skin/icons/defaultFavicon.svg", + title: "Example Domain", + url: "example.com", + time: 1678141738136, + primaryL10nId: "fxviewtabrow-tabs-list-tab", + primaryL10nArgs: JSON.stringify({ targetURI: "example.com" }), + secondaryL10nId: "fxviewtabrow-open-menu-button", + }, +]; +const recentlyClosedItems = [ + { + icon: "chrome://global/skin/icons/defaultFavicon.svg", + title: "Example Domain", + url: "example.net", + tabid: 1, + time: 1678141738136, + primaryL10nId: "fxviewtabrow-tabs-list-tab", + primaryL10nArgs: JSON.stringify({ targetURI: "example.net" }), + secondaryL10nId: "fxviewtabrow-dismiss-tab-button", + secondaryL10nArgs: JSON.stringify({ + tabTitle: "Example Domain", + }), + }, + { + icon: "chrome://global/skin/icons/defaultFavicon.svg", + title: "Example Domain", + url: "example.org", + tabid: 2, + time: 1678141738136, + primaryL10nId: "fxviewtabrow-tabs-list-tab", + primaryL10nArgs: JSON.stringify({ targetURI: "example.net" }), + secondaryL10nId: "fxviewtabrow-dismiss-tab-button", + secondaryL10nArgs: JSON.stringify({ + tabTitle: "Example Domain", + }), + }, + { + icon: "chrome://global/skin/icons/defaultFavicon.svg", + title: "Example Domain", + url: "example.com", + tabid: 3, + time: 1678141738136, + primaryL10nId: "fxviewtabrow-tabs-list-tab", + primaryL10nArgs: JSON.stringify({ targetURI: "example.net" }), + secondaryL10nId: "fxviewtabrow-dismiss-tab-button", + secondaryL10nArgs: JSON.stringify({ + tabTitle: "Example Domain", + }), + }, +]; + +export const RelativeTime = Template.bind({}); +RelativeTime.args = { + listClass: "menu", + dateTimeFormat: "relative", + hasPopup: "menu", + maxTabsLength: MAX_TABS_LENGTH, + primaryAction, + secondaryAction, + tabItems, +}; +export const DateAndTime = Template.bind({}); +DateAndTime.args = { + listClass: "menu", + dateTimeFormat: "dateTime", + maxTabsLength: MAX_TABS_LENGTH, + primaryAction, + secondaryAction, + tabItems, +}; +export const DateOnly = Template.bind({}); +DateOnly.args = { + listClass: "menu", + dateTimeFormat: "date", + hasPopup: "menu", + maxTabsLength: MAX_TABS_LENGTH, + primaryAction, + secondaryAction, + tabItems, +}; +export const TimeOnly = Template.bind({}); +TimeOnly.args = { + listClass: "menu", + dateTimeFormat: "time", + hasPopup: "menu", + maxTabsLength: MAX_TABS_LENGTH, + primaryAction, + secondaryAction, + tabItems, +}; +export const RecentlyClosed = Template.bind({}); +RecentlyClosed.args = { + listClass: "dismiss", + dateTimeFormat: "relative", + hasPopup: null, + maxTabsLength: MAX_TABS_LENGTH, + primaryAction, + secondaryAction: () => {}, + tabItems: recentlyClosedItems, +}; |