feat: show strikethrough on deprecated endpoints in sidebar

packages/elements-core/src/components/TableOfContents/TableOfContents.tsx

@@ -1,7 +1,6 @@
-import { Box, Flex, Icon, ITextColorProps } from '@stoplight/mosaic';
+import { Box, Flex, Icon, ITextColorProps, Text } from '@stoplight/mosaic';
 import { HttpMethod, NodeType } from '@stoplight/types';
 import * as React from 'react';
-
 import { useFirstRender } from '../../hooks/useFirstRender';
 import { resolveRelativeLink } from '../../utils/string';
 import { VersionBadge } from '../Docs/HttpOperation/Badges';
@@ -22,6 +21,7 @@ import {
   TableOfContentsNodeGroup,
   TableOfContentsProps,
 } from './types';
+
 import {
   getHtmlIdFromItemId,
   hasActiveItem,
@@ -302,8 +302,9 @@ const Item = React.memo<{
   icon?: React.ReactElement<typeof Icon>;
   meta?: React.ReactNode;
   isInResponsiveMode?: boolean;
+  isDeprecated?: boolean;
   onClick?: (e: React.MouseEvent) => void;
-}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
+}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, isDeprecated, onClick }) => {
   return (
     <Flex
       id={id}
@@ -331,7 +332,13 @@ const Item = React.memo<{
         textOverflow="truncate"
         fontSize={isInResponsiveMode ? 'lg' : 'base'}
       >
-        {title}
+        <Text
+          textDecoration={isDeprecated ? ('line-through' as const) : undefined}
+          color={isDeprecated ? 'muted' : undefined}
+          fontSize={isInResponsiveMode ? 'lg' : 'base'}
+        >
+          {title}
+        </Text>
       </Box>
 
       <Flex alignItems="center" fontSize={isInResponsiveMode ? 'base' : 'xs'}>
@@ -354,7 +361,7 @@ const Node = React.memo<{
   const activeId = React.useContext(ActiveIdContext);
   const isActive = activeId === item.slug || activeId === item.id;
   const LinkComponent = React.useContext(LinkContext);
-
+  const isDeprecated = isNode(item) && item.data?.deprecated === true;
   const handleClick = (e: React.MouseEvent) => {
     if (isActive) {
       // Don't trigger link click when we're active
@@ -391,6 +398,7 @@ const Node = React.memo<{
         meta={meta}
         isInResponsiveMode={isInResponsiveMode}
         onClick={handleClick}
+        isDeprecated={isDeprecated}
       />
     </Box>
   );

packages/elements-core/src/components/TableOfContents/types.ts

@@ -46,6 +46,10 @@ export type TableOfContentsNode<
   type: T;
   meta: string;
   version?: string;
+  data?: {
+    deprecated?: boolean;
+  };
+  [key: string]: unknown;
 };
 
 export type TableOfContentsNodeGroup = TableOfContentsNode<'http_service'> & TableOfContentsGroup;

packages/elements-core/src/components/TableOfContents/utils.ts

@@ -33,15 +33,12 @@ export function hasActiveItem(items: TableOfContentsGroupItem[], activeId: strin
     if ('slug' in item && activeId === item.slug) {
       return true;
     }
-
     if ('id' in item && activeId === item.id) {
       return true;
     }
-
     if ('items' in item) {
-      return hasActiveItem(item.items, activeId);
+      return hasActiveItem(item.items as TableOfContentsGroupItem[], activeId);
     }
-
     return false;
   });
 }

packages/elements/src/components/API/utils.ts

@@ -164,12 +164,15 @@ const addTagGroupsToTree = <T extends GroupableNode>(
     if (hideInternal && isInternal(node)) {
       return;
     }
+    const data = (node as OperationNode | WebhookNode).data;
     tree.push({
       id: node.uri,
       slug: node.uri,
       title: node.name,
       type: node.type,
       meta: isHttpOperation(node.data) || isHttpWebhookOperation(node.data) ? node.data.method : '',
+      //add a `deprecated` flag
+      deprecated: (data as any)?.deprecated === true,
     });
   });
 
@@ -184,6 +187,8 @@ const addTagGroupsToTree = <T extends GroupableNode>(
         title: node.name,
         type: node.type,
         meta: isHttpOperation(node.data) || isHttpWebhookOperation(node.data) ? node.data.method : '',
+        //Exposing the `data` property
+        data: node.data,
       };
     });
     if (items.length > 0) {