fix(web-components): storybook code display formatting (#32921)

packages/web-components/.storybook/preview.mjs

@@ -1,10 +1,14 @@
 import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
-import webcomponentsTheme from './theme.mjs';
+import * as prettier from 'prettier';
+import prettierPluginHTML from 'prettier/parser-html.js';
 import { setTheme } from '../src/theme/set-theme.js';
+import webcomponentsTheme from './theme.mjs';
 
 import '../src/index-rollup.js';
 import './docs-root.css';
 
+const FAST_EXPRESSION_COMMENTS = /<!--((fast-\w+)\{.*\}\2)?-->/g; // Matches comments that contain FAST expressions
+
 const themes = {
   'web-light': webLightTheme,
   'web-dark': webDarkTheme,
@@ -36,6 +40,31 @@ export const parameters = {
     },
   },
   docs: {
+    source: {
+      // To get around the inability to change Prettier options in the source addon, this transform function
+      // imports the standalone Prettier and uses it to format the source with the desired options.
+      transform(/** @type {string} */ src, /** @type {import('@storybook/html').StoryContext} */ storyContext) {
+        if (!src) {
+          const fragment = storyContext.originalStoryFn(storyContext.allArgs, storyContext);
+          if (!(fragment instanceof DocumentFragment) && !(fragment instanceof HTMLElement)) {
+            return;
+          }
+
+          const div = document.createElement('div');
+          div.append(fragment);
+          src = div.innerHTML;
+        }
+
+        src = src.replace(FAST_EXPRESSION_COMMENTS, ''); // remove comments
+        src = src.replace(/=""/g, ''); // remove values for boolean attributes
+        src = prettier.format(src, {
+          htmlWhitespaceSensitivity: 'ignore',
+          parser: 'html',
+          plugins: [prettierPluginHTML],
+        });
+        return src;
+      },
+    },
     theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme
   },
 };

packages/web-components/src/accordion-item/accordion-item.stories.ts

@@ -99,20 +99,18 @@ export default {
   },
 } as Meta<FluentAccordionItem>;
 
-export const Default: Story = {};
-
-export const AccordionItem: Story = {
+export const Default: Story = {
   args: {
     expanded: true,
     headinglevel: 2,
     headingSlottedContent: () => html`<span slot="heading">Description</span>`,
     slottedContent: () => html`
       <fluent-text>
         <p>
-          Chalk is a soft, white, porous, sedimentary carbonate rock, a form of limestone composed of the mineral
-          calcite. Calcite is an ionic salt called calcium carbonate or CaCO3. It forms under reasonably deep marine
-          conditions from the gradual accumulation of minute calcite shells shed from micro-organisms called
-          coccolithophores. Flint is very common as bands parallel to the bedding or as nodules embedded in chalk.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia bibendum metus, commodo dapibus erat.
+          Aliquam venenatis gravida malesuada. Maecenas ut porttitor justo, sed euismod ex. Suspendisse sodales enim
+          sem, in auctor risus aliquam ac. Cras ut velit lacinia diam varius fermentum. Sed sed augue tempus, rhoncus
+          neque vestibulum, placerat risus.
         </p>
       </fluent-text>
     `,