From d5ad20a94da8f5d200919fcbe6192428e6922c9b Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Mon, 12 Oct 2020 23:11:41 +0900
Subject: [PATCH 1/2] fix(table-of-contents): support dark theme

Refs #4214.
---
 .../__snapshots__/storyshots.test.js.snap     | 213 ++----------------
 .../__stories__/TableOfContents.stories.js    |  10 +-
 .../__stories__/TableOfContents.stories.scss  |  19 ++
 .../__stories__/data/DataContent.js           |  36 +--
 .../tableofcontents/_tableofcontents.scss     |   1 +
 .../table-of-contents.stories.scss            |   2 +-
 6 files changed, 58 insertions(+), 223 deletions(-)
 create mode 100644 packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index 9f62c8fcb08..0246277333a 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -96636,6 +96636,7 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
     data-floating-menu-container=""
     role="main"
   >
+    <style />
     <ManuallyDefineMenuItems
       parameters={
         Object {
@@ -96813,20 +96814,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
                         <a
                           data-title="Cras molestie condimentum"
                           name="8"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Cras molestie condimentum
                           </h3>
                         </a>
@@ -96842,20 +96831,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
                         <a
                           data-title="Praesent fermentum sodales"
                           name="7"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Praesent fermentum sodales
                           </h3>
                         </a>
@@ -96871,20 +96848,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
                         <a
                           data-title="Nulla tristique lacinia"
                           name="2"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Nulla tristique lacinia
                           </h3>
                         </a>
@@ -96900,20 +96865,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
                         <a
                           data-title="Morbi id nibh metus"
                           name="3"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Morbi id nibh metus
                           </h3>
                         </a>
@@ -96929,20 +96882,8 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
                         <a
                           data-title="Integer non scelerisque"
                           name="14"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Integer non scelerisque
                           </h3>
                         </a>
@@ -96982,6 +96923,7 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
     data-floating-menu-container=""
     role="main"
   >
+    <style />
     <TableOfContents
       menuItems={null}
       menuLabel="Jump to"
@@ -97136,20 +97078,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
                       <a
                         data-title="Cras molestie condimentum"
                         name="8"
-                        style={
-                          Object {
-                            "color": "#000",
-                          }
-                        }
                       >
-                        <h3
-                          style={
-                            Object {
-                              "paddingBottom": "1rem",
-                              "paddingTop": "2rem",
-                            }
-                          }
-                        >
+                        <h3>
                           Cras molestie condimentum
                         </h3>
                       </a>
@@ -97165,20 +97095,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
                       <a
                         data-title="Praesent fermentum sodales"
                         name="7"
-                        style={
-                          Object {
-                            "color": "#000",
-                          }
-                        }
                       >
-                        <h3
-                          style={
-                            Object {
-                              "paddingBottom": "1rem",
-                              "paddingTop": "2rem",
-                            }
-                          }
-                        >
+                        <h3>
                           Praesent fermentum sodales
                         </h3>
                       </a>
@@ -97194,20 +97112,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
                       <a
                         data-title="Nulla tristique lacinia"
                         name="2"
-                        style={
-                          Object {
-                            "color": "#000",
-                          }
-                        }
                       >
-                        <h3
-                          style={
-                            Object {
-                              "paddingBottom": "1rem",
-                              "paddingTop": "2rem",
-                            }
-                          }
-                        >
+                        <h3>
                           Nulla tristique lacinia
                         </h3>
                       </a>
@@ -97223,20 +97129,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
                       <a
                         data-title="Morbi id nibh metus"
                         name="3"
-                        style={
-                          Object {
-                            "color": "#000",
-                          }
-                        }
                       >
-                        <h3
-                          style={
-                            Object {
-                              "paddingBottom": "1rem",
-                              "paddingTop": "2rem",
-                            }
-                          }
-                        >
+                        <h3>
                           Morbi id nibh metus
                         </h3>
                       </a>
@@ -97252,20 +97146,8 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
                       <a
                         data-title="Integer non scelerisque"
                         name="14"
-                        style={
-                          Object {
-                            "color": "#000",
-                          }
-                        }
                       >
-                        <h3
-                          style={
-                            Object {
-                              "paddingBottom": "1rem",
-                              "paddingTop": "2rem",
-                            }
-                          }
-                        >
+                        <h3>
                           Integer non scelerisque
                         </h3>
                       </a>
@@ -97304,6 +97186,7 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
     data-floating-menu-container=""
     role="main"
   >
+    <style />
     <ManuallyDefineMenuItems
       parameters={
         Object {
@@ -97711,20 +97594,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
                         <a
                           data-title="Cras molestie condimentum"
                           name="8"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Cras molestie condimentum
                           </h3>
                         </a>
@@ -97740,20 +97611,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
                         <a
                           data-title="Praesent fermentum sodales"
                           name="7"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Praesent fermentum sodales
                           </h3>
                         </a>
@@ -97769,20 +97628,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
                         <a
                           data-title="Nulla tristique lacinia"
                           name="2"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Nulla tristique lacinia
                           </h3>
                         </a>
@@ -97798,20 +97645,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
                         <a
                           data-title="Morbi id nibh metus"
                           name="3"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Morbi id nibh metus
                           </h3>
                         </a>
@@ -97827,20 +97662,8 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
                         <a
                           data-title="Integer non scelerisque"
                           name="14"
-                          style={
-                            Object {
-                              "color": "#000",
-                            }
-                          }
                         >
-                          <h3
-                            style={
-                              Object {
-                                "paddingBottom": "1rem",
-                                "paddingTop": "2rem",
-                              }
-                            }
-                          >
+                          <h3>
                             Integer non scelerisque
                           </h3>
                         </a>
diff --git a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
index 4e8242c625b..b361c3ab960 100644
--- a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
+++ b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
@@ -10,6 +10,7 @@ import DataContent from './data/DataContent';
 import Image from '../../Image/Image';
 import React from 'react';
 import readme from '../README.stories.mdx';
+import styles from './TableOfContents.stories.scss';
 import TableOfContents from '../TableOfContents';
 
 const sources = [
@@ -33,7 +34,14 @@ const longDescription = 'Lorem Ipsum Dolor';
 
 export default {
   title: 'Components|Table of Contents',
-
+  decorators: [
+    story => (
+      <>
+        <style>{styles.cssText}</style>
+        {story()}
+      </>
+    ),
+  ],
   parameters: {
     ...readme.parameters,
   },
diff --git a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss
new file mode 100644
index 00000000000..61f2a1c08fc
--- /dev/null
+++ b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss
@@ -0,0 +1,19 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors';
+@import 'carbon-components/scss/globals/scss/typography';
+
+a[name] {
+  display: block;
+  color: $text-01;
+}
+
+h3 {
+  padding-top: rem(16px);
+  padding-bottom: rem(32px);
+}
diff --git a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js b/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
index e32c3518351..330dce857b9 100644
--- a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
+++ b/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
@@ -9,13 +9,8 @@
 import React from 'react';
 const DataContent = () => (
   <div>
-    <a
-      data-title="Cras molestie condimentum"
-      name="8"
-      style={{ color: '#000' }}>
-      <h3 style={{ paddingBottom: '1rem', paddingTop: '2rem' }}>
-        Cras molestie condimentum
-      </h3>
+    <a data-title="Cras molestie condimentum" name="8">
+      <h3>Cras molestie condimentum</h3>
     </a>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
@@ -53,13 +48,8 @@ const DataContent = () => (
       vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
       pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
     </p>
-    <a
-      data-title="Praesent fermentum sodales"
-      name="7"
-      style={{ color: '#000' }}>
-      <h3 style={{ paddingBottom: '1rem', paddingTop: '2rem' }}>
-        Praesent fermentum sodales
-      </h3>
+    <a data-title="Praesent fermentum sodales" name="7">
+      <h3>Praesent fermentum sodales</h3>
     </a>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
@@ -97,10 +87,8 @@ const DataContent = () => (
       vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
       pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
     </p>
-    <a data-title="Nulla tristique lacinia" name="2" style={{ color: '#000' }}>
-      <h3 style={{ paddingBottom: '1rem', paddingTop: '2rem' }}>
-        Nulla tristique lacinia
-      </h3>
+    <a data-title="Nulla tristique lacinia" name="2">
+      <h3>Nulla tristique lacinia</h3>
     </a>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
@@ -138,10 +126,8 @@ const DataContent = () => (
       vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
       pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
     </p>
-    <a data-title="Morbi id nibh metus" name="3" style={{ color: '#000' }}>
-      <h3 style={{ paddingBottom: '1rem', paddingTop: '2rem' }}>
-        Morbi id nibh metus
-      </h3>
+    <a data-title="Morbi id nibh metus" name="3">
+      <h3>Morbi id nibh metus</h3>
     </a>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
@@ -179,10 +165,8 @@ const DataContent = () => (
       vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
       pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
     </p>
-    <a data-title="Integer non scelerisque" name="14" style={{ color: '#000' }}>
-      <h3 style={{ paddingBottom: '1rem', paddingTop: '2rem' }}>
-        Integer non scelerisque
-      </h3>
+    <a data-title="Integer non scelerisque" name="14">
+      <h3>Integer non scelerisque</h3>
     </a>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
diff --git a/packages/styles/scss/components/tableofcontents/_tableofcontents.scss b/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
index 2d760828ad8..7bda4b638a3 100644
--- a/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
+++ b/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
@@ -90,6 +90,7 @@
     border-radius: 0;
     border: none;
     background-color: transparent;
+    color: $text-01;
     height: carbon--rem(48px);
     appearance: none;
     @include carbon--type-style(body-short-02);
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
index 72c8e33d1bb..61f2a1c08fc 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
+++ b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
@@ -10,7 +10,7 @@
 
 a[name] {
   display: block;
-  color: $carbon--black-100;
+  color: $text-01;
 }
 
 h3 {

From a8cb6524546dde549db2b407ca9123d5f4baafe2 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Fri, 16 Oct 2020 10:50:07 +0900
Subject: [PATCH 2/2] chore(devenv): scope style

---
 .../__snapshots__/storyshots.test.js.snap     |  12 +-
 .../__stories__/TableOfContents.stories.scss  |  16 +-
 .../__stories__/data/DataContent.js           |   2 +-
 .../table-of-contents/__stories__/content.ts  | 307 +++++++++---------
 .../table-of-contents.stories.scss            |  16 +-
 5 files changed, 190 insertions(+), 163 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index 0246277333a..bd5b87d5f0f 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -96810,7 +96810,9 @@ exports[`Storyshots Components|Table of Contents Dynamic Items 1`] = `
                     className="bx--tableofcontents__content-wrapper"
                   >
                     <DataContent>
-                      <div>
+                      <div
+                        className="dds-react-demo--table-of-contents"
+                      >
                         <a
                           data-title="Cras molestie condimentum"
                           name="8"
@@ -97074,7 +97076,9 @@ exports[`Storyshots Components|Table of Contents Manually define Menu Items 1`]
                   className="bx--tableofcontents__content-wrapper"
                 >
                   <DataContent>
-                    <div>
+                    <div
+                      className="dds-react-demo--table-of-contents"
+                    >
                       <a
                         data-title="Cras molestie condimentum"
                         name="8"
@@ -97590,7 +97594,9 @@ exports[`Storyshots Components|Table of Contents With Heading Content 1`] = `
                       </Image>
                     </div>
                     <DataContent>
-                      <div>
+                      <div
+                        className="dds-react-demo--table-of-contents"
+                      >
                         <a
                           data-title="Cras molestie condimentum"
                           name="8"
diff --git a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss
index 61f2a1c08fc..00742c473d3 100644
--- a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss
+++ b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss
@@ -8,12 +8,14 @@
 @import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors';
 @import 'carbon-components/scss/globals/scss/typography';
 
-a[name] {
-  display: block;
-  color: $text-01;
-}
+.dds-react-demo--table-of-contents {
+  a[name] {
+    display: block;
+    color: $text-01;
+  }
 
-h3 {
-  padding-top: rem(16px);
-  padding-bottom: rem(32px);
+  h3 {
+    padding-top: rem(16px);
+    padding-bottom: rem(32px);
+  }
 }
diff --git a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js b/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
index 330dce857b9..2b744e41b32 100644
--- a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
+++ b/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
@@ -8,7 +8,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 const DataContent = () => (
-  <div>
+  <div className="dds-react-demo--table-of-contents">
     <a data-title="Cras molestie condimentum" name="8">
       <h3>Cras molestie condimentum</h3>
     </a>
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/content.ts b/packages/web-components/src/components/table-of-contents/__stories__/content.ts
index 34de1f6dab9..95339e58f7a 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/content.ts
+++ b/packages/web-components/src/components/table-of-contents/__stories__/content.ts
@@ -10,151 +10,168 @@
 import { html } from 'lit-element';
 
 const content = () => html`
-  <a name="8">
-    <h3>
-      Cras molestie condimentum
-    </h3>
-  </a>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <a name="7">
-    <h3>
-      Praesent fermentum sodales
-    </h3>
-  </a>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <a name="2">
-    <h3>
-      Nulla tristique lacinia
-    </h3>
-  </a>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <a name="3">
-    <h3>
-      Morbi id nibh metus
-    </h3>
-  </a>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <a name="14">
-    <h3>
-      Integer non scelerisque
-    </h3>
-  </a>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit,
-    at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat
-    efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a
-    efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci
-    luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue.
-    Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-  </p>
+  <div class="dds-ce-demo--table-of-contents">
+    <a name="8">
+      <h3>
+        Cras molestie condimentum
+      </h3>
+    </a>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <a name="7">
+      <h3>
+        Praesent fermentum sodales
+      </h3>
+    </a>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <a name="2">
+      <h3>
+        Nulla tristique lacinia
+      </h3>
+    </a>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <a name="3">
+      <h3>
+        Morbi id nibh metus
+      </h3>
+    </a>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <a name="14">
+      <h3>
+        Integer non scelerisque
+      </h3>
+    </a>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
+      elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
+      volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
+      Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
+      faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
+      vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+      nisl.
+    </p>
+  </div>
 `;
 
 export default content;
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
index 61f2a1c08fc..5666e999b47 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
+++ b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
@@ -8,12 +8,14 @@
 @import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors';
 @import 'carbon-components/scss/globals/scss/typography';
 
-a[name] {
-  display: block;
-  color: $text-01;
-}
+.dds-ce-demo--table-of-contents {
+  a[name] {
+    display: block;
+    color: $text-01;
+  }
 
-h3 {
-  padding-top: rem(16px);
-  padding-bottom: rem(32px);
+  h3 {
+    padding-top: rem(16px);
+    padding-bottom: rem(32px);
+  }
 }