From 10d7de0506571029ddb8046f50e109fd4893f08e Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 28 Oct 2020 22:57:02 +0900
Subject: [PATCH] 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.
---
 .../tableofcontents/_tableofcontents.scss     |  4 ++
 .../table-of-contents.stories.scss            |  8 +++
 .../__tests__/table-of-contents.steps.js      | 58 +++++++++++++++++++
 3 files changed, 70 insertions(+)
 create mode 100644 packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.steps.js

diff --git a/packages/styles/scss/components/tableofcontents/_tableofcontents.scss b/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
index 7bda4b638a3..5516841ad2c 100644
--- a/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
+++ b/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
@@ -159,6 +159,10 @@
 
     @include carbon--breakpoint('lg') {
       display: block;
+
+      &[hidden] {
+        display: none;
+      }
     }
   }
 
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 5666e999b47..f96d18690e2 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,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;
diff --git a/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.steps.js b/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.steps.js
new file mode 100644
index 00000000000..d82c097d509
--- /dev/null
+++ b/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' });
+      });
+    });
+  });
+});