docs(cypress-commands): show deprecation notice in docs

.storybook/components/CommandsAndQueries.tsx

@@ -1,4 +1,5 @@
 import { Heading, Markdown } from '@storybook/blocks';
+import { Tag as WCRTag } from '@ui5/webcomponents-react';
 import dedent from 'dedent';
 import { Fragment } from 'react';
 
@@ -87,11 +88,11 @@
 }
 
 interface Members {
   global: any[];
   inner: any[];
   instance: any[];
   events: any[];
   static: any[];
 }
 
 interface FunctionMetadata {
@@ -99,14 +100,14 @@
   tags: Tag[];
   loc: Loc;
   context: Context;
   augments: any[];
   examples: Example[];
   implements: any[];
   params: Param[];
   properties: any[];
   returns: Return[];
   sees: any[];
   throws: any[];
   todos: any[];
   yields: any[];
   name: string;
@@ -116,6 +117,7 @@
   members: Members;
   path: Path[];
   namespace: string;
+  deprecated: Record<string, any>;
 }
 
 function generateMdCodeBlock(codeStr: string) {
@@ -196,13 +198,37 @@
   }, '');
 }
 
+function formatHtmlFromNode(node: any): string {
+  if (!node) return '';
+
+  switch (node.type) {
+    case 'root':
+      return node.children.map(formatHtmlFromNode).join('');
+    case 'paragraph':
+      return `<p>${node.children.map(formatHtmlFromNode).join('')}</p>`;
+    case 'text':
+      return node.value;
+    case 'inlineCode':
+      return `<code>${node.value}</code>`;
+    default:
+      return '';
+  }
+}
+
 export const CommandsAndQueries = ({ api }: { api: FunctionMetadata[] }) => {
   return api
     .sort((a, b) => a.name.localeCompare(b.name))
     .map((item) => {
       return (
         <Fragment key={item.name}>
-          <Heading>{item.name}</Heading>
+          <Heading>
+            {item.name}
+            {!!item.deprecated && (
+              <WCRTag style={{ marginInlineStart: '1rem' }} design="Critical">
+                deprecated
+              </WCRTag>
+            )}
+          </Heading>
           <code>
             {item.name}(
             {item.params
@@ -215,6 +241,12 @@
               return generateGenericType(type);
             })}
           </code>
+          {!!item.deprecated && (
+            <>
+              <br />
+              {<b dangerouslySetInnerHTML={{ __html: formatHtmlFromNode(item.deprecated) }} />}
+            </>
+          )}
           <Markdown>{generateDescription(item.description)}</Markdown>
           {generateExample(item.tags)}
           {!!item.params.length && (

packages/cypress-commands/src/commands.ts

@@ -94,7 +94,7 @@ declare global {
        *
        * __Note:__ The select popover must be visible, otherwise it can lead to unwanted side effects.
        *
-       * @deprecated: This command is deprecated. Please use `clickDropdownMenuItem` instead.
+       * @deprecated This command is deprecated. Please use `clickDropdownMenuItem` instead.
        *
        * @example cy.get('[ui5-option]').clickUi5SelectOption();
        */