feat(BOOK-768): Added UspCard component with stories and implemented it in blocks

Approved-by: Bianca Widstam

apps/scandic-web/components/Blocks/UspGrid/index.tsx

@@ -1,18 +1,10 @@
-import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
-import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-
-import { getUspIconName } from "./utils"
+import { UspCard } from "@scandic-hotels/design-system/UspCard"
 
 import styles from "./uspgrid.module.css"
 
-import type { UspGridProps, UspIcon } from "@/types/components/blocks/uspGrid"
+import type { UspGrid as UspGridType } from "@scandic-hotels/trpc/types/blocks"
 
-function UspIcon({ icon }: { icon: UspIcon }) {
-  const iconName = getUspIconName(icon)
-  return iconName ? (
-    <IconByIconName iconName={iconName} color="Icon/Interactive/Accent" />
-  ) : null
-}
+interface UspGridProps extends Pick<UspGridType, "usp_grid"> {}
 
 export default function UspGrid({ usp_grid }: UspGridProps) {
   return (
@@ -20,13 +12,13 @@ export default function UspGrid({ usp_grid }: UspGridProps) {
       {usp_grid.usp_card.map(
         (usp) =>
           usp.text.json && (
-            <div key={usp.text.json.uid} className={styles.usp}>
-              <UspIcon icon={usp.icon} />
-              <JsonToHtml
-                embeds={usp.text.embedded_itemsConnection?.edges}
-                nodes={usp.text.json.children}
-              />
-            </div>
+            <UspCard
+              className={styles.uspCard}
+              key={usp.text.json.uid}
+              iconName={usp.icon}
+              embeds={usp.text.embedded_itemsConnection.edges}
+              nodes={usp.text.json.children}
+            />
           )
       )}
     </div>

apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css

@@ -3,17 +3,12 @@
   gap: var(--Space-x3);
 }
 
-.usp {
-  display: grid;
-  gap: var(--Space-x3);
-  align-content: start;
-}
-
 @media screen and (min-width: 768px) {
   .grid {
     grid-template-columns: repeat(2, 1fr);
   }
-  .grid:has(.usp:nth-child(3)):not(:has(.usp:nth-child(4))) {
+
+  .grid:has(.uspCard:nth-child(3)):not(:has(.uspCard:nth-child(4))) {
     grid-template-columns: repeat(3, 1fr);
   }
 }

apps/scandic-web/components/Blocks/UspGrid/utils.ts

@@ -1,56 +0,0 @@
-import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
-
-import type { UspIcon } from "@/types/components/blocks/uspGrid"
-
-export function getUspIconName(icon?: UspIcon | null) {
-  switch (icon) {
-    case "Snowflake":
-      return IconName.Snowflake
-    case "Information":
-      return IconName.InfoCircle
-    case "Heart":
-      return IconName.Heart
-    case "WiFi":
-      return IconName.Wifi
-    case "Breakfast":
-      return IconName.Breakfast
-    case "Checkbox":
-      return IconName.Check
-    case "Ticket":
-      return IconName.Ticket
-    case "Hotel":
-      return IconName.City
-    case "Bed":
-      return IconName.NightShelter
-    case "Train":
-      return IconName.Ticket
-    case "Airplane":
-      return IconName.Airplane
-    case "Sun":
-      return IconName.Beach
-    case "Star":
-      return IconName.AwardStar
-    case "Sports":
-      return IconName.Sports
-    case "Gym":
-      return IconName.Fitness
-    case "Hiking":
-      return IconName.Hiking
-    case "Skiing":
-      return IconName.Skiing
-    case "City":
-      return IconName.City
-    case "Pool":
-      return IconName.Swim
-    case "Spa":
-      return IconName.Spa
-    case "Bar":
-      return IconName.Nightlife
-    case "Restaurant":
-      return IconName.Restaurant
-    case "Child":
-      return IconName.ExtraFamilyFriendly
-    default:
-      return IconName.Snowflake
-  }
-}

apps/scandic-web/types/components/blocks/uspGrid.ts

@@ -1,4 +0,0 @@
-import type { UspGrid } from "@scandic-hotels/trpc/types/blocks"
-
-export interface UspGridProps extends Pick<UspGrid, "usp_grid"> {}
-export type UspIcon = UspGrid["usp_grid"]["usp_card"][number]["icon"]