Merge branch 'main' into refactor/update-suite-selector-to-handle-rig…

…ht-click

.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;
+}

.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
+    },
+  },
+})

.storybook/preview.tsx

@@ -52,8 +52,6 @@ const preview: Preview = {
       },
     },
   },
-
-  tags: ['autodocs'],
 }
 
 export default preview

src/components/navigation/Dropdown/Dropdown.stories.tsx

@@ -1,15 +1,15 @@
-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'
 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: {