components: add deprecated badge (#23744)

<!--Delete sections as needed -->

## Description

Added gray color for deprecated badge.
Updated contribution guide for usage

## Related issues or tickets

<!-- Related issues, pull requests, or Jira tickets -->

## Reviews

<!-- Notes for reviewers here -->
<!-- List applicable reviews (optionally @tag reviewers) -->

- [ ] Editorial review

---------

Signed-off-by: Craig Osterhout <[email protected]>
Co-authored-by: David Karlsson <[email protected]>

Author: craig-osterhout

content/contribute/components/badges.md

@@ -11,24 +11,41 @@ toc_max: 3
 {{< badge color=red text="red badge" >}}
 {{< badge color=green text="green badge" >}}
 {{< badge color=violet text="violet badge" >}}
+{{< badge color=gray text="gray badge" >}}
 
 You can also make a badge a link.
 
 [{{< badge color="blue" text="badge with a link" >}}](../_index.md)
 
 ### Usage guidelines
 
-We use badges to indicate new content and product content in various stages of the release lifecycle: 
+Use badges to indicate new content and product content in various stages of the release lifecycle:
 
-- The violet badge to highlight new early access or experimental content 
-- The blue badge to highlight beta content 
+- The violet badge to highlight new early access or experimental content
+- The blue badge to highlight beta content
 - The green badge to highlight new content that is either GA or not product-related content, such as guides/learning paths
+- The gray badge to highlight deprecated content
 
 Best practice is to use this badge for no longer than 2 months post release of the feature.
 
 ### Markup
 
+Inline badge:
+
 ```go
 {{</* badge color=amber text="amber badge" */>}}
 [{{</* badge color="blue" text="badge with a link" */>}}](../overview.md)
 ```
+
+Sidebar badge in frontmatter:
+
+```yaml
+---
+title: Page title
+params:
+  sidebar:
+    badge:
+      color: gray
+      text: Deprecated
+---
+```

layouts/partials/components/badge.html

@@ -1,18 +1,19 @@
 {{- $colors := (dict
   "amber" "bg-amber-500 dark:bg-amber-400"
   "blue" "bg-blue-500 dark:bg-blue-400"
+  "gray" "bg-gray-500 dark:bg-gray-400"
   "green" "bg-green-500 dark:bg-green-700"
   "red" "bg-red-500 dark:bg-red-400"
   "violet" "bg-violet-500 dark:bg-violet-400"
   )
 -}}
 
 {{- if not (isset $colors .color) -}}
-  {{- errorf "[badge] wrong color name: '%s' - supported values: amber, blue, green, red, violet" .color -}}h
+  {{- errorf "[badge] wrong color name: '%s' - supported values: amber, blue, gray, green, red, violet" .color -}}h
 {{- end -}}
 
 
 <span
   class="not-prose {{ index $colors .color }} rounded-sm px-1 text-xs text-white"
-  >{{ .content }}</span
->
+  >{{ .content }}
+</span>