Dev tab - No usage without snipper, no banner without description and no Dev tab without props (#3600)

Co-authored-by: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>

Author: Inbal-Tish

docuilib/src/components/ComponentPage.tsx

@@ -60,10 +60,12 @@ export default function ComponentPage({component}) {
 
   const buildTabs = () => {
     const tabs = component.docs?.tabs;
-
+    const api = component.props;
+    const tabsArray = api ? [...tabs, devTab] : tabs;
+    
     // TODO: align Tabs bottom border with TabItem's selected indication line
     if (tabs) {
-      return <Tabs className="main-tabs">{getTabItems([...tabs, devTab])}</Tabs>;
+      return <Tabs className="main-tabs">{getTabItems(tabsArray)}</Tabs>;
     }
   };
 

docuilib/src/components/pageComponents/Banner.tsx

@@ -89,6 +89,10 @@ export const Banner = ({section, component}) => {
   const _title = title || getTitle(type);
   const _description = description || getDescription(type);
 
+  if (!_description) {
+    return null;
+  }
+  
   return (
     <div
       className="row"

docuilib/src/components/pageComponents/SectionHeader.tsx

@@ -25,6 +25,25 @@ export const SectionHeader = ({section, component}) => {
     return type === 'item' ? '#6E7881' : '#495059';
   };
 
+  const getUsageTitle = () => {
+    if (component.snippet) {
+      return (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 12
+          }}
+        >
+          {getTitle(type, title)}
+          {getCodeExampleLink()}
+        </div>
+      );
+    }
+  };
+
   const getCodeExampleLink = () => {
     return (
       <a
@@ -66,20 +85,7 @@ export const SectionHeader = ({section, component}) => {
 
   switch (type) {
     case 'usage':
-      return (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: 12
-          }}
-        >
-          {getTitle(type, title)}
-          {getCodeExampleLink()}
-        </div>
-      );
+      return getUsageTitle();
     default:
       return (
         <div

src/components/test.api.json

@@ -285,38 +285,6 @@
             "description": "html:<h2>Title</h2><p>This is a html content</p><ul><li>item 1</li><li>item 2</li></ul>"
           }
         ]
-      },
-      {
-        "title": "Code",
-        "sections": [
-          {
-            "title": "Usage",
-            "type": "usage"
-          },
-          {
-            "type": "info"
-          },
-          {
-            "type": "tip"
-          },
-          {
-            "type": "banner",
-            "title": "NOTE",
-            "description": "This is an interesting information"
-          },
-          {
-            "type": "banner",
-            "title": "Banner",
-            "description": "This is some massage to the user",
-            "color": "pink",
-            "icon": ""
-          },
-          {
-            "type": "props",
-            "title": "API",
-            "description": "This is the list of additional props for the Text component"
-          }
-        ]
       }
     ]
   }