From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../storybook/stories/button.stories.mjs | 79 +++++ .../stories/credential-management.stories.mjs | 45 +++ .../stories/fxview-category-navigation.stories.mjs | 113 +++++++ .../storybook/stories/fxview-tab-list.stories.md | 99 ++++++ .../storybook/stories/fxview-tab-list.stories.mjs | 210 +++++++++++++ .../storybook/stories/message-bar.stories.mjs | 48 +++ .../storybook/stories/migration-wizard.stories.mjs | 344 +++++++++++++++++++++ .../storybook/stories/named-deck.stories.mjs | 165 ++++++++++ .../storybook/stories/panel-list.stories.mjs | 133 ++++++++ 9 files changed, 1236 insertions(+) create mode 100644 browser/components/storybook/stories/button.stories.mjs create mode 100644 browser/components/storybook/stories/credential-management.stories.mjs create mode 100644 browser/components/storybook/stories/fxview-category-navigation.stories.mjs create mode 100644 browser/components/storybook/stories/fxview-tab-list.stories.md create mode 100644 browser/components/storybook/stories/fxview-tab-list.stories.mjs create mode 100644 browser/components/storybook/stories/message-bar.stories.mjs create mode 100644 browser/components/storybook/stories/migration-wizard.stories.mjs create mode 100644 browser/components/storybook/stories/named-deck.stories.mjs create mode 100644 browser/components/storybook/stories/panel-list.stories.mjs (limited to 'browser/components/storybook/stories') diff --git a/browser/components/storybook/stories/button.stories.mjs b/browser/components/storybook/stories/button.stories.mjs new file mode 100644 index 0000000000..5a6ec2cac5 --- /dev/null +++ b/browser/components/storybook/stories/button.stories.mjs @@ -0,0 +1,79 @@ +/* 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 { classMap, html } from "lit.all.mjs"; + +export default { + title: "UI Widgets/Button", + component: "button", + parameters: { + status: "stable", + fluent: ` +button-regular = Regular +button-primary = Primary +button-disabled = Disabled +button-danger = Danger + `, + }, +}; + +const Template = ({ + disabled, + primary, + l10nId, + ghostButton, + icon, + dangerButton, +}) => + html` + + + `; + +export const RegularButton = Template.bind({}); +RegularButton.args = { + l10nId: "button-regular", + primary: false, + disabled: false, +}; +export const PrimaryButton = Template.bind({}); +PrimaryButton.args = { + l10nId: "button-primary", + primary: true, + disabled: false, +}; +export const DisabledButton = Template.bind({}); +DisabledButton.args = { + l10nId: "button-disabled", + primary: false, + disabled: true, +}; + +export const DangerButton = Template.bind({}); +DangerButton.args = { + l10nId: "button-danger", + primary: true, + disabled: false, + dangerButton: true, +}; + +export const GhostIconButton = Template.bind({}); +GhostIconButton.args = { + icon: "chrome://browser/skin/login.svg", + disabled: false, + ghostButton: true, +}; diff --git a/browser/components/storybook/stories/credential-management.stories.mjs b/browser/components/storybook/stories/credential-management.stories.mjs new file mode 100644 index 0000000000..4632da5d02 --- /dev/null +++ b/browser/components/storybook/stories/credential-management.stories.mjs @@ -0,0 +1,45 @@ +/* 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"; +// Imported for side-effects. +// eslint-disable-next-line import/no-unassigned-import +import "../../aboutlogins/content/components/login-timeline.mjs"; + +export default { + title: "Domain-specific UI Widgets/Credential Management/Timeline", + component: "login-timeline", +}; + +window.MozXULElement.insertFTLIfNeeded("browser/aboutLogins.ftl"); + +const Template = ({ historyItems }) => + html` `; + +const ACTION_ID_CREATED = "login-item-timeline-action-created"; +const ACTION_ID_UPDATED = "login-item-timeline-action-updated"; +const ACTION_ID_USED = "login-item-timeline-action-used"; + +export const EmptyTimeline = Template.bind({}); +EmptyTimeline.args = { + historyItems: [], +}; + +export const TypicalTimeline = Template.bind({}); +TypicalTimeline.args = { + historyItems: [ + { actionId: ACTION_ID_CREATED, time: 1463526500267 }, + { actionId: ACTION_ID_UPDATED, time: 1653621219569 }, + { actionId: ACTION_ID_USED, time: 1561813190300 }, + ], +}; + +export const AllSameDayTimeline = Template.bind({}); +AllSameDayTimeline.args = { + historyItems: [ + { actionId: ACTION_ID_CREATED, time: 1463526500267 }, + { actionId: ACTION_ID_UPDATED, time: 1463526500267 }, + { actionId: ACTION_ID_USED, time: 1463526500267 }, + ], +}; diff --git a/browser/components/storybook/stories/fxview-category-navigation.stories.mjs b/browser/components/storybook/stories/fxview-category-navigation.stories.mjs new file mode 100644 index 0000000000..74a379a5a8 --- /dev/null +++ b/browser/components/storybook/stories/fxview-category-navigation.stories.mjs @@ -0,0 +1,113 @@ +/* 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-category-navigation.mjs"; + +export default { + title: "Domain-specific UI Widgets/Firefox View/Category Navigation", + component: "fxview-category-navigation", + parameters: { + status: "in-development", + actions: { + handles: ["change-category"], + }, + fluent: ` +fxview-category-button-one = Category 1 + .title = Category 1 +fxview-category-button-two = Category 2 + .title = Category 2 +fxview-category-button-three = Category 3 + .title = Category 3 +fxview-category-footer-button = Settings + .title = Settings + `, + }, +}; + +const Template = () => html` + +
+ +

Header

+ + + + + + +
+ +
+ +
+`; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/browser/components/storybook/stories/fxview-tab-list.stories.md b/browser/components/storybook/stories/fxview-tab-list.stories.md new file mode 100644 index 0000000000..f8317f5605 --- /dev/null +++ b/browser/components/storybook/stories/fxview-tab-list.stories.md @@ -0,0 +1,99 @@ +# FxviewTabList + +`fxview-tab-list` is a list of `fxview-tab-row` elements that display tab info such as: +* A link containing: + * Favicon + * Title + * Domain + * Time when tab was last accessed (can be formatted as `relative`, `date and time`, `date only`, and `time only`) +* Secondary action button + +## When to use + +* Use `fxview-tab-list` anywhere you want to display a list of tabs with the above info displayed. + +## Code + +The source for `fxview-tab-list` can be found under +[browser/components/firefoxview/fxview-tab-list](https://searchfox.org/mozilla-central/source/browser/components/firefoxview/fxview-tab-list.mjs). + +`fxview-tab-list` can be imported into `.html`/`.xhtml` files: + +```html + +``` + +And used as follows: + +With context menu: +```html + + + + + ... + + +``` +With dismiss button: +```html + +``` + +### Notes + +* You'll need to defines function for `this.onPrimaryAction` and `this.onSecondaryAction` in order to add functionality to the primary element and the secondary button +* You can also supply a `class` attribute to the instance on `fxview-tab-list` in order to apply styles to things like the icon for the secondary action button: +For example: +```css + fxview-tab-list.with-context-menu::part(secondary-button) { + background-image: url("chrome://global/skin/icons/more.svg"); + } +``` + +### Properties + +You'll need to pass along some of the following properties: +* `dateTimeFormat`: A string to indicate the expected format/options for the date and/or time displayed on each tab item in the list. The default for this if not given is `"relative"`. + * Options include: + * `relative` (Ex: "Just now", "2m ago", etc.) + * `date` (Ex: "4/1/23", "01/04/23", etc. - Will be formatted based on locale) + * `time` (Ex: "4:00 PM", "16:00", etc - Will be formatted based on locale) + * `dateTime` (Ex: "4/1/23 4:00PM", "01/04/23 16:00", etc. - Will be formatted based on locale) +* `hasPopup`: The optional aria-haspopup attribute for the secondary action, if required +* `maxTabsLength`: The max number of tabs you want to display in the tabs list. The default value will be `25` if no max value is given. +* `secondaryL10nId`: The l10n ID of the secondary action button +* `tabItems`: An array of tab data such as History nodes, Bookmark nodes, Synced Tabs, etc. + * The component is expecting to receive the following properties within each `tabItems` object (you may need to do some normalizing for this): + * `icon` - The location string for the favicon. Will fallback to default favicon if none is found. + * `primaryL10nId` - The l10n id to be used for the primary action element + * `primaryL10nArgs` - The l10n args you can optionally pass for the primary action element + * `secondaryL10nId` - The l10n id to be used for the secondary action button + * `secondaryL10nArgs` - The l10n args you can optionally pass for the secondary action button + * `tabid` - Optional property expected for Recently Closed tab data + * `time` - The time in milliseconds for expected last interaction with the tab (Ex: `lastUsed` for SyncedTabs tabs, `closedAt` for RecentlyClosed tabs, etc.) + * `title` - The title for the tab + * `url` - The full URL for the tab 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` + +
+ + + + +
+ + +
+ + + + + +
+`; + +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, +}; diff --git a/browser/components/storybook/stories/message-bar.stories.mjs b/browser/components/storybook/stories/message-bar.stories.mjs new file mode 100644 index 0000000000..a8a7b7ddc7 --- /dev/null +++ b/browser/components/storybook/stories/message-bar.stories.mjs @@ -0,0 +1,48 @@ +/* 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"; +// Imported for side-effects. +// eslint-disable-next-line import/no-unassigned-import +import "toolkit-widgets/message-bar.js"; + +const MESSAGE_TYPES = { + default: "", + success: "success", + error: "error", + warning: "warning", +}; + +export default { + title: "UI Widgets/Message Bar", + component: "message-bar", + argTypes: { + type: { + options: Object.keys(MESSAGE_TYPES), + mapping: MESSAGE_TYPES, + control: { type: "select" }, + }, + }, + parameters: { + status: "stable", + fluent: ` +message-bar-text = A very expressive and slightly whimsical message goes here. +message-bar-button = Click me, please! + `, + }, +}; + +const Template = ({ dismissable, type }) => + html` + + + + + `; + +export const Basic = Template.bind({}); +Basic.args = { type: "", dismissable: false }; + +export const Dismissable = Template.bind({}); +Dismissable.args = { type: "", dismissable: true }; diff --git a/browser/components/storybook/stories/migration-wizard.stories.mjs b/browser/components/storybook/stories/migration-wizard.stories.mjs new file mode 100644 index 0000000000..f525c44a33 --- /dev/null +++ b/browser/components/storybook/stories/migration-wizard.stories.mjs @@ -0,0 +1,344 @@ +/* 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/. */ + +// Imported for side-effects. +import { html } from "lit.all.mjs"; +// eslint-disable-next-line import/no-unassigned-import +import "toolkit-widgets/panel-list.js"; +// eslint-disable-next-line import/no-unassigned-import +import "browser/components/migration/content/migration-wizard.mjs"; +import { MigrationWizardConstants } from "chrome://browser/content/migration/migration-wizard-constants.mjs"; + +// Imported for side-effects. +// eslint-disable-next-line import/no-unassigned-import +import "toolkit-widgets/named-deck.js"; + +export default { + title: "Domain-specific UI Widgets/Migration Wizard", + component: "migration-wizard", +}; + +const FAKE_MIGRATOR_LIST = [ + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "chrome", + displayName: "Chrome", + resourceTypes: [ + "HISTORY", + "FORMDATA", + "PASSWORDS", + "BOOKMARKS", + "PAYMENT_METHODS", + ], + profile: { id: "Default", name: "Default" }, + brandImage: "chrome://browser/content/migration/brands/chrome.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "chrome", + displayName: "Chrome", + resourceTypes: [ + "HISTORY", + "FORMDATA", + "PASSWORDS", + "BOOKMARKS", + "PAYMENT_METHODS", + ], + profile: { id: "person-2", name: "Person 2" }, + brandImage: "chrome://browser/content/migration/brands/chrome.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "ie", + displayName: "Microsoft Internet Explorer", + resourceTypes: ["HISTORY", "BOOKMARKS"], + profile: null, + brandImage: "chrome://browser/content/migration/brands/ie.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "edge", + displayName: "Microsoft Edge Legacy", + resourceTypes: ["HISTORY", "FORMDATA", "PASSWORDS", "BOOKMARKS"], + profile: null, + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "chromium-edge", + displayName: "Microsoft Edge", + resourceTypes: [ + "HISTORY", + "FORMDATA", + "PASSWORDS", + "BOOKMARKS", + "PAYMENT_METHODS", + ], + profile: { id: "Default", name: "Default" }, + brandImage: "chrome://browser/content/migration/brands/edge.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "brave", + displayName: "Brave", + resourceTypes: [ + "HISTORY", + "FORMDATA", + "PASSWORDS", + "BOOKMARKS", + "PAYMENT_METHODS", + ], + profile: { id: "Default", name: "Default" }, + brandImage: "chrome://browser/content/migration/brands/brave.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "internal-testing", + displayName: "Internal Testing Migrator", + resourceTypes: ["HISTORY", "PASSWORDS", "BOOKMARKS"], + profile: null, + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "safari", + displayName: "Safari", + resourceTypes: ["HISTORY", "PASSWORDS", "BOOKMARKS"], + profile: null, + brandImage: "chrome://browser/content/migration/brands/safari.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "opera", + displayName: "Opera", + resourceTypes: ["HISTORY", "FORMDATA", "PASSWORDS", "BOOKMARKS"], + profile: { id: "Default", name: "Default" }, + brandImage: "chrome://browser/content/migration/brands/opera.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "opera-gx", + displayName: "Opera GX", + resourceTypes: ["HISTORY", "FORMDATA", "PASSWORDS", "BOOKMARKS"], + profile: { id: "Default", name: "Default" }, + brandImage: "chrome://browser/content/migration/brands/operagx.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "vivaldi", + displayName: "Vivaldi", + resourceTypes: ["HISTORY"], + profile: { id: "Default", name: "Default" }, + brandImage: "chrome://browser/content/migration/brands/vivaldi.png", + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.BROWSER, + key: "no-resources-browser", + displayName: "Browser with no resources", + resourceTypes: [], + profile: { id: "Default", name: "Default" }, + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.FILE, + key: "file-password-csv", + displayName: "Passwords from CSV file", + brandImage: "chrome://branding/content/document.ico", + resourceTypes: [], + }, + { + type: MigrationWizardConstants.MIGRATOR_TYPES.FILE, + key: "file-bookmarks", + displayName: "Bookmarks from file", + brandImage: "chrome://branding/content/document.ico", + resourceTypes: [], + }, +]; + +const Template = ({ state, dialogMode }) => html` + + +
+ + + +
+`; + +export const LoadingSkeleton = Template.bind({}); +LoadingSkeleton.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.LOADING, + }, +}; + +export const MainSelectorVariant1 = Template.bind({}); +MainSelectorVariant1.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.SELECTION, + migrators: FAKE_MIGRATOR_LIST, + showImportAll: false, + }, +}; + +export const MainSelectorVariant2 = Template.bind({}); +MainSelectorVariant2.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.SELECTION, + migrators: FAKE_MIGRATOR_LIST, + showImportAll: true, + }, +}; + +export const Progress = Template.bind({}); +Progress.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.PROGRESS, + key: "chrome", + progress: { + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.BOOKMARKS]: { + inProgress: true, + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PASSWORDS]: { + inProgress: true, + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.HISTORY]: { + inProgress: true, + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.FORMDATA]: { + inProgress: true, + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PAYMENT_METHODS]: { + inProgress: true, + }, + }, + }, +}; + +export const PartialProgress = Template.bind({}); +PartialProgress.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.PROGRESS, + key: "chrome", + progress: { + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.BOOKMARKS]: { + inProgress: true, + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PASSWORDS]: { + inProgress: false, + message: "14 logins and passwords", + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.HISTORY]: { + inProgress: true, + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.FORMDATA]: { + inProgress: false, + message: "Addresses, credit cards, form history", + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PAYMENT_METHODS]: { + inProgress: false, + message: "6 payment methods", + }, + }, + }, +}; + +export const Success = Template.bind({}); +Success.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.PROGRESS, + key: "chrome", + progress: { + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.BOOKMARKS]: { + inProgress: false, + message: "14 bookmarks", + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PASSWORDS]: { + inProgress: false, + message: "14 logins and passwords", + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.HISTORY]: { + inProgress: false, + message: "From the last 180 days", + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.FORMDATA]: { + inProgress: false, + message: "Addresses, credit cards, form history", + }, + [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PAYMENT_METHODS]: { + inProgress: false, + message: "6 payment methods", + }, + }, + }, +}; + +export const FileImportProgress = Template.bind({}); +FileImportProgress.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.FILE_IMPORT_PROGRESS, + title: "Importing Passwords", + progress: { + [MigrationWizardConstants.DISPLAYED_FILE_RESOURCE_TYPES + .PASSWORDS_FROM_FILE]: { + inProgress: true, + }, + }, + }, +}; + +export const FileImportSuccess = Template.bind({}); +FileImportSuccess.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.FILE_IMPORT_PROGRESS, + title: "Passwords Imported Successfully", + progress: { + [MigrationWizardConstants.DISPLAYED_FILE_RESOURCE_TYPES.PASSWORDS_NEW]: { + inProgress: false, + message: "2 added", + }, + [MigrationWizardConstants.DISPLAYED_FILE_RESOURCE_TYPES + .PASSWORDS_UPDATED]: { + inProgress: false, + message: "14 updated", + }, + }, + }, +}; + +export const SafariPermissions = Template.bind({}); +SafariPermissions.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.SAFARI_PERMISSION, + }, +}; + +export const SafariPasswordPermissions = Template.bind({}); +SafariPasswordPermissions.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.SAFARI_PASSWORD_PERMISSION, + }, +}; + +export const NoBrowsersFound = Template.bind({}); +NoBrowsersFound.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.NO_BROWSERS_FOUND, + hasFileMigrators: true, + }, +}; diff --git a/browser/components/storybook/stories/named-deck.stories.mjs b/browser/components/storybook/stories/named-deck.stories.mjs new file mode 100644 index 0000000000..21c9d62e3e --- /dev/null +++ b/browser/components/storybook/stories/named-deck.stories.mjs @@ -0,0 +1,165 @@ +/* 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"; +// Imported for side-effects. +// eslint-disable-next-line import/no-unassigned-import +import "toolkit-widgets/named-deck.js"; + +export default { + title: "UI Widgets/Named Deck", + component: "named-deck", + parameters: { + status: "stable", + fluent: ` +named-deck-tab-one = Tab 1 +named-deck-tab-two = Tab 2 +named-deck-tab-three = Tab 3 +named-deck-content-one = This is tab 1 +named-deck-content-two = This is tab 2 +named-deck-content-three = This is tab 3 +button-group-one = One +button-group-two = Two +button-group-three = Three +button-group-four = Four + `, + }, +}; + +export const Tabs = () => html` + + + + + + + +

+

+

+ + +
+ +

+ The dashed outline is added for emphasis here. It applies to the button with + the selected attribute, but matches the deck's + selected-view name. +

+ +

+ These tabs are a combination of button-group, + named-deck-button, and named-deck. +

+

+`; + +export const ListMenu = () => html` + + +
+ + + + + +
+
+ +

This is tab 1

+
+
+ +

This is tab 2

+
+
+ +

This is tab 3

+
+ + +
+ +

+ This is an alternate layout for creating a menu navigation. In this case, + the first view in the named-deck is the list view which + contains the named-deck-buttons to link to the other views. + Each view then includes a back named-deck-button which is used + to navigate back to the first view. +

+`; + +const FocusGroupTemplate = ({ orientation }) => html` + + + + + + + +

+ The button-group element will group focus to the buttons, + requiring left/right or up/down to switch focus between its child elements. + It accepts an orientation property, which determines if + left/right or up/down are used to change the focused button. +

+`; + +export const FocusGroup = FocusGroupTemplate.bind({}); +FocusGroup.args = { + orientation: "horizontal", +}; +FocusGroup.argTypes = { + orientation: { + options: ["horizontal", "vertical"], + control: { type: "radio" }, + }, +}; diff --git a/browser/components/storybook/stories/panel-list.stories.mjs b/browser/components/storybook/stories/panel-list.stories.mjs new file mode 100644 index 0000000000..af1678b1e7 --- /dev/null +++ b/browser/components/storybook/stories/panel-list.stories.mjs @@ -0,0 +1,133 @@ +/* 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-unassigned-import +import "toolkit-widgets/panel-list.js"; +import { html, ifDefined } from "lit.all.mjs"; + +export default { + title: "UI Widgets/Panel Menu", + component: "panel-list", + parameters: { + status: "stable", + actions: { + handles: ["click"], + }, + fluent: ` +panel-list-item-one = Item One +panel-list-item-two = Item Two (accesskey w) +panel-list-item-three = Item Three +panel-list-checked = Checked +panel-list-badged = Badged, look at me +panel-list-passwords = Passwords +panel-list-settings = Settings + `, + }, +}; + +const openMenu = e => { + e.target.getRootNode().querySelector("panel-list").toggle(e); +}; + +const Template = ({ isOpen, items, wideAnchor }) => + html` + + + + + + + ${items.map(i => + i == "
" + ? html`
` + : html` + + ` + )} + + `; + +export const Simple = Template.bind({}); +Simple.args = { + isOpen: false, + wideAnchor: false, + items: [ + "panel-list-item-one", + { l10nId: "panel-list-item-two", accesskey: "w" }, + "panel-list-item-three", + "
", + { l10nId: "panel-list-checked", checked: true }, + { l10nId: "panel-list-badged", badged: true, icon: "settings" }, + ], +}; + +export const Icons = Template.bind({}); +Icons.args = { + isOpen: false, + wideAnchor: false, + items: [ + { l10nId: "panel-list-passwords", icon: "passwords" }, + { l10nId: "panel-list-settings", icon: "settings" }, + ], +}; + +export const Open = Template.bind({}); +Open.args = { + ...Simple.args, + wideAnchor: false, + isOpen: true, +}; + +export const Wide = Template.bind({}); +Wide.args = { + ...Simple.args, + wideAnchor: true, +}; -- cgit v1.2.3