Merge branch 'main' into descriptionList_update_vertical

elastic · Aug 28, 2023 · a7a5f7c · a7a5f7c
2 parents a1ffc4b + 29371da
commit a7a5f7c
Show file tree

Hide file tree

Showing 26 changed files with 292 additions and 1,275 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -41,7 +41,7 @@ export class GuidePageChrome extends Component {
     });
   };
 
-  renderSideNavBadge = ({ isBeta, isNew }) => {
+  renderSideNavBadge = ({ isBeta, isNew, isDeprecated }) => {
     if (isBeta) {
       return (
         <EuiBadge color="warning" className="guideSideNav__itemBadge">
@@ -56,6 +56,13 @@ export class GuidePageChrome extends Component {
         </EuiBadge>
       );
     }
+    if (isDeprecated) {
+      return (
+        <EuiBadge color="danger" className="guideSideNav__itemBadge">
+          Deprecated
+        </EuiBadge>
+      );
+    }
     return undefined;
   };
 
@@ -98,44 +105,46 @@ export class GuidePageChrome extends Component {
       return;
     }
 
-    return subSectionsWithTitles.map(({ title, isBeta, isNew, sections }) => {
-      const id = slugify(title);
+    return subSectionsWithTitles.map(
+      ({ title, isBeta, isNew, isDeprecated, sections }) => {
+        const id = slugify(title);
 
-      const subSectionHref = `${href}/${id}`;
-      const subSectionHashIdHref = `${href}#${id}`;
+        const subSectionHref = `${href}/${id}`;
+        const subSectionHashIdHref = `${href}#${id}`;
 
-      const sectionHref = sections ? subSectionHref : subSectionHashIdHref;
-      const subItems = sections
-        ? this.renderSubSections(sectionHref, sections, searchTerm)
-        : undefined;
+        const sectionHref = sections ? subSectionHref : subSectionHashIdHref;
+        const subItems = sections
+          ? this.renderSubSections(sectionHref, sections, searchTerm)
+          : undefined;
 
-      const isCurrentlyOpenSubSection =
-        window.location.hash.includes(subSectionHref);
+        const isCurrentlyOpenSubSection =
+          window.location.hash.includes(subSectionHref);
 
-      let name = title;
-      if (searchTerm) {
-        name = (
-          <EuiHighlight
-            className="guideSideNav__item--inSearch"
-            search={searchTerm}
-          >
-            {title}
-          </EuiHighlight>
-        );
-      }
+        let name = title;
+        if (searchTerm) {
+          name = (
+            <EuiHighlight
+              className="guideSideNav__item--inSearch"
+              search={searchTerm}
+            >
+              {title}
+            </EuiHighlight>
+          );
+        }
 
-      return {
-        id: sectionHref,
-        name: isCurrentlyOpenSubSection ? <strong>{name}</strong> : name,
-        href: sectionHref,
-        className: isCurrentlyOpenSubSection
-          ? 'guideSideNav__item--openSubTitle'
-          : '',
-        items: subItems,
-        forceOpen: !!searchTerm || isCurrentlyOpenSubSection,
-        icon: this.renderSideNavBadge({ isBeta, isNew }),
-      };
-    });
+        return {
+          id: sectionHref,
+          name: isCurrentlyOpenSubSection ? <strong>{name}</strong> : name,
+          href: sectionHref,
+          className: isCurrentlyOpenSubSection
+            ? 'guideSideNav__item--openSubTitle'
+            : '',
+          items: subItems,
+          forceOpen: !!searchTerm || isCurrentlyOpenSubSection,
+          icon: this.renderSideNavBadge({ isBeta, isNew, isDeprecated }),
+        };
+      }
+    );
   };
 
   renderSideNav = (sideNav) => {
@@ -161,7 +170,7 @@ export class GuidePageChrome extends Component {
       });
 
       const items = matchingItems.map((item) => {
-        const { name, path, sections, isBeta, isNew } = item;
+        const { name, path, sections, isBeta, isNew, isDeprecated } = item;
 
         const href = `#/${path}`;
 
@@ -185,7 +194,7 @@ export class GuidePageChrome extends Component {
           isSelected: item.path === this.props.currentRoute.path,
           forceOpen: !!(searchTerm && hasMatchingSubItem),
           className: 'guideSideNav__item',
-          icon: this.renderSideNavBadge({ isBeta, isNew }),
+          icon: this.renderSideNavBadge({ isBeta, isNew, isDeprecated }),
         };
       });
 

diff --git a/src-docs/src/index.js b/src-docs/src/index.js
@@ -60,6 +60,7 @@ root.render(
                   sections,
                   isBeta,
                   isNew,
+                  isDeprecated,
                   component,
                   from,
                   to,
@@ -88,6 +89,7 @@ root.render(
                                 sections,
                                 isBeta,
                                 isNew,
+                                isDeprecated,
                               }}
                             >
                               {({ theme }) => (

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -296,8 +296,16 @@ const createExample = (example, customTitle) => {
     );
   }
 
-  const { title, sections, isBeta, isNew, playground, guidelines, ...rest } =
-    example;
+  const {
+    title,
+    sections,
+    isBeta,
+    isNew,
+    isDeprecated,
+    playground,
+    guidelines,
+    ...rest
+  } = example;
   const filteredSections = sections.filter((section) => section !== undefined);
 
   filteredSections.forEach((section) => {
@@ -327,6 +335,7 @@ const createExample = (example, customTitle) => {
         title={title}
         isBeta={isBeta}
         isNew={isNew}
+        isDeprecated={isDeprecated}
         playground={playgroundComponent}
         guidelines={guidelines}
         {...rest}
@@ -342,11 +351,19 @@ const createExample = (example, customTitle) => {
     sections: filteredSections,
     isBeta,
     isNew,
+    isDeprecated,
     hasGuidelines: typeof guidelines !== 'undefined',
   };
 };
 
-const createTabbedPage = ({ title, pages, isBeta, isNew, ...rest }) => {
+const createTabbedPage = ({
+  title,
+  pages,
+  isBeta,
+  isNew,
+  isDeprecated,
+  ...rest
+}) => {
   const component = () => (
     <GuideTabbedPage title={title} pages={pages} {...rest} />
   );
@@ -365,6 +382,7 @@ const createTabbedPage = ({ title, pages, isBeta, isNew, ...rest }) => {
     sections: pagesSections,
     isBeta,
     isNew,
+    isDeprecated,
   };
 };