Merged in feat/SW-1762 (pull request #2050)

feat: make enter details bottom sheet pixed, and add spacing at the bottom of page

* feat: make enter details bottom sheet pixed, and add spacing at the bottom of page


Approved-by: Arvid Norlin

apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx

@@ -12,6 +12,9 @@ import styles from "./mainnav.module.css"
 import type { FooterMainNavProps } from "@/types/components/footer/navigation"
 
 export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
+  if (!mainLinks.length) {
+    return null
+  }
   return (
     <nav className={styles.mainNavigation}>
       <ul className={styles.mainNavigationList}>

apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx

@@ -29,32 +29,34 @@ export default function FooterSecondaryNav({
           >
             {appDownloads.title}
           </Caption>
-          <ul className={styles.secondaryNavigationList}>
-            {appDownloads.links.map(
-              ({ href, type }) =>
-                href && (
-                  <li key={type} className={styles.appDownloadItem}>
-                    <a
-                      href={href.href}
-                      target="_blank"
-                      aria-label={href.title}
-                      onClick={() => trackSocialMediaClick(href.title)}
-                    >
-                      <Image
-                        src={
-                          AppDownLoadLinks[
-                            `${type}_${lang}` as keyof typeof AppDownLoadLinks
-                          ]
-                        }
-                        alt=""
-                        width={125}
-                        height={40}
-                      />
-                    </a>
-                  </li>
-                )
-            )}
-          </ul>
+          {appDownloads.links.length ? (
+            <ul className={styles.secondaryNavigationList}>
+              {appDownloads.links.map(
+                ({ href, type }) =>
+                  href && (
+                    <li key={type} className={styles.appDownloadItem}>
+                      <a
+                        href={href.href}
+                        target="_blank"
+                        aria-label={href.title}
+                        onClick={() => trackSocialMediaClick(href.title)}
+                      >
+                        <Image
+                          src={
+                            AppDownLoadLinks[
+                              `${type}_${lang}` as keyof typeof AppDownLoadLinks
+                            ]
+                          }
+                          alt=""
+                          width={125}
+                          height={40}
+                        />
+                      </a>
+                    </li>
+                  )
+              )}
+            </ul>
+          ) : null}
         </nav>
       )}
       {secondaryLinks.map((group) => (
@@ -66,20 +68,22 @@ export default function FooterSecondaryNav({
           >
             {group.title}
           </Caption>
-          <ul className={styles.secondaryNavigationList}>
-            {group?.links?.map((link) => (
-              <li key={link.title} className={styles.secondaryNavigationItem}>
-                <Link
-                  href={link.url}
-                  target={link.openInNewTab ? "_blank" : undefined}
-                  color="burgundy"
-                  onClick={() => trackFooterClick(group.title, link.title)}
-                >
-                  {link.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
+          {group?.links.length ? (
+            <ul className={styles.secondaryNavigationList}>
+              {group.links.map((link) => (
+                <li key={link.title} className={styles.secondaryNavigationItem}>
+                  <Link
+                    href={link.url}
+                    target={link.openInNewTab ? "_blank" : undefined}
+                    color="burgundy"
+                    onClick={() => trackFooterClick(group.title, link.title)}
+                  >
+                    {link.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : null}
         </nav>
       ))}
     </div>

apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column-reverse;
   gap: var(--Spacing-x6);
-  margin-top: var(--Spacing-x6);
 }
 
 .secondaryNavigationList {
@@ -35,14 +34,15 @@
 
 @media screen and (min-width: 768px) {
   .secondaryNavigation {
-    margin-top: var(--Spacing-x4);
     gap: 120px;
     flex-direction: row;
   }
 }
+
 @media screen and (min-width: 1367px) {
   .secondaryNavigation {
-    margin-top: 0;
     gap: 80px;
+    grid-column: 2;
+    justify-self: flex-end;
   }
 }

apps/scandic-web/components/Footer/Navigation/navigation.module.css

@@ -4,10 +4,9 @@
 }
 
 .maxWidth {
+  display: grid;
+  gap: var(--Spacing-x6);
   margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
   max-width: var(--max-width-page);
 }
 
@@ -15,13 +14,15 @@
   .section {
     padding: var(--Spacing-x9) 0;
   }
+
+  .maxWidth {
+    gap: var(--Spacing-x4);
+  }
 }
 
 @media screen and (min-width: 1367px) {
-  .section {
-    padding: var(--Spacing-x9) 0;
-  }
   .maxWidth {
-    flex-direction: row;
+    gap: var(--Spacing-x2);
+    grid-template-columns: 1fr 1fr;
   }
 }

apps/scandic-web/components/Footer/footer.module.css

@@ -1,3 +1,18 @@
 .footer {
+  --bottom-sheet-height: 7.5em;
+  --promo-height: 50px;
+
   margin-top: auto;
 }
+
+@media screen and (max-width: 1366px) {
+  :has([data-footer-spacing]) ~ .footer {
+    background: var(--Base-Text-High-contrast);
+    padding-bottom: var(--bottom-sheet-height);
+  }
+
+  :has([data-footer-spacing-signup]) ~ .footer {
+    background: var(--Base-Text-High-contrast);
+    padding-bottom: calc(var(--bottom-sheet-height) + var(--promo-height));
+  }
+}