💄 more disabled looking 0 count chips (innholdstype)

navikt · Dec 6, 2023 · af3a0bc · af3a0bc
1 parent c692206
commit af3a0bc
Showing 1 changed file with 39 additions and 27 deletions.
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/chips/ChipNav.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/chips/ChipNav.tsx
@@ -30,33 +30,45 @@ function ChipNav({ type, data, slug }: ChipsNavProps) {
   }
 
   return (
-    <HGrid gap="2" columns={{ sm: 1, md: "auto 1fr" }} align="center">
-      <Label as="p" className="text-aksel-heading">
-        {`${capitalize(type)}`}
-      </Label>
-
-      <div className="relative overflow-hidden">
-        <ScrollFade wrapperId={id} />
-        <ul
-          id={id}
-          className={cl("overflow-x-scroll flex gap-2 p-1", styles.chips)}
-        >
-          {data.map((entry) => (
-            <li key={entry.title}>
-              <Chips.Toggle
-                variant="neutral"
-                checkmark={false}
-                selected={encodeURIComponent(entry.title) === query?.[type]}
-                onClick={() => handleSelect(encodeURIComponent(entry.title))}
-                className="whitespace-nowrap"
-              >
-                {`${entry.title} ${entry.count}`}
-              </Chips.Toggle>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </HGrid>
+    <>
+      <style>{`
+    .chips__toggle--disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      aria-disabled: true;
+      text-decoration: line-through;
+    }
+    `}</style>
+      <HGrid gap="2" columns={{ sm: 1, md: "auto 1fr" }} align="center">
+        <Label as="p" className="text-aksel-heading">
+          {`${capitalize(type)}`}
+        </Label>
+
+        <div className="relative overflow-hidden">
+          <ScrollFade wrapperId={id} />
+          <ul
+            id={id}
+            className={cl("overflow-x-scroll flex gap-2 p-1", styles.chips)}
+          >
+            {data.map((entry) => (
+              <li key={entry.title}>
+                <Chips.Toggle
+                  variant="neutral"
+                  checkmark={false}
+                  selected={encodeURIComponent(entry.title) === query?.[type]}
+                  onClick={() => handleSelect(encodeURIComponent(entry.title))}
+                  className={cl("whitespace-nowrap", {
+                    "chips__toggle--disabled": entry.count === 0,
+                  })}
+                >
+                  {`${entry.title} ${entry.count}`}
+                </Chips.Toggle>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </HGrid>
+    </>
   );
 }