From d8828575671962e3aa019aa8d2a839828b0e9519 Mon Sep 17 00:00:00 2001
From: Mrin <mrin9@yahoo.com>
Date: Tue, 24 Sep 2024 19:12:25 -0400
Subject: [PATCH] feature added special type(color) of x-badge > 'none'

---
 docs/specs/badges.yaml                      | 39 +++++++++++++++++++--
 src/templates/endpoint-template.js          |  4 ++-
 src/templates/expanded-endpoint-template.js |  4 ++-
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/docs/specs/badges.yaml b/docs/specs/badges.yaml
index f136d3972..d28fc6e34 100644
--- a/docs/specs/badges.yaml
+++ b/docs/specs/badges.yaml
@@ -18,10 +18,12 @@ info:
           summary: ...
           description: ...
           x-badges:    # <<< Extension
-            - color: red  # <<< Allowed values (red, green, orange, blue, primary-color)
+            - color: red  # <<< Allowed values (none, red, green, orange, blue, primary-color)
               label: 'Will be Deprecated'
             - color: blue
               label: 'Popular: false'
+            - color: none
+              label: 'Is used for assiging a badge to the operation without showing on the ui'  
         ...
         ...
     ```
@@ -31,7 +33,7 @@ paths:
       summary: Endpoint with red and blue badge
       x-badges:
         - color: red
-          label: 'Beta'
+          label: Beta
         - color: blue
           label: 'Popular: true'
   /badge-2-path:
@@ -39,7 +41,7 @@ paths:
       summary: Endpoint with primary-color
       x-badges:
         - color: primary-color
-          label: 'CORE API'
+          label: CORE API
   /badge-3-path:
     get:
       summary: Endpoint with green and orange badge
@@ -48,6 +50,37 @@ paths:
           label: 'Easy: Yes'
         - color: orange
           label: 'Slow'
+  /badge-none-1:
+    get:
+      summary: Endpoint1 with 'none' badge. (badge wont show)
+      description: |
+        This Endpoint has a **badge-label** of `internal-use-only` assigned to it but the badge is not shown in the UI<br/>
+        `badge` can also be used for removing an Endpoint from the documention
+      x-badges:
+        - color: none
+          label: internal-use-only
+  /badge-none-2:
+    get:
+      summary: Endpoint2 with 'none' badge. (badge wont show)
+      description: |
+        This Endpoint has a **badge-label** of `admin-use-only` assigned to it but the badge is not shown in the UI<br/>
+        `badge` can also be used for removing an Endpoint from the documention
+      x-badges:
+        - color: none
+          label: admin-use-only
+  /badge-none-3:
+    get:
+      summary: Endpoint3 with 'none' badge. (badge wont show)
+      description: |
+        This Endpoint has a **badge-label** of `internal-use-only` and `admin-use-only` assigned, but the badge is not shown in the UI<br/>
+        `badge` can also be used for removing an Endpoint from the documention
+      x-badges:
+        - color: none
+          label: admin-use-only
+        - color: none
+          label: internal-use-only
+
   /no-badges-path:
     get:
       summary: Endpoint with No badges
+      description: This Endpoint has ano badges
diff --git a/src/templates/endpoint-template.js b/src/templates/endpoint-template.js
index 61e27ae92..a88c481b0 100644
--- a/src/templates/endpoint-template.js
+++ b/src/templates/endpoint-template.js
@@ -100,7 +100,9 @@ function endpointBodyTemplate(path) {
         ? html`
           <div style="display:flex; flex-wrap:wrap;font-size: var(--font-size-small);">
             ${path.xBadges.map((v) => (
-                html`<span part="endpoint-badge" style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                v.color === 'none'
+                  ? ''
+                  : html`<span part="endpoint-badge" style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
               ))
             }
           </div>
diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index 738462d5c..3ff98b948 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/src/templates/expanded-endpoint-template.js
@@ -80,7 +80,9 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
           ? html`
             <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
               ${path.xBadges.map((v) => (
-                  html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                v.color === 'none'
+                  ? ''
+                  : html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
                 ))
               }
             </div>