diff options
Diffstat (limited to 'browser/components/storybook/.storybook')
6 files changed, 45 insertions, 9 deletions
diff --git a/browser/components/storybook/.storybook/addon-fluent/preset/manager.mjs b/browser/components/storybook/.storybook/addon-fluent/preset/manager.mjs index 29b57812bd..51f1f49fa5 100644 --- a/browser/components/storybook/.storybook/addon-fluent/preset/manager.mjs +++ b/browser/components/storybook/.storybook/addon-fluent/preset/manager.mjs @@ -10,7 +10,7 @@ import { PseudoLocalizationButton } from "../PseudoLocalizationButton.jsx"; import { FluentPanel } from "../FluentPanel.jsx"; // Register the addon. -addons.register(ADDON_ID, api => { +addons.register(ADDON_ID, () => { // Register the tool. addons.add(TOOL_ID, { type: types.TOOL, diff --git a/browser/components/storybook/.storybook/main.js b/browser/components/storybook/.storybook/main.js index 5791d1e492..0a5a55b851 100644 --- a/browser/components/storybook/.storybook/main.js +++ b/browser/components/storybook/.storybook/main.js @@ -13,17 +13,24 @@ const projectRoot = path.resolve(__dirname, "../../../../"); module.exports = { // The ordering for this stories array affects the order that they are displayed in Storybook stories: [ + // Show the Storybook document first in the list + // so that navigating to firefoxux.github.io/firefox-desktop-components/ + // lands on the Storybook.stories.md file + "../**/README.storybook.stories.md", // Docs section "../**/README.*.stories.md", // UI Widgets section `${projectRoot}/toolkit/content/widgets/**/*.stories.@(js|jsx|mjs|ts|tsx|md)`, // about:logins components stories `${projectRoot}/browser/components/aboutlogins/content/components/**/*.stories.mjs`, + // Reader View components stories + `${projectRoot}/toolkit/components/reader/**/*.stories.mjs`, // Everything else "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx|md)", // Design system files `${projectRoot}/toolkit/themes/shared/design-system/**/*.stories.@(js|jsx|mjs|ts|tsx|md)`, ], + staticDirs: [`${projectRoot}/toolkit/themes/shared/design-system/docs/`], addons: [ "@storybook/addon-links", { @@ -50,7 +57,7 @@ module.exports = { }; return [...existingIndexers, customIndexer]; }, - webpackFinal: async (config, { configType }) => { + webpackFinal: async config => { // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook. diff --git a/browser/components/storybook/.storybook/manager-head.html b/browser/components/storybook/.storybook/manager-head.html new file mode 100644 index 0000000000..380828d40b --- /dev/null +++ b/browser/components/storybook/.storybook/manager-head.html @@ -0,0 +1,22 @@ +<!-- 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/. --> + +<link + rel="stylesheet" + href="chrome://global/skin/design-system/tokens-brand.css" +/> + +<style> + /* light-dark doesn't work here, using media queries */ + @media (prefers-color-scheme: light) { + iframe { + background-color: var(--color-white) !important; + } + } + @media (prefers-color-scheme: dark) { + iframe { + background-color: var(--color-gray-90) !important; + } + } +</style> diff --git a/browser/components/storybook/.storybook/markdown-story-utils.js b/browser/components/storybook/.storybook/markdown-story-utils.js index 1cc78164ad..5926c5593c 100644 --- a/browser/components/storybook/.storybook/markdown-story-utils.js +++ b/browser/components/storybook/.storybook/markdown-story-utils.js @@ -121,19 +121,21 @@ function getStoryTitle(resourcePath) { * @returns Path used to import a component into a story. */ function getImportPath(resourcePath) { + // We need to normalize the path for this logic to work cross-platform. + let normalizedPath = resourcePath.split(path.sep).join("/"); // Limiting this to toolkit widgets for now since we don't have any // interactive examples in other docs stories. - if (!resourcePath.includes("toolkit/content/widgets")) { + if (!normalizedPath.includes("toolkit/content/widgets")) { return ""; } - let componentName = getComponentName(resourcePath); + let componentName = getComponentName(normalizedPath); let fileExtension = ""; if (componentName) { - let mjsPath = resourcePath.replace( + let mjsPath = normalizedPath.replace( "README.stories.md", `${componentName}.mjs` ); - let jsPath = resourcePath.replace( + let jsPath = normalizedPath.replace( "README.stories.md", `${componentName}.js` ); diff --git a/browser/components/storybook/.storybook/preview-head.html b/browser/components/storybook/.storybook/preview-head.html index 206972e714..ae9d8fdf5a 100644 --- a/browser/components/storybook/.storybook/preview-head.html +++ b/browser/components/storybook/.storybook/preview-head.html @@ -37,8 +37,12 @@ } /* Ensure WithCommonStyles can grow to fit the page */ - #root-inner { - height: 100vh; + html, + body, + #root, + #root-inner, + #storybook-root { + height: 100%; } /* Docs stories are being given unnecessary height, possibly because we diff --git a/browser/components/storybook/.storybook/preview.mjs b/browser/components/storybook/.storybook/preview.mjs index 4e0f3f407d..ec7fd42151 100644 --- a/browser/components/storybook/.storybook/preview.mjs +++ b/browser/components/storybook/.storybook/preview.mjs @@ -54,7 +54,7 @@ class WithCommonStyles extends MozLitElement { font: message-box; font-size: var(--font-size-root); appearance: none; - background-color: var(--color-canvas); + background-color: var(--background-color-canvas); color: var(--text-color); -moz-box-layout: flex; } @@ -113,6 +113,7 @@ export default { title: "On this page", }, }, + options: { showPanel: true }, }, }; |