Merged in feat/SW-1276-implement-design (pull request #1348)

Feat/SW-1276 implement design * feat(SW-1276) UI implementation Desktop part 1 for MyStay * feat(SW-1276) UI implementation Desktop part 2 for MyStay * feat(SW-1276) UI implementation Mobile part 1 for MyStay * refactor: move files from MyStay/MyStay to MyStay * feat(SW-1276) Sidepeek implementation * feat(SW-1276): Refactoring * feat(SW-1276) UI implementation Mobile part 2 for MyStay * feat(SW-1276): translations * feat(SW-1276) fixed skeleton * feat(SW-1276): Added missing translations * feat(SW-1276): Removed console log * feat(SW-1276) fixed translations * feat(SW-1276): Added translations * feat(SW-1276) fix dynamic ID:s * feat(SW-1276) removed createElement * feat(SW-1276): Fixed build errors * feat(SW-1276): Updated label * feat(SW-1276): Rewrite SummaryCard Approved-by: Niclas Edenvin
2025-02-18 14:20:54 +00:00
parent 90fee1b0c4
commit 8616e4ab76
56 changed files with 4163 additions and 227 deletions
--- a/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
+++ b/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
@@ -0,0 +1,74 @@
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./summaryCard.module.css"
+
+interface SummaryCardProps {
+  title: string
+  image: {
+    src: string
+    alt: string
+  }
+  texts: string[]
+  supportingText?: string
+  links?: {
+    href: string
+    text: string
+    icon: React.ReactNode
+  }[]
+  chip?: React.ReactNode
+}
+
+export default function SummaryCard({
+  title,
+  texts,
+  image,
+  supportingText,
+  links,
+  chip,
+}: SummaryCardProps) {
+  return (
+    <div className={styles.card}>
+      <div className={styles.image}>
+        <Image src={image.src} alt={image.alt} width={152} height={152} />
+      </div>
+      <div className={styles.content}>
+        <div className={styles.topContent}>
+          <Body textTransform="bold" color="uiTextHighContrast">
+            {title}
+          </Body>
+          {texts.map((text) => (
+            <Body color="uiTextHighContrast" key={text}>
+              {text}
+            </Body>
+          ))}
+        </div>
+        {supportingText && (
+          <Caption color="uiTextPlaceholder">{supportingText}</Caption>
+        )}
+        <div className={styles.bottomContent}>
+          {chip}
+          {links && (
+            <div className={styles.links}>
+              {links.map((link) => (
+                <Caption asChild type="bold" color="burgundy" key={link.href}>
+                  <Link
+                    href={link.href}
+                    target="_blank"
+                    color="burgundy"
+                    className={styles.link}
+                  >
+                    {link.icon}
+                    {link.text}
+                  </Link>
+                </Caption>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css
+++ b/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css
@@ -0,0 +1,52 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+  .card {
+    align-items: flex-start;
+    flex-direction: row;
+  }
+}
+
+.image {
+  width: 152px;
+  height: 152px;
+
+  border-radius: var(--Corner-radius-Medium);
+}
+
+@media (min-width: 768px) {
+  .image {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.topContent {
+  margin-bottom: 10px;
+}
+
+.bottomContent {
+  margin-top: auto;
+}
+
+.links {
+  display: flex;
+  gap: var(--Spacing-x2);
+  padding-bottom: 10px;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+}