feat(SW-1712): Added a FilterIcon component where the identifier is matched to a specific icon

Approved-by: Matilda Landström

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

@@ -0,0 +1,81 @@
+import {
+  BouquetIcon,
+  Discount22Icon,
+  MaterialIcon,
+  type MaterialIconProps,
+  PalmTree2Icon,
+} from "@scandic-hotels/design-system/Icons"
+
+interface FilterIconProps {
+  identifier: string
+}
+
+export default function FilterIcon({ identifier }: FilterIconProps) {
+  switch (identifier) {
+    // These are custom icons
+    case "discount-2-2":
+      return <Discount22Icon size={24} color="CurrentColor" />
+    case "bouquet":
+      return <BouquetIcon size={24} color="CurrentColor" />
+    case "palm_tree":
+      return <PalmTree2Icon size={24} color="CurrentColor" />
+
+    // These are all Material Icons
+    case "electric_car":
+    case "golf_course":
+    case "museum":
+    case "spa":
+    case "airplane_ticket":
+    case "apartment":
+    case "attractions":
+    case "award_star":
+    case "beach_access":
+    case "box":
+    case "deck":
+    case "directions_run":
+    case "directions_subway":
+    case "downhill_skiing":
+    case "emoji_transportation":
+    case "exercise":
+    case "family_restroom":
+    case "festival":
+    case "forest":
+    case "garage":
+    case "hiking":
+    case "houseboat":
+    case "kayaking":
+    case "landscape":
+    case "location_city":
+    case "location_on":
+    case "loyalty":
+    case "music_note":
+    case "night_shelter":
+    case "nightlife":
+    case "pedal_bike":
+    case "pets":
+    case "pool":
+    case "recommend":
+    case "redeem":
+    case "restaurant":
+    case "sauna":
+    case "sell":
+    case "shopping_bag":
+    case "sports_handball":
+    case "sports_tennis":
+    case "theater_comedy":
+    case "things_to_do":
+    case "tram":
+    case "transit_ticket":
+    case "travel":
+    case "travel_luggage_and_bags":
+    case "favorite":
+      return (
+        <MaterialIcon
+          icon={identifier as MaterialIconProps["icon"]}
+          color="CurrentColor"
+        />
+      )
+    default:
+      return <MaterialIcon icon="favorite" color="CurrentColor" />
+  }
+}

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

@@ -2,10 +2,12 @@
 
 import { cx } from "class-variance-authority"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useScrollShadows from "@/hooks/useScrollShadows"
 
+import FilterIcon from "./FilterIcon"
+
 import styles from "./tabFilters.module.css"
 
 interface Filter {
@@ -37,26 +39,21 @@ export default function TabFilters({
     >
       <div className={styles.container} ref={containerRef}>
         {categories.map((category) => (
-          <button
+          <Typography
             key={category.identifier}
-            onClick={() => onFilterSelect(category.identifier)}
-            className={
-              selectedFilter === category.identifier
-                ? styles.filterSelected
-                : styles.filter
-            }
-            type="button"
+            variant="Body/Supporting text (caption)/smRegular"
           >
-            <MaterialIcon
-              icon="favorite"
-              color={
-                selectedFilter === category.identifier
-                  ? "Icon/Inverted"
-                  : "Icon/Intense"
-              }
-            />
-            {category.label}
-          </button>
+            <button
+              onClick={() => onFilterSelect(category.identifier)}
+              className={cx(styles.filter, {
+                [styles.selected]: selectedFilter === category.identifier,
+              })}
+              type="button"
+            >
+              <FilterIcon identifier={category.identifier} />
+              {category.label}
+            </button>
+          </Typography>
         ))}
       </div>
     </div>

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

@@ -5,7 +5,7 @@
 
 .container {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
@@ -18,7 +18,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: var(--Spacing-x3);
+  width: var(--Space-x3);
   pointer-events: none;
   z-index: 1;
   opacity: 0;
@@ -32,7 +32,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: var(--Spacing-x3);
+  width: var(--Space-x3);
   pointer-events: none;
   z-index: 1;
   opacity: 0;
@@ -46,30 +46,23 @@
   opacity: 1;
 }
 
-.filter,
-.filterSelected {
+.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(--Spacing-x1) var(--Spacing-x2);
+  padding: var(--Space-x1) var(--Space-x2);
   transition: all 0.2s ease-in-out;
   scroll-snap-align: start;
   flex-shrink: 0;
-  font-size: var(--typography-Caption-Bold-Mobile-fontSize);
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-weight: 400;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x1);
+  color: var(--Text-Default);
 }
 
-.filter {
-  color: var(--UI-Text-High-contrast);
-  background: transparent;
-  border: 1px solid var(--UI-Input-Controls-Border-Hover);
-}
-
-.filterSelected {
-  color: var(--Base-Text-Inverted);
-  background: var(--Base-Button-Tertiary-Fill-Normal);
-  border: 1px solid transparent;
+.filter.selected {
+  border-color: transparent;
+  background-color: var(--Base-Button-Tertiary-Fill-Normal);
+  color: var(--Text-Inverted);
 }

apps/scandic-web/types/enums/cardGallery.ts

@@ -1,10 +0,0 @@
-export const CardGalleryFilterEnum = {
-  offers: "offers",
-  popular_destinations: "popular_destinations",
-  popular_hotels: "popular_hotels",
-  popular_cities: "popular_cities",
-  spa_wellness: "spa_wellness",
-} as const
-
-export type CardGalleryFilter =
-  (typeof CardGalleryFilterEnum)[keyof typeof CardGalleryFilterEnum]

apps/scandic-web/types/enums/carouselCards.ts

@@ -1,10 +0,0 @@
-export const CarouselCardFilterEnum = {
-  offers: "offers",
-  popular_destinations: "popular_destinations",
-  popular_hotels: "popular_hotels",
-  popular_cities: "popular_cities",
-  spa_wellness: "spa_wellness",
-} as const
-
-export type CarouselCardFilter =
-  (typeof CarouselCardFilterEnum)[keyof typeof CarouselCardFilterEnum]

packages/design-system/lib/components/Icons/Nucleo/Benefits/discount-2-2.tsx

@@ -1,5 +1,5 @@
-import { colorVariants } from '../colorVariants'
 import type { NucleoIconProps } from '../../icon'
+import { colorVariants } from '../colorVariants'
 
 function Discount22(props: NucleoIconProps) {
   const fill = props.color ? colorVariants[props.color] : 'currentColor'