Merge branch 'elastic:main' into main

Author: Arup-Chauhan

packages/docusaurus-theme/src/components/call_out/index.tsx

@@ -1,5 +1,10 @@
 import { css } from '@emotion/react';
-import { EuiText, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+import {
+  EuiText,
+  useEuiMemoizedStyles,
+  UseEuiTheme,
+  euiFontSize,
+} from '@elastic/eui';
 import { FunctionComponent, PropsWithChildren } from 'react';
 
 type VARIANTS = 'info' | 'tip' | 'note' | 'danger' | 'warning';
@@ -31,7 +36,8 @@ const VARIANT_TO_COLOR_MAP: Record<
   },
 };
 
-const getStyles = ({ euiTheme }: UseEuiTheme, variant: VARIANTS) => {
+const getStyles = (theme: UseEuiTheme, variant: VARIANTS) => {
+  const { euiTheme } = theme;
   const colorKey = VARIANT_TO_COLOR_MAP[variant].colorKey;
   const color = euiTheme.colors[colorKey];
 
@@ -50,13 +56,18 @@ const getStyles = ({ euiTheme }: UseEuiTheme, variant: VARIANTS) => {
         --ifm-alert-border-width: ${euiTheme.border.width.thin};
         --ifm-alert-border-left-width: ${euiTheme.border.width.thin};
         --ifm-alert-border-color: ${color};
+        --ifm-alert-shadow: none;
 
         [class^='admonitionHeading'] {
           --ifm-alert-foreground-color: ${color};
 
           color: var(--ifm-alert-foreground-color);
         }
       }
+
+      p {
+        ${euiFontSize(theme, 's')}
+      }
     `,
   };
 };

packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx

@@ -1,4 +1,13 @@
+/*
+ * 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 from 'react';
+import { EuiHorizontalRule } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useWindowSize } from '@docusaurus/theme-common';
 import { useDoc } from '@docusaurus/theme-common/internal';
@@ -7,25 +16,27 @@ import Unlisted from '@theme-original/Unlisted';
 import DocVersionBanner from '@theme-original/DocVersionBanner';
 import DocVersionBadge from '@theme-original/DocVersionBadge';
 import * as Props from '@theme-original/DocItem/Layout';
-import { EuiHorizontalRule } from '@elastic/eui';
 
 import DocBreadcrumbs from '../../DocBreadcrumbs';
-import DocItemContent from '../Content';
 import DocItemTOCMobile from '../TOC/Mobile';
 import DocItemTOCDesktop from '../TOC/Desktop';
+import DocItemContent from '../Content';
 import DocItemFooter from '../Footer';
 
 // converted from css modules to emotion
-const layoutStyles = {
+const styles = {
   docItemContainer: css`
     & header + *,
     & article > *:first-child {
       margin-top: 0;
     }
   `,
+  docItemRow: css`
+    justify-content: center;
+  `,
   docItemCol: css`
     @media (min-width: 997px) {
-      max-width: 764px;
+      max-width: 830px;
     }
   `,
 };
@@ -60,11 +71,11 @@ export default function DocItemLayout({ children }: typeof Props): JSX.Element {
     metadata: { unlisted },
   } = useDoc();
   return (
-    <div className="row">
-      <div className="col" css={layoutStyles.docItemCol}>
+    <div className="row" css={styles.docItemRow}>
+      <div className="col" css={styles.docItemCol}>
         {unlisted && <Unlisted />}
         <DocVersionBanner />
-        <div css={layoutStyles.docItemContainer}>
+        <div css={styles.docItemContainer}>
           <article>
             <DocBreadcrumbs />
             <DocVersionBadge />

packages/docusaurus-theme/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;

packages/docusaurus-theme/src/theme/MDXComponents/A.tsx

@@ -1,3 +1,11 @@
+/*
+ * 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 type AType from '@theme-init/MDXComponents/A';
 import type { WrapperProps } from '@docusaurus/types';
 import { css } from '@emotion/react';
@@ -8,7 +16,9 @@ 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;
     `,
   };
 };

packages/docusaurus-theme/src/theme/MDXComponents/Code.tsx

@@ -1,3 +1,11 @@
+/*
+ * 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 from 'react';
 import type CodeType from '@theme-init/MDXComponents/Code';
 import CodeBlock from '@theme/CodeBlock';

packages/docusaurus-theme/src/theme/MDXComponents/Heading.tsx

@@ -1,29 +1,15 @@
-import OriginalHeading from '@theme-init/MDXComponents/Heading';
-import type HeadingType from '@theme-init/MDXComponents/Heading';
-import type { WrapperProps } from '@docusaurus/types';
-import { EuiTitle, EuiTitleSize } from '@elastic/eui';
-import { FunctionComponent } from 'react';
+/*
+ * 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.
+ */
 
-type Props = WrapperProps<typeof HeadingType>;
+import Heading, { Props as HeadingProps } from '@theme/Heading';
 
-const SIZE_TO_LEVEL_MAP: Record<string, EuiTitleSize> = {
-  h6: 'xxxs',
-  h5: 'xxs',
-  h4: 'xs',
-  h3: 's',
-  h2: 'm',
-  h1: 'l',
-};
+const MDXHeading = (props: HeadingProps): JSX.Element => (
+  <Heading {...props} />
+);
 
-const Heading: FunctionComponent<Omit<Props, 'as'> & { as: string }> = ({
-  as,
-  ...rest
-}): JSX.Element => {
-  return (
-    <EuiTitle size={SIZE_TO_LEVEL_MAP[as]}>
-      <OriginalHeading as={as} {...rest} />
-    </EuiTitle>
-  );
-};
-
-export default Heading;
+export default MDXHeading;

packages/docusaurus-theme/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>
+  );
+};

packages/docusaurus-theme/src/theme/MDXComponents/OrderedList.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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};
+`;
+
+export const OrderedList = ({ children, ...restProps }: HTMLAttributes<HTMLUListElement>) => {
+  const styles = useEuiMemoizedStyles(getOrderedListStyles);
+
+  return (
+    <ol {...restProps} css={styles}>
+      {children}
+    </ol>
+  );
+};

packages/docusaurus-theme/src/theme/MDXComponents/Paragraph.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 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}>
+      <p>
+        {children}
+      </p>
+    </EuiText>
+  );
+};

packages/docusaurus-theme/src/theme/MDXComponents/UnorderedList.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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};
+`;
+
+export const UnorderedList = ({ children, ...restProps }: HTMLAttributes<HTMLUListElement>) => {
+  const styles = useEuiMemoizedStyles(getUnorderedListStyles);
+
+  return (
+    <ul {...restProps} css={styles}>
+      {children}
+    </ul>
+  );
+};