@elastic/eui-docusaurus-theme 2.0.0

package/src/theme/Footer/index.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 { css } from '@emotion/react';
+import {
+  EuiText,
+  UseEuiTheme,
+  EuiThemeProvider,
+  useEuiMemoizedStyles,
+} from '@elastic/eui';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { euiLinkStyles } from '@elastic/eui/es/components/link/link.styles';
+
+const getFooterStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    root: css`
+      background: ${euiTheme.colors
+        .backgroundBaseSubdued}; // Color not available in EUI
+      padding: ${euiTheme.size.l};
+      text-align: center;
+    `,
+    text: css`
+      line-height: var(--eui-line-height-s);
+
+      a {
+        ${euiLinkStyles(euiThemeContext).euiLink}
+        ${euiLinkStyles(euiThemeContext).primary}
+      }
+    `,
+    heart: css`
+      color: ${euiTheme.colors.accent};
+    `,
+  };
+};
+
+const _Footer = () => {
+  const styles = useEuiMemoizedStyles(getFooterStyles);
+  const { footer } = useThemeConfig();
+
+  return (
+    <footer css={styles.root}>
+      <EuiText
+        textAlign="center"
+        size="s"
+        css={styles.text}
+        dangerouslySetInnerHTML={{ __html: footer?.copyright ?? '' }}
+      />
+    </footer>
+  );
+};
+
+const Footer = () => {
+  return (
+    <EuiThemeProvider colorMode="dark">
+      <_Footer />
+    </EuiThemeProvider>
+  );
+};
+
+export default Footer;

package/src/theme/Heading/index.tsx

@@ -0,0 +1,94 @@
+/*
+ * 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 useBrokenLinks from '@docusaurus/useBrokenLinks';
+import { Props as HeadingProps } from '@theme/Heading';
+import {
+  EuiTitle,
+  EuiButtonIcon,
+  UseEuiTheme,
+  EuiTitleProps,
+  useEuiMemoizedStyles,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+
+const TAG_TO_TITLE_SIZE_MAP: Record<string, EuiTitleProps['size']> = {
+  h6: 'xxxs',
+  h5: 'xxs',
+  h4: 'xs',
+  h3: 's',
+  h2: 'm',
+  h1: 'l',
+};
+
+const getHeadingStyles = ({ euiTheme }: UseEuiTheme) => ({
+  heading: css`
+    margin-block-start: calc(var(--eui-theme-content-vertical-spacing) * 2.5);
+    margin-block-end: var(--eui-theme-content-vertical-spacing);
+    scroll-margin-block-start: calc(var(--ifm-navbar-height) + 1rem);
+
+    &:first-child {
+      margin-block-start: var(--eui-theme-content-vertical-spacing);
+    }
+  `,
+
+  anchor: css`
+    margin-inline-start: ${euiTheme.size.s};
+    opacity: 0;
+
+    &:focus,
+    .heading:hover & {
+      opacity: 1;
+    }
+  `,
+});
+
+const Heading = ({
+  as: Component,
+  children,
+  id,
+  ...restProps
+}: HeadingProps) => {
+  const brokenLinks = useBrokenLinks();
+  const styles = useEuiMemoizedStyles(getHeadingStyles);
+
+  brokenLinks.collectAnchor(id);
+
+  const anchorTitle = `Direct link to ${
+    typeof children === 'string' ? children : id
+  }`;
+
+  // We don't want to show section links on document title headings
+  const shouldShowSectionLink = Component !== 'h1';
+
+  return (
+    <EuiTitle size={TAG_TO_TITLE_SIZE_MAP[Component]}>
+      <Component
+        {...restProps}
+        className="heading anchor"
+        css={styles.heading}
+        id={id}
+      >
+        {children}
+        {shouldShowSectionLink && (
+          <EuiButtonIcon
+            css={styles.anchor}
+            href={`#${id}`}
+            aria-label={anchorTitle}
+            title={anchorTitle}
+            iconType="link"
+            color="text"
+            size="xs"
+          />
+        )}
+      </Component>
+    </EuiTitle>
+  );
+};
+
+export default Heading;

package/src/theme/Logo/index.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 { useContext, JSX } from 'react';
+import { css } from '@emotion/react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {
+  useColorMode,
+  useThemeConfig,
+  type NavbarLogo,
+} from '@docusaurus/theme-common';
+import type { Props } from '@theme-original/Logo';
+import {
+  EuiImage,
+  euiTextTruncate,
+  useEuiMemoizedStyles,
+  UseEuiTheme,
+} from '@elastic/eui';
+
+import { AppThemeContext } from '../../components/theme_context';
+
+const getStyles = ({ euiTheme }: UseEuiTheme) => ({
+  wrapper: css`
+    ${euiTextTruncate()}
+    // create space to prevent focus outline from being cut off
+    padding: ${euiTheme.size.xs};
+
+    @media (min-width: 997px) {
+      border-right: ${euiTheme.border.thin};
+    }
+
+    .navbar__brand {
+      display: flex;
+      align-items: center;
+
+      margin-inline-end: ${euiTheme.size.m};
+
+      @media (min-width: 997px) {
+        margin-inline-end: ${euiTheme.size.l};
+      }
+    }
+
+    .navbar__logo {
+      height: 100%;
+    }
+  `,
+  imageWrapper: css`
+    margin-inline-end: ${euiTheme.size.m};
+  `,
+  image: css`
+    position: relative;
+    block-size: ${euiTheme.size.l};
+    inline-size: ${euiTheme.size.l};
+    margin: 0;
+  `,
+});
+
+function LogoThemedImage({
+  logo,
+  alt,
+  imageClassName,
+}: {
+  logo: NavbarLogo;
+  alt: string;
+  imageClassName?: string;
+}) {
+  const { colorMode } = useContext(AppThemeContext);
+  const isDarkMode = colorMode === 'dark';
+
+  const styles = useEuiMemoizedStyles(getStyles);
+
+  const src = isDarkMode
+    ? useBaseUrl(logo.srcDark || logo.src)
+    : useBaseUrl(logo.src);
+
+  const themedImage = (
+    <EuiImage
+      src={src}
+      size="fullWidth"
+      alt={alt}
+      className={logo.className}
+      wrapperProps={{
+        style: logo.style,
+        css: styles.image,
+      }}
+    />
+  );
+
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName} css={styles.imageWrapper}>
+      {themedImage}
+    </div>
+  ) : (
+    themedImage
+  );
+}
+
+export default function Logo(props: Props): JSX.Element {
+  const {
+    siteConfig: { title },
+  } = useDocusaurusContext();
+  const {
+    navbar: { title: navbarTitle, logo },
+  } = useThemeConfig();
+
+  const { imageClassName, titleClassName, ...propsRest } = props;
+  const logoLink = useBaseUrl(logo?.href || '/');
+
+  const styles = useEuiMemoizedStyles(getStyles);
+
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? '' : title;
+
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
+
+  return (
+    <div css={styles.wrapper}>
+      <Link
+        to={logoLink}
+        {...propsRest}
+        {...(logo?.target && { target: logo.target })}
+      >
+        {logo && (
+          <LogoThemedImage
+            logo={logo}
+            alt={alt}
+            imageClassName={imageClassName}
+          />
+        )}
+        {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
+      </Link>
+    </div>
+  );
+}

package/src/theme/MDXComponents/A.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 type AType from '@theme-init/MDXComponents/A';
+import type { WrapperProps } from '@docusaurus/types';
+import { css } from '@emotion/react';
+import { EuiLink, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+
+type Props = WrapperProps<typeof AType>;
+
+const getStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    link: css`
+      font-weight: ${euiTheme.font.weight.bold};
+      text-decoration: underline;
+      text-decoration-color: currentColor;
+    `,
+  };
+};
+
+const A = (props: Props): JSX.Element => {
+  const styles = useEuiMemoizedStyles(getStyles);
+
+  return <EuiLink {...props} css={styles.link} />;
+};
+
+export default A;

package/src/theme/MDXComponents/Blockquote.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { HTMLAttributes } from 'react';
+import { EuiText, useEuiMemoizedStyles } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+const getBlockquoteStyles = () => css`
+  margin-block: var(--eui-theme-content-vertical-spacing);
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+`;
+
+export const Blockquote = ({ children }: HTMLAttributes<HTMLQuoteElement>) => {
+  const styles = useEuiMemoizedStyles(getBlockquoteStyles);
+
+  return (
+    <EuiText size="m" css={styles}>
+      <blockquote>
+        {children}
+      </blockquote>
+    </EuiText>
+  );
+};

package/src/theme/MDXComponents/Code.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 React, { JSX } from 'react';
+import type CodeType from '@theme-init/MDXComponents/Code';
+import CodeBlock from '@theme/CodeBlock';
+import type { WrapperProps } from '@docusaurus/types';
+import { css } from '@emotion/react';
+import { EuiCode, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+
+type Props = WrapperProps<typeof CodeType>;
+
+const getStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    code: css`
+      // reset docusaurus code styles
+      border: none;
+      vertical-align: initial;
+    `,
+  };
+};
+
+const Code = ({ children, className, ...rest }: Props): JSX.Element => {
+  const styles = useEuiMemoizedStyles(getStyles);
+  const language = className?.startsWith('language-')
+    ? className.replace('language-', '')
+    : undefined;
+
+  const isInlineCode = children
+    ? React.Children.toArray(children).every(
+        (el) => typeof el === 'string' && !el.includes('\n')
+      )
+    : false;
+
+  if (isInlineCode) {
+    return (
+      <EuiCode
+        {...rest}
+        className={className}
+        language={language}
+        css={styles.code}
+      >
+        {children}
+      </EuiCode>
+    );
+  }
+
+  return (
+    <CodeBlock className={className} {...rest}>
+      {children}
+    </CodeBlock>
+  );
+};
+
+export default Code;

package/src/theme/MDXComponents/Heading.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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 Heading, { Props as HeadingProps } from '@theme/Heading';
+
+const MDXHeading = (props: HeadingProps): JSX.Element => (
+  <Heading {...props} />
+);
+
+export default MDXHeading;

package/src/theme/MDXComponents/ListItem.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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 { HTMLAttributes } from 'react';
+import { EuiText } from '@elastic/eui';
+
+export const ListItem = ({ children, ...props }: HTMLAttributes<HTMLLIElement>) => {
+  return (
+    <li>
+      <EuiText size="m">
+        {children}
+      </EuiText>
+    </li>
+  );
+};

package/src/theme/MDXComponents/OrderedList.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 { HTMLAttributes } from 'react';
+import { useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+const getOrderedListStyles = ({ euiTheme }: UseEuiTheme) => css`
+  margin-inline-start: ${euiTheme.size.l};
+  list-style: decimal;
+`;
+
+export const OrderedList = ({ children, ...restProps }: HTMLAttributes<HTMLUListElement>) => {
+  const styles = useEuiMemoizedStyles(getOrderedListStyles);
+
+  return (
+    <ol {...restProps} css={styles}>
+      {children}
+    </ol>
+  );
+};

package/src/theme/MDXComponents/Paragraph.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 { HTMLAttributes } from 'react';
+import { EuiText, useEuiMemoizedStyles } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+const getParagraphStyles = () => css`
+  margin-block: var(--eui-theme-content-vertical-spacing);
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+`;
+
+export const Paragraph = ({ children }: HTMLAttributes<HTMLParagraphElement>) => {
+  const styles = useEuiMemoizedStyles(getParagraphStyles);
+
+  return (
+    <EuiText size="m" css={styles} component="p">
+      {children}
+    </EuiText>
+  );
+};

package/src/theme/MDXComponents/Table.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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, TableHTMLAttributes } from 'react';
+import { EuiTable } from '@elastic/eui';
+
+export const Table = ({
+  children,
+}: TableHTMLAttributes<HTMLTableElement>): JSX.Element => (
+  <EuiTable>{children}</EuiTable>
+);

package/src/theme/MDXComponents/TableBody.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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 { HTMLAttributes, JSX } from 'react';
+import { EuiTableBody } from '@elastic/eui';
+
+export const TableBody = ({
+  children,
+}: HTMLAttributes<HTMLTableSectionElement>): JSX.Element => (
+  <EuiTableBody>{children}</EuiTableBody>
+);

package/src/theme/MDXComponents/TableDataCell.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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, TdHTMLAttributes } from 'react';
+import { EuiTableRowCell, EuiText } from '@elastic/eui';
+
+export const TableDataCell = ({
+  children,
+}: TdHTMLAttributes<HTMLTableCellElement>): JSX.Element => (
+  <EuiTableRowCell>
+    <EuiText size="m" component="span">
+      {children}
+    </EuiText>
+  </EuiTableRowCell>
+);

package/src/theme/MDXComponents/TableHeader.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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 { HTMLAttributes, JSX } from 'react';
+import { EuiTableHeader } from '@elastic/eui';
+
+export const TableHeader = ({
+  children,
+}: HTMLAttributes<HTMLTableSectionElement>): JSX.Element => (
+  <EuiTableHeader wrapWithTableRow={false}>{children}</EuiTableHeader>
+);

package/src/theme/MDXComponents/TableHeaderCell.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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, ThHTMLAttributes } from 'react';
+import { EuiTableHeaderCell, EuiText } from '@elastic/eui';
+
+export const TableHeaderCell = ({
+  children,
+}: ThHTMLAttributes<HTMLTableCellElement>): JSX.Element => (
+  <EuiTableHeaderCell>
+    <EuiText size="m" component="span">
+      {children}
+    </EuiText>
+  </EuiTableHeaderCell>
+);

package/src/theme/MDXComponents/TableRow.tsx

@@ -0,0 +1,16 @@
+/*
+ * 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 { HTMLAttributes, JSX } from 'react';
+import { EuiTableRow } from '@elastic/eui';
+
+export const TableRow = ({
+  children,
+}: HTMLAttributes<HTMLTableRowElement>): JSX.Element => (
+  <EuiTableRow>{children}</EuiTableRow>
+);

package/src/theme/MDXComponents/UnorderedList.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 { HTMLAttributes } from 'react';
+import { useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+const getUnorderedListStyles = ({ euiTheme }: UseEuiTheme) => css`
+  margin-inline-start: ${euiTheme.size.l};
+  list-style: disc;
+`;
+
+export const UnorderedList = ({ children, ...restProps }: HTMLAttributes<HTMLUListElement>) => {
+  const styles = useEuiMemoizedStyles(getUnorderedListStyles);
+
+  return (
+    <ul {...restProps} css={styles}>
+      {children}
+    </ul>
+  );
+};