Chore: Rename Badge variants

CHANGELOG.md

@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Implements the expanded mode of `Searchbar` in mobile devices.
 - Updates Lighthouse and Cypress URL with valid product links
 - `Hero` image responsive sizes for mobile and desktop.
+- `Badge` variants names
 
 ### Deprecated
 

src/components/cart/CartSidebar/CartSidebar.tsx

@@ -44,7 +44,7 @@ function CartSidebar() {
       <header data-testid="cart-sidebar">
         <div className="cart-sidebar__title">
           <p className="title-display">Your Cart</p>
-          <Badge variant="new" small>
+          <Badge variant="info" small>
             {totalItems}
           </Badge>
         </div>

src/components/product/ProductCard/ProductCard.tsx

@@ -118,7 +118,7 @@ function ProductCard({
         </div>
 
         {outOfStock ? (
-          <Badge small variant="outOfStock">
+          <Badge small variant="neutral">
             Out of stock
           </Badge>
         ) : (

src/components/search/Suggestions/SuggestionsTopSearch.tsx

@@ -44,7 +44,7 @@ const SuggestionsTopSearch = forwardRef<
         {searchedItems.map((item, index) => (
           <li key={index}>
             <Link variant="display" to={item.href}>
-              <Badge variant="new" small>
+              <Badge variant="info" small>
                 {index + 1}
               </Badge>
               {item.name}

src/components/ui/Badge/Badge.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 
 import './badge.scss'
 
-export type BadgeVariants = 'outOfStock' | 'new' | 'recommended' | 'neutral'
+export type BadgeVariants = 'info' | 'highlighted' | 'neutral'
 
 type Props = {
   small?: boolean

src/components/ui/Badge/badge.scss

@@ -15,22 +15,18 @@
   }
 }
 
-[data-store-badge-variant="outOfStock"] {
+[data-store-badge-variant="neutral"] {
   background-color: var(--bg-neutral);
 }
 
-[data-store-badge-variant="recommended"] {
+[data-store-badge-variant="highlighted"] {
   background-color: var(--bg-highlighted);
 }
 
-[data-store-badge-variant="new"] {
+[data-store-badge-variant="info"] {
   background-color: var(--bg-info);
 }
 
-[data-store-badge-variant="neutral"] {
-  background-color: var(--bg-neutral);
-}
-
 [data-store-discount-badge-variant="low"] {
   background-color: var(--bg-discount-low);
 }