From 63b5a565d174bc71ea35744c29abc80c5bf824dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20Tib=C3=BArcio?= <v-gtiburcio@mparticle.com>
Date: Thu, 24 Oct 2024 18:21:25 -0300
Subject: [PATCH] docs: ability to assign badges to stories and dropdown as an
 example (#475)

---
 .storybook/manager.css                        | 15 ++++++++++
 .storybook/manager.ts                         |  6 ----
 .storybook/manager.tsx                        | 28 +++++++++++++++++++
 .storybook/preview.tsx                        |  2 --
 .../navigation/Dropdown/Dropdown.stories.tsx  | 10 ++++---
 5 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 .storybook/manager.css
 delete mode 100644 .storybook/manager.ts
 create mode 100644 .storybook/manager.tsx

diff --git a/.storybook/manager.css b/.storybook/manager.css
new file mode 100644
index 000000000..294a0be9e
--- /dev/null
+++ b/.storybook/manager.css
@@ -0,0 +1,15 @@
+.componentTag__container--beta {
+  position: static;
+}
+
+.componentTag__badge--beta {
+  font-size: 12px;
+  font-weight: 500;
+  margin-top: -13px;
+  padding: 0 6px;
+  background-color: #faad14;
+}
+
+.componentTag__badge--beta > .ant-ribbon-corner {
+  color: #faad14;
+}
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
deleted file mode 100644
index 3e931eb70..000000000
--- a/.storybook/manager.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { addons } from '@storybook/manager-api'
-import customTheme from './theme'
-
-addons.setConfig({
-  theme: customTheme,
-})
diff --git a/.storybook/manager.tsx b/.storybook/manager.tsx
new file mode 100644
index 000000000..96c7b36ba
--- /dev/null
+++ b/.storybook/manager.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { addons } from '@storybook/manager-api'
+import customTheme from './theme'
+import { Badge } from 'antd'
+
+import './manager.css'
+
+addons.setConfig({
+  theme: customTheme,
+  sidebar: {
+    renderLabel: item => {
+      if (item.tags?.includes('deprecated')) {
+        return (
+          <div title={item.name}>
+            <span>{item.name}</span>
+            <Badge.Ribbon
+              rootClassName="componentTag__container--beta"
+              className="componentTag__badge--beta"
+              text="Deprecated"
+            />
+          </div>
+        )
+      }
+
+      return item.name
+    },
+  },
+})
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index d9a19d415..f82951939 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -52,8 +52,6 @@ const preview: Preview = {
       },
     },
   },
-
-  tags: ['autodocs'],
 }
 
 export default preview
diff --git a/src/components/navigation/Dropdown/Dropdown.stories.tsx b/src/components/navigation/Dropdown/Dropdown.stories.tsx
index 20e8bbf54..b45159f75 100644
--- a/src/components/navigation/Dropdown/Dropdown.stories.tsx
+++ b/src/components/navigation/Dropdown/Dropdown.stories.tsx
@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { cloneElement } from 'react'
 import { useState } from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import { Button } from 'src/components/general/Button/Button'
 import { Dropdown, type IDropdownProps } from 'src/components/navigation/Dropdown/Dropdown'
 import { ExampleStory } from 'src/utils/ExampleStory'
@@ -9,7 +9,7 @@ import { Tooltip, type IMenuProps, Icon } from 'src/components'
 import { Space } from 'src/components'
 import { Divider } from 'src/components'
 import { theme } from 'antd'
-import { type MenuProps } from 'antd'
+import type { MenuProps } from 'antd'
 import { Typography } from 'src/components/general/Typography/Typography'
 
 const menu: IDropdownProps['menu'] = {
@@ -93,7 +93,9 @@ type Story = StoryObj<typeof Dropdown>
   Customize the stories based on specific requirements.
 */
 
-export const Primary: Story = {}
+export const Primary: Story = {
+  tags: ['deprecated'],
+}
 
 export const WithArrow: Story = {
   args: {