@elastic/eui-docusaurus-theme 2.0.0 → 2.1.0

package/lib/theme/DocBreadcrumbs/Items/Home/index.js

@@ -3,13 +3,16 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import { translate } from '@docusaurus/Translate';
 import { EuiIcon, useEuiMemoizedStyles } from '@elastic/eui';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { getItemStyles } from '../item.styles';
 export default function HomeBreadcrumbItem() {
     const homeHref = useBaseUrl('/');
+    const { siteConfig } = useDocusaurusContext();
+    const { title } = siteConfig;
     const styles = useEuiMemoizedStyles(getItemStyles);
     return (_jsxs("li", { className: "breadcrumbs__item", css: styles.item, children: [_jsx(Link, { "aria-label": translate({
                     id: 'theme.docs.breadcrumbs.home',
                     message: 'Home page',
                     description: 'The ARIA label for the home page in the breadcrumbs',
-                }), className: "breadcrumbs__link", href: homeHref, children: "EUI" }), _jsx(EuiIcon, { type: "arrowRight", size: "s", css: styles.icon })] }));
+                }), className: "breadcrumbs__link", href: homeHref, children: title }), _jsx(EuiIcon, { type: "arrowRight", size: "s", css: styles.icon })] }));
 }

package/lib/theme/DocCard/index.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+import type { PropSidebarItemCategory, PropSidebarItemLink } from '@docusaurus/plugin-content-docs';
+export default function DocCard({ item, }: {
+    item: PropSidebarItemCategory | PropSidebarItemLink;
+}): ReactNode;

package/lib/theme/DocCard/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useDocById, findFirstSidebarItemLink, } from '@docusaurus/plugin-content-docs/client';
+import { usePluralForm } from '@docusaurus/theme-common';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import { translate } from '@docusaurus/Translate';
+import { EuiCard, EuiIcon } from '@elastic/eui';
+function useCategoryItemsPlural() {
+    const { selectMessage } = usePluralForm();
+    return (count) => selectMessage(count, translate({
+        message: '1 item|{count} items',
+        id: 'theme.docs.DocCard.categoryDescription.plurals',
+        description: 'The default description for a category card in the generated index about how many items this category includes',
+    }, { count }));
+}
+function CardLayout({ href, icon, title, description, }) {
+    return (_jsx(EuiCard, { icon: _jsx(EuiIcon, { size: "l", type: icon }), title: title, description: description || '', titleSize: "xs", layout: "horizontal", href: href }));
+}
+function CardCategory({ item }) {
+    const href = findFirstSidebarItemLink(item);
+    const categoryItemsPlural = useCategoryItemsPlural();
+    // Unexpected: categories that don't have a link have been filtered upfront
+    if (!href) {
+        return null;
+    }
+    return (_jsx(CardLayout, { href: href, 
+        // Coincidentally, `folderOpen` is the same icon in EUI icon library
+        icon: "folderOpen", title: item.label, description: item.description ?? categoryItemsPlural(item.items.length) }));
+}
+function CardLink({ item }) {
+    // We update Docusaurus `link` icon to EUI `popout` icon
+    const icon = isInternalUrl(item.href) ? 'document' : 'popout';
+    const doc = useDocById(item.docId ?? undefined);
+    return (_jsx(CardLayout, { href: item.href, icon: icon, title: item.label, description: item.description ?? doc?.description }));
+}
+export default function DocCard({ item, }) {
+    switch (item.type) {
+        case 'link':
+            return _jsx(CardLink, { item: item });
+        case 'category':
+            return _jsx(CardCategory, { item: item });
+        default:
+            throw new Error(`unknown item type ${JSON.stringify(item)}`);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-docusaurus-theme",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "EUI theme for Docusaurus",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -40,8 +40,8 @@
     "@docusaurus/theme-common": "^3.7.0",
     "@docusaurus/utils-validation": "^3.7.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^109.1.0",
-    "@elastic/eui-theme-borealis": "^5.0.0",
+    "@elastic/eui": "^109.2.0",
+    "@elastic/eui-theme-borealis": "^5.1.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@types/react-window": "^1.8.8",

package/src/theme/DocBreadcrumbs/Items/Home/index.tsx

@@ -11,11 +11,14 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import { translate } from '@docusaurus/Translate';
 import { EuiIcon, useEuiMemoizedStyles } from '@elastic/eui';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 import { getItemStyles } from '../item.styles';
 
 export default function HomeBreadcrumbItem(): JSX.Element {
   const homeHref = useBaseUrl('/');
+  const { siteConfig } = useDocusaurusContext();
+  const { title } = siteConfig;
 
   const styles = useEuiMemoizedStyles(getItemStyles);
 
@@ -30,7 +33,7 @@ export default function HomeBreadcrumbItem(): JSX.Element {
         className="breadcrumbs__link"
         href={homeHref}
       >
-        EUI
+        {title}
       </Link>
       <EuiIcon type="arrowRight" size="s" css={styles.icon} />
     </li>

package/src/theme/DocCard/index.tsx

@@ -0,0 +1,104 @@
+import { type ReactNode } from 'react';
+import {
+  useDocById,
+  findFirstSidebarItemLink,
+} from '@docusaurus/plugin-content-docs/client';
+import { usePluralForm } from '@docusaurus/theme-common';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import { translate } from '@docusaurus/Translate';
+
+import type {
+  PropSidebarItemCategory,
+  PropSidebarItemLink,
+} from '@docusaurus/plugin-content-docs';
+
+import { EuiCard, EuiIcon } from '@elastic/eui';
+
+function useCategoryItemsPlural() {
+  const { selectMessage } = usePluralForm();
+  return (count: number) =>
+    selectMessage(
+      count,
+      translate(
+        {
+          message: '1 item|{count} items',
+          id: 'theme.docs.DocCard.categoryDescription.plurals',
+          description:
+            'The default description for a category card in the generated index about how many items this category includes',
+        },
+        { count }
+      )
+    );
+}
+
+function CardLayout({
+  href,
+  icon,
+  title,
+  description,
+}: {
+  href: string;
+  icon: string;
+  title: string;
+  description?: string;
+}): ReactNode {
+  return (
+    <EuiCard
+      icon={<EuiIcon size="l" type={icon} />}
+      title={title}
+      description={description || ''}
+      titleSize="xs"
+      layout="horizontal"
+      href={href}
+    />
+  );
+}
+
+function CardCategory({ item }: { item: PropSidebarItemCategory }): ReactNode {
+  const href = findFirstSidebarItemLink(item);
+  const categoryItemsPlural = useCategoryItemsPlural();
+
+  // Unexpected: categories that don't have a link have been filtered upfront
+  if (!href) {
+    return null;
+  }
+
+  return (
+    <CardLayout
+      href={href}
+      // Coincidentally, `folderOpen` is the same icon in EUI icon library
+      icon="folderOpen"
+      title={item.label}
+      description={item.description ?? categoryItemsPlural(item.items.length)}
+    />
+  );
+}
+
+function CardLink({ item }: { item: PropSidebarItemLink }): ReactNode {
+  // We update Docusaurus `link` icon to EUI `popout` icon
+  const icon = isInternalUrl(item.href) ? 'document' : 'popout';
+  const doc = useDocById(item.docId ?? undefined);
+  return (
+    <CardLayout
+      href={item.href}
+      icon={icon}
+      title={item.label}
+      description={item.description ?? doc?.description}
+    />
+  );
+}
+
+export default function DocCard({
+  item,
+}: {
+  item: PropSidebarItemCategory | PropSidebarItemLink;
+}): ReactNode {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+    case 'category':
+      return <CardCategory item={item} />;
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}