@docusaurus/theme-classic 2.0.0-beta.18 → 2.0.0-beta.19

package/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>
+  );
+}

package/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;
+}

package/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}

package/src/theme/TOCItems/Tree.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 type {Props} from '@theme/TOCItems/Tree';
+
+// Recursive component rendering the toc tree
+function TOCItemTree({
+  toc,
+  className,
+  linkClassName,
+  isChild,
+}: Props): JSX.Element | null {
+  if (!toc.length) {
+    return null;
+  }
+  return (
+    <ul className={isChild ? undefined : className}>
+      {toc.map((heading) => (
+        <li key={heading.id}>
+          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+          <a
+            href={`#${heading.id}`}
+            className={linkClassName ?? undefined}
+            // Developer provided the HTML, so assume it's safe.
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{__html: heading.value}}
+          />
+          <TOCItemTree
+            isChild
+            toc={heading.children}
+            className={className}
+            linkClassName={linkClassName}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// Memo only the tree root is enough
+export default React.memo(TOCItemTree);

package/src/theme/TOCItems/index.tsx

@@ -7,53 +7,14 @@
 
 import React, {useMemo} from 'react';
 import type {Props} from '@theme/TOCItems';
+import TOCItemTree from '@theme/TOCItems/Tree';
 import {
   type TOCHighlightConfig,
-  type TOCTreeNode,
   useThemeConfig,
   useTOCHighlight,
   useFilteredAndTreeifiedTOC,
 } from '@docusaurus/theme-common';
 
-// Recursive component rendering the toc tree
-/* eslint-disable jsx-a11y/control-has-associated-label */
-function TOCItemList({
-  toc,
-  className,
-  linkClassName,
-  isChild,
-}: {
-  readonly toc: readonly TOCTreeNode[];
-  readonly className: string;
-  readonly linkClassName: string | null;
-  readonly isChild?: boolean;
-}): JSX.Element | null {
-  if (!toc.length) {
-    return null;
-  }
-  return (
-    <ul className={isChild ? undefined : className}>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          <a
-            href={`#${heading.id}`}
-            className={linkClassName ?? undefined}
-            // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{__html: heading.value}}
-          />
-          <TOCItemList
-            isChild
-            toc={heading.children}
-            className={className}
-            linkClassName={linkClassName}
-          />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
 export default function TOCItems({
   toc,
   className = 'table-of-contents table-of-contents__left-border',
@@ -90,7 +51,7 @@ export default function TOCItems({
   useTOCHighlight(tocHighlightConfig);
 
   return (
-    <TOCItemList
+    <TOCItemTree
       toc={tocTree}
       className={className}
       linkClassName={linkClassName}

package/src/theme/TabItem/index.tsx

@@ -7,6 +7,9 @@
 
 import React from 'react';
 import type {Props} from '@theme/TabItem';
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
 
 export default function TabItem({
   children,
@@ -14,7 +17,10 @@ export default function TabItem({
   className,
 }: Props): JSX.Element {
   return (
-    <div role="tabpanel" {...{hidden, className}}>
+    <div
+      role="tabpanel"
+      className={clsx(styles.tabItem, className)}
+      {...{hidden}}>
       {children}
     </div>
   );

package/src/theme/TabItem/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+.tabItem > *:last-child {
+  margin-bottom: 0;
+}

package/src/theme/Tabs/index.tsx

@@ -141,7 +141,7 @@ function TabsComponent(props: Props): JSX.Element {
   };
 
   return (
-    <div className="tabs-container">
+    <div className={clsx('tabs-container', styles.tabList)}>
       <ul
         role="tablist"
         aria-orientation="horizontal"
@@ -181,10 +181,10 @@ function TabsComponent(props: Props): JSX.Element {
           children.filter(
             (tabItem) => tabItem.props.value === selectedValue,
           )[0]!,
-          {className: 'margin-vert--md'},
+          {className: 'margin-top--md'},
         )
       ) : (
-        <div className="margin-vert--md">
+        <div className="margin-top--md">
           {children.map((tabItem, i) =>
             cloneElement(tabItem, {
               key: i,

package/src/theme/Tabs/styles.module.css

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
 .tabItem {
   margin-top: 0 !important;
 }

package/src/theme/Tag/index.tsx

@@ -12,9 +12,7 @@ import type {Props} from '@theme/Tag';
 
 import styles from './styles.module.css';
 
-export default function Tag(props: Props): JSX.Element {
-  const {permalink, name, count} = props;
-
+export default function Tag({permalink, label, count}: Props): JSX.Element {
   return (
     <Link
       href={permalink}
@@ -22,7 +20,7 @@ export default function Tag(props: Props): JSX.Element {
         styles.tag,
         count ? styles.tagWithCount : styles.tagRegular,
       )}>
-      {name}
+      {label}
       {count && <span>{count}</span>}
     </Link>
   );

package/src/theme/TagsListInline/index.tsx

@@ -26,7 +26,7 @@ export default function TagsListInline({tags}: Props): JSX.Element {
       <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
         {tags.map(({label, permalink: tagPermalink}) => (
           <li key={tagPermalink} className={styles.tag}>
-            <Tag name={label} permalink={tagPermalink} />
+            <Tag label={label} permalink={tagPermalink} />
           </li>
         ))}
       </ul>