Merged in feat/SW-1936-ui-room-card (pull request #2268)

feat(SW-1936): update room card ui

* feat(SW-1936): update room card ui


Approved-by: Linus Flood

apps/scandic-web/components/ImageGallery/imageGallery.module.css

@@ -19,6 +19,16 @@
   color: var(--Text-Inverted);
 }
 
+.imageCountBottom {
+  bottom: var(--Space-x2);
+  top: auto;
+}
+
+.imageCountTop {
+  top: var(--Space-x2);
+  bottom: auto;
+}
+
 .triggerArea {
   background-color: transparent;
   border-width: 0;

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

@@ -21,6 +21,7 @@ function ImageGallery({
   height = 280,
   sizes,
   hideLabel,
+  imageCountPosition = "bottom",
 }: ImageGalleryProps) {
   const intl = useIntl()
   const [isOpen, setIsOpen] = useState(false)
@@ -44,7 +45,13 @@ function ImageGallery({
           {...imageProps}
         />
         <Typography variant={"Body/Supporting text (caption)/smRegular"}>
-          <span className={styles.imageCount}>
+          <span
+            className={`${styles.imageCount} ${
+              imageCountPosition === "top"
+                ? styles.imageCountTop
+                : styles.imageCountBottom
+            }`}
+          >
             <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
             <span>{images.length}</span>
           </span>