feat: Adds new Badge interactive variation

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `IconSVG` component to load SVG Icons.
 - `Suggestions` component.
 - `SearchHistory` component.
+- `Badge` interactive variation.
 
 ### Changed
 - Move inline styles to external stylesheet to improve TBT

src/components/cart/CartSidebar/cart-sidebar.scss

@@ -12,8 +12,10 @@
     padding: var(--space-2) var(--page-padding-phone) var(--space-2);
     background-color: var(--bg-neutral-lightest);
 
-    [data-store-icon-button] {
-      margin-right: calc(-1 * var(--space-1));
+    > [data-store-icon-button] {
+      &:last-of-type {
+        margin-right: calc(-1 * var(--space-1));
+      }
     }
   }
 

src/components/ui/Badge/Badge.tsx

@@ -1,26 +1,62 @@
 import { Badge as UIBadge } from '@faststore/ui'
 import type { ReactNode } from 'react'
 import React from 'react'
+import IconButton from 'src/components/ui/IconButton'
+import Icon from 'src/components/ui/Icon'
 
 import './badge.scss'
 
 export type BadgeVariants = 'info' | 'highlighted' | 'neutral'
 
+type InteractiveBadge =
+  | {
+      interactive: true
+      onClose?: () => void
+    }
+  | {
+      interactive?: false
+      onClose?: never
+    }
+
 type Props = {
   small?: boolean
   variant?: BadgeVariants
   children: ReactNode
-}
+  onClose?: () => void
+  interactive?: boolean
+} & InteractiveBadge
 
-const Badge = ({ small = false, variant, children, ...otherProps }: Props) => {
+const Badge = ({
+  variant,
+  children,
+  onClose,
+  small = false,
+  interactive = false,
+  ...otherProps
+}: Props) => {
   return (
     <UIBadge
       className="badge"
       data-store-badge={small ? 'small' : ''}
       data-store-badge-variant={variant}
+      data-store-badge-interactive={interactive}
       {...otherProps}
     >
-      {children}
+      <span>{children}</span>
+      {interactive && (
+        <IconButton
+          onClick={onClose}
+          aria-label="Remove badge"
+          icon={
+            <Icon
+              name="X"
+              weight="bold"
+              width={small ? 12 : 16}
+              height={small ? 12 : 16}
+            />
+          }
+        />
+      )}
     </UIBadge>
   )
 }

src/components/ui/Badge/badge.scss

@@ -1,17 +1,39 @@
 .badge[data-store-badge] {
+  display: flex;
+  align-content: stretch;
+  align-items: stretch;
   width: fit-content;
   height: fit-content;
-  padding: var(--space-1) var(--space-2);
   color: var(--color-text);
   font-weight: var(--text-weight-bold);
   font-size: var(--text-size-2);
   white-space: nowrap;
   text-transform: uppercase;
   border-radius: var(--border-radius-pill);
 
+  > span {
+    padding: var(--space-1) var(--space-2);
+  }
+
   &[data-store-badge="small"] {
-    padding: var(--space-0) var(--space-2);
     font-size: var(--text-size-0);
+
+    > span {
+      padding: var(--space-0) var(--space-2);
+    }
+  }
+
+  [data-store-icon-button] {
+    width: var(--tap-min-size);
+    height: auto;
+    color: var(--color-neutral-7);
+    border-top-right-radius: var(--border-radius-pill);
+    border-bottom-right-radius: var(--border-radius-pill);
+
+    &:hover, &:focus {
+      background-color: var(--color-black-transparent-10);
+      background-blend-mode: multiply;
+    }
   }
 }