From 9bb9edc36b3389f813deecbe4f4ea6e24c622fe8 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Mon, 14 Nov 2022 13:52:23 -0800
Subject: [PATCH] Storybook badge updates (#1453)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖 storybook updates for badge
---
 .../components/rose/badge/index.stories.mdx   | 44 +++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/addons/rose/addon/components/rose/badge/index.stories.mdx b/addons/rose/addon/components/rose/badge/index.stories.mdx
index 5e1af6f8c..83eb3c6d8 100644
--- a/addons/rose/addon/components/rose/badge/index.stories.mdx
+++ b/addons/rose/addon/components/rose/badge/index.stories.mdx
@@ -3,7 +3,45 @@ import { hbs } from 'ember-cli-htmlbars';
 
 <Meta title="Rose/Badge" component="Badge" />
 
-# Badge
+# HDS Badge (Recommended)
+
+> **_NOTE:_** Replaces the deprecated Rose/Badge.
+
+```handlebars
+<Hds::Badge @text='Success badge' @color='neutral' />
+```
+
+Refer to the [HDS Badge documentation](https://design-system-components-hashicorp.vercel.app/components/badge) for a complete overview
+
+export const HDSTemplate = (args) => ({
+  template: hbs`<Hds::Badge @text={{text}}
+      @color={{color}}
+      />`,
+  context: args,
+});
+
+<Preview>
+  <Story
+    name="Hds Badge"
+    args={{
+      text: 'Badge',
+    }}
+    argTypes={{
+      color: {
+        control: 'select',
+        options: ['success', 'warning', 'critical', 'highlight'],
+      },
+    }}
+  >
+    {HDSTemplate.bind({})}
+  </Story>
+</Preview>
+
+# Rose Badge (Deprecated)
+
+Rose/Badge has been deprecated in favor of [HDS::Badge](https://design-system-components-hashicorp.vercel.app/components/badge)
+
+### <Rose::Badge> usage:
 
 A badge component that supports icons and predefined styles.
 When style definition isn't supplied, a default style will be supplied.
@@ -28,7 +66,7 @@ export const Template = (args) => ({
 
 <Preview>
   <Story
-    name="Test"
+    name="Rose Badge"
     args={{
       text: 'Badge',
       style: 'none',
@@ -60,7 +98,7 @@ export const Template = (args) => ({
 </Preview>
 
 <Preview>
-  <Story name="Style legend">
+  <Story name="Rose Badge Style legend">
     {{
       template: hbs`
     <Rose::Badge>default style</Rose::Badge>