@elastic/eui-docusaurus-theme 2.0.0

package/src/theme/NavbarItem/DropdownNavbarItem/index.tsx

@@ -0,0 +1,200 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useState, useRef, useEffect, JSX } from 'react';
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import {
+  isRegexpStringMatch,
+  useCollapsible,
+  Collapsible,
+} from '@docusaurus/theme-common';
+import {
+  isSamePath,
+  useLocalPathname,
+} from '@docusaurus/theme-common/internal';
+import NavbarNavLink from '@theme-original/NavbarItem/NavbarNavLink';
+import NavbarItem, {
+  type LinkLikeNavbarItemProps,
+} from '@theme-original/NavbarItem';
+import type {
+  DesktopOrMobileNavBarItemProps,
+  Props,
+} from '@theme-original/NavbarItem/DropdownNavbarItem';
+import { EuiIcon } from '@elastic/eui';
+
+const styles = {
+  dropdownNavbarItemMobile: css`
+    cursor: pointer;
+  `,
+};
+
+function isItemActive(
+  item: LinkLikeNavbarItemProps,
+  localPathname: string
+): boolean {
+  if (isSamePath(item.to, localPathname)) {
+    return true;
+  }
+  if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
+    return true;
+  }
+  if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
+    return true;
+  }
+  return false;
+}
+
+function containsActiveItems(
+  items: readonly LinkLikeNavbarItemProps[],
+  localPathname: string
+): boolean {
+  return items.some((item) => isItemActive(item, localPathname));
+}
+
+function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}: DesktopOrMobileNavBarItemProps) {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useEffect(() => {
+    const handleClickOutside = (
+      event: MouseEvent | TouchEvent | FocusEvent
+    ) => {
+      if (
+        !dropdownRef.current ||
+        dropdownRef.current.contains(event.target as Node)
+      ) {
+        return;
+      }
+      setShowDropdown(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('focusin', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
+    };
+  }, [dropdownRef]);
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
+        'dropdown--right': position === 'right',
+        'dropdown--show': showDropdown,
+      })}
+    >
+      <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
+        // # hash permits to make the <a> tag focusable in case no link target
+        // See https://github.com/facebook/docusaurus/pull/6003
+        // There's probably a better solution though...
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', className)}
+        {...props}
+        onClick={props.to ? undefined : (e) => e.preventDefault()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            setShowDropdown(!showDropdown);
+          }
+        }}
+      >
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <ul className="dropdown__menu">
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            isDropdownItem
+            activeClassName="dropdown__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function DropdownNavbarItemMobile({
+  items,
+  className,
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
+  ...props
+}: DesktopOrMobileNavBarItemProps) {
+  const localPathname = useLocalPathname();
+  const containsActive = containsActiveItems(items, localPathname);
+
+  const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({
+    initialState: () => !containsActive,
+  });
+
+  // Expand/collapse if any item active after a navigation
+  useEffect(() => {
+    if (containsActive) {
+      setCollapsed(!containsActive);
+    }
+  }, [localPathname, containsActive, setCollapsed]);
+
+  return (
+    <li
+      className={clsx('menu__list-item', {
+        'menu__list-item--collapsed': collapsed,
+      })}
+    >
+      <NavbarNavLink
+        role="button"
+        className={clsx(
+          styles.dropdownNavbarItemMobile,
+          'menu__link menu__link--sublist',
+          className
+        )}
+        {...props}
+        onClick={(e) => {
+          e.preventDefault();
+          toggleCollapsed();
+        }}
+      >
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            mobile
+            isDropdownItem
+            onClick={onClick}
+            activeClassName="menu__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </Collapsible>
+    </li>
+  );
+}
+
+export default function DropdownNavbarItem({
+  mobile = false,
+  ...props
+}: Props): JSX.Element {
+  const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
+  return <Comp {...props} />;
+}

package/src/theme/NavbarItem/NavbarNavLink.tsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FunctionComponent, JSX } from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import { isRegexpStringMatch } from '@docusaurus/theme-common';
+import IconExternalLink from '@theme-original/Icon/ExternalLink';
+import type { Props as NavbarNavLinkProps } from '@theme-original/NavbarItem/NavbarNavLink';
+import { IconType } from '@elastic/eui';
+
+import { NavbarItem } from '../../components/navbar_item';
+
+const CUSTOM_LINK_COMPONENT_MAP: Record<
+  string,
+  { component: FunctionComponent<any>; icon: IconType }
+> = {
+  github: {
+    component: NavbarItem,
+    icon: () => (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill="currentColor"
+          d="M8 0C3.58203 0 0 3.67167 0 8.2002C0 11.8238 2.292 14.8969 5.47119 15.981C5.87109 16.0561 6.01709 15.8028 6.01709 15.5866C6.01709 15.3914 6.00977 14.7447 6.00586 14.0601C3.78125 14.5555 3.31103 13.0931 3.31103 13.0931C2.94678 12.1461 2.42284 11.8939 2.42284 11.8939C1.6958 11.3854 2.478 11.3954 2.478 11.3954C3.28122 11.4524 3.70409 12.2402 3.70409 12.2402C4.41797 13.4935 5.57714 13.1311 6.03222 12.9209C6.10494 12.3924 6.31197 12.03 6.54003 11.8258C4.76416 11.6186 2.896 10.9149 2.896 7.77276C2.896 6.87686 3.20802 6.14615 3.71875 5.57207C3.6372 5.36386 3.36181 4.52952 3.79784 3.4009C3.79784 3.4009 4.46875 3.18069 5.99803 4.24175C6.63572 4.05907 7.31981 3.96898 7.99998 3.96597C8.67967 3.96898 9.36423 4.06006 10.0029 4.24274C11.5293 3.18068 12.2012 3.4019 12.2012 3.4019C12.6387 4.53152 12.3633 5.36485 12.2812 5.57207C12.7939 6.14615 13.1035 6.87688 13.1035 7.77276C13.1035 10.9229 11.2324 11.6166 9.4502 11.8198C9.7383 12.0741 9.99317 12.5726 9.99317 13.3373C9.99317 14.4334 9.98242 15.3173 9.98242 15.5876C9.98242 15.8058 10.1279 16.0611 10.5332 15.981C13.71 14.8949 16 11.8218 16 8.2002C16 3.67167 12.418 0 8 0Z"
+        />
+      </svg>
+    ),
+  },
+  changelog: {
+    component: NavbarItem,
+    icon: 'cheer',
+  },
+  figma: {
+    component: NavbarItem,
+    icon: () => (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 17 17"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill="currentColor"
+          d="M12.5 6.5A2.5 2.5 0 0 0 11 2H6.5A2.5 2.5 0 0 0 5 6.5a2.5 2.5 0 0 0 .085 4.063A2.75 2.75 0 1 0 9.5 12.75V10.5a2.5 2.5 0 0 0 3-4Zm0-2A1.5 1.5 0 0 1 11 6H9.5V3H11a1.5 1.5 0 0 1 1.5 1.5ZM5 4.5A1.5 1.5 0 0 1 6.5 3h2v3h-2A1.5 1.5 0 0 1 5 4.5ZM6.5 10a1.5 1.5 0 0 1 0-3h2v3h-2Zm2 2.75A1.75 1.75 0 1 1 6.75 11H8.5v1.75ZM11 10a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"
+        />
+      </svg>
+    ),
+  },
+};
+
+type Props = NavbarNavLinkProps & {
+  component: string;
+};
+
+export default function NavbarNavLink({
+  activeBasePath,
+  activeBaseRegex,
+  to,
+  href,
+  label,
+  html,
+  isDropdownLink,
+  prependBaseUrlToHref,
+  component,
+  ...props
+}: Props): JSX.Element {
+  // TODO all this seems hacky
+  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
+  const toUrl = useBaseUrl(to);
+  const activeBaseUrl = useBaseUrl(activeBasePath);
+  const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true });
+  const isExternalLink = label && href && !isInternalUrl(href);
+
+  if (component != null && CUSTOM_LINK_COMPONENT_MAP[component] !== undefined) {
+    const componentData = CUSTOM_LINK_COMPONENT_MAP[component]!;
+    const Element = componentData.component;
+    return (
+      <Element
+        href={href}
+        title={label}
+        icon={componentData.icon}
+        className={props.className}
+        showLabel
+      />
+    );
+  }
+
+  // Link content is set through html XOR label
+  const linkContentProps = html
+    ? { dangerouslySetInnerHTML: { __html: html } }
+    : {
+        children: (
+          <>
+            {label}
+            {isExternalLink && (
+              <IconExternalLink
+                {...(isDropdownLink && { width: 12, height: 12 })}
+              />
+            )}
+          </>
+        ),
+      };
+
+  if (href) {
+    return (
+      <Link
+        href={prependBaseUrlToHref ? normalizedHref : href}
+        {...props}
+        {...linkContentProps}
+      />
+    );
+  }
+
+  return (
+    <Link
+      to={toUrl}
+      isNavLink
+      {...((activeBasePath || activeBaseRegex) && {
+        isActive: (_match, location) =>
+          activeBaseRegex
+            ? isRegexpStringMatch(activeBaseRegex, location.pathname)
+            : location.pathname.startsWith(activeBaseUrl),
+      })}
+      {...props}
+      {...linkContentProps}
+    />
+  );
+}

package/src/theme/PaginatorNavLink/index.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { JSX } from 'react';
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import Link from '@docusaurus/Link';
+import type { Props } from '@theme-original/PaginatorNavLink';
+import { useEuiMemoizedStyles, UseEuiTheme, EuiIcon } from '@elastic/eui';
+
+const getStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    link: css`
+      --ifm-pagination-nav-color-hover: ${euiTheme.colors.primary};
+
+      border: ${euiTheme.border.thin};
+
+      .pagination-nav__label {
+        display: flex;
+        align-items: center;
+
+        font-size: var(--eui-font-size-m);
+        line-height: var(--eui-line-height-l);
+      }
+
+      &.pagination-nav__link--next .pagination-nav__label {
+        justify-content: flex-end;
+      }
+
+      .pagination-nav__label::before,
+      .pagination-nav__label::after {
+        content: '';
+      }
+
+      .pagination-nav__sublabel {
+        margin-block-end: ${euiTheme.size.xs};
+        font-size: var(--eui-font-size-s);
+        line-height: var(--eui-line-height-l);
+      }
+    `,
+  };
+};
+
+export default function PaginatorNavLink(props: Props): JSX.Element {
+  const { permalink, title, subLabel, isNext } = props;
+  const isPrev = !isNext;
+  const styles = useEuiMemoizedStyles(getStyles);
+
+  return (
+    <Link
+      className={clsx(
+        'pagination-nav__link',
+        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev'
+      )}
+      css={styles.link}
+      to={permalink}
+    >
+      {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
+
+      <div className="pagination-nav__label">
+        {isPrev && <EuiIcon type="arrowLeft" />}
+        {title}
+        {isNext && <EuiIcon type="arrowRight" />}
+      </div>
+    </Link>
+  );
+}

package/src/theme/Root.styles.ts

@@ -0,0 +1,122 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  euiFontSizeFromScale,
+  euiLineHeightFromBaseline,
+  UseEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+
+// override docusaurus variables as needed
+// NOTE: we use define variables with style calculations here
+// on the global level to reduce how often they are called
+export const getGlobalStyles = (theme: UseEuiTheme) => {
+  const { euiTheme } = theme;
+  const { font, base, colors, size, components } = euiTheme;
+  const fontBodyScale = font.scale[font.body.scale];
+  const fontBase = {
+    fontFamily: font.family,
+    fontSize: `${
+      font.defaultUnits === 'px' ? fontBodyScale * base : fontBodyScale
+    }${font.defaultUnits}`,
+    fontWeight: font.weight[font.body.weight],
+  };
+
+  const fontSizeXXL = euiFontSizeFromScale('xxl', euiTheme);
+  const fontSizeXL = euiFontSizeFromScale('xl', euiTheme);
+  const fontSizeL = euiFontSizeFromScale('l', euiTheme);
+  const fontSizeM = euiFontSizeFromScale('m', euiTheme);
+  const fontSizeS = euiFontSizeFromScale('s', euiTheme);
+  const fontSizeXS = euiFontSizeFromScale('xs', euiTheme);
+  const fontSizeXXS = euiFontSizeFromScale('xxs', euiTheme);
+
+  const lineHeightXXL = '2rem';
+  const lineHeightXL = '1.75rem';
+  const lineHeightL = euiLineHeightFromBaseline('s', euiTheme);
+  const lineHeightM = '1.5rem';
+  const lineHeightS = euiLineHeightFromBaseline('xs', euiTheme);
+  const lineHeightXS = '1.33rem';
+  const lineHeightXXS = euiLineHeightFromBaseline('xxs', euiTheme);
+
+  return css`
+    // color theme related variables
+    :root,
+    [data-theme='dark']:root {
+      /* EUI theme variables */
+      --eui-background-color-primary: ${colors.backgroundBasePrimary};
+      --eui-background-color-success: ${colors.backgroundBaseSuccess};
+      --eui-background-color-danger: ${colors.backgroundBaseDanger};
+      --eui-background-color-warning: ${colors.backgroundBaseWarning};
+      --eui-background-color-accent: ${colors.backgroundBaseAccent};
+
+      --eui-color-danger-text: ${colors.textDanger};
+
+      /* Docusaurus theme variables */
+      --ifm-background-color: ${colors.backgroundBasePlain};
+      --ifm-font-color-base: ${colors.textParagraph};
+      --ifm-link-color: ${colors.link};
+      --ifm-link-hover-color: ${colors.link};
+
+      --ifm-menu-color: ${colors.textParagraph};
+      --ifm-menu-color-background-active: ${colors.backgroundBaseSubdued};
+      --ifm-menu-color-background-hover: var(--eui-background-color-primary);
+
+      --ifm-pre-background: ${components.codeBackground};
+    }
+
+    :root {
+      /* EUI theme variables */
+      --eui-font-size-base: ${fontBase.fontSize};
+      --eui-font-size-xxl: ${fontSizeXXL};
+      --eui-font-size-xl: ${fontSizeXL};
+      --eui-font-size-l: ${fontSizeL};
+      --eui-font-size-m: ${fontSizeM};
+      --eui-font-size-s: ${fontSizeS};
+      --eui-font-size-xs: ${fontSizeXS};
+      --eui-font-size-xxs: ${fontSizeXXS};
+
+      --eui-line-height-base: ${lineHeightXL};
+      --eui-line-height-xxl: ${lineHeightXXL};
+      --eui-line-height-xl: ${lineHeightXL};
+      --eui-line-height-l: ${lineHeightL};
+      --eui-line-height-m: ${lineHeightM};
+      --eui-line-height-s: ${lineHeightS};
+      --eui-line-height-xs: ${lineHeightXS};
+      --eui-line-height-xxs: ${lineHeightXXS};
+
+      --eui-size-xs: ${size.xs};
+      --eui-size-s: ${size.s};
+      --eui-size-m: ${size.m};
+
+      --eui-border-color-primary: ${colors.borderStrongPrimary};
+
+      --eui-theme-content-vertical-spacing: ${size.base};
+
+      /* Docusaurus theme variables */
+      --ifm-font-family-base: ${fontBase.fontFamily};
+      --ifm-font-size-base: var(--eui-font-size-base);
+      --ifm-font-weight-base: ${fontBase.fontWeight};
+      --ifm-line-height-base: var(--eui-line-height-base);
+
+      --ifm-h1-font-size: var(--eui-font-size-xl);
+      --ifm-h2-font-size: var(--eui-font-size-l);
+      --ifm-h3-font-size: var(--eui-font-size-m);
+      --ifm-h4-font-size: var(--eui-font-size-s);
+      --ifm-h5-font-size: var(--eui-font-size-xs);
+      --ifm-h6-font-size: var(--eui-font-size-xxs);
+
+      --ifm-global-radius: ${euiTheme.border.radius.small};
+
+      --ifm-toc-border-color: ${euiTheme.border.color};
+
+      --doc-sidebar-width: 258px;
+      --doc-sidebar-hidden-width: 30px;
+    }
+  `;
+};

package/src/theme/Root.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  FunctionComponent,
+  PropsWithChildren,
+  useEffect,
+  useState,
+} from 'react';
+import Head from '@docusaurus/Head';
+import chartsDarkThemeUrl from '!file-loader!@elastic/charts/dist/theme_only_dark.css';
+import chartsLightThemeUrl from '!file-loader!@elastic/charts/dist/theme_only_light.css';
+import { CacheProvider, css, Global } from '@emotion/react';
+import { Props } from '@theme/Root';
+import { useEuiTheme } from '@elastic/eui';
+
+import {
+  AppThemeProvider,
+  cssGlobalCache,
+  useAppTheme,
+} from '../components/theme_context';
+import { getGlobalStyles } from './Root.styles';
+import { getResetStyles } from './reset.styles';
+import { getInfimaStyles } from './infima.styles';
+
+const styles = {
+  root: css`
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  `,
+};
+
+const _Root: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  const { colorMode } = useAppTheme();
+  const [mounted, setMounted] = useState(false);
+
+  const euiTheme = useEuiTheme();
+  const globalStyles = getGlobalStyles(euiTheme);
+  const resetStyles = getResetStyles(euiTheme);
+  const infimaStyles = getInfimaStyles();
+
+  // NOTE: This is a temp. solution
+  // Emotion styles are loaded dynamically on client in contrast
+  // to Docusaurus' SSR content. By rendering the content only
+  // after mount we can prevent some quite noticeable style updates
+  // and layout shifts. The drawback is that the page initially loads blank.
+  // TODO: remove this once we have an approach to inject HTML server-side
+  useEffect(() => {
+    if (!mounted) {
+      setMounted(true);
+    }
+  }, []);
+
+  // Load chart theme CSS based on color mode
+  useEffect(() => {
+    if (colorMode !== 'light' && colorMode !== 'dark') {
+      return;
+    }
+
+    const element = document.createElement('link');
+    element.rel = 'stylesheet';
+    element.href =
+      colorMode === 'light' ? chartsLightThemeUrl : chartsDarkThemeUrl;
+    element.dataset.elasticChartsTheme = 'true';
+    document.head.appendChild(element);
+
+    return () => {
+      document.head.removeChild(element);
+    };
+  }, [colorMode]);
+
+  return (
+    <>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <CacheProvider value={cssGlobalCache}>
+        <Global styles={[resetStyles, infimaStyles, globalStyles]} />
+      </CacheProvider>
+      <div style={!mounted ? { display: 'none' } : undefined} css={styles.root}>
+        {children}
+      </div>
+    </>
+  );
+};
+
+// Wrap docusaurus root component with <EuiProvider>
+// See https://docusaurus.io/docs/swizzling#wrapper-your-site-with-root
+const Root = ({ children }: Props) => {
+  return (
+    <AppThemeProvider>
+      <_Root>{children}</_Root>
+    </AppThemeProvider>
+  );
+};
+
+export default Root;

package/src/theme/TOCCollapsible/CollapseButton/index.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { JSX } from 'react';
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import Translate from '@docusaurus/Translate';
+import type { Props } from '@theme-original/TOCCollapsible/CollapseButton';
+import { EuiIcon, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+
+// coverted from css modules to Emotion
+const getStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    tocCollapsibleButton: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      padding: ${euiTheme.size.s} ${euiTheme.size.m};
+      border-radius: ${euiTheme.border.radius.small};
+      font-size: inherit;
+    `,
+  };
+};
+
+export default function TOCCollapsibleCollapseButton({
+  collapsed,
+  ...props
+}: Props): JSX.Element {
+  const styles = useEuiMemoizedStyles(getStyles);
+
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx('clean-btn', props.className)}
+      css={styles.tocCollapsibleButton}
+    >
+      <Translate
+        id="theme.TOCCollapsible.toggleButtonLabel"
+        description="The label used by the button on the collapsible TOC component"
+      >
+        On this page
+      </Translate>
+      <EuiIcon type={collapsed ? 'arrowDown' : 'arrowUp'} />
+    </button>
+  );
+}