diff --git a/change/@fluentui-web-components-66ae5150-e0b3-4a9f-a60f-82d4d6fbf79c.json b/change/@fluentui-web-components-66ae5150-e0b3-4a9f-a60f-82d4d6fbf79c.json new file mode 100644 index 0000000000000..bf1bb4570e242 --- /dev/null +++ b/change/@fluentui-web-components-66ae5150-e0b3-4a9f-a60f-82d4d6fbf79c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "add sticker sheet page to storybook ", + "packageName": "@fluentui/web-components", + "email": "863023+radium-v@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/web-components/.storybook/docs-root.css b/packages/web-components/.storybook/docs-root.css index d19eb641a89c9..0588a43b0489f 100644 --- a/packages/web-components/.storybook/docs-root.css +++ b/packages/web-components/.storybook/docs-root.css @@ -64,7 +64,7 @@ border-top: 1px solid #ebebeb; } -#storybook-docs .sbdocs h2:not(.sbdocs-preview h2) { +#storybook-docs .sbdocs h2:not(.sbdocs-preview h2, .sticker-sheet h2) { font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; font-size: 24px; diff --git a/packages/web-components/src/_docs/developer/sticker-sheet.mdx b/packages/web-components/src/_docs/developer/sticker-sheet.mdx new file mode 100644 index 0000000000000..a2d81527d8d18 --- /dev/null +++ b/packages/web-components/src/_docs/developer/sticker-sheet.mdx @@ -0,0 +1,592 @@ +import React from 'react'; +import { Meta } from '@storybook/addon-docs/blocks'; +import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens'; + + + +# Sticker Sheet + +export const stickerSheetHTML = /* html */` + + +
+ + + Every Fluent UI Web Component on one page. Use the theme and direction toolbar controls to preview the whole library. + Overlay components like Dialog and Drawer render a trigger button; click it to open them. + + +
+ +
+ +

Accordion

+ +
+ + + Accordion header 1 + Accordion panel 1 + + + Accordion header 2 + Accordion panel 2 + + +
+
+ +
+ +

Anchor Button

+ +
+ + Primary + + Default + + Outline + + + Subtle + +
+
+ +
+ +

Avatar

+ +
+ + + + +
+
+ +
+ +

Badge

+ +
+ Filled + Ghost + Outline + Tint +
+
+ +
+ +

Button

+ +
+ Primary + Default + Outline + Subtle + Transparent + Disabled +
+
+ +
+ +

Checkbox

+ +
+ + + + + + + + + + + + +
+
+ +
+ +

Compound Button

+ +
+ + Primary + Secondary content + + + Default + Secondary content + +
+
+ +
+ +

Counter Badge

+ +
+ + + + +
+
+ +
+ +

Dialog

+ +
+ Open dialog + + + +

Dialog title

+ +
This is the body content of the dialog.
+ + Close + + + +
+
+ +
+ +

Divider

+ +
+ + + Text + +
+
+ +
+ +

Drawer

+ +
+ + Open drawer + + + +

Drawer title

+ + ✕ + +
+ This is the body content of the drawer. +
+ + +
+
+ +
+ +

Dropdown

+ +
+ + + Apple + Banana + Cherry + + +
+
+ +
+ +

Field

+ +
+ + + + Helper message + +
+
+ +
+ +

Image

+ +
+ + Placeholder + +
+
+ +
+ +

Label

+ +
+ Default + Semibold + Large + Required + Disabled +
+
+ +
+ +

Link

+ +
+ Standalone link + + Some + + inline link + + text. + +
+
+ +
+ +

Menu

+ +
+ + + Open menu + + + Menu item 1 + Menu item 2 + Menu item 3 + + +
+
+ +
+ +

Menu Button

+ +
+ Primary + Default + Outline +
+
+ +
+ +

Message Bar

+ +
+ This is an informational message. + This is a success message. + This is a warning message. + This is an error message. +
+
+ +
+ +

Progress Bar

+ +
+ + + +
+
+ +
+ +

Radio Group

+ +
+ + + + + + + + + + + + + + + + + +
+
+ +
+ +

Rating Display

+ +
+ + + +
+
+ +
+ +

Slider

+ +
+ + +
+
+ +
+ +

Spinner

+ +
+ + + + +
+
+ +
+ +

Switch

+ +
+ + + + + + + + +
+
+ +
+ +

Tabs

+ +
+ + First tab + Second tab + Third tab + +
+
+ +
+ +

Text

+ +
+ Default body text + Bold text + Italic text + Larger text +
+
+ +
+ +

Text Input

+ +
+ Label + + Outline + + + Disabled + +
+
+ +
+ +

Textarea

+ +
+ + + +
+
+ +
+ +

Toggle Button

+ +
+ Unpressed + Pressed + + Primary + +
+
+ +
+ +

Tooltip

+ +
+ Hover me + Tooltip content +
+
+ +
+ +

Tree

+ +
+ + + Item 1Item 1-1 + Item 1-2 + + Item 2 + +
+
+ +
+ +
+`; + +export const stickerThemes = { + 'web-light': webLightTheme, + 'web-dark': webDarkTheme, + 'teams-light': teamsLightTheme, + 'teams-dark': teamsDarkTheme, +}; + +export const StickerSheet = () => { + const containerRef = React.useRef(null); + React.useEffect(() => { + const applyGlobals = globals => { + const themeKey = globals?.theme || 'web-light'; + const dir = globals?.dir || 'ltr'; + window.Fluent?.setTheme(stickerThemes[themeKey] ?? webLightTheme); + containerRef.current?.setAttribute('dir', dir); + }; + // Storybook encodes the active globals in the URL (e.g. `globals=theme:web-dark`). + // Reading them on mount restores the selected theme after a page refresh, when the + // `globalsUpdated` event doesn't fire. + const parseGlobalsFromUrl = () => { + const search = (() => { + try { + if (window.location.search.includes('globals=')) { + return window.location.search; + } + if (window.parent && window.parent !== window) { + return window.parent.location.search; + } + } catch { + // Cross-origin parent access can throw; fall back to our own search. + } + return window.location.search; + })(); + const raw = new URLSearchParams(search).get('globals'); + if (!raw) { + return {}; + } + return Object.fromEntries( + raw + .split(/[;,]/) + .map(pair => pair.split(':')) + .filter(pair => pair.length === 2), + ); + }; + applyGlobals(parseGlobalsFromUrl()); + const channel = window.__STORYBOOK_ADDONS_CHANNEL__; + if (!channel) { + return undefined; + } + const handleGlobalsUpdated = ({ globals }) => applyGlobals(globals); + channel.on('globalsUpdated', handleGlobalsUpdated); + return () => channel.off('globalsUpdated', handleGlobalsUpdated); + }, []); + return
; +}; + +