Storybook iframe update to match website design (microsoft#21270)

* add script to head

* unpkg link to iframe resizer

* update preview head

* create custom preview head template

* style updates

* Change files

* fix style imports and add iframe resize script

* update right rail

* logic tweak

* remove comment

* change to inline iframe code

* updated docs page layout styles

* fix code size bug

* fix code overflow

* add hosted checking

* fix typings

* move styles and code into root instance, cleanup suggestions from PR

* remove unused css file

* remove story max width

Author: micahgodbolt

.storybook/docs-root.css

@@ -1,6 +1,7 @@
 import { withFluentProvider, withStrictMode } from '@fluentui/react-storybook';
 import 'cypress-storybook/react';
 import * as dedent from 'dedent';
+import './docs-root.css';
 
 /** @type {NonNullable<import('@storybook/react').Story['decorators']>} */
 export const decorators = [withFluentProvider, withStrictMode];

.storybook/preview-head-template.html

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Custom styles for storybook to better align with public website",
+  "packageName": "@fluentui/react-components",
+  "email": "mgodbolt@microsoft.com",
+  "dependentChangeType": "none"
+}

.storybook/preview.js

@@ -2,9 +2,6 @@ import * as rootPreview from '../../../.storybook/preview';
 import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories';
 import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories';
 
-// load global styles
-import '../public/intro.css';
-
 /** @type {NonNullable<typeof rootPreview.parameters['options']>} */
 const options = {
   storySort: {

change/@fluentui-react-components-71c3ca7a-ee6c-4d19-930e-d220d456f3bf.json

@@ -3,6 +3,7 @@ import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
 import { FluentStoryContext, THEME_ID, themes } from '@fluentui/react-storybook-addon';
 import { FluentDocsHeader } from './FluentDocsHeader.stories';
 import { FluentProvider, webLightTheme } from '../index';
+import { isHosted } from './isHosted';
 
 interface FluentDocsContainerProps {
   context: FluentStoryContext & DocsContextProps;
@@ -13,12 +14,15 @@ interface FluentDocsContainerProps {
  */
 export const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {
   const selectedTheme = themes.find(theme => theme.id === context.globals[THEME_ID]);
-
+  const hosted = isHosted();
   return (
     <>
-      <FluentProvider theme={selectedTheme?.theme ?? webLightTheme}>
-        <FluentDocsHeader storybookGlobals={context.globals} />
-      </FluentProvider>
+      {!hosted && (
+        <FluentProvider theme={selectedTheme?.theme ?? webLightTheme}>
+          <FluentDocsHeader storybookGlobals={context.globals} />
+        </FluentProvider>
+      )}
+
       {/** TODO add table of contents */}
       <DocsContainer context={context}>{children}</DocsContainer>
     </>

packages/react-components/.storybook/preview.js

@@ -11,31 +11,43 @@ import {
   Stories,
 } from '@storybook/addon-docs';
 import { makeStyles, shorthands } from '@griffel/react';
-
 import { Toc, nameToHash } from './Toc.stories';
+import { isHosted } from './isHosted';
 
 const useStyles = makeStyles({
+  divider: {
+    height: '1px',
+    backgroundColor: '#e1dfdd',
+    ...shorthands.border('0px', 'none'),
+    ...shorthands.margin('48px', '0px'),
+  },
   wrapper: {
     display: 'flex',
-    flexWrap: 'wrap',
-    flexDirection: 'row-reverse',
-    justifyContent: 'flex-end',
     ...shorthands.gap('16px'),
   },
   toc: {
     flexBasis: '200px',
     flexShrink: 0,
+    [`@media screen and (max-width: 1000px)`]: {
+      display: 'none',
+    },
   },
   container: {
-    flexBasis: '700px',
     flexGrow: 1,
   },
+  // style overrides for when hosted in website
+  hosted: {
+    '& h1': {
+      marginTop: '-12px !important',
+    },
+  },
 });
 
 export const FluentDocsPage = () => {
   const context = React.useContext(DocsContext);
   const stories = context.storyStore.getStoriesForKind(context.kind);
   const primaryStory = stories[0];
+  const hosted = isHosted();
   const styles = useStyles();
   // DEBUG
   // console.log('FluentDocsPage', context);
@@ -50,24 +62,25 @@ export const FluentDocsPage = () => {
   // );
 
   return (
-    <>
+    <div className={hosted ? styles.hosted : ''}>
       <Title />
 
       <div className={styles.wrapper}>
-        <div className={styles.toc}>
-          <Toc stories={stories} />
-        </div>
         <div className={styles.container}>
           <Subtitle />
           <Description />
+          <hr className={styles.divider} />
           <HeaderMdx as="h3" id={nameToHash(primaryStory.name)}>
             {primaryStory.name}
           </HeaderMdx>
           <Primary />
           <ArgsTable story={PRIMARY_STORY} />
           <Stories />
         </div>
+        <div className={styles.toc}>
+          <Toc stories={stories} />
+        </div>
       </div>
-    </>
+    </div>
   );
 };

packages/react-components/public/intro.css

@@ -2,33 +2,65 @@ import * as React from 'react';
 import { PublishedStoreItem } from '@storybook/client-api';
 import { addons } from '@storybook/addons';
 import { NAVIGATE_URL } from '@storybook/core-events';
-import { makeStyles } from '../index';
+import { makeStyles, shorthands } from '../index';
 
 const useTocStyles = makeStyles({
   root: {
     top: '64px',
     position: 'sticky',
+    marginLeft: '40px',
   },
   heading: {
-    fontSize: '16px',
+    fontSize: '11px',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    marginBottom: '20px',
   },
   ol: {
+    position: 'relative',
     listStyleType: 'none',
     marginLeft: 0,
-    paddingInlineStart: '8px',
-
+    marginTop: 0,
+    paddingInlineStart: '20px',
+    '& li': {
+      marginBottom: '15px',
+      lineHeight: '16px',
+    },
     '& a': {
       textDecorationLine: 'none',
-      color: '#0078d4',
+      color: '#201F1E',
       fontSize: '14px',
-      lineHeight: '24px',
       ':hover': {
-        color: '#106EBE',
+        color: '#201F1E',
       },
     },
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      left: 0,
+      height: '100%',
+      width: '3px',
+      backgroundColor: '#EDEBE9',
+      ...shorthands.borderRadius('4px'),
+    },
+  },
+  selected: {
+    position: 'relative',
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      left: '-20px',
+      top: 0,
+      bottom: 0,
+      width: '3px',
+      backgroundColor: '#436DCD',
+      ...shorthands.borderRadius('4px'),
+    },
   },
 });
 
+type TocItem = PublishedStoreItem & { selected?: boolean };
+
 // // Alternative approach to navigate - rerenders the iframe
 // // Usage: selectStory({ story: s.name, kind: s.kind });
 // const selectStory = (story: { kind: string; story: string }) => {
@@ -37,26 +69,58 @@ const useTocStyles = makeStyles({
 // };
 
 const navigate = (url: string) => {
-  console.log('Navigate', url);
   addons.getChannel().emit(NAVIGATE_URL, url);
 };
 
 export const nameToHash = (id: string): string => id.toLowerCase().replace(/[^a-z0-9]/gi, '-');
 
-export const Toc = ({ stories }: { stories: PublishedStoreItem[] }) => {
+export const Toc = ({ stories }: { stories: TocItem[] }) => {
+  const [selected, setSelected] = React.useState('');
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries: IntersectionObserverEntry[]) => {
+        for (const entry of entries) {
+          const { intersectionRatio, target } = entry;
+          if (intersectionRatio > 0.5) {
+            setSelected(target.id);
+            return;
+          }
+        }
+      },
+      {
+        threshold: [0.5],
+      },
+    );
+
+    stories.forEach(link => {
+      const element = document.getElementById(nameToHash(link.name));
+      if (element) {
+        observer.observe(element);
+      }
+    });
+
+    return () => observer.disconnect();
+  }, [stories]);
+
+  const tocItems = stories.map(item => {
+    return { ...item, selected: nameToHash(item.name) === selected };
+  });
   const tocClasses = useTocStyles();
   return (
     <nav className={tocClasses.root}>
       <h3 className={tocClasses.heading}>On this page</h3>
       <ol className={tocClasses.ol}>
-        {stories.map(s => {
+        {tocItems.map(s => {
+          const name = nameToHash(s.name);
           return (
-            <li key={s.id}>
+            <li className={s.selected ? tocClasses.selected : ''} key={s.id}>
               <a
-                href={`#${nameToHash(s.name)}`}
+                href={`#${name}`}
                 target="_self"
                 onClick={e => {
-                  navigate(`#${nameToHash(s.name)}`);
+                  navigate(`#${name}`);
+                  setSelected(name);
                 }}
               >
                 {s.name}

packages/react-components/src/DocsComponents/FluentDocsContainer.stories.tsx

@@ -0,0 +1,10 @@
+// We are doing some conditional styling for when the storybook iframes are "hosted"
+// in the Fluent UI website. This utility checkes for a &hosted=true in the url Param
+
+const getURLParameter = (p: string) => {
+  const url = window.location.search.substring(1);
+  const searchParams = new URLSearchParams(url);
+  return searchParams.get(p);
+};
+
+export const isHosted = () => getURLParameter('hosted') === 'true';