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

.changeset/lucky-actors-clean.md

@@ -0,0 +1,6 @@
+---
+'@strapi/design-system': major
+'@strapi/ui-primitives': major
+---
+
+Fix grid item column fallback value

docs/stories/Grid.stories.tsx

@@ -47,6 +47,21 @@ export const BaseGrid = {
   name: 'base grid',
 } satisfies Story;
 
+export const GridItemColSizeFallback = {
+  render: () => (
+    <Grid.Root gap={5}>
+      {Array(12)
+        .fill(null)
+        .map((_, i) => (
+          <Grid.Item key={i} background="success200" col={6}>
+            <Typography>Column {i + 1}</Typography>
+          </Grid.Item>
+        ))}
+    </Grid.Root>
+  ),
+  name: 'Column size fallback to col',
+} satisfies Story;
+
 export const ComplexGrid = {
   render: () => (
     <Grid.Root

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>

packages/design-system/src/primitives/Grid/Grid.tsx

@@ -57,15 +57,15 @@ type ItemComponent<C extends React.ElementType = 'div'> = <T extends React.Eleme
 ) => JSX.Element;
 
 const Item = styled(Flex)`
-  grid-column: span ${({ $xs }) => $xs ?? 12};
+  grid-column: span ${({ $xs, $col }) => $xs ?? $col ?? 12};
   max-width: 100%;
 
   ${({ theme }) => theme.breakpoints.small} {
-    grid-column: span ${({ $s, $xs }) => $s ?? $xs ?? 12};
+    grid-column: span ${({ $s, $xs, $col }) => $s ?? $xs ?? $col ?? 12};
   }
 
   ${({ theme }) => theme.breakpoints.medium} {
-    grid-column: span ${({ $m, $s, $xs }) => $m ?? $s ?? $xs ?? 12};
+    grid-column: span ${({ $m, $s, $xs, $col }) => $m ?? $s ?? $xs ?? $col ?? 12};
   }
 
   ${({ theme }) => theme.breakpoints.large} {