feat(ui): Ability to hide TOC in Storybook (#30261)

* feat(ui): Ability to hide TOC in Storybook

Adding a Storybook parameter called `hideToc` that can be specified in the `<Meta />` tag.

.storybook/preview.tsx

@@ -47,6 +47,8 @@ const withThemeDocs: DecoratorFn = ({children, context}) => {
     context.globals.backgrounds = {value: currentTheme.bodyBackground};
   }
 
+  const {hideToc} = context.parameters;
+
   return (
     <Fragment>
       <DocsContainer context={context}>
@@ -55,7 +57,7 @@ const withThemeDocs: DecoratorFn = ({children, context}) => {
         <ThemeProvider theme={currentTheme}>{children}</ThemeProvider>
       </DocsContainer>
       <ThemeProvider theme={currentTheme}>
-        <TableOfContents />
+        <TableOfContents hidden={!!hideToc} />
       </ThemeProvider>
     </Fragment>
   );

docs-ui/components/tableOfContents.tsx

@@ -57,35 +57,50 @@ const Heading = styled('p')`
   margin-bottom: ${space(1)};
 `;
 
-const TableOfContents = () => {
+type Props = {
+  /**
+   * When true, show empty container. We still want the container
+   * (as opposed to showing nothing at all) because it affects the
+   * page layout and we want to preserve the layout across pages.
+   */
+  hidden: boolean;
+};
+
+const TableOfContents = ({hidden}: Props) => {
   useEffect(() => {
-    /** Initialize Tocbot
+    /**
+     * Initialize Tocbot if it's not hidden
      * https://tscanlin.github.io/tocbot/
-     * */
-    tocbot.init({
-      tocSelector: '.toc-wrapper',
-      contentSelector: '.sbdocs-content',
-      headingSelector: 'h2',
-      headingsOffset: 40,
-      scrollSmoothOffset: -40,
-      /** Ignore headings that did not
-       * come from the main markdown code.
-       * */
-      ignoreSelector: ':not(.sbdocs), .hide-from-toc',
-      orderedList: false,
-      /** Prevent default linking behavior,
-       * leaving only the smooth scrolling.
-       *  */
-      onClick: () => false,
-    });
-  });
+     */
+    !hidden &&
+      tocbot.init({
+        tocSelector: '.toc-wrapper',
+        contentSelector: '.sbdocs-content',
+        headingSelector: 'h2',
+        headingsOffset: 40,
+        scrollSmoothOffset: -40,
+        /**
+         * Ignore headings that did not
+         * come from the main markdown code.
+         */
+        ignoreSelector: ':not(.sbdocs), .hide-from-toc',
+        orderedList: false,
+        /**
+         * Prevent default linking behavior,
+         * leaving only the smooth scrolling.
+         */
+        onClick: () => false,
+      });
+  }, [hidden]);
 
   return (
     <Container>
-      <Content>
-        <Heading>Contents</Heading>
-        <div className="toc-wrapper" />
-      </Content>
+      {!hidden && (
+        <Content>
+          <Heading>Contents</Heading>
+          <div className="toc-wrapper" />
+        </Content>
+      )}
     </Container>
   );
 };