Introduced Gamma badge and made badges clickable

Author: danjoa

.vitepress/theme/components/Alpha.vue

@@ -1,7 +1,8 @@
 <template>
   <Badge
-    type="warning"
-    text="alpha"
+    type="danger"
+    text="Alpha"
     title="Alpha features are experimental. They may never be generally available. If released subsequently, the APIs and behavior might change."
+    onclick="location = '../get-started/learning-sources#feature-status-badges'" style="cursor: pointer"
   />
 </template>

.vitepress/theme/components/Beta.vue

@@ -1,7 +1,8 @@
 <template>
   <Badge
     type="warning"
-    text="beta"
+    text="Beta"
     title="Beta features are planned to be generally available in subsequent releases, however, APIs and their behavior are not final and may change in the general release."
+    onclick="location = '../get-started/learning-sources#feature-status-badges'" style="cursor: pointer"
   />
 </template>

.vitepress/theme/components/Concept.vue

@@ -1,7 +1,8 @@
 <template>
   <Badge
-    type="warning"
-    text="concept"
+    type="info"
+    text="Concept"
     title="Concept features are ideas for potential future enhancements and an opportunity for you to give feedback. This is not a commitment to implement the feature though."
+    onclick="location = '../get-started/learning-sources#feature-status-badges'" style="cursor: pointer"
   />
 </template>

.vitepress/theme/components/Gamma.vue

@@ -0,0 +1,8 @@
+<template>
+  <Badge
+    type="tip"
+    text="Gamma"
+    title="Gamma features are finalized and ready to use, stable, and supported long term. Yet, as they have a broad scope and range, you should ensure to test them thoroughly."
+    onclick="location = '../get-started/learning-sources#feature-status-badges'" style="cursor: pointer"
+  />
+</template>

.vitepress/theme/components/Since.vue

@@ -1,5 +1,9 @@
 <template>
-  <Badge type="info" :text="`since ${of} ${version}`" :title="`This feature is only available as of ${of} version ${version} or higher.`" />
+  <Badge 
+    type="tip" 
+    :text="`Since ${of} ${version}`" 
+    :title="`This feature is only available as of ${of} version ${version} or higher.`" 
+  />
 </template>
 
 <script setup lang="ts">

.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import IndexList from './components/IndexList.vue';
 import ImplVariantsHint from './components/implvariants/ImpVariantsHint.vue';
 import Alpha from './components/Alpha.vue';
 import Beta from './components/Beta.vue';
+import Gamma from './components/Gamma.vue';
 import Concept from './components/Concept.vue'
 import Since from './components/Since.vue';
 import UnderConstruction from './components/UnderConstruction.vue';
@@ -27,6 +28,7 @@ export default {
     ctx.app.component('ImplVariantsHint', ImplVariantsHint)
     ctx.app.component('Alpha', Alpha)
     ctx.app.component('Beta', Beta)
+    ctx.app.component('Gamma', Gamma)
     ctx.app.component('Concept', Concept)
     ctx.app.component('Since', Since)
     ctx.app.component('UnderConstruction', UnderConstruction)

.vitepress/theme/styles.scss

@@ -535,7 +535,19 @@ a.learn-more, p.learn-more, .learn-more {
   }
 }
 
-.VPBadge { white-space: nowrap; }
+.VPBadge {
+  &.tip { 
+    background-color: #ced; color: #031; .dark & { 
+      background-color: #031; color: #9ca; 
+    } 
+  }
+  margin-top: 3px !important;
+  padding: 0 0.7em !important;
+  font-size: 80%;
+  line-height: 1.5em; 
+  border-radius: 1.5em;
+  white-space: nowrap; 
+}
 
 html.java {
   & .node {

get-started/learning-sources.md

@@ -34,11 +34,12 @@ Within the docs, you find badges that indicate the status of a feature, or API.
 Here's a list of the badges and their meanings:
 
 | Badge                                   | Description                                                                                                                                                        |
-|-----------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | <Since version="1.2.3" of="@sap/..." /> | The marked feature is available with the given version or higher                                                                                                   |
+| <Concept />                             | Concept features are ideas for potential future enhancements and an opportunity for you to give feedback. This is not a commitment to implement the feature though |
 | <Alpha />                               | Alpha features are experimental. They may never be generally available. If released subsequently, the APIs and behavior might change                               |
 | <Beta />                                | Beta features are planned to be generally available in subsequent releases, however, APIs and their behavior are not final and may change in the general release   |
-| <Concept />                             | Concept features are ideas for potential future enhancements and an opportunity for you to give feedback. This is not a commitment to implement the feature though |
+| <Gamma />                                | Gamma features are finalized and ready to use, stable, and supported long term. Yet, as they have a broad scope and range, you should ensure to test them thoroughly. |
 | <Internal />                            | SAP specific features, processes, or infrastructure. Examples are _Deploy with Confidence_, _SAP product standards_, or _xMake_                                    |