fix(table-of-contents): fix header space (#4298)

### Related Ticket(s)

Refs #4262.

### Description

This change ensures the area for the heading content is hidden unless there is its content actually.

### Changelog

**New**

- UI integration test for below change.

**Changed**

- A change to ensure the area for the heading content is hidden unless there is its content actually.

packages/styles/scss/components/tableofcontents/_tableofcontents.scss

@@ -159,6 +159,10 @@
 
     @include carbon--breakpoint('lg') {
       display: block;
+
+      &[hidden] {
+        display: none;
+      }
     }
   }
 

packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss

@@ -8,7 +8,15 @@
 @import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors';
 @import 'carbon-components/scss/globals/scss/typography';
 
+.dds-ce-demo-devenv--container {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .dds-ce-demo--table-of-contents {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
   a[name] {
     display: block;
     color: $text-01;

packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.steps.js

@@ -0,0 +1,58 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+
+describe('dds-table-of-contents', () => {
+  describe('With wide screen', () => {
+    describe('Without heading content', function() {
+      beforeEach(async () => {
+        await page.setViewportSize({ width: 1280, height: 720 });
+        await page.goto(`http://localhost:${process.env.PORT}/iframe.html?id=components-table-of-contents--default`);
+      });
+
+      it('should hide the heading container unless it has its content', async () => {
+        await expect(page).toHaveSelector('dds-table-of-contents .bx--tableofcontents__desktop__children', { state: 'hidden' });
+      });
+    });
+
+    describe('With heading content', () => {
+      beforeEach(async () => {
+        await page.setViewportSize({ width: 1280, height: 720 });
+        await page.goto(`http://localhost:${process.env.PORT}/iframe.html?id=components-table-of-contents--with-heading-content`);
+      });
+
+      it('should show the heading container', async () => {
+        await expect(page).toHaveSelector('dds-table-of-contents .bx--tableofcontents__desktop__children', { state: 'visible' });
+      });
+    });
+  });
+
+  describe('With narrow screen', () => {
+    describe('Without heading content', function() {
+      beforeEach(async () => {
+        await page.setViewportSize({ width: 672, height: 720 });
+        await page.goto(`http://localhost:${process.env.PORT}/iframe.html?id=components-table-of-contents--default`);
+      });
+
+      it('should hide the heading container unless it has its content', async () => {
+        await expect(page).toHaveSelector('dds-table-of-contents .bx--tableofcontents__children__mobile', { state: 'hidden' });
+      });
+    });
+
+    describe('With heading content', () => {
+      beforeEach(async () => {
+        await page.setViewportSize({ width: 672, height: 720 });
+        await page.goto(`http://localhost:${process.env.PORT}/iframe.html?id=components-table-of-contents--with-heading-content`);
+      });
+
+      it('should show the heading container', async () => {
+        await expect(page).toHaveSelector('dds-table-of-contents .bx--tableofcontents__children__mobile', { state: 'visible' });
+      });
+    });
+  });
+});