updating to checkboxes from TODO

Author: PhyPhy07

app/components/Compare/FacetSelector.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import type { FacetInfoWithLabels } from '~/composables/useFacetSelection'
+
 const {
+  selectedFacets,
   isFacetSelected,
   toggleFacet,
   selectCategory,
@@ -9,6 +12,17 @@ const {
   getCategoryLabel,
 } = useFacetSelection()
 
+/** Native checkbox disabled when coming soon or this is the only selected facet (must keep ≥1). */
+function isFacetCheckboxDisabled(facet: FacetInfoWithLabels): boolean {
+  if (facet.comingSoon) return true
+  return selectedFacets.value.length === 1 && isFacetSelected(facet.id)
+}
+
+function onFacetChange(facet: FacetInfoWithLabels) {
+ if(isFacetCheckboxDisabled(facet)) return
+  toggleFacet(facet.id)
+}
+
 // Check if all non-comingSoon facets in a category are selected
 function isCategoryAllSelected(category: string): boolean {
   const facets = facetsByCategory.value[category] ?? []
@@ -58,39 +72,39 @@ function isCategoryNoneSelected(category: string): boolean {
         </ButtonBase>
       </div>
 
-      <!-- Facet buttons -->
-      <div class="flex items-center gap-1.5 flex-wrap" role="group">
-        <!-- TODO: These should be checkboxes -->
-        <ButtonBase
+      <div
+        class="flex items-center gap-1.5 flex-wrap"
+        role="group"
+        :aria-label="getCategoryLabel(category)"
+      >
+        <label
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
-          size="sm"
-          :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
-          :disabled="facet.comingSoon"
-          :aria-pressed="isFacetSelected(facet.id)"
-          :aria-label="facet.label"
-          class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
+          class="flex items-center gap-1.5 px-1.5 py-0.5 rounded border text-xs transition-colors focus-within:outline focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-accent/70"
           :class="
             facet.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
-              : isFacetSelected(facet.id)
-                ? 'text-fg-muted bg-bg-muted'
-                : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'
-          "
-          @click="!facet.comingSoon && toggleFacet(facet.id)"
-          :classicon="
-            facet.comingSoon
-              ? undefined
-              : isFacetSelected(facet.id)
-                ? 'i-lucide:check'
-                : 'i-lucide:plus'
+              : isFacetCheckboxDisabled(facet)
+                ? 'text-fg-muted bg-bg-muted border-border opacity-90 cursor-not-allowed'
+                : isFacetSelected(facet.id)
+                  ? 'text-fg-muted bg-bg-muted border-border cursor-pointer'
+                  : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border cursor-pointer'
           "
         >
-          {{ facet.label }}
+          <input
+            type="checkbox"
+            :data-facet-id="facet.id"
+            class="size-3.5 shrink-0 accent-accent rounded border-border disabled:opacity-60"
+            :checked="isFacetSelected(facet.id)"
+            :disabled="isFacetCheckboxDisabled(facet)"
+            :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
+            @change="onFacetChange(facet)"
+          />
+          <span>{{ facet.label }}</span>
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </ButtonBase>
+        </label>
       </div>
     </div>
   </div>

test/nuxt/components/compare/FacetSelector.spec.ts

@@ -136,7 +136,7 @@ describe('FacetSelector', () => {
     })
   })
 
-  describe('facet buttons', () => {
+  describe('facet checkboxes', () => {
     it('renders all facets from FACET_INFO', async () => {
       const component = await mountSuspended(FacetSelector)
 
@@ -146,55 +146,61 @@ describe('FacetSelector', () => {
       }
     })
 
-    it('shows checkmark icon for selected facets', async () => {
+    it('renders a checkbox for each facet', async () => {
+      const component = await mountSuspended(FacetSelector)
+
+      const checkboxes = component.findAll('input[type="checkbox"]')
+      expect(checkboxes.length).toBe(Object.keys(FACET_INFO).length)
+    })
+
+    it('checks selected facets', async () => {
       mockSelectedFacets.value = ['downloads']
       mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads')
 
       const component = await mountSuspended(FacetSelector)
 
-      expect(component.find('.i-lucide\\:check').exists()).toBe(true)
+      const downloads = component.find('input[type="checkbox"][data-facet-id="downloads"]')
+      expect((downloads.element as HTMLInputElement).checked).toBe(true)
     })
 
-    it('shows add icon for unselected facets', async () => {
+    it('unchecks unselected facets', async () => {
       mockSelectedFacets.value = ['downloads']
       mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads')
 
       const component = await mountSuspended(FacetSelector)
 
-      expect(component.find('.i-lucide\\:plus').exists()).toBe(true)
+      const types = component.find('input[type="checkbox"][data-facet-id="types"]')
+      expect((types.element as HTMLInputElement).checked).toBe(false)
     })
 
-    it('applies aria-pressed for selected state', async () => {
+    it('disables the checkbox when it is the only selected facet', async () => {
       mockSelectedFacets.value = ['downloads']
       mockIsFacetSelected.mockImplementation((f: string) => f === 'downloads')
 
       const component = await mountSuspended(FacetSelector)
 
-      const buttons = component.findAll('button[aria-pressed]')
-      const selectedButton = buttons.find(b => b.attributes('aria-pressed') === 'true')
-      expect(selectedButton).toBeDefined()
+      const downloads = component.find('input[type="checkbox"][data-facet-id="downloads"]')
+      expect(downloads.attributes('disabled')).toBeDefined()
     })
 
-    it('calls toggleFacet when facet button is clicked', async () => {
+    it('calls toggleFacet when a facet checkbox is changed', async () => {
       const component = await mountSuspended(FacetSelector)
 
-      // Find a facet button (not all/none)
-      const facetButton = component.findAll('button').find(b => b.text().includes('Downloads'))
-      await facetButton?.trigger('click')
+      const typesCheckbox = component.find('input[type="checkbox"][data-facet-id="types"]')
+      await typesCheckbox.trigger('change')
 
-      expect(mockToggleFacet).toHaveBeenCalled()
+      expect(mockToggleFacet).toHaveBeenCalledWith('types')
     })
   })
 
   describe.runIf(hasComingSoonFacets)('comingSoon facets', () => {
     it('disables comingSoon facets', async () => {
       const component = await mountSuspended(FacetSelector)
 
-      // totalDependencies is marked as comingSoon
-      const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
-
-      expect(comingSoonButton?.attributes('disabled')).toBeDefined()
+      const comingSoonInput = component.find(
+        `input[type="checkbox"][data-facet-id="${comingSoonFacetId}"]`,
+      )
+      expect(comingSoonInput.attributes('disabled')).toBeDefined()
     })
 
     it('shows coming soon text for comingSoon facets', async () => {
@@ -203,26 +209,14 @@ describe('FacetSelector', () => {
       expect(component.text().toLowerCase()).toContain('coming soon')
     })
 
-    it('does not show checkmark/add icon for comingSoon facets', async () => {
+    it('does not call toggleFacet when comingSoon checkbox change is triggered', async () => {
       const component = await mountSuspended(FacetSelector)
 
-      // Find the comingSoon button
-      const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
-
-      // Should not have checkmark or add icon
-      expect(comingSoonButton?.find('.i-lucide\\:check').exists()).toBe(false)
-      expect(comingSoonButton?.find('.i-lucide\\:plus').exists()).toBe(false)
-    })
-
-    it('does not call toggleFacet when comingSoon facet is clicked', async () => {
-      const component = await mountSuspended(FacetSelector)
-
-      const buttons = component.findAll('button')
-      const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
-      await comingSoonButton?.trigger('click')
+      const comingSoonInput = component.find(
+        `input[type="checkbox"][data-facet-id="${comingSoonFacetId}"]`,
+      )
+      await comingSoonInput.trigger('change')
 
-      // toggleFacet should not have been called with totalDependencies
       expect(mockToggleFacet).not.toHaveBeenCalledWith(comingSoonFacetId)
     })
   })