@docusaurus/theme-classic 0.0.0-4707 → 0.0.0-4710

package/lib/getSwizzleConfig.js

@@ -40,12 +40,60 @@ function getSwizzleConfig() {
       },
       Footer: {
         actions: {
-          eject: 'unsafe',
-          // TODO split footer into smaller parts
+          eject: 'safe',
           wrap: 'safe'
         },
         description: "The footer component of you site's layout"
       },
+      'Footer/Copyright': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer copyright'
+      },
+      'Footer/Layout': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer main layout component'
+      },
+      'Footer/LinkItem': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer link item component'
+      },
+      'Footer/Links': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer component rendering the footer links'
+      },
+      'Footer/Links/MultiColumn': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer component rendering the footer links with a multi-column layout'
+      },
+      'Footer/Links/Simple': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer component rendering the footer links with a simple layout (single row)'
+      },
+      'Footer/Logo': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer logo'
+      },
       IconArrow: {
         actions: {
           eject: 'safe',

package/lib/theme-classic.d.ts

@@ -205,7 +205,7 @@ declare module '@theme/DocSidebar/Desktop/Content' {
     readonly sidebar: readonly PropSidebarItem[];
   }
 
-  export default function CollapseButton(props: Props): JSX.Element;
+  export default function Content(props: Props): JSX.Element;
 }
 
 declare module '@theme/DocSidebar/Desktop/CollapseButton' {
@@ -280,6 +280,77 @@ declare module '@theme/Footer' {
   export default function Footer(): JSX.Element | null;
 }
 
+declare module '@theme/Footer/Logo' {
+  import type {FooterLogo} from '@docusaurus/theme-common';
+
+  export interface Props {
+    logo: FooterLogo;
+  }
+
+  export default function FooterLogo(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Copyright' {
+  export interface Props {
+    copyright: string;
+  }
+
+  export default function FooterCopyright(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/LinkItem' {
+  import type {FooterLinkItem} from '@docusaurus/theme-common';
+
+  export interface Props {
+    item: FooterLinkItem;
+  }
+
+  export default function FooterLinkItem(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Layout' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    style: 'light' | 'dark';
+    links: ReactNode;
+    logo: ReactNode;
+    copyright: ReactNode;
+  }
+
+  export default function FooterLayout(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links' {
+  import type {Footer} from '@docusaurus/theme-common';
+
+  export interface Props {
+    links: Footer['links'];
+  }
+
+  export default function FooterLinks(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links/MultiColumn' {
+  import type {MultiColumnFooter} from '@docusaurus/theme-common';
+
+  export interface Props {
+    columns: MultiColumnFooter['links'];
+  }
+
+  export default function FooterLinksMultiColumn(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links/Simple' {
+  import type {SimpleFooter} from '@docusaurus/theme-common';
+
+  export interface Props {
+    links: SimpleFooter['links'];
+  }
+
+  export default function FooterLinksSimple(props: Props): JSX.Element;
+}
+
 declare module '@theme/Heading' {
   import type {ComponentProps} from 'react';
 

package/lib-next/theme/Footer/Copyright/index.js

@@ -0,0 +1,18 @@
+/**
+ * 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';
+export default function FooterCopyright({copyright}) {
+  return (
+    <div
+      className="footer__copyright" // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: copyright,
+      }}
+    />
+  );
+}

package/lib-next/theme/Footer/Layout/index.js

@@ -0,0 +1,26 @@
+/**
+ * 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';
+export default function FooterLayout({style, links, logo, copyright}) {
+  return (
+    <footer
+      className={clsx('footer', {
+        'footer--dark': style === 'dark',
+      })}>
+      <div className="container container-fluid">
+        {links}
+        {(logo || copyright) && (
+          <div className="footer__bottom text--center">
+            {logo && <div className="margin-bottom--sm">{logo}</div>}
+            {copyright}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}

package/lib-next/theme/Footer/LinkItem/index.js

@@ -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 Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/IconExternalLink';
+export default function FooterLinkItem({item}) {
+  const {to, href, label, prependBaseUrlToHref, ...props} = item;
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, {
+    forcePrependBaseUrl: true,
+  });
+  return (
+    <Link
+      className="footer__link-item"
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}>
+      <span>
+        {label}
+        {href && !isInternalUrl(href) && <IconExternalLink />}
+      </span>
+    </Link>
+  );
+}

package/lib-next/theme/Footer/Links/MultiColumn/index.js

@@ -0,0 +1,47 @@
+/**
+ * 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 LinkItem from '@theme/Footer/LinkItem';
+
+function ColumnLinkItem({item}) {
+  return item.html ? (
+    <li
+      className="footer__item" // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: item.html,
+      }}
+    />
+  ) : (
+    <li key={item.href || item.to} className="footer__item">
+      <LinkItem item={item} />
+    </li>
+  );
+}
+
+function Column({column}) {
+  return (
+    <div className="col footer__col">
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function FooterLinksMultiColumn({columns}) {
+  return (
+    <div className="row footer__links">
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

package/lib-next/theme/Footer/Links/Simple/index.js

@@ -0,0 +1,41 @@
+/**
+ * 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 LinkItem from '@theme/Footer/LinkItem';
+
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+
+function SimpleLinkItem({item}) {
+  return item.html ? (
+    <span
+      className="footer__link-item" // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: item.html,
+      }}
+    />
+  ) : (
+    <LinkItem item={item} />
+  );
+}
+
+export default function FooterLinksSimple({links}) {
+  return (
+    <div className="footer__links text--center">
+      <div className="footer__links">
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {links.length !== i + 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

package/lib-next/theme/Footer/Links/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+export default function FooterLinks({links}) {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}

package/lib-next/theme/Footer/Logo/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
+
+function LogoImage({logo}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  return (
+    <ThemedImage
+      className="footer__logo"
+      alt={logo.alt}
+      sources={sources}
+      width={logo.width}
+      height={logo.height}
+    />
+  );
+}
+
+export default function FooterLogo({logo}) {
+  return logo.href ? (
+    <Link href={logo.href} className={styles.footerLogoLink}>
+      <LogoImage logo={logo} />
+    </Link>
+  ) : (
+    <LogoImage logo={logo} />
+  );
+}

package/lib-next/theme/Footer/index.js

@@ -5,130 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
 import {useThemeConfig} from '@docusaurus/theme-common';
-import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import styles from './styles.module.css';
-import ThemedImage from '@theme/ThemedImage';
-import IconExternalLink from '@theme/IconExternalLink';
-
-function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
-  const toUrl = useBaseUrl(to);
-  const normalizedHref = useBaseUrl(href, {
-    forcePrependBaseUrl: true,
-  });
-  return (
-    <Link
-      className="footer__link-item"
-      {...(href
-        ? {
-            href: prependBaseUrlToHref ? normalizedHref : href,
-          }
-        : {
-            to: toUrl,
-          })}
-      {...props}>
-      <span>
-        {label}
-        {href && !isInternalUrl(href) && <IconExternalLink />}
-      </span>
-    </Link>
-  );
-}
-
-function FooterLogo({logo}) {
-  const {withBaseUrl} = useBaseUrlUtils();
-
-  if (!logo?.src) {
-    return null;
-  }
-
-  const sources = {
-    light: withBaseUrl(logo.src),
-    dark: withBaseUrl(logo.srcDark ?? logo.src),
-  };
-  const image = (
-    <ThemedImage
-      className="footer__logo"
-      alt={logo.alt}
-      sources={sources}
-      width={logo.width}
-      height={logo.height}
-    />
-  );
-  return (
-    <div className="margin-bottom--sm">
-      {logo.href ? (
-        <Link href={logo.href} className={styles.footerLogoLink}>
-          {image}
-        </Link>
-      ) : (
-        image
-      )}
-    </div>
-  );
-}
-
-function MultiColumnLinks({links}) {
-  return (
-    <>
-      {links.map((linkItem, i) => (
-        <div key={i} className="col footer__col">
-          <div className="footer__title">{linkItem.title}</div>
-          <ul className="footer__items">
-            {linkItem.items.map((item, key) =>
-              item.html ? (
-                <li
-                  key={key}
-                  className="footer__item" // Developer provided the HTML, so assume it's safe.
-                  // eslint-disable-next-line react/no-danger
-                  dangerouslySetInnerHTML={{
-                    __html: item.html,
-                  }}
-                />
-              ) : (
-                <li key={item.href || item.to} className="footer__item">
-                  <FooterLink {...item} />
-                </li>
-              ),
-            )}
-          </ul>
-        </div>
-      ))}
-    </>
-  );
-}
-
-function SimpleLinks({links}) {
-  return (
-    <div className="footer__links">
-      {links.map((item, key) => (
-        <React.Fragment key={key}>
-          {item.html ? (
-            <span
-              className="footer__link-item" // Developer provided the HTML, so assume it's safe.
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: item.html,
-              }}
-            />
-          ) : (
-            <FooterLink {...item} />
-          )}
-          {links.length !== key + 1 && (
-            <span className="footer__link-separator">·</span>
-          )}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-}
-
-function isMultiColumnFooterLinks(links) {
-  return 'title' in links[0];
-}
+import FooterLinks from '@theme/Footer/Links';
+import FooterLogo from '@theme/Footer/Logo';
+import FooterCopyright from '@theme/Footer/Copyright';
+import FooterLayout from '@theme/Footer/Layout';
 
 function Footer() {
   const {footer} = useThemeConfig();
@@ -137,40 +18,14 @@ function Footer() {
     return null;
   }
 
-  const {copyright, links, logo} = footer;
+  const {copyright, links, logo, style} = footer;
   return (
-    <footer
-      className={clsx('footer', {
-        'footer--dark': footer.style === 'dark',
-      })}>
-      <div className="container container-fluid">
-        {links &&
-          links.length > 0 &&
-          (isMultiColumnFooterLinks(links) ? (
-            <div className="row footer__links">
-              <MultiColumnLinks links={links} />
-            </div>
-          ) : (
-            <div className="footer__links text--center">
-              <SimpleLinks links={links} />
-            </div>
-          ))}
-        {(logo || copyright) && (
-          <div className="footer__bottom text--center">
-            <FooterLogo logo={logo} />
-            {copyright && (
-              <div
-                className="footer__copyright" // Developer provided the HTML, so assume it's safe.
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{
-                  __html: copyright,
-                }}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </footer>
+    <FooterLayout
+      style={style}
+      links={links && links.length > 0 && <FooterLinks links={links} />}
+      logo={logo && <FooterLogo logo={logo} />}
+      copyright={copyright && <FooterCopyright copyright={copyright} />}
+    />
   );
 }
 

package/lib-next/theme/MDXComponents/index.js

@@ -45,7 +45,7 @@ const MDXComponents = {
     const shouldBeInline = React.Children.toArray(props.children).every(
       (el) =>
         (typeof el === 'string' && !el.includes('\n')) ||
-        (React.isValidElement(el) && inlineElements.includes(el.props.mdxType)),
+        (isValidElement(el) && inlineElements.includes(el.props.mdxType)),
     );
     return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
   },

package/lib-next/theme/Tabs/__tests__/index.test.js

@@ -13,7 +13,7 @@ import {
   ScrollControllerProvider,
 } from '@docusaurus/theme-common';
 describe('Tabs', () => {
-  test('Should reject bad Tabs child', () => {
+  it('rejects bad Tabs child', () => {
     expect(() => {
       renderer.create(
         <Tabs>
@@ -25,7 +25,7 @@ describe('Tabs', () => {
       `"Docusaurus error: Bad <Tabs> child <div>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique \\"value\\" prop."`,
     );
   });
-  test('Should reject bad Tabs defaultValue', () => {
+  it('rejects bad Tabs defaultValue', () => {
     expect(() => {
       renderer.create(
         <Tabs defaultValue="bad">
@@ -37,7 +37,7 @@ describe('Tabs', () => {
       `"Docusaurus error: The <Tabs> has a defaultValue \\"bad\\" but none of its children has the corresponding value. Available values are: v1, v2. If you intend to show no default tab, use defaultValue={null} instead."`,
     );
   });
-  test('Should reject duplicate values', () => {
+  it('rejects duplicate values', () => {
     expect(() => {
       renderer.create(
         <Tabs>
@@ -53,7 +53,7 @@ describe('Tabs', () => {
       `"Docusaurus error: Duplicate values \\"v1, v2\\" found in <Tabs>. Every value needs to be unique."`,
     );
   });
-  test('Should accept valid Tabs config', () => {
+  it('accepts valid Tabs config', () => {
     expect(() => {
       renderer.create(
         <ScrollControllerProvider>
@@ -120,7 +120,7 @@ describe('Tabs', () => {
     }).not.toThrow(); // TODO Better Jest infrastructure to mock the Layout
   }); // https://github.com/facebook/docusaurus/issues/5729
 
-  test('Should accept dynamic Tabs with number values', () => {
+  it('accepts dynamic Tabs with number values', () => {
     expect(() => {
       const tabs = ['Apple', 'Banana', 'Carrot'];
       renderer.create(

package/lib-next/theme/Tabs/index.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useState, cloneElement, Children, isValidElement} from 'react';
+import React, {useState, cloneElement, isValidElement} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {
   useScrollPositionBlocker,
@@ -28,7 +28,7 @@ function TabsComponent(props) {
     groupId,
     className,
   } = props;
-  const children = Children.map(props.children, (child) => {
+  const children = React.Children.map(props.children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
       return child;
     } // child.type.name will give non-sensical values in prod because of