From 39e84688864a8470496507bd3d54be6200fb07b9 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Tue, 20 Aug 2024 10:24:11 +0200 Subject: [PATCH 01/10] feat(SW-185): Created mockup for footer --- app/[lang]/(live)/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx index 35144b8d9..83db732d1 100644 --- a/app/[lang]/(live)/layout.tsx +++ b/app/[lang]/(live)/layout.tsx @@ -7,8 +7,8 @@ import TrpcProvider from "@/lib/trpc/Provider" import TokenRefresher from "@/components/Auth/TokenRefresher" import AdobeSDKScript from "@/components/Current/AdobeSDKScript" -import Footer from "@/components/Current/Footer" import VwoScript from "@/components/Current/VwoScript" +import Footer from "@/components/Footer" import { preloadUserTracking } from "@/components/TrackingSDK" import { getIntl } from "@/i18n" import ServerIntlProvider from "@/i18n/Provider" From cfcb05a70a4ee397e1348d3c9b4d0744597a5cec Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Tue, 20 Aug 2024 10:24:44 +0200 Subject: [PATCH 02/10] feat(SW-185): basic setup for new footer with mocked data --- components/Footer/Details/details.module.css | 13 +++ components/Footer/Details/index.tsx | 25 +++++ .../Footer/Navigation/MainNav/index.tsx | 30 ++++++ .../Navigation/MainNav/mainnav.module.css | 23 ++++ .../Footer/Navigation/SecondaryNav/index.tsx | 35 ++++++ .../SecondaryNav/secondarynav.module.css | 25 +++++ components/Footer/Navigation/index.tsx | 19 ++++ .../Footer/Navigation/navigation.module.css | 11 ++ components/Footer/index.tsx | 11 ++ components/Footer/mockedData.ts | 101 ++++++++++++++++++ 10 files changed, 293 insertions(+) create mode 100644 components/Footer/Details/details.module.css create mode 100644 components/Footer/Details/index.tsx create mode 100644 components/Footer/Navigation/MainNav/index.tsx create mode 100644 components/Footer/Navigation/MainNav/mainnav.module.css create mode 100644 components/Footer/Navigation/SecondaryNav/index.tsx create mode 100644 components/Footer/Navigation/SecondaryNav/secondarynav.module.css create mode 100644 components/Footer/Navigation/index.tsx create mode 100644 components/Footer/Navigation/navigation.module.css create mode 100644 components/Footer/index.tsx create mode 100644 components/Footer/mockedData.ts diff --git a/components/Footer/Details/details.module.css b/components/Footer/Details/details.module.css new file mode 100644 index 000000000..19f1494fe --- /dev/null +++ b/components/Footer/Details/details.module.css @@ -0,0 +1,13 @@ +.details { + background: var(--Main-Grey-100); + color: var(--Main-Grey-White); + padding: var(--Spacing-x5) var(--Spacing-x5) var(--Spacing-x9) + var(--Spacing-x5); +} + +.imageContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid rgba(227, 217, 209, 0.2); + padding: 0 0 var(--Spacing-x2) 0; +} diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx new file mode 100644 index 000000000..061105620 --- /dev/null +++ b/components/Footer/Details/index.tsx @@ -0,0 +1,25 @@ +import Image from "@/components/Image" + +import styles from "./details.module.css" + +export default async function FooterDetails() { + return ( +
+
+ Scandic Hotels logo +
+ +
+
+
+ ) +} diff --git a/components/Footer/Navigation/MainNav/index.tsx b/components/Footer/Navigation/MainNav/index.tsx new file mode 100644 index 000000000..f3158ba4f --- /dev/null +++ b/components/Footer/Navigation/MainNav/index.tsx @@ -0,0 +1,30 @@ +import { ArrowRightIcon } from "@/components/Icons" +import Link from "@/components/TempDesignSystem/Link" + +import styles from "./mainnav.module.css" + +export default async function FooterMainNav({ + mainLinks, +}: { + mainLinks: Array<{ id: string; href: string; title: string }> +}) { + return ( + + ) +} diff --git a/components/Footer/Navigation/MainNav/mainnav.module.css b/components/Footer/Navigation/MainNav/mainnav.module.css new file mode 100644 index 000000000..b4cbffc88 --- /dev/null +++ b/components/Footer/Navigation/MainNav/mainnav.module.css @@ -0,0 +1,23 @@ +.mainNavigation { + max-width: 360px; + width: 100%; +} + +.mainNavigationList { + list-style: none; +} + +.mainNavigationItem { + padding: var(--Spacing-x3) 0; + border-bottom: 1px solid var(--Scandic-Peach-20); + &:last-child { + border-bottom: 0; + } +} + +.mainNavigationLink { + font-size: 20px; + font-weight: 500; + display: flex; + justify-content: space-between; +} diff --git a/components/Footer/Navigation/SecondaryNav/index.tsx b/components/Footer/Navigation/SecondaryNav/index.tsx new file mode 100644 index 000000000..914dcf123 --- /dev/null +++ b/components/Footer/Navigation/SecondaryNav/index.tsx @@ -0,0 +1,35 @@ +import Link from "@/components/TempDesignSystem/Link" + +import styles from "./secondarynav.module.css" + +export default async function FooterSecondaryNav({ + secondaryLinks, +}: { + secondaryLinks: Record< + string, + { title: string; links: Array<{ id: string; href: string; title: string }> } + > +}) { + return ( +
+ {Object.entries(secondaryLinks).map(([key, group]) => ( + + ))} +
+ ) +} diff --git a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css new file mode 100644 index 000000000..3d7d6a6ec --- /dev/null +++ b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css @@ -0,0 +1,25 @@ +.secondaryNavigation { + display: flex; + gap: 80px; +} + +.secondaryNavigationList { + display: flex; + flex-direction: column; + list-style: none; + gap: var(--Spacing-x3); +} + +.secondaryNavigationGroup { + display: flex; + flex-direction: column; + gap: var(--Spacing-x3); +} + +.secondaryNavigationGroupTitle { + font-size: 14px; + color: var(--Scandic-Peach-80); + font-weight: 500; + font-family: var(--typography-Body-Bold-fontFamily); + margin: 0; +} diff --git a/components/Footer/Navigation/index.tsx b/components/Footer/Navigation/index.tsx new file mode 100644 index 000000000..13b0e0f47 --- /dev/null +++ b/components/Footer/Navigation/index.tsx @@ -0,0 +1,19 @@ +import MaxWidth from "@/components/MaxWidth" + +import { navigationData } from "../mockedData" +import FooterMainNav from "./MainNav" +import FooterSecondaryNav from "./SecondaryNav" + +import styles from "./navigation.module.css" + +export default async function FooterNavigation() { + const { mainLinks, secondaryLinks } = navigationData + return ( +
+ + + + +
+ ) +} diff --git a/components/Footer/Navigation/navigation.module.css b/components/Footer/Navigation/navigation.module.css new file mode 100644 index 000000000..fa45a3d99 --- /dev/null +++ b/components/Footer/Navigation/navigation.module.css @@ -0,0 +1,11 @@ +.section { + background: var(--Scandic-Brand-Pale-Peach); + padding: 160px var(--Spacing-x9); + color: var(--Scandic-Brand-Burgundy); +} + +.maxWidth { + margin: 0 auto; + display: flex; + justify-content: space-between; +} diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx new file mode 100644 index 000000000..4ce45da0f --- /dev/null +++ b/components/Footer/index.tsx @@ -0,0 +1,11 @@ +import FooterDetails from "./Details" +import FooterNavigation from "./Navigation" + +export default async function Footer() { + return ( +
+ + +
+ ) +} diff --git a/components/Footer/mockedData.ts b/components/Footer/mockedData.ts new file mode 100644 index 000000000..491bc6a56 --- /dev/null +++ b/components/Footer/mockedData.ts @@ -0,0 +1,101 @@ +export const navigationData = { + mainLinks: [ + { + title: "Travel guides", + href: "/travel-guides", + id: "travel-guides", + }, + { + title: "New hotels", + href: "/new-hotels", + id: "new-hotels", + }, + { + title: "Accessibililty", + href: "/accessibility", + id: "accessibility", + }, + { + title: "Sustanability", + href: "/sustainability", + id: "sustainability", + }, + ], + secondaryLinks: { + app: { + title: "Scandic App", + links: [ + { + title: "App Store", + href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712", + id: "app-store", + }, + { + title: "Google Play", + href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels", + id: "google-play", + }, + ], + }, + customerService: { + title: "Customer service", + links: [ + { + title: "Contact us", + href: "/contact-us", + id: "contact-us", + }, + { + title: "Frequntly asked questions", + href: "/frequently-asked-questions", + id: "frequently-asked-questions", + }, + { + title: "Rates and policys", + href: "/rates-and-policies", + id: "rates-and-policies", + }, + { + title: "Terms and conditions", + href: "/terms-and-conditions", + id: "terms-and-conditions", + }, + ], + }, + about: { + title: "About Scandic Hotels", + links: [ + { + title: "Scandic Group", + href: "/scandic-group", + id: "scandic-group", + }, + { + title: "Investors", + href: "/investors", + id: "investors", + }, + { + title: "Press", + href: "/press", + id: "press", + }, + { + title: "Sponsors", + href: "/sponsors", + id: "sponsors", + }, + { + title: "Partners", + href: "/partners", + id: "partners", + }, + { + title: "Career", + href: "/career", + id: "career", + }, + ], + }, + }, +} From 9d416f593dafdd44acc06c44418602961866af29 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 21 Aug 2024 14:08:15 +0200 Subject: [PATCH 03/10] feat(SW-185): Footer mobile adjustments --- components/Footer/Details/details.module.css | 47 ++++++++++- components/Footer/Details/index.tsx | 78 +++++++++++++++---- .../Navigation/MainNav/mainnav.module.css | 10 ++- .../SecondaryNav/secondarynav.module.css | 12 ++- .../Footer/Navigation/navigation.module.css | 12 ++- components/Footer/mockedData.ts | 64 +++++++++++++++ components/Icons/Facebook.tsx | 27 +++++++ components/Icons/Instagram.tsx | 27 +++++++ components/Icons/get-icon-by-icon-name.ts | 9 +++ types/components/icon.ts | 3 + 10 files changed, 269 insertions(+), 20 deletions(-) create mode 100644 components/Icons/Facebook.tsx create mode 100644 components/Icons/Instagram.tsx diff --git a/components/Footer/Details/details.module.css b/components/Footer/Details/details.module.css index 19f1494fe..a6b184ea2 100644 --- a/components/Footer/Details/details.module.css +++ b/components/Footer/Details/details.module.css @@ -1,13 +1,52 @@ .details { background: var(--Main-Grey-100); color: var(--Main-Grey-White); - padding: var(--Spacing-x5) var(--Spacing-x5) var(--Spacing-x9) - var(--Spacing-x5); + padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7); } -.imageContainer { +.topContainer { display: flex; justify-content: space-between; - border-bottom: 1px solid rgba(227, 217, 209, 0.2); padding: 0 0 var(--Spacing-x2) 0; + margin-bottom: var(--Spacing-x2); +} + +.bottomContainer { + display: flex; + justify-content: space-between; + flex-direction: column-reverse; +} + +.socialNav { + display: flex; + gap: var(--Spacing-x2); +} + +.navigationContainer { + display: flex; + justify-content: space-between; + margin-bottom: var(--Spacing-x2); + padding-bottom: var(--Spacing-x2); + border-bottom: 1px solid #e3d9d120; +} + +.navigation { + display: flex; + gap: var(--Spacing-x2); +} + +@media screen and (min-width: 1367px) { + .details { + background: var(--Main-Grey-100); + color: var(--Main-Grey-White); + padding: var(--Spacing-x5) var(--Spacing-x5) var(--Spacing-x9); + } + .bottomContainer { + flex-direction: row; + } + .navigationContainer { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 0; + } } diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx index 061105620..3cb94e99a 100644 --- a/components/Footer/Details/index.tsx +++ b/components/Footer/Details/index.tsx @@ -1,23 +1,75 @@ +import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher" +import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" import Image from "@/components/Image" +import Link from "@/components/TempDesignSystem/Link" +import Body from "@/components/TempDesignSystem/Text/Body" + +import { detailsData } from "../mockedData" import styles from "./details.module.css" +import { IconName } from "@/types/components/icon" + +function socialIcon(iconName: string): JSX.Element | null { + const SocialIcon = getIconByIconName(iconName as IconName) + return SocialIcon ? : {iconName} +} + export default async function FooterDetails() { return (
-
- Scandic Hotels logo -
- +
+ + Scandic Hotels logo + + +
+
+ + {detailsData.copyrightCompany}{" "} + {detailsData.copyrightInfo} + +
+ +
diff --git a/components/Footer/Navigation/MainNav/mainnav.module.css b/components/Footer/Navigation/MainNav/mainnav.module.css index b4cbffc88..f3c21e23e 100644 --- a/components/Footer/Navigation/MainNav/mainnav.module.css +++ b/components/Footer/Navigation/MainNav/mainnav.module.css @@ -1,5 +1,4 @@ .mainNavigation { - max-width: 360px; width: 100%; } @@ -10,6 +9,9 @@ .mainNavigationItem { padding: var(--Spacing-x3) 0; border-bottom: 1px solid var(--Scandic-Peach-20); + &:first-child { + padding-top: 0; + } &:last-child { border-bottom: 0; } @@ -21,3 +23,9 @@ display: flex; justify-content: space-between; } + +@media screen and (min-width: 1367px) { + .mainNavigation { + max-width: 360px; + } +} diff --git a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css index 3d7d6a6ec..314f69c3e 100644 --- a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css +++ b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css @@ -1,6 +1,8 @@ .secondaryNavigation { display: flex; - gap: 80px; + flex-direction: column-reverse; + gap: var(--Spacing-x6); + margin-top: var(--Spacing-x6); } .secondaryNavigationList { @@ -23,3 +25,11 @@ font-family: var(--typography-Body-Bold-fontFamily); margin: 0; } + +@media screen and (min-width: 1367px) { + .secondaryNavigation { + margin-top: 0; + gap: 80px; + flex-direction: row; + } +} diff --git a/components/Footer/Navigation/navigation.module.css b/components/Footer/Navigation/navigation.module.css index fa45a3d99..c37481cbd 100644 --- a/components/Footer/Navigation/navigation.module.css +++ b/components/Footer/Navigation/navigation.module.css @@ -1,6 +1,6 @@ .section { background: var(--Scandic-Brand-Pale-Peach); - padding: 160px var(--Spacing-x9); + padding: var(--Spacing-x9) var(--Spacing-x2); color: var(--Scandic-Brand-Burgundy); } @@ -8,4 +8,14 @@ margin: 0 auto; display: flex; justify-content: space-between; + flex-direction: column; +} + +@media screen and (min-width: 1367px) { + .section { + padding: 160px var(--Spacing-x9); + } + .maxWidth { + flex-direction: row; + } } diff --git a/components/Footer/mockedData.ts b/components/Footer/mockedData.ts index 491bc6a56..8ae41a2df 100644 --- a/components/Footer/mockedData.ts +++ b/components/Footer/mockedData.ts @@ -99,3 +99,67 @@ export const navigationData = { }, }, } + +export const detailsData = { + copyrightCompany: "© 2024 Scandic AB", + copyrightInfo: "All rights reserved.", + social: { + links: [ + { + title: "Facebook", + href: "https://www.facebook.com/scandichotels/", + id: "facebook", + }, + { + title: "Instagram", + href: "https://www.instagram.com/scandichotels/", + id: "instagram", + }, + { + title: "Tripadvisor", + href: "https://www.tripadvisor.com/Hotel_Review-g297628-d1020208712-Reviews-Scandic_Hotels-Stockholm_Sweden.html", + id: "tripadvisor", + }, + ], + }, + links: [ + { + title: "Cookies", + href: "/cookies", + id: "cookies", + }, + { + title: "Privacy policy", + href: "/privacy", + id: "privacy", + }, + ], + languageSwitcher: { + urls: { + da: { + url: "https://www.scandichotels.com/da", + isExternal: true, + }, + de: { + url: "https://www.scandichotels.com/de", + isExternal: true, + }, + en: { + url: "https://www.scandichotels.com/en", + isExternal: true, + }, + fi: { + url: "https://www.scandichotels.com/fi", + isExternal: true, + }, + no: { + url: "https://www.scandichotels.com/no", + isExternal: true, + }, + sv: { + url: "https://www.scandichotels.com/sv", + isExternal: true, + }, + }, + }, +} diff --git a/components/Icons/Facebook.tsx b/components/Icons/Facebook.tsx new file mode 100644 index 000000000..20e7b6499 --- /dev/null +++ b/components/Icons/Facebook.tsx @@ -0,0 +1,27 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function FacebookIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Instagram.tsx b/components/Icons/Instagram.tsx new file mode 100644 index 000000000..5297456d2 --- /dev/null +++ b/components/Icons/Instagram.tsx @@ -0,0 +1,27 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function InstagramIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts index 897ca8b28..620792bae 100644 --- a/components/Icons/get-icon-by-icon-name.ts +++ b/components/Icons/get-icon-by-icon-name.ts @@ -1,5 +1,8 @@ import { FC } from "react" +import FacebookIcon from "./Facebook" +import InstagramIcon from "./Instagram" +import TripAdvisorIcon from "./TripAdvisor" import { AccessibilityIcon, AccountCircleIcon, @@ -77,6 +80,8 @@ export function getIconByIconName(icon?: IconName): FC | null { return ElectricBikeIcon case IconName.Email: return EmailIcon + case IconName.Facebook: + return FacebookIcon case IconName.Fitness: return FitnessIcon case IconName.Globe: @@ -87,6 +92,8 @@ export function getIconByIconName(icon?: IconName): FC | null { return ImageIcon case IconName.InfoCircle: return InfoCircleIcon + case IconName.Instagram: + return InstagramIcon case IconName.Location: return LocationIcon case IconName.Lock: @@ -105,6 +112,8 @@ export function getIconByIconName(icon?: IconName): FC | null { return PlusCircleIcon case IconName.Restaurant: return RestaurantIcon + case IconName.Tripadvisor: + return TripAdvisorIcon case IconName.TshirtWash: return TshirtWashIcon case IconName.Wifi: diff --git a/types/components/icon.ts b/types/components/icon.ts index ff76c28eb..7859d0039 100644 --- a/types/components/icon.ts +++ b/types/components/icon.ts @@ -25,11 +25,13 @@ export enum IconName { DoorOpen = "DoorOpen", ElectricBike = "ElectricBike", Email = "Email", + Facebook = "Facebook", Fitness = "Fitness", Globe = "Globe", House = "House", Image = "Image", InfoCircle = "InfoCircle", + Instagram = "Instagram", Location = "Location", Lock = "Lock", Parking = "Parking", @@ -39,6 +41,7 @@ export enum IconName { Phone = "Phone", PlusCircle = "PlusCircle", Restaurant = "Restaurant", + Tripadvisor = "Tripadvisor", TshirtWash = "TshirtWash", Wifi = "Wifi", } From e2d53c4e011420a83fca3c751f92d765c1d81e41 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 21 Aug 2024 14:24:06 +0200 Subject: [PATCH 04/10] feat(SW-185): Added comment for later work --- components/Footer/Details/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx index 3cb94e99a..ac43a04d0 100644 --- a/components/Footer/Details/index.tsx +++ b/components/Footer/Details/index.tsx @@ -65,10 +65,10 @@ export default async function FooterDetails() { {link.title} ))} - { - // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack - } + { + // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack + } From d72080ffe371bdac37409748f76e3dd2305d9d05 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 21 Aug 2024 14:51:33 +0200 Subject: [PATCH 05/10] feat(SW-185): Added images for app stores --- .../Footer/Navigation/SecondaryNav/index.tsx | 22 ++++++++++++++-- components/Footer/mockedData.ts | 7 ++++++ public/_static/img/app-store-badge.svg | 25 +++++++++++++++++++ public/_static/img/google-play-badge.svg | 24 ++++++++++++++++++ 4 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 public/_static/img/app-store-badge.svg create mode 100644 public/_static/img/google-play-badge.svg diff --git a/components/Footer/Navigation/SecondaryNav/index.tsx b/components/Footer/Navigation/SecondaryNav/index.tsx index 914dcf123..a6df1ddee 100644 --- a/components/Footer/Navigation/SecondaryNav/index.tsx +++ b/components/Footer/Navigation/SecondaryNav/index.tsx @@ -1,3 +1,4 @@ +import Image from "@/components/Image" import Link from "@/components/TempDesignSystem/Link" import styles from "./secondarynav.module.css" @@ -7,7 +8,15 @@ export default async function FooterSecondaryNav({ }: { secondaryLinks: Record< string, - { title: string; links: Array<{ id: string; href: string; title: string }> } + { + title: string + links: Array<{ + id: string + href: string + title: string + image?: { src: string } + }> + } > }) { return ( @@ -23,7 +32,16 @@ export default async function FooterSecondaryNav({ href={link.href} className={styles.secondaryNavigationLink} > - {link.title} + {link.image ? ( + {link.title} + ) : ( + link.title + )} ))} diff --git a/components/Footer/mockedData.ts b/components/Footer/mockedData.ts index 8ae41a2df..a9ba3f248 100644 --- a/components/Footer/mockedData.ts +++ b/components/Footer/mockedData.ts @@ -29,11 +29,18 @@ export const navigationData = { title: "App Store", href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712", id: "app-store", + image: { + src: "/_static/img/app-store-badge.svg", + alt: "Download on the App Store", + }, }, { title: "Google Play", href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels", id: "google-play", + image: { + src: "/_static/img/google-play-badge.svg", + }, }, ], }, diff --git a/public/_static/img/app-store-badge.svg b/public/_static/img/app-store-badge.svg new file mode 100644 index 000000000..fe8aeaa23 --- /dev/null +++ b/public/_static/img/app-store-badge.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/_static/img/google-play-badge.svg b/public/_static/img/google-play-badge.svg new file mode 100644 index 000000000..90936a6a4 --- /dev/null +++ b/public/_static/img/google-play-badge.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + From 72e28307deb3e732865e51be5356fb653496dbb9 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 22 Aug 2024 11:01:31 +0200 Subject: [PATCH 06/10] feat(SW-185): Fixing comments --- components/Footer/Details/details.module.css | 33 ++++++++++---- components/Footer/Details/index.tsx | 45 +++++++++++-------- .../Footer/Navigation/MainNav/index.tsx | 27 +++++------ .../Navigation/MainNav/mainnav.module.css | 2 - .../Footer/Navigation/SecondaryNav/index.tsx | 29 ++++++------ .../SecondaryNav/secondarynav.module.css | 1 - components/Footer/Navigation/index.tsx | 2 +- .../Footer/Navigation/navigation.module.css | 4 +- components/Footer/index.tsx | 2 +- components/Footer/mockedData.ts | 2 +- .../TempDesignSystem/Link/link.module.css | 4 ++ components/TempDesignSystem/Link/variants.ts | 1 + .../Text/Body/body.module.css | 14 ++++++ .../TempDesignSystem/Text/Body/index.tsx | 18 ++++---- .../TempDesignSystem/Text/Body/variants.ts | 3 ++ .../Text/Footnote/footnote.module.css | 14 ++++++ .../Text/Footnote/variants.ts | 3 ++ types/components/footer/navigation.ts | 26 +++++++++++ 18 files changed, 158 insertions(+), 72 deletions(-) create mode 100644 types/components/footer/navigation.ts diff --git a/components/Footer/Details/details.module.css b/components/Footer/Details/details.module.css index a6b184ea2..d8bd17d93 100644 --- a/components/Footer/Details/details.module.css +++ b/components/Footer/Details/details.module.css @@ -1,13 +1,13 @@ .details { - background: var(--Main-Grey-100); - color: var(--Main-Grey-White); - padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7); + background: var(--Main-Red-100); + color: var(--Main-Brand-PalePeach); + padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x6); } .topContainer { display: flex; justify-content: space-between; - padding: 0 0 var(--Spacing-x2) 0; + padding-bottom: var(--Spacing-x2); margin-bottom: var(--Spacing-x2); } @@ -27,21 +27,38 @@ justify-content: space-between; margin-bottom: var(--Spacing-x2); padding-bottom: var(--Spacing-x2); - border-bottom: 1px solid #e3d9d120; + border-bottom: 1px solid var(--Scandic-Peach-80); } .navigation { display: flex; - gap: var(--Spacing-x2); + gap: var(--Spacing-x1); +} + +.link { + &::after { + content: "·"; + margin-left: var(--Spacing-x1); + } + &:last-child { + &::after { + content: ""; + } + } +} + +.copyrightContainer { + display: flex; + gap: var(--Spacing-x1); } @media screen and (min-width: 1367px) { .details { - background: var(--Main-Grey-100); color: var(--Main-Grey-White); - padding: var(--Spacing-x5) var(--Spacing-x5) var(--Spacing-x9); + padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4); } .bottomContainer { + border-top: 1px solid var(--Scandic-Peach-80); flex-direction: row; } .navigationContainer { diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx index ac43a04d0..3768005d6 100644 --- a/components/Footer/Details/index.tsx +++ b/components/Footer/Details/index.tsx @@ -3,6 +3,8 @@ import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" import Image from "@/components/Image" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" +import Footnote from "@/components/TempDesignSystem/Text/Footnote" +import { getLang } from "@/i18n/serverContext" import { detailsData } from "../mockedData" @@ -15,11 +17,13 @@ function socialIcon(iconName: string): JSX.Element | null { return SocialIcon ? : {iconName} } -export default async function FooterDetails() { +export default function FooterDetails() { + const lang = getLang() + const currentYear = new Date().getFullYear() return (
- + Scandic Hotels logo
- - {detailsData.copyrightCompany}{" "} - {detailsData.copyrightInfo} - +
+ + © {currentYear} {detailsData.copyrightCompany} + + + {detailsData.copyrightInfo} + +
{ diff --git a/components/Footer/Navigation/MainNav/index.tsx b/components/Footer/Navigation/MainNav/index.tsx index f3158ba4f..31fa31338 100644 --- a/components/Footer/Navigation/MainNav/index.tsx +++ b/components/Footer/Navigation/MainNav/index.tsx @@ -1,27 +1,28 @@ import { ArrowRightIcon } from "@/components/Icons" import Link from "@/components/TempDesignSystem/Link" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import styles from "./mainnav.module.css" -export default async function FooterMainNav({ - mainLinks, -}: { - mainLinks: Array<{ id: string; href: string; title: string }> -}) { +import { FooterMainNavProps } from "@/types/components/footer/navigation" + +export default function FooterMainNav({ mainLinks }: FooterMainNavProps) { return (