Add remove button to stac badge (#806)

* Add cn to components

* Add icon-sm size

* Add remove button to badges in stac section

* Remove log

Author: gjmooney

packages/base/src/shared/components/Badge.tsx

@@ -1,14 +1,20 @@
 import * as React from 'react';
 
+import { cn } from './utils';
+
 interface IBadgeProps extends React.HTMLAttributes<HTMLButtonElement> {
   variant?: 'destructive' | 'outline' | 'secondary';
   size?: 'sm' | 'lg' | 'icon';
 }
 
-function Badge({ variant, ...props }: IBadgeProps) {
+function Badge({ variant, className, ...props }: IBadgeProps) {
   return (
     // @ts-expect-error lol
-    <div data-variant={variant} className={'jgis-badge'} {...props} />
+    <div
+      data-variant={variant}
+      className={cn('jgis-badge', className)}
+      {...props}
+    />
   );
 }
 

packages/base/src/shared/components/Button.tsx

@@ -1,10 +1,12 @@
 import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 
+import { cn } from './utils';
+
 interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   asChild?: boolean;
   variant?: 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'icon';
-  size?: 'sm' | 'lg' | 'icon';
+  size?: 'sm' | 'lg' | 'icon' | 'icon-sm';
 }
 
 const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
@@ -14,7 +16,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
       <Comp
         data-size={size}
         data-variant={variant}
-        className={`jgis-button ${className ? className : ''}`}
+        className={cn('jgis-button', className)}
         ref={ref}
         {...props}
       />

packages/base/src/stacBrowser/components/StacFilterSection.tsx

@@ -1,7 +1,10 @@
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ChevronRight } from 'lucide-react';
 import React, { useMemo } from 'react';
 
 import Badge from '@/src/shared/components/Badge';
+import { Button } from '@/src/shared/components/Button';
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -157,7 +160,19 @@ const StacFilterSection = ({
       </DropdownMenu>
       <div className="jgis-stac-filter-section-badges">
         {selectedData.map(data => (
-          <Badge key={data}>{data}</Badge>
+          <Badge key={data} className="jgis-stac-badge">
+            <span>{data}</span>
+            <Button
+              variant="icon"
+              size="icon-sm"
+              className="jgis-stac-badge-icon"
+              onClick={() => {
+                handleCheckedChange(data, '');
+              }}
+            >
+              <FontAwesomeIcon icon={faXmark} />
+            </Button>
+          </Badge>
         ))}
       </div>
     </div>

packages/base/style/shared/button.css

@@ -162,3 +162,8 @@
   height: 2.5rem;
   width: 2.5rem;
 }
+
+.jgis-button[data-size='icon-sm'] {
+  height: 1rem;
+  width: 1rem;
+}

packages/base/style/stacBrowser.css

@@ -76,3 +76,16 @@
   width: 1rem;
   height: 1rem;
 }
+
+.jgis-stac-badge {
+  gap: 0.25rem;
+  padding-right: 0.3rem !important;
+}
+
+.jgis-stac-badge-icon:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-error-color0),
+    transparent 20%
+  ) !important;
+}