feat: new booking confirmation page

2024-11-28 14:22:31 +01:00
parent 329d762917
commit ed1574838a
66 changed files with 1127 additions and 825 deletions
@@ -16,7 +16,8 @@
 .breadcrumb {
  font-family: var(--typography-Footnote-Bold-fontFamily);
  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
+  font-weight: 500;
+  /* var(--typography-Footnote-Bold-fontWeight); */
  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
  line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -24,7 +25,8 @@
 .link.breadcrumb {
  font-family: var(--typography-Footnote-Bold-fontFamily);
  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
+  font-weight: 500;
+  /* var(--typography-Footnote-Bold-fontWeight); */
  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
  line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -159,12 +161,15 @@
  color: var(--Scandic-Peach-50);
 }

-.peach80 {
+.peach80,
+.baseTextMediumContrast {
  color: var(--Base-Text-Medium-contrast);
 }

 .peach80:hover,
-.peach80:active {
+.peach80:active,
+.baseTextMediumContrast:hover,
+.baseTextMediumContrast:active {
  color: var(--Base-Text-High-contrast);
 }

@@ -235,6 +240,7 @@
  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
  line-height: var(--typography-Caption-Bold-lineHeight);
 }
+
 .bold {
  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
@@ -9,6 +9,7 @@ export const linkVariants = cva(styles.link, {
    },
    color: {
      baseButtonTextOnFillNormal: styles.baseButtonTextOnFillNormal,
+      baseTextMediumContrast: styles.baseTextMediumContrast,
      black: styles.black,
      burgundy: styles.burgundy,
      none: "",
@@ -86,3 +86,7 @@
 .baseTextDisabled {
  color: var(--Base-Text-Disabled);
 }
+
+.mainGrey60 {
+  color: var(--Main-Grey-60);
+}
@@ -14,6 +14,7 @@ const config = {
      uiTextMediumContrast: styles.uiTextMediumContrast,
      uiTextPlaceholder: styles.uiTextPlaceholder,
      red: styles.red,
+      mainGrey60: styles.mainGrey60,
    },
    textAlign: {
      center: styles.center,
@@ -32,7 +32,7 @@ function getIcon(variant: ToastsProps["variant"]) {
  }
 }

-export function Toast({ message, onClose, variant }: ToastsProps) {
+export function Toast({ children, message, onClose, variant }: ToastsProps) {
  const className = toastVariants({ variant })
  const Icon = getIcon(variant)
  return (
@@ -40,10 +40,16 @@ export function Toast({ message, onClose, variant }: ToastsProps) {
      <div className={styles.iconContainer}>
        {Icon && <Icon color="white" height={24} width={24} />}
      </div>
-      <Body className={styles.message}>{message}</Body>
-      <Button onClick={onClose} variant="icon" intent="text">
-        <CloseLargeIcon />
-      </Button>
+      {message ? (
+        <Body className={styles.message}>{message}</Body>
+      ) : (
+        <div className={styles.content}>{children}</div>
+      )}
+      {onClose ? (
+        <Button onClick={onClose} variant="icon" intent="text">
+          <CloseLargeIcon />
+        </Button>
+      ) : null}
    </div>
  )
 }
@@ -8,6 +8,11 @@
  align-items: center;
 }

+.content {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x3)
+    var(--Spacing-x-one-and-half) var(--Spacing-x2);
+}
+
@media screen and (min-width: 768px) {
  .toast {
    width: var(--width);
@@ -2,9 +2,16 @@ import { toastVariants } from "./variants"

 import type { VariantProps } from "class-variance-authority"

-export interface ToastsProps
-  extends Omit<React.AnchorHTMLAttributes<HTMLDivElement>, "color">,
-    VariantProps<typeof toastVariants> {
-  message: React.ReactNode
-  onClose: () => void
-}
+export type ToastsProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> &
+  VariantProps<typeof toastVariants> & {
+    onClose?: () => void
+  } & (
+    | {
+        children: React.ReactNode
+        message?: never
+      }
+    | {
+        children?: never
+        message: React.ReactNode
+      }
+  )