Merged in chore/SW-2878-extract-booking-confirmation-pag (pull request #2779)

Chore/SW-2878 extract booking confirmation pag

* chore(SW-2878): Moved booking confirmation page to booking-flow package

* chore(SW-2878): Fixed promo styles as per design

* chore(SW-2878): Kept tiny duplicate function to avoid export from booking-flow package


Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/SidePanel/index.tsx

@@ -0,0 +1,21 @@
+import { sidePanelVariants } from "./variants"
+
+import styles from "./sidePanel.module.css"
+
+import type { VariantProps } from "class-variance-authority"
+
+interface SidePanelProps extends VariantProps<typeof sidePanelVariants> {}
+
+export function SidePanel({
+  children,
+  variant,
+}: React.PropsWithChildren<SidePanelProps>) {
+  const classNames = sidePanelVariants({ variant })
+  return (
+    <div className={classNames}>
+      <div className={styles.hider} />
+      <div className={styles.wrapper}>{children}</div>
+      <div className={styles.shadow} />
+    </div>
+  )
+}

packages/booking-flow/lib/components/SidePanel/sidePanel.module.css

@@ -0,0 +1,62 @@
+.sidePanel,
+.hider,
+.shadow {
+  display: none;
+}
+
+@media screen and (min-width: 1367px) {
+  .sidePanel {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+  }
+
+  .summary {
+    margin-top: calc(0px - var(--Spacing-x9));
+  }
+
+  .hider {
+    display: block;
+    position: sticky;
+  }
+
+  .receipt .hider {
+    background-color: transparent;
+    height: 150px;
+    margin-top: -78px;
+    top: -40px;
+  }
+
+  .summary .hider {
+    background-color: var(--Scandic-Brand-Warm-White);
+    height: 40px;
+    margin-top: var(--Spacing-x4);
+    top: calc(var(--booking-widget-desktop-height) - 6px);
+  }
+
+  .wrapper {
+    background-color: var(--Main-Grey-White);
+    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+    border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+    border-style: solid;
+    border-width: 1px;
+    border-bottom: none;
+    margin-top: calc(0px - var(--Spacing-x9));
+    position: sticky;
+    top: calc(
+      var(--booking-widget-desktop-height) + var(--Spacing-x2) +
+        var(--Spacing-x-half)
+    );
+    z-index: 9;
+  }
+
+  .shadow {
+    background-color: var(--Main-Grey-White);
+    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-style: solid;
+    border-bottom: none;
+    border-top: none;
+    display: block;
+  }
+}

packages/booking-flow/lib/components/SidePanel/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./sidePanel.module.css"
+
+export const sidePanelVariants = cva(styles.sidePanel, {
+  variants: {
+    variant: {
+      receipt: styles.receipt,
+      summary: styles.summary,
+    },
+  },
+  defaultVariants: {
+    variant: "summary",
+  },
+})