Add badge variants and deprecate status component

Author: HoldenFolk

.changeset/blue-spoons-argue.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+Add variants to Badge component

docs/stories/Status.mdx

@@ -1,12 +1,16 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
 import { Status } from '@strapi/design-system';
 
+import { DeprecationNotice } from '../components/DeprecationNotice';
+
 import * as StatusStories from './Status.stories';
 
 <Meta of={StatusStories} />
 
 # Status
 
+<DeprecationNotice href="/?path=/docs/stories/Badge">Badge</DeprecationNotice>
+
 Status are used to give an important visual indication to the users on a page level.
 
 **Best practices**

packages/design-system/src/components/Badge/Badge.tsx

@@ -1,35 +1,55 @@
-import { css, styled } from 'styled-components';
+import { css, styled, DefaultTheme } from 'styled-components';
 
 import { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';
 import { Typography } from '../../primitives/Typography';
 import { DefaultThemeOrCSSProp } from '../../types';
 
 type BadgeSize = 'S' | 'M';
 
+type BadgeVariant = 'success' | 'primary' | 'danger' | 'warning' | 'neutral' | 'secondary' | 'alternative';
+
 interface BadgeProps extends FlexProps {
   /**
    * If `true`, it changes the `backgroundColor` to `primary200` and the `textColor` to `primary600`
    */
   active?: boolean;
+
   backgroundColor?: DefaultThemeOrCSSProp<'colors', 'background'>;
   /**
    * @default 'M'
    */
   size?: BadgeSize;
+
   textColor?: DefaultThemeOrCSSProp<'colors', 'color'>;
+
+  /**
+   * @default 'neutral'
+   */
+  variant?: BadgeVariant;
 }
 
 const Badge = ({
   active = false,
   size = 'M',
   textColor = 'neutral600',
   backgroundColor = 'neutral150',
+  variant,
   children,
   minWidth = 5,
   ...props
 }: BadgeProps) => {
   const paddingX = size === 'S' ? 1 : 2;
 
+  const overridedColors = variant
+    ? {
+        backgroundColor: `${variant}200` satisfies keyof DefaultTheme['colors'],
+        textColor: `${variant}700` satisfies keyof DefaultTheme['colors'],
+      }
+    : {
+        backgroundColor,
+        textColor,
+      };
+
   return (
     <Base
       inline
@@ -38,11 +58,11 @@ const Badge = ({
       minWidth={minWidth}
       paddingLeft={paddingX}
       paddingRight={paddingX}
-      background={active ? 'primary200' : backgroundColor}
+      background={active ? 'primary200' : overridedColors.backgroundColor}
       $size={size}
       {...props}
     >
-      <Typography variant="sigma" textColor={active ? 'primary600' : textColor} lineHeight="1rem">
+      <Typography variant="sigma" textColor={active ? 'primary600' : overridedColors.textColor} lineHeight="1rem">
         {children}
       </Typography>
     </Base>