Merged in feat/SW-3520-update-footer-ui-and-footer-link (pull request #2910)

feat(SW-3520): Updated the footer

* feat(SW-3520): Updated links to route to scandic web

* feat(SW-3520): Updated the footer with language switcher

* feat(SW-3520): Updated the Contact-us link and removed double slash


Approved-by: Anton Gunnarsson

apps/partner-sas/components/LanguageSwitcher/index.tsx

@@ -20,11 +20,14 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { languageSwitcherVariants } from "./variants"
+
 import styles from "./languageSwitcher.module.css"
 
 type LanguageSwitcherProps = {
   currentLanguage: Lang
   isMobile?: boolean
+  type?: "footer" | "header"
 }
 
 export function replaceUrlPart(currentPath: string, newPart: string): string {
@@ -50,12 +53,16 @@ export function replaceUrlPart(currentPath: string, newPart: string): string {
 export function LanguageSwitcher({
   currentLanguage,
   isMobile = false,
+  type = "header",
 }: LanguageSwitcherProps) {
+  const classNames = languageSwitcherVariants({ position: type })
+  const isFooter = type === "footer"
+
   return (
-    <div className={styles.languageSwitcher}>
+    <div className={classNames}>
       <DialogTrigger>
         <Button className={styles.triggerButton} variant={"Text"} wrapping>
-          {isMobile ? null : (
+          {isMobile && !isFooter ? null : (
             <MaterialIcon
               icon="globe"
               size={16}
@@ -82,7 +89,10 @@ export function LanguageSwitcher({
           </Typography>
         </Button>
         {isMobile ? (
-          <ModalOverlay isDismissable className={styles.languageModalOverlay}>
+          <ModalOverlay
+            isDismissable
+            className={`${styles.languageModalOverlay} ${isFooter ? styles.footer : null}`}
+          >
             <Modal className={styles.languageModal}>
               <Dialog>
                 {({ close }) => (
@@ -96,7 +106,11 @@ export function LanguageSwitcher({
             </Modal>
           </ModalOverlay>
         ) : (
-          <Popover offset={28} className={styles.languageSwitcherPopover}>
+          <Popover
+            offset={isFooter ? 0 : 21}
+            className={styles.languageSwitcherPopover}
+            placement={"bottom right"}
+          >
             <Dialog>
               {({ close }) => (
                 <LanguageSwitcherContent
@@ -142,19 +156,27 @@ function LanguageSwitcherContent({
     <div className={styles.languageSwitcherContent}>
       {isMobile ? (
         <>
-          <Button
-            variant={"Text"}
-            size={"Medium"}
-            onPress={closeModal}
-            className={styles.arrowBack}
-          >
-            <MaterialIcon
-              icon="chevron_left"
-              size={28}
-              className={styles.arrowBackIcon}
-              color={"CurrentColor"}
-            />
-          </Button>
+          <div className={styles.closeModalWrapper}>
+            <Button
+              variant={"Text"}
+              size={"Medium"}
+              onPress={closeModal}
+              className={styles.closeModal}
+            >
+              <MaterialIcon
+                icon="chevron_left"
+                size={28}
+                className={styles.arrowBackIcon}
+                color={"CurrentColor"}
+              />
+              <MaterialIcon
+                icon="close"
+                size={32}
+                className={styles.closeIcon}
+                color={"CurrentColor"}
+              />
+            </Button>
+          </div>
           <Typography variant={"Title/Subtitle/md"}>
             <h3 className={styles.title}>
               {intl.formatMessage({
@@ -180,7 +202,7 @@ function LanguageSwitcherContent({
                   }
                 >
                   <Link
-                    className={styles.link}
+                    className={`${styles.link} ${isActive ? styles.active : ""}`}
                     href={replaceUrlPart(pathname, url)}
                     variant="languageSwitcher"
                     keepSearchParams

apps/partner-sas/components/LanguageSwitcher/languageSwitcher.module.css

@@ -1,18 +1,39 @@
 .languageSwitcher {
   .triggerButton {
     gap: var(--Space-x1);
-    padding: var(--Space-x1);
     justify-content: flex-start;
     width: 100%;
     border: 0 none;
   }
 
   .triggerText {
+    align-items: center;
     display: flex;
-    justify-content: space-between;
     width: 100%;
     color: var(--Text-sas-20);
   }
+
+  &.header {
+    .triggerButton {
+      padding: var(--Space-x1);
+    }
+    .triggerText {
+      justify-content: space-between;
+    }
+  }
+
+  &.footer {
+    .triggerText,
+    .chevron {
+      color: var(--TEMP-sas-40);
+    }
+    .chevron {
+      margin: 1px 0 0 2px;
+    }
+    .globeIcon {
+      color: var(--TEMP-sas-40);
+    }
+  }
 }
 
 .languageSwitcherContent {
@@ -42,6 +63,10 @@
   justify-content: space-between;
   align-items: center;
   border-radius: var(--Space-x1);
+
+  &.active {
+    background-color: var(--Surface-Primary-Hover);
+  }
 }
 
 .languageModalOverlay {
@@ -61,22 +86,56 @@
   z-index: 1001;
 
   .closeModal {
-    position: fixed;
-    top: var(--Space-x2);
-    right: var(--Space-x2);
+    align-self: flex-end;
     background-color: transparent;
-    color: transparent;
+    color: var(--TEMP-sas-40);
+    gap: 0;
+  }
+
+  .closeIcon {
+    display: none;
+  }
+}
+
+.footer .languageModal {
+  top: 0;
+
+  .languageSwitcherContent {
+    padding: 0;
+
+    .title,
+    .languageSwitcherListContainer {
+      padding: 0 var(--Space-x2);
+    }
+  }
+  .closeModalWrapper {
+    display: flex;
+    width: 100%;
+    padding: 0 var(--Space-x2);
+    border-bottom: 1px solid var(--SAS-90);
+    justify-content: flex-end;
+  }
+  .arrowBackIcon {
+    display: none;
+  }
+  .closeIcon {
+    display: block;
   }
 }
 
 @media screen and (min-width: 768px) {
   .languageSwitcher {
-    .triggerText {
-      color: white;
+    &.header {
+      .triggerText {
+        color: white;
+      }
+
+      .triggerButton {
+        color: white;
+      }
     }
 
     .triggerButton {
-      color: white;
       padding: 0;
     }
 

apps/partner-sas/components/LanguageSwitcher/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./languageSwitcher.module.css"
+
+export const languageSwitcherVariants = cva(styles.languageSwitcher, {
+  variants: {
+    position: {
+      header: styles.header,
+      footer: styles.footer,
+    },
+    defaultVariants: {
+      position: "header",
+    },
+  },
+})