fix(LOY-128): add rounded filter chip variant

apps/scandic-web/components/TabFilters/index.tsx

@@ -2,7 +2,7 @@
 
 import { cx } from "class-variance-authority"
 
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 
 import useScrollShadows from "@/hooks/useScrollShadows"
 
@@ -32,29 +32,23 @@ export default function TabFilters({
 
   return (
     <div
-      className={cx(
-        styles.containerWrapper,
-        showLeftShadow && styles.showLeftShadow,
-        showRightShadow && styles.showRightShadow
-      )}
+      className={cx(styles.containerWrapper, {
+        [styles.showLeftShadow]: showLeftShadow,
+        [styles.showRightShadow]: showRightShadow,
+      })}
     >
       <div className={styles.container} ref={containerRef}>
         {categories.map((category) => (
-          <Typography
+          <ChipButton
             key={category.identifier}
-            variant="Body/Supporting text (caption)/smRegular"
+            onPress={() => onFilterSelect(category.identifier)}
+            variant="FilterRounded"
+            selected={selectedFilter === category.identifier}
+            className={styles.filter}
           >
-            <button
-              onClick={() => onFilterSelect(category.identifier)}
-              className={cx(styles.filter, {
-                [styles.selected]: selectedFilter === category.identifier,
-              })}
-              type="button"
-            >
-              <IconByCSSelect identifier={category.iconIdentifier} />
-              {category.label}
-            </button>
-          </Typography>
+            <IconByCSSelect identifier={category.iconIdentifier} />
+            {category.label}
+          </ChipButton>
         ))}
       </div>
     </div>

apps/scandic-web/components/TabFilters/tabFilters.module.css

@@ -38,25 +38,10 @@
   scrollbar-width: none;
   position: relative;
   width: 100%;
+  padding: var(--Space-x05);
 }
 
 .filter {
-  display: flex;
-  align-items: center;
-  gap: var(--Space-x1);
-  background-color: transparent;
-  border: 1px solid var(--Border-Interactive-Selected);
-  border-radius: var(--Corner-radius-rounded);
-  padding: var(--Space-x1) var(--Space-x2);
-  transition: all 0.2s ease-in-out;
-  scroll-snap-align: start;
+  scroll-snap-align: center;
   flex-shrink: 0;
-  cursor: pointer;
-  color: var(--Text-Default);
-}
-
-.filter.selected {
-  border-color: transparent;
-  background-color: var(--Base-Button-Tertiary-Fill-Normal);
-  color: var(--Text-Inverted);
 }