From b81cdf655c3340c2dffdd69f8c198cfd63a06e3c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 24 Nov 2017 11:19:34 +0100
Subject: [PATCH] Components: Extract TableOfContents as reusable component

---
 editor/components/index.js                           |  1 +
 .../table-of-contents/index.js                       |  3 ++-
 .../table-of-contents/style.scss                     | 12 ------------
 editor/edit-post/header/header-toolbar/index.js      |  3 +--
 editor/edit-post/header/header-toolbar/style.scss    | 12 ++++++++++++
 5 files changed, 16 insertions(+), 15 deletions(-)
 rename editor/{edit-post => components}/table-of-contents/index.js (95%)
 rename editor/{edit-post => components}/table-of-contents/style.scss (78%)

diff --git a/editor/components/index.js b/editor/components/index.js
index f0ce47164e71b..494f779f6d434 100644
--- a/editor/components/index.js
+++ b/editor/components/index.js
@@ -31,6 +31,7 @@ export { default as PostTitle } from './post-title';
 export { default as PostTrash } from './post-trash';
 export { default as PostVisibility } from './post-visibility';
 export { default as PostVisibilityLabel } from './post-visibility/label';
+export { default as TableOfContents } from './table-of-contents';
 export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
 
diff --git a/editor/edit-post/table-of-contents/index.js b/editor/components/table-of-contents/index.js
similarity index 95%
rename from editor/edit-post/table-of-contents/index.js
rename to editor/components/table-of-contents/index.js
index 7575850a6030e..4b70687bd264f 100644
--- a/editor/edit-post/table-of-contents/index.js
+++ b/editor/components/table-of-contents/index.js
@@ -14,7 +14,8 @@ import { Dropdown, IconButton } from '@wordpress/components';
  * Internal dependencies
  */
 import './style.scss';
-import { WordCount, DocumentOutline } from '../../components';
+import WordCount from '../word-count';
+import DocumentOutline from '../document-outline';
 import { getBlocks } from '../../selectors';
 import { selectBlock } from '../../actions';
 
diff --git a/editor/edit-post/table-of-contents/style.scss b/editor/components/table-of-contents/style.scss
similarity index 78%
rename from editor/edit-post/table-of-contents/style.scss
rename to editor/components/table-of-contents/style.scss
index c5d3dc630e416..75a2322c03997 100644
--- a/editor/edit-post/table-of-contents/style.scss
+++ b/editor/components/table-of-contents/style.scss
@@ -1,15 +1,3 @@
-.table-of-contents {
-	display: none;
-
-	.is-sidebar-opened & {
-		right: $sidebar-width + 16px;
-	}
-
-	@include break-small() {
-		display: block;
-	}
-}
-
 .table-of-contents__popover .components-popover__content {
 	padding: 16px;
 }
diff --git a/editor/edit-post/header/header-toolbar/index.js b/editor/edit-post/header/header-toolbar/index.js
index 8727fc8a4c0fb..b4db0193746a5 100644
--- a/editor/edit-post/header/header-toolbar/index.js
+++ b/editor/edit-post/header/header-toolbar/index.js
@@ -13,10 +13,9 @@ import { IconButton } from '@wordpress/components';
  * Internal dependencies
  */
 import './style.scss';
-import { Inserter, BlockToolbar } from '../../../components';
+import { Inserter, BlockToolbar, TableOfContents } from '../../../components';
 import BlockSwitcher from '../../../components/block-switcher';
 import NavigableToolbar from '../../../components/navigable-toolbar';
-import TableOfContents from '../../table-of-contents';
 import { getMultiSelectedBlockUids, hasEditorUndo, hasEditorRedo, isFeatureActive } from '../../../selectors';
 
 function HeaderToolbar( { hasUndo, hasRedo, hasFixedToolbar, undo, redo, isMultiBlockSelection, selectedBlockUids } ) {
diff --git a/editor/edit-post/header/header-toolbar/style.scss b/editor/edit-post/header/header-toolbar/style.scss
index 8871404510c5e..0654e3ab25778 100644
--- a/editor/edit-post/header/header-toolbar/style.scss
+++ b/editor/edit-post/header/header-toolbar/style.scss
@@ -52,3 +52,15 @@
 		}
 	}
 }
+
+.editor-header-toolbar .table-of-contents {
+	display: none;
+
+	.is-sidebar-opened & {
+		right: $sidebar-width + 16px;
+	}
+
+	@include break-small() {
+		display: block;
+	}
+}