diff options
Diffstat (limited to 'browser/components/storybook/stories')
4 files changed, 78 insertions, 118 deletions
diff --git a/browser/components/storybook/stories/button.stories.mjs b/browser/components/storybook/stories/button.stories.mjs index ad800c83ec..e64e73f356 100644 --- a/browser/components/storybook/stories/button.stories.mjs +++ b/browser/components/storybook/stories/button.stories.mjs @@ -14,6 +14,9 @@ export default { }, }, parameters: { + actions: { + handles: ["click"], + }, status: "stable", fluent: ` button-regular = Regular diff --git a/browser/components/storybook/stories/fxview-category-navigation.stories.mjs b/browser/components/storybook/stories/fxview-category-navigation.stories.mjs deleted file mode 100644 index 74a379a5a8..0000000000 --- a/browser/components/storybook/stories/fxview-category-navigation.stories.mjs +++ /dev/null @@ -1,113 +0,0 @@ -/* 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` - <style> - #page { - height: 100%; - display: grid; - grid-template-columns: var(--in-content-sidebar-width) 1fr; - } - fxview-category-navigation { - margin-inline-start: 10px; - } - fxview-category-button[name="category-one"]::part(icon) { - background-image: url("chrome://browser/skin/preferences/category-general.svg"); - } - fxview-category-button[name="category-two"]::part(icon) { - background-image: url("chrome://browser/skin/preferences/category-general.svg"); - } - fxview-category-button[name="category-three"]::part(icon) { - background-image: url("chrome://browser/skin/preferences/category-general.svg"); - } - .footer-button { - display: flex; - gap: 12px; - font-weight: normal; - min-width: unset; - padding: 8px; - margin: 0; - } - .footer-button .cat-icon { - background-image: url("chrome://browser/skin/preferences/category-general.svg"); - background-color: initial; - background-size: 20px; - background-repeat: no-repeat; - background-position: center; - height: 20px; - width: 20px; - display: inline-block; - -moz-context-properties: fill; - fill: currentColor; - } - @media (max-width: 52rem) { - #page { - grid-template-columns: 82px 1fr; - } - .cat-name { - display: none; - } - } - </style> - <div id="page"> - <fxview-category-navigation> - <h2 slot="category-nav-header">Header</h2> - <fxview-category-button - slot="category-button" - name="category-one" - data-l10n-id="fxview-category-button-one" - > - </fxview-category-button> - <fxview-category-button - slot="category-button" - name="category-two" - data-l10n-id="fxview-category-button-two" - > - </fxview-category-button> - <fxview-category-button - slot="category-button" - name="category-three" - data-l10n-id="fxview-category-button-three" - > - </fxview-category-button> - <div slot="category-nav-footer" class="category-nav-footer"> - <button class="footer-button ghost-button"> - <span class="cat-icon"></span> - <span - class="cat-name" - data-l10n-id="fxview-category-footer-button" - ></span> - </button> - </div> - </fxview-category-navigation> - </div> -`; - -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 index 9e6c59a89d..ae3d39d72a 100644 --- a/browser/components/storybook/stories/fxview-tab-list.stories.md +++ b/browser/components/storybook/stories/fxview-tab-list.stories.md @@ -28,7 +28,7 @@ And used as follows: With context menu: ```html <fxview-tab-list - class="with-context-menu" + secondaryActionClass="options-button" .dateTimeFormat=${"relative"} .hasPopup=${"menu"} .maxTabsLength=${this.maxTabsLength} @@ -80,7 +80,11 @@ You'll need to pass along some of the following properties: * `primaryL10nId` (**Optional**) - The l10n id to be used for the primary action element. This fluent string should ONLY define a `.title` attribute to describe the link element in each row. * `primaryL10nArgs` (**Optional**) - The l10n args you can optionally pass for the primary action element * `secondaryL10nId` (**Optional**) - The l10n id to be used for the secondary action button. This fluent string should ONLY define a `.title` attribute to describe the secondary button in each row. + * `tertiaryL10nId` (**Optional**) - The l10n id to be used for the tertiary action button. This fluent string should ONLY define a `.title` attribute to describe the secondary button in each row. * `secondaryL10nArgs` (**Optional**) - The l10n args you can optionally pass for the secondary action button + * `tertiaryL10nArgs` (**Optional**) - The l10n args you can optionally pass for the tertiary action button + * `secondaryActionClass` (**Optional**) - The class used to style the secondary action button. `options-button` or `dismiss-button` + * `tertiaryActionClass` (**Optional**) - The class used to style the tertiary action button. `options-button` or `dismiss-button` * `tabElement` (**Optional**) - The MozTabbrowserTab element for the tab item. * `sourceClosedId` (**Optional**) - The closedId of the closed window the tab is from if applicable. * `sourceWindowId` (**Optional**) - The SessionStore id of the window the tab is from if applicable. @@ -93,10 +97,12 @@ You'll need to pass along some of the following properties: ### Notes -* In order to keep this as generic as possible, the icon for the secondary action button will NOT have a default. You can supply a `class` attribute to an instance of `fxview-tab-list` in order to apply styles to things like the icon for the secondary action button. In the above example, I added a class `"with-context-menu"` to `fxview-tab-list`, so I can update the button's icon by using: +* In order to keep this as generic as possible, the icon for the secondary action button will NOT have a default. You can supply a `class` attribute to an instance of `fxview-tab-list` in order to apply styles to things like the icon for the secondary action button. In the above example, I added a `secondaryActionClass` `"options-button"` to `fxview-tab-list`, so I can update the button's icon by using: ```css - fxview-tab-list.with-context-menu::part(secondary-button) { - background-image: url("chrome://global/skin/icons/more.svg"); + .fxview-tab-row-button { + &.options-button { + background-image: url("chrome://global/skin/icons/more.svg"); + } } ``` * You'll also need to define functions for the `fxview-tab-list-primary-action` and `fxview-tab-list-secondary-action` listeners in order to add functionality to the primary element and the secondary button. diff --git a/browser/components/storybook/stories/migration-wizard.stories.mjs b/browser/components/storybook/stories/migration-wizard.stories.mjs index 64ce519a66..53d4698a7a 100644 --- a/browser/components/storybook/stories/migration-wizard.stories.mjs +++ b/browser/components/storybook/stories/migration-wizard.stories.mjs @@ -172,7 +172,27 @@ const FAKE_MIGRATOR_LIST = [ }, ]; -const Template = ({ state, dialogMode }) => html` +const Template = ({ + state, + dialogMode, + forceShowImportAll, + hideOptionExpanderSubtitle, + optionExpanderTitleString, + hideSelectAll, + importButtonString, + checkboxMarginInline, + checkboxMarginBlock, + importButtonClass, + selectionHeaderString, + selectionSubheaderString, + dataImportCompleteSuccessString, + headerFontSize, + headerMarginBlock, + headerFontWeight, + subheaderFontSize, + subheaderMarginBlock, + subheaderFontWeight, +}) => html` <style> @media (prefers-reduced-motion: no-preference) { migration-wizard::part(progress-spinner) { @@ -184,6 +204,23 @@ const Template = ({ state, dialogMode }) => html` <div class="card card-no-hover" style="width: fit-content"> <migration-wizard ?dialog-mode=${dialogMode} + ?force-show-import-all=${forceShowImportAll} + ?hide-option-expander-subtitle=${hideOptionExpanderSubtitle} + option-expander-title-string=${optionExpanderTitleString} + ?hide-select-all=${hideSelectAll} + import-button-string=${importButtonString} + import-button-class=${importButtonClass} + checkbox-margin-inline=${checkboxMarginInline} + checkbox-margin-block=${checkboxMarginBlock} + selection-header-string=${selectionHeaderString} + selection-subheader-string=${selectionSubheaderString} + data-import-complete-success-string=${dataImportCompleteSuccessString} + header-font-size=${headerFontSize} + header-margin-block=${headerMarginBlock} + header-font-weight=${headerFontWeight} + subheader-font-size=${subheaderFontSize} + subheader-margin-block=${subheaderMarginBlock} + subheader-font-weight=${subheaderFontWeight} .state=${state} ></migration-wizard> </div> @@ -217,6 +254,33 @@ MainSelectorVariant2.args = { }, }; +export const CustomizedSelectionPage = Template.bind({}); +CustomizedSelectionPage.args = { + dialogMode: true, + state: { + page: MigrationWizardConstants.PAGES.SELECTION, + migrators: FAKE_MIGRATOR_LIST, + showImportAll: true, + }, + forceShowImportAll: false, + hideOptionExpanderSubtitle: false, + hideSelectAll: false, + importButtonString: "Custom Button String", + checkboxMarginInline: "5px", + checkboxMarginBlock: "10px", + importButtonClass: "test-class", + optionExpanderTitleString: "Options", + selectionHeaderString: "Custom Header", + selectionSubheaderString: "Custom Subheader", + dataImportCompleteSuccessString: "Custom Data Import Success", + headerFontSize: "24px", + headerMarginBlock: "0 4px", + headerFontWeight: "590", + subheaderFontSize: "13px", + subheaderMarginBlock: "0 28px", + subheaderFontWeight: "400", +}; + export const NoPermissionMessage = Template.bind({}); NoPermissionMessage.args = { dialogMode: true, |