Some documentation for using ProductAvailabilityText and a note about how Beta badges appear in the sidebar (#28913)

Author: cdrubin

src/content/docs/style-guide/components/product-availability-text.mdx

@@ -0,0 +1,27 @@
+---
+title: Product availability text
+styleGuide:
+  component: ProductAvailabilityText
+---
+
+The `ProductAvailabilityText` component dynamically renders a product's lifecycle status (such as "Beta" or "Alpha") inline with the product name. It renders nothing for generally available (GA) products, so it is safe to leave in place as a product matures.
+
+The `product` prop must match a file in `src/content/directory/`.
+
+```mdx live
+import { ProductAvailabilityText } from "~/components";
+
+Cloud Connector <ProductAvailabilityText product="cloud-connector" /> allows you to route matching traffic to a public cloud provider.
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `product` | `string` | Yes | — | Product slug matching a file in `src/content/directory/`. |
+| `parentheses` | `string` | No | `"true"` | When `"true"`, wraps the output in parentheses (for example, `(Beta)`). Set to `"false"` for the raw text. |
+
+## Behavior
+
+- If the product availability is **GA**, the component renders nothing.
+- If the product or its availability data is not found, the component renders nothing (and logs a warning at build time).

src/content/docs/style-guide/frontmatter/sidebar.mdx

@@ -210,3 +210,8 @@ sidebar:
   - Example
 
 </FileTree>
+
+### Automatic "Beta" badges
+
+A "Beta" badge is automatically added to sidebar links and groups whose URL matches a directory entry with a "Beta" availability status. 
+This badge is **not** controlled by frontmatter — it is derived from the product availability data associated with the entry in `src/content/directory/`.