docs(table-of-contents): add dynamic copy knobs (#7676)

### Related Ticket(s)

#5644

### Description

This PR updates the web components, React wrapper, and React storybook Table of Contents stories according to match the expected content described in #5644:

* only "Default" (vertical) and "Horizontal" stories remain
* "With heading content" knob in default story toggles a link list header instead of an image
* the number of items is limited from 4-8 and the copy can be customized. This does not work properly in the web components storybook UI so you will need to view the story in a separate tab. This will work in the React storybook after #7687 is merged

### Changelog

**New**

- dynamic content knobs (the table of contents component does not update when its child elements change though, need to view story in new tab for updates)
- "Horizontal" story in React
- "Default" story in React

**Changed**

- "Default" story in web components and react wrapper

**Removed**

- obsolete React stories
- "With heading content" stories in all storybooks

packages/react/src/components/LinkList/__stories__/LinkList.stories.js

@@ -239,7 +239,7 @@ EndOfSection.story = {
     knobs: {
       LinkList: ({ groupId }) => ({
         heading: text('Heading (heading):', 'Tutorials', groupId),
-        items: items,
+        items,
       }),
     },
     propsSet: {

packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js

@@ -5,34 +5,53 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { text, boolean } from '@storybook/addon-knobs';
-import DataContent from './data/DataContent';
-import Image from '../../Image/Image';
-import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg';
-import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--004.jpg';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import DataContent, { headings, LOREM } from './data/DataContent';
+import LinkList from '../../LinkList/LinkList';
 import React from 'react';
 import readme from '../README.stories.mdx';
 import styles from './TableOfContents.stories.scss';
 import TableOfContents from '../TableOfContents';
 
-const sources = [
-  {
-    src: imgLg4x3,
-    breakpoint: 400,
-  },
-  {
-    src: imgLg4x3,
-    breakpoint: 672,
-  },
-  {
-    src: imgLg1x1,
-    breakpoint: 1056,
-  },
-];
-
-const defaultSrc = imgLg1x1;
-const alt = 'Lorem Ipsum';
-const longDescription = 'Lorem Ipsum Dolor';
+export const Default = ({ parameters }) => {
+  const { numberOfItems: menuItems, withHeadingContent } =
+    parameters?.props?.Other ?? {};
+  const headingItems = [
+    {
+      type: 'local',
+      copy: 'DevOps',
+      cta: {
+        href: 'https://github.com/carbon-design-system/carbon-web-components',
+      },
+    },
+    {
+      type: 'local',
+      copy: 'Automation',
+      cta: {
+        href: 'https://github.com/carbon-design-system/carbon-web-components',
+      },
+    },
+    {
+      type: 'local',
+      copy: 'Development',
+      cta: {
+        href: 'https://github.com/carbon-design-system/carbon-web-components',
+      },
+    },
+  ];
+  const headingContent = (
+    <LinkList style="vertical" iconPlacement="left" items={headingItems} />
+  );
+  return (
+    <>
+      <TableOfContents
+        headingContent={withHeadingContent && headingContent}
+        menuRule={!!headingContent}>
+        <DataContent items={menuItems} />
+      </TableOfContents>
+    </>
+  );
+};
 
 export default {
   title: 'Components|Table of contents',
@@ -46,83 +65,50 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
-  },
-};
-
-export const ManuallyDefineMenuItems = ({ parameters }) => {
-  const { menuItems, menuLabel, menuRule, headingContent } =
-    parameters?.props?.TableOfContents ?? {};
-  const params = new URLSearchParams(window.location.search);
-  const themeParam = params.has('theme') ? params.get('theme') : null;
-  const theme =
-    themeParam ||
-    document.documentElement.getAttribute('storybook-carbon-theme') ||
-    'white';
-  return (
-    <TableOfContents
-      theme={theme}
-      menuItems={menuItems}
-      menuLabel={menuLabel}
-      menuRule={menuRule}
-      headingContent={headingContent}>
-      <DataContent />
-    </TableOfContents>
-  );
-};
-
-ManuallyDefineMenuItems.story = {
-  name: 'Manually define menu items',
-  parameters: {
     knobs: {
-      TableOfContents: ({ groupId }) => ({
-        menuLabel: text('Menu label (menuLabel)', 'Jump to', groupId),
-        menuRule: boolean('Optional Rule (menuRule)', false, groupId),
+      Other: ({ groupId }) => ({
+        withHeadingContent: boolean('With heading content', false, groupId),
+        numberOfItems: Array.from({
+          length: select('Number of items', [5, 6, 7, 8], 5, groupId),
+        }).map((_, i) => ({
+          heading: text(
+            `Section ${i + 1} heading`,
+            headings[i % headings.length],
+            groupId
+          ),
+          copy: text(
+            `Section ${i + 1} copy`,
+            `${LOREM}\n`.repeat(3).trim(),
+            groupId
+          ),
+        })),
       }),
     },
   },
 };
 
-export const DynamicItems = ({ parameters }) => (
-  <ManuallyDefineMenuItems parameters={parameters} />
+export const Horizontal = () => (
+  <p>
+    This component is maintained in{' '}
+    <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
+    <a
+      className="bx--link"
+      target="_blank"
+      href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-table-of-contents--horizontal">
+      React wrapper
+    </a>
+    .
+  </p>
 );
 
-DynamicItems.story = {
-  name: 'Dynamic items',
+Horizontal.story = {
+  name: 'Horizontal',
   parameters: {
-    knobs: {
-      TableOfContents: ({ groupId }) => ({
-        menuLabel: text('Menu label (menuLabel)', 'Jump to', groupId),
-      }),
-    },
-  },
-};
-
-export const WithHeadingContent = ({ parameters }) => (
-  <ManuallyDefineMenuItems parameters={parameters} />
-);
-
-WithHeadingContent.story = {
-  name: 'With heading content',
-  parameters: {
-    knobs: {
-      TableOfContents: ({ groupId }) => ({
-        menuLabel: text('Menu label (menuLabel)', 'Jump to', groupId),
-        menuRule: boolean('Optional Rule (menuRule)', false, groupId),
-        headingContent: (
-          <Image
-            sources={sources}
-            defaultSrc={defaultSrc}
-            alt={alt}
-            longDescription={longDescription}
-            style={{
-              height: '200px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          />
-        ),
-      }),
+    ...readme.parameters,
+    knobs: null,
+    percy: {
+      skip: true,
     },
+    proxy: true,
   },
 };