From 7417abc81463348272dae5bf2acfeab76f2172c6 Mon Sep 17 00:00:00 2001 From: Simon Emanuelsson Date: Tue, 20 Feb 2024 15:58:53 +0100 Subject: [PATCH] feat(WEB-102): language-switcher per page basis --- .../current-content-page/page.tsx | 2 +- .../ContentPage/contentPage.module.css | 9 +- components/Current/Header/Da.tsx | 198 ----------------- components/Current/Header/De.tsx | 209 ------------------ components/Current/Header/En.tsx | 196 ---------------- components/Current/Header/Fi.tsx | 198 ----------------- .../Header/LanguageSwitcher/Desktop.tsx | 37 ---- .../Desktop/desktop.module.css | 45 ++++ .../Header/LanguageSwitcher/Desktop/index.tsx | 82 +++++++ .../Header/LanguageSwitcher/Mobile.tsx | 31 --- .../Header/LanguageSwitcher/Mobile/index.tsx | 55 +++++ .../LanguageSwitcher/Mobile/mobile.module.css | 31 +++ components/Current/Header/MainMenu/index.tsx | 24 +- .../Header/MainMenu/mainMenu.module.css | 1 + components/Current/Header/No.tsx | 203 ----------------- components/Current/Header/Sv.tsx | 198 ----------------- components/Current/Header/TopMenu/index.tsx | 17 +- components/Current/Header/header.module.css | 6 + components/Current/Header/index.tsx | 30 ++- constants/current/links.ts | 80 ------- constants/languages.ts | 8 + lib/batchRequest.ts | 28 +++ lib/graphql/Query/LanguageSwitcher.graphql | 21 ++ types/components/current/header.ts | 2 +- types/components/current/header/mainMenu.ts | 3 + types/components/current/header/topMenu.ts | 3 + types/components/current/languageSwitcher.ts | 4 +- types/requests/languageSwitcher.ts | 11 + 28 files changed, 355 insertions(+), 1377 deletions(-) delete mode 100644 components/Current/Header/Da.tsx delete mode 100644 components/Current/Header/De.tsx delete mode 100644 components/Current/Header/En.tsx delete mode 100644 components/Current/Header/Fi.tsx delete mode 100644 components/Current/Header/LanguageSwitcher/Desktop.tsx create mode 100644 components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css create mode 100644 components/Current/Header/LanguageSwitcher/Desktop/index.tsx delete mode 100644 components/Current/Header/LanguageSwitcher/Mobile.tsx create mode 100644 components/Current/Header/LanguageSwitcher/Mobile/index.tsx create mode 100644 components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css delete mode 100644 components/Current/Header/No.tsx delete mode 100644 components/Current/Header/Sv.tsx delete mode 100644 constants/current/links.ts create mode 100644 constants/languages.ts create mode 100644 lib/batchRequest.ts create mode 100644 lib/graphql/Query/LanguageSwitcher.graphql create mode 100644 types/requests/languageSwitcher.ts diff --git a/app/[lang]/(live-current)/current-content-page/page.tsx b/app/[lang]/(live-current)/current-content-page/page.tsx index 3ada2f1ed..618e081cc 100644 --- a/app/[lang]/(live-current)/current-content-page/page.tsx +++ b/app/[lang]/(live-current)/current-content-page/page.tsx @@ -44,7 +44,7 @@ export default async function CurrentContentPage({ return ( <> -
+
diff --git a/components/Current/ContentPage/contentPage.module.css b/components/Current/ContentPage/contentPage.module.css index 129d1aeba..c2d896457 100644 --- a/components/Current/ContentPage/contentPage.module.css +++ b/components/Current/ContentPage/contentPage.module.css @@ -1,8 +1,7 @@ .wrapper { - width: 100%; - position: relative; - z-index: 10; - padding-bottom: 50px; background: #f3f2f1; display: block; -} + padding-bottom: 50px; + width: 100%; + z-index: 10; +} \ No newline at end of file diff --git a/components/Current/Header/Da.tsx b/components/Current/Header/Da.tsx deleted file mode 100644 index 4bf8164ea..000000000 --- a/components/Current/Header/Da.tsx +++ /dev/null @@ -1,198 +0,0 @@ -/* eslint-disable @next/next/no-img-element */ -import { - currentAboutLinks, - currentSponsoringLinks, - currentWifiLinks, -} from "@/constants/current/links" - -import Desktop from "./LanguageSwitcher/Desktop" -import Mobile from "./LanguageSwitcher/Mobile" - -import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher" -import type { HeaderProps } from "@/types/components/current/header" - -const paths: Record = { - "/kundeservice/sporgsmal-og-svar/om-scandics-website": currentAboutLinks, - "/oplev-scandic/wifi": currentWifiLinks, - "/sponsorering": currentSponsoringLinks, -} - -const currentLanguage = "Dansk" - -export default function DaHeader({ pathname }: HeaderProps) { - const links = paths?.[pathname] ?? null - return ( -
-
- Du er offline. Noget indhold på siden kan være forældet. - -
- -
- ) -} diff --git a/components/Current/Header/De.tsx b/components/Current/Header/De.tsx deleted file mode 100644 index b8d3fb5a9..000000000 --- a/components/Current/Header/De.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import { - currentAboutLinks, - currentSponsoringLinks, - currentWifiLinks, -} from "@/constants/current/links" - -import Desktop from "./LanguageSwitcher/Desktop" -import Mobile from "./LanguageSwitcher/Mobile" - -import type { HeaderProps } from "@/types/components/current/header" -import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher" - -const paths: Record = { - "/kundenbetreuung/haufig-gestellte-fragen/nutzung-der-internetseite": - currentAboutLinks, - "/scandic-entdecken/wlan": currentWifiLinks, - "/sponsoring": currentSponsoringLinks, -} - -const currentLanguage = "Deutsch" - -export default function DeHeader({ pathname }: HeaderProps) { - const links = paths?.[pathname] ?? null - - return ( -
-
- Sie sind offline. Manche Inhalte könnten nicht aktuell sein. - -
- - -
- ) -} diff --git a/components/Current/Header/En.tsx b/components/Current/Header/En.tsx deleted file mode 100644 index 10bc6c983..000000000 --- a/components/Current/Header/En.tsx +++ /dev/null @@ -1,196 +0,0 @@ -/* eslint-disable @next/next/no-img-element */ -import { - currentAboutLinks, - currentSponsoringLinks, - currentWifiLinks, -} from "@/constants/current/links" - -import Desktop from "./LanguageSwitcher/Desktop" -import Mobile from "./LanguageSwitcher/Mobile" - -import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher" -import type { HeaderProps } from "@/types/components/current/header" - -const paths: Record = { - "/customer-service/frequently-asked-questions/using-the-website": - currentAboutLinks, - "/explore-scandic/wifi": currentWifiLinks, - "/sponsoring": currentSponsoringLinks, -} - -const currentLanguage = "English" - -export default function EnHeader({ pathname }: HeaderProps) { - const links = paths?.[pathname] ?? null - return ( -
-
- You are offline, some content may be out of date. - -
- -
- ) -} diff --git a/components/Current/Header/Fi.tsx b/components/Current/Header/Fi.tsx deleted file mode 100644 index 87ec99599..000000000 --- a/components/Current/Header/Fi.tsx +++ /dev/null @@ -1,198 +0,0 @@ -/* eslint-disable @next/next/no-img-element */ -import { - currentAboutLinks, - currentSponsoringLinks, - currentWifiLinks, -} from "@/constants/current/links" - -import Desktop from "./LanguageSwitcher/Desktop" -import Mobile from "./LanguageSwitcher/Mobile" - -import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher" -import type { HeaderProps } from "@/types/components/current/header" - -const paths: Record = { - "/asiakaspalvelu/usein-kysytyt-kysymykset/tietoja-internetsivuista": - currentAboutLinks, - "/koe-scandic/maksuton-internetyhteys": currentSponsoringLinks, - "/scandic-entdecken/wlan": currentWifiLinks, -} - -const currentLanguage = "Suomi" - -export default function FiHeader({ pathname }: HeaderProps) { - const links = paths?.[pathname] ?? null - return ( -
-
- Ei yhteyttä verkkoon. Osa sisällöstä saattaa olla vanhentunut. - -
- -
- ) -} diff --git a/components/Current/Header/LanguageSwitcher/Desktop.tsx b/components/Current/Header/LanguageSwitcher/Desktop.tsx deleted file mode 100644 index dbdd288a7..000000000 --- a/components/Current/Header/LanguageSwitcher/Desktop.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher" - -export default function Desktop({ - currentLanguage, - links, -}: LanguageSwitcherProps) { - return ( -
- - -
- ) -} diff --git a/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css b/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css new file mode 100644 index 000000000..7d5faa37a --- /dev/null +++ b/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css @@ -0,0 +1,45 @@ +.dropdown { + background-clip: padding-box; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, .15); + border-radius: 4px; + box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + display: none; + float: left; + font-size: 1rem; + left: 0; + list-style: none; + margin: 2px 0 0; + min-width: 160px; + padding: 5px 0; + position: absolute; + text-align: left; + top: 100%; + z-index: 11; +} + +.dropdown.isOpen { + display: block; +} + +.link { + clear: both; + color: grey; + display: block; + font-weight: 400; + padding: 3px 20px; + white-space: nowrap; +} + +.link:hover { + background-color: #f5f5f5; + color: #737373; + text-decoration: none; +} + +.active>.link { + background-color: #00838e; + color: #fff; + outline: 0; + text-decoration: none; +} \ No newline at end of file diff --git a/components/Current/Header/LanguageSwitcher/Desktop/index.tsx b/components/Current/Header/LanguageSwitcher/Desktop/index.tsx new file mode 100644 index 000000000..9182f4182 --- /dev/null +++ b/components/Current/Header/LanguageSwitcher/Desktop/index.tsx @@ -0,0 +1,82 @@ +"use client" +import { useEffect, useRef, useState } from "react" + +import { languages } from "@/constants/languages" + +import styles from "./desktop.module.css" + +import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher" + +export default function Desktop({ + currentLanguage, + urls, +}: LanguageSwitcherProps) { + const [isOpen, setIsOpen] = useState(false) + const divRef = useRef(null) + + function toggleOpen() { + setIsOpen(prevIsOpen => !prevIsOpen) + } + + function close() { + setIsOpen(false) + } + + useEffect(() => { + function handleClickOutside(evt: Event) { + const target = evt.target as HTMLElement + if (divRef.current && target && !divRef.current.contains(target)) { + close() + } + } + + if (divRef.current) { + document.addEventListener('click', handleClickOutside, false) + } + return () => { + document.removeEventListener('click', handleClickOutside, false) + } + }, [close]) + + return ( +
+ + +
+ ) +} diff --git a/components/Current/Header/LanguageSwitcher/Mobile.tsx b/components/Current/Header/LanguageSwitcher/Mobile.tsx deleted file mode 100644 index 7344b1d76..000000000 --- a/components/Current/Header/LanguageSwitcher/Mobile.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher" - -export default function Mobile({ - currentLanguage, - links, -}: LanguageSwitcherProps) { - return ( -
- - -
- ) -} diff --git a/components/Current/Header/LanguageSwitcher/Mobile/index.tsx b/components/Current/Header/LanguageSwitcher/Mobile/index.tsx new file mode 100644 index 000000000..7fd6d7249 --- /dev/null +++ b/components/Current/Header/LanguageSwitcher/Mobile/index.tsx @@ -0,0 +1,55 @@ +"use client" +import { useState } from "react" + +import { languages } from "@/constants/languages" + +import styles from "./mobile.module.css" + +import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher" + +export default function Mobile({ + currentLanguage, + urls, +}: LanguageSwitcherProps) { + const [isOpen, setIsOpen] = useState(false) + + function toggleOpen() { + setIsOpen(prevIsOpen => !prevIsOpen) + } + + return ( +
+ + +
+ ) +} diff --git a/components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css b/components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css new file mode 100644 index 000000000..0f678bbd1 --- /dev/null +++ b/components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css @@ -0,0 +1,31 @@ +.dropdown { + display: none; +} + +.dropdown.isOpen { + display: block; +} + +.arrow { + background-image: url("/Static/img/icons/arrows/arrow-down-grey.png"); + background-position: 50%; + background-repeat: no-repeat; + display: inline-block; + margin-left: 5px; + padding: 5px 10px; +} + +.arrow.open { + background-image: url("/Static/img/icons/arrows/arrow-up-grey.png"); +} + +.link { + color: grey; + display: block; + text-transform: capitalize; +} + +.link:hover { + color: #7f7369; + text-decoration: none; +} \ No newline at end of file diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx index b1b09835b..8f04b7a74 100644 --- a/components/Current/Header/MainMenu/index.tsx +++ b/components/Current/Header/MainMenu/index.tsx @@ -2,17 +2,21 @@ import { useState } from "react" import Image from "@/components/Image" -// import Mobile from "../LanguageSwitcher/Mobile" +import Mobile from "../LanguageSwitcher/Mobile" import styles from "./mainMenu.module.css" import type { MainMenuProps } from "@/types/components/current/header/mainMenu" -/** - * Mobile is commented out as it relates to - * LanguageSwitcher and will be handled in another task - */ -export default function MainMenu({ frontpageLinkText, homeHref, links, logo, topMenuMobileLinks }: MainMenuProps) { +export default function MainMenu({ + currentLanguage, + frontpageLinkText, + homeHref, + links, + logo, + topMenuMobileLinks, + urls, +}: MainMenuProps) { const [isOpen, setIsOpen] = useState(false) function toogleIsOpen() { @@ -90,9 +94,11 @@ export default function MainMenu({ frontpageLinkText, homeHref, links, logo, top ))} - {/*
  • - {links ? : null} -
    • */} + {urls ? ( +
  • + +
    • + ) : null} diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css index ed56b3ef0..58dbe87e1 100644 --- a/components/Current/Header/MainMenu/mainMenu.module.css +++ b/components/Current/Header/MainMenu/mainMenu.module.css @@ -167,6 +167,7 @@ .mainMenu { background-color: hsla(0, 0%, 100%, .95); position: relative; + z-index: unset; } .container { diff --git a/components/Current/Header/No.tsx b/components/Current/Header/No.tsx deleted file mode 100644 index 42399eccf..000000000 --- a/components/Current/Header/No.tsx +++ /dev/null @@ -1,203 +0,0 @@ -import { - currentAboutLinks, - currentSponsoringLinks, - currentWifiLinks, -} from "@/constants/current/links" - -import Desktop from "./LanguageSwitcher/Desktop" -import Mobile from "./LanguageSwitcher/Mobile" - -import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher" -import type { HeaderProps } from "@/types/components/current/header" - -const paths: Record = { - "/kundeservice/sporsmal-og-svar/bruk-av-nettsiden": currentAboutLinks, - "/utforsk-scandic/wifi": currentWifiLinks, - "/vi-sponser": currentSponsoringLinks, -} - -const currentLanguage = "Norsk" - -export default function NoHeader({ pathname }: HeaderProps) { - const links = paths?.[pathname] ?? null - - return ( -
    -
    - Du er offline. Noe innhold kan være utdatert. - -
    - -
    - ) -} diff --git a/components/Current/Header/Sv.tsx b/components/Current/Header/Sv.tsx deleted file mode 100644 index 8f3aca360..000000000 --- a/components/Current/Header/Sv.tsx +++ /dev/null @@ -1,198 +0,0 @@ -/* eslint-disable @next/next/no-img-element */ -import { - currentAboutLinks, - currentSponsoringLinks, - currentWifiLinks, -} from "@/constants/current/links" - -import Desktop from "./LanguageSwitcher/Desktop" -import Mobile from "./LanguageSwitcher/Mobile" - -import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher" -import type { HeaderProps } from "@/types/components/current/header" - -const paths: Record = { - "/kundservice/fragor-och-svar/om-scandics-webbplats": currentAboutLinks, - "/utforska-scandic/wi-fi": currentWifiLinks, - "/vi-sponsrar": currentSponsoringLinks, -} - -const currentLanguage = "Svenska" - -export default function SvHeader({ pathname }: HeaderProps) { - const links = paths?.[pathname] ?? null - return ( -
    -
    - Du är offline. Sidan kan visa gammalt innehåll. - -
    - -
    - ) -} diff --git a/components/Current/Header/TopMenu/index.tsx b/components/Current/Header/TopMenu/index.tsx index ba4d4379f..b73c32c77 100644 --- a/components/Current/Header/TopMenu/index.tsx +++ b/components/Current/Header/TopMenu/index.tsx @@ -1,14 +1,10 @@ -// import Desktop from "../LanguageSwitcher/Desktop" +import Desktop from "../LanguageSwitcher/Desktop" import styles from "./topMenu.module.css" import type { TopMenuProps } from "@/types/components/current/header/topMenu" -/** - * Desktop is commented out as it relates to - * LanguageSwitcher and will be handled in another task - */ -export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuProps) { +export default function TopMenu({ currentLanguage, frontpageLinkText, homeHref, links, urls }: TopMenuProps) { return (
    @@ -20,9 +16,12 @@ export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuP