From de3cfc24090572f52f4ee38830e5151910f97bad Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 7 Jul 2023 15:36:33 -0700
Subject: [PATCH] Add support for beta/new badges to subitems in nav and
 subheadings

---
 .../components/guide_page/_guide_page.scss    |  9 ++---
 .../guide_page/guide_page_chrome.js           | 33 ++++++++++++-------
 .../guide_section/guide_section.tsx           | 12 ++++++-
 .../guide_section_text.tsx                    | 23 ++++++++++---
 .../src/views/provider/provider_example.js    |  1 +
 5 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src-docs/src/components/guide_page/_guide_page.scss b/src-docs/src/components/guide_page/_guide_page.scss
index 578ef92e5df9..81b98bca2ee2 100644
--- a/src-docs/src/components/guide_page/_guide_page.scss
+++ b/src-docs/src/components/guide_page/_guide_page.scss
@@ -42,12 +42,9 @@
   }
 
   .guideSideNav__itemBadge {
-    margin-inline: $euiSizeXS;
-  }
-
-  // Shift the margin on the badge when selected and the dropdown arrow no longer shows
-  .euiSideNavItemButton-isSelected .guideSideNav__itemBadge {
-    margin-right: 0;
+    margin-inline-start: $euiSizeXS;
+     // Decrease distance from right side to allow for longer titles and sub-items
+    margin-inline-end: -$euiSizeS;
   }
 }
 
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index 65ab0b07d233..848298746d4b 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -41,6 +41,24 @@ export class GuidePageChrome extends Component {
     });
   };
 
+  renderSideNavBadge = ({ isBeta, isNew }) => {
+    if (isBeta) {
+      return (
+        <EuiBadge color="warning" className="guideSideNav__itemBadge">
+          BETA
+        </EuiBadge>
+      );
+    }
+    if (isNew) {
+      return (
+        <EuiBadge color="accent" className="guideSideNav__itemBadge">
+          NEW
+        </EuiBadge>
+      );
+    }
+    return undefined;
+  };
+
   scrollNavSectionIntoView = () => {
     // wait a bit for react to blow away and re-create the DOM
     // then scroll the selected nav section into view
@@ -80,7 +98,7 @@ export class GuidePageChrome extends Component {
       return;
     }
 
-    return subSectionsWithTitles.map(({ title, sections }) => {
+    return subSectionsWithTitles.map(({ title, isBeta, isNew, sections }) => {
       const id = slugify(title);
 
       const subSectionHref = `${href}/${id}`;
@@ -115,6 +133,7 @@ export class GuidePageChrome extends Component {
           : '',
         items: subItems,
         forceOpen: !!searchTerm || isCurrentlyOpenSubSection,
+        icon: this.renderSideNavBadge({ isBeta, isNew }),
       };
     });
   };
@@ -146,16 +165,6 @@ export class GuidePageChrome extends Component {
 
         const href = `#/${path}`;
 
-        const badge = isBeta ? (
-          <EuiBadge color="warning" className="guideSideNav__itemBadge">
-            BETA
-          </EuiBadge>
-        ) : isNew ? (
-          <EuiBadge color="accent" className="guideSideNav__itemBadge">
-            NEW
-          </EuiBadge>
-        ) : undefined;
-
         let visibleName = name;
         if (searchTerm) {
           visibleName = (
@@ -176,7 +185,7 @@ export class GuidePageChrome extends Component {
           isSelected: item.path === this.props.currentRoute.path,
           forceOpen: !!(searchTerm && hasMatchingSubItem),
           className: 'guideSideNav__item',
-          icon: badge,
+          icon: this.renderSideNavBadge({ isBeta, isNew }),
         };
       });
 
diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx
index 4a989bb68293..0ecc4ab5e70d 100644
--- a/src-docs/src/components/guide_section/guide_section.tsx
+++ b/src-docs/src/components/guide_section/guide_section.tsx
@@ -35,6 +35,8 @@ export interface GuideSectionProps
     > {
   id?: string;
   title?: string;
+  isBeta?: boolean;
+  isNew?: boolean;
   text?: ReactNode;
   source?: any[];
   demo?: ReactNode;
@@ -83,6 +85,8 @@ export const GuideSectionCodeTypesMap = {
 export const GuideSection: FunctionComponent<GuideSectionProps> = ({
   id,
   title,
+  isBeta,
+  isNew,
   text,
   demo,
   fullScreen,
@@ -210,7 +214,13 @@ export const GuideSection: FunctionComponent<GuideSectionProps> = ({
       className={classNames('guideSection', className)}
     >
       <EuiSpacer size={(color || title) && isLargeBreakpoint ? 'xxl' : 'xs'} />
-      <GuideSectionExampleText title={title} id={id} wrapText={wrapText}>
+      <GuideSectionExampleText
+        title={title}
+        id={id}
+        isBeta={isBeta}
+        isNew={isNew}
+        wrapText={wrapText}
+      >
         {text}
       </GuideSectionExampleText>
 
diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_text.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_text.tsx
index 5f50988eb5d8..75508a8d44aa 100644
--- a/src-docs/src/components/guide_section/guide_section_parts/guide_section_text.tsx
+++ b/src-docs/src/components/guide_section/guide_section_parts/guide_section_text.tsx
@@ -1,27 +1,40 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { EuiSpacer } from '../../../../../src/components/spacer';
-import { EuiTitle } from '../../../../../src/components/title';
-import { EuiText } from '../../../../../src/components/text';
+
+import {
+  EuiSpacer,
+  EuiTitle,
+  EuiText,
+  EuiBetaBadge,
+} from '../../../../../src/components';
 
 export const LANGUAGES = ['javascript', 'html'] as const;
 
 type GuideSectionExampleText = {
   title?: ReactNode;
   id?: string;
+  isBeta?: boolean;
+  isNew?: boolean;
   children?: ReactNode;
   wrapText?: boolean;
 };
 
 export const GuideSectionExampleText: FunctionComponent<
   GuideSectionExampleText
-> = ({ title, id, children, wrapText = true }) => {
+> = ({ title, id, isBeta, isNew, children, wrapText = true }) => {
   let titleNode;
 
   if (title) {
+    const badge = (isBeta || isNew) && (
+      <EuiBetaBadge label={isBeta ? 'Beta' : 'New'} color="accent" size="s" />
+    );
+
     titleNode = (
       <>
         <EuiTitle>
-          <h2 id={id}>{title}</h2>
+          <h2 id={id}>
+            {title}
+            {badge && <>&emsp;{badge}</>}
+          </h2>
         </EuiTitle>
         <EuiSpacer size="m" />
       </>
diff --git a/src-docs/src/views/provider/provider_example.js b/src-docs/src/views/provider/provider_example.js
index fb7c7bc39fb7..2ce81e85e833 100644
--- a/src-docs/src/views/provider/provider_example.js
+++ b/src-docs/src/views/provider/provider_example.js
@@ -139,6 +139,7 @@ export const ProviderExample = {
     },
     {
       title: 'Component defaults',
+      isBeta: true,
       text: (
         <EuiText>
           <EuiCallOut title="Beta status" iconType="beta">