Search count inside label

frontends/main/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/cache": "^11.13.1",
-    "@mitodl/course-search-utils": "^3.3.0",
+    "@mitodl/course-search-utils": "^3.3.1",
     "@next/bundle-analyzer": "^14.2.15",
     "@remixicon/react": "^4.2.0",
     "@sentry/nextjs": "^8",

frontends/main/src/app-pages/SearchPage/SearchPage.test.tsx

@@ -157,8 +157,10 @@ describe("SearchPage", () => {
 
     const clearAll = await screen.findByRole("button", { name: /clear all/i })
 
-    const physics = await screen.findByRole("checkbox", { name: "Physics" })
-    const chemistry = await screen.findByRole("checkbox", { name: "Chemistry" })
+    const physics = await screen.findByRole("checkbox", { name: "Physics 100" })
+    const chemistry = await screen.findByRole("checkbox", {
+      name: "Chemistry 200",
+    })
     // initial
     expect(physics).toBeChecked()
     expect(chemistry).toBeChecked()
@@ -554,9 +556,9 @@ test("Facet 'Offered By' uses API response for names", async () => {
     search: {
       metadata: {
         aggregations: {
-          offered_by: offerors.results.map((o) => ({
+          offered_by: offerors.results.map((o, i) => ({
             key: o.code,
-            doc_count: 10,
+            doc_count: 10 + i,
           })),
         },
         suggestions: [],
@@ -571,13 +573,13 @@ test("Facet 'Offered By' uses API response for names", async () => {
   await user.click(showFacetButton)
 
   const offeror0 = await screen.findByRole("checkbox", {
-    name: offerors.results[0].name,
+    name: `${offerors.results[0].name} 10`,
   })
   const offeror1 = await screen.findByRole("checkbox", {
-    name: offerors.results[1].name,
+    name: `${offerors.results[1].name} 11`,
   })
   const offeror2 = await screen.findByRole("checkbox", {
-    name: offerors.results[2].name,
+    name: `${offerors.results[2].name} 12`,
   })
   expect(offeror0).toBeVisible()
   expect(offeror1).toBeVisible()

frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx

@@ -140,7 +140,7 @@ const FacetStyles = styled.div`
     width: 100%;
     align-items: baseline;
 
-    label {
+    .facet-text {
       ${truncateText(1)};
       color: ${({ theme }) => theme.custom.colors.silverGrayDark};
     }
@@ -193,7 +193,7 @@ const FacetStyles = styled.div`
       margin-left: -2px;
 
       input,
-      label {
+      .facet-label {
         cursor: pointer;
       }
 
@@ -205,12 +205,13 @@ const FacetStyles = styled.div`
         color: ${({ theme }) => theme.custom.colors.silverGrayDark};
         float: right;
       }
-    }
 
-    .facet-visible.checked .facet-label label,
-    .facet-visible .facet-label label:hover,
-    .facet-visible input:hover + .facet-label label {
-      color: ${({ theme }) => theme.custom.colors.darkGray2};
+      &.checked,
+      &:hover {
+        .facet-label .facet-text {
+          color: ${({ theme }) => theme.custom.colors.darkGray2};
+        }
+      }
     }
 
     .facet-more-less {
@@ -294,12 +295,10 @@ const FacetStyles = styled.div`
     padding-top: 5px;
 
     /* stylelint-disable no-descending-specificity */
-    .facet-visible {
-      .facet-label {
-        label,
-        .facet-count {
-          color: ${({ theme }) => theme.custom.colors.darkGray2};
-        }
+    .facet-visible .facet-label {
+      .facet-text,
+      .facet-count {
+        color: ${({ theme }) => theme.custom.colors.darkGray2};
       }
 
       margin-bottom: 0;