From c422bbc29b42a0c6618bf9e19f30730b96b65dd1 Mon Sep 17 00:00:00 2001
From: Fanny <fannychienn@gmail.com>
Date: Thu, 10 Mar 2022 18:39:33 -0300
Subject: [PATCH 1/2] Renames Badge variants and replace them

---
 src/components/cart/CartSidebar/CartSidebar.tsx        |  2 +-
 src/components/product/ProductCard/ProductCard.tsx     |  2 +-
 .../search/Suggestions/SuggestionsTopSearch.tsx        |  2 +-
 src/components/ui/Badge/Badge.tsx                      |  2 +-
 src/components/ui/Badge/badge.scss                     | 10 +++-------
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/cart/CartSidebar/CartSidebar.tsx b/src/components/cart/CartSidebar/CartSidebar.tsx
index 4afa1e44a..5c342f879 100644
--- a/src/components/cart/CartSidebar/CartSidebar.tsx
+++ b/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>
diff --git a/src/components/product/ProductCard/ProductCard.tsx b/src/components/product/ProductCard/ProductCard.tsx
index dec998448..96c0259e2 100644
--- a/src/components/product/ProductCard/ProductCard.tsx
+++ b/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>
         ) : (
diff --git a/src/components/search/Suggestions/SuggestionsTopSearch.tsx b/src/components/search/Suggestions/SuggestionsTopSearch.tsx
index b0a4446d3..c63669cff 100644
--- a/src/components/search/Suggestions/SuggestionsTopSearch.tsx
+++ b/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}
diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx
index 41bbc74b6..a6efefe00 100644
--- a/src/components/ui/Badge/Badge.tsx
+++ b/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
diff --git a/src/components/ui/Badge/badge.scss b/src/components/ui/Badge/badge.scss
index 8d1aa4245..46ad684d0 100644
--- a/src/components/ui/Badge/badge.scss
+++ b/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);
 }

From 77ba14ab07d0fc154f5d8b8bf7dd7133d0693645 Mon Sep 17 00:00:00 2001
From: Fanny <fannychienn@gmail.com>
Date: Thu, 10 Mar 2022 19:16:09 -0300
Subject: [PATCH 2/2] Updates changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 677b4c14a..ba09c4c7a 100644
--- a/CHANGELOG.md
+++ b/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