From 4f79ac4e52bb139a1150d2026dc999d43615bcf7 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 29 Apr 2022 19:13:03 +0200
Subject: [PATCH] refactor TOCCollapsible

---
 .../src/theme-classic.d.ts                    | 12 +++++++
 ...s.module.css => CollapseButton.module.css} | 23 +-----------
 .../theme/TOCCollapsible/CollapseButton.tsx   | 35 +++++++++++++++++++
 .../src/theme/TOCCollapsible/index.module.css | 31 ++++++++++++++++
 .../src/theme/TOCCollapsible/index.tsx        | 17 ++-------
 5 files changed, 82 insertions(+), 36 deletions(-)
 rename packages/docusaurus-theme-classic/src/theme/TOCCollapsible/{styles.module.css => CollapseButton.module.css} (59%)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.tsx
 create mode 100644 packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.module.css

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index e5ce93a5c023..04bda1f92521 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -1114,6 +1114,18 @@ declare module '@theme/TOCCollapsible' {
   export default function TOCCollapsible(props: Props): JSX.Element;
 }
 
+declare module '@theme/TOCCollapsible/CollapseButton' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'button'> {
+    collapsed: boolean;
+  }
+
+  export default function TOCCollapsibleCollapseButton(
+    props: Props,
+  ): JSX.Element;
+}
+
 declare module '@theme/ColorModeToggle' {
   import type {ColorMode} from '@docusaurus/theme-common';
 
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.module.css
similarity index 59%
rename from packages/docusaurus-theme-classic/src/theme/TOCCollapsible/styles.module.css
rename to packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.module.css
index ed77b71fbe3c..71ea57745703 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.module.css
@@ -5,12 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.tocCollapsible {
-  background-color: var(--ifm-menu-color-background-active);
-  border-radius: var(--ifm-global-radius);
-  margin: 1rem 0;
-}
-
 .tocCollapsibleButton {
   font-size: inherit;
   display: flex;
@@ -30,21 +24,6 @@
   transition: transform var(--ifm-transition-fast);
 }
 
-.tocCollapsibleContent > ul {
-  border-left: none;
-  border-top: 1px solid var(--ifm-color-emphasis-300);
-  padding: 0.2rem 0;
-  font-size: 15px;
-}
-
-.tocCollapsibleContent ul li {
-  margin: 0.4rem 0.8rem;
-}
-
-.tocCollapsibleContent a {
-  display: block;
-}
-
-.tocCollapsibleExpanded .tocCollapsibleButton::after {
+.tocCollapsibleButtonExpanded::after {
   transform: none;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.tsx b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.tsx
new file mode 100644
index 000000000000..48eeb3afdb19
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/CollapseButton.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import styles from './CollapseButton.module.css';
+import type {Props} from '@theme/TOCCollapsible/CollapseButton';
+
+export default function TOCCollapsibleCollapseButton({
+  collapsed,
+  ...props
+}: Props): JSX.Element {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx(
+        'clean-btn',
+        styles.tocCollapsibleButton,
+        !collapsed && styles.tocCollapsibleButtonExpanded,
+        props.className,
+      )}>
+      <Translate
+        id="theme.TOCCollapsible.toggleButtonLabel"
+        description="The label used by the button on the collapsible TOC component">
+        On this page
+      </Translate>
+    </button>
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.module.css b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.module.css
new file mode 100644
index 000000000000..371bd8b38c0d
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.module.css
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tocCollapsible {
+  background-color: var(--ifm-menu-color-background-active);
+  border-radius: var(--ifm-global-radius);
+  margin: 1rem 0;
+}
+
+.tocCollapsibleContent > ul {
+  border-left: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  padding: 0.2rem 0;
+  font-size: 15px;
+}
+
+.tocCollapsibleContent ul li {
+  margin: 0.4rem 0.8rem;
+}
+
+.tocCollapsibleContent a {
+  display: block;
+}
+
+.tocCollapsibleExpanded {
+  transform: none;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx
index 115dc112ca42..de818634329c 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx
@@ -7,11 +7,11 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import Translate from '@docusaurus/Translate';
 import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
-import styles from './styles.module.css';
+import styles from './index.module.css';
 import TOCItems from '@theme/TOCItems';
 import type {Props} from '@theme/TOCCollapsible';
+import CollapseButton from '@theme/TOCCollapsible/CollapseButton';
 
 export default function TOCCollapsible({
   toc,
@@ -22,7 +22,6 @@ export default function TOCCollapsible({
   const {collapsed, toggleCollapsed} = useCollapsible({
     initialState: true,
   });
-
   return (
     <div
       className={clsx(
@@ -30,17 +29,7 @@ export default function TOCCollapsible({
         !collapsed && styles.tocCollapsibleExpanded,
         className,
       )}>
-      <button
-        type="button"
-        className={clsx('clean-btn', styles.tocCollapsibleButton)}
-        onClick={toggleCollapsed}>
-        <Translate
-          id="theme.TOCCollapsible.toggleButtonLabel"
-          description="The label used by the button on the collapsible TOC component">
-          On this page
-        </Translate>
-      </button>
-
+      <CollapseButton collapsed={collapsed} onClick={toggleCollapsed} />
       <Collapsible
         lazy
         className={styles.tocCollapsibleContent}