scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-185): Footer mobile adjustments

Browse Source
This commit is contained in:
Pontus Dreij
2024-08-21 14:08:15 +02:00
parent c6b2d2ea12
commit b5dddfcd8b
10 changed files with 269 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/Footer/Details/details.module.css
View File

@@ -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;
}
}

78
components/Footer/Details/index.tsx
View File

@@ -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 ? <SocialIcon color="white" /> : <span>{iconName}</span>
}
export default async function FooterDetails() {
return (
<section className={styles.details}>
<div className={styles.imageContainer}>
<Image
alt="Scandic Hotels logo"
className={styles.logo}
data-js="scandiclogoimg"
data-nosvgsrc="/_static/img/scandic-logotype.png"
itemProp="logo"
height={30}
src="/_static/img/scandic-logotype-white.svg"
width={138}
/>
<div className={styles.socialLinks}>
<nav></nav>
<div className={styles.topContainer}>
<Link href="/">
<Image
alt="Scandic Hotels logo"
className={styles.logo}
data-js="scandiclogoimg"
data-nosvgsrc="/_static/img/scandic-logotype.png"
itemProp="logo"
height={22}
src="/_static/img/scandic-logotype-white.svg"
width={103}
/>
</Link>
<nav className={styles.socialNav}>
{detailsData.social.links.map((link) => (
<Link
className={styles.socialLink}
color="white"
href={link.href}
key={link.id}
target="_blank"
title={link.title}
>
{socialIcon(link.title)}
</Link>
))}
</nav>
</div>
<div className={styles.bottomContainer}>
<Body color="white">
<strong>{detailsData.copyrightCompany}</strong>{" "}
{detailsData.copyrightInfo}
</Body>
<div className={styles.navigationContainer}>
<nav className={styles.navigation}>
{detailsData.links.map((link) => (
<Link
className={styles.link}
color="white"
href={link.href}
key={link.id}
target="_blank"
title={link.title}
>
{link.title}
</Link>
))}
{
// This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
}
</nav>
<LanguageSwitcher urls={detailsData.languageSwitcher.urls} />
</div>
</div>
</section>

10
components/Footer/Navigation/MainNav/mainnav.module.css
View File

@@ -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;
}
}

12
components/Footer/Navigation/SecondaryNav/secondarynav.module.css
View File

@@ -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;
}
}

12
components/Footer/Navigation/navigation.module.css
View File

@@ -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;
}
}

64
components/Footer/mockedData.ts
View File

@@ -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,
},
},
},
}

27
components/Icons/Facebook.tsx Normal file
View File

@@ -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 (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M18.25 2C19.283 2 20.1662 2.36675 20.8997 3.10026C21.6332 3.83377 22 4.71701 22 5.75V18.25C22 19.283 21.6332 20.1662 20.8997 20.8997C20.1662 21.6332 19.283 22 18.25 22H15.8021V14.2526H18.3932L18.7839 11.2318H15.8021V9.30469C15.8021 8.81858 15.9041 8.45399 16.1081 8.21094C16.3121 7.96788 16.7092 7.84635 17.2995 7.84635L18.888 7.83333V5.13802C18.3411 5.0599 17.5686 5.02083 16.5703 5.02083C15.3898 5.02083 14.4457 5.36806 13.7383 6.0625C13.0308 6.75694 12.6771 7.73785 12.6771 9.00521V11.2318H10.0729V14.2526H12.6771V22H5.75C4.71701 22 3.83377 21.6332 3.10026 20.8997C2.36675 20.1662 2 19.283 2 18.25V5.75C2 4.71701 2.36675 3.83377 3.10026 3.10026C3.83377 2.36675 4.71701 2 5.75 2H18.25Z"
fill="black"
/>
</svg>
)
}

27
components/Icons/Instagram.tsx Normal file
View File

@@ -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 (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M17.34 5.46C17.1027 5.46 16.8707 5.53038 16.6733 5.66224C16.476 5.79409 16.3222 5.98151 16.2313 6.20078C16.1405 6.42005 16.1168 6.66133 16.1631 6.89411C16.2094 7.12689 16.3236 7.34071 16.4915 7.50853C16.6593 7.67635 16.8731 7.79064 17.1059 7.83694C17.3387 7.88324 17.5799 7.85948 17.7992 7.76866C18.0185 7.67783 18.2059 7.52402 18.3378 7.32668C18.4696 7.12935 18.54 6.89734 18.54 6.66C18.54 6.34174 18.4136 6.03652 18.1885 5.81147C17.9635 5.58643 17.6583 5.46 17.34 5.46ZM21.94 7.88C21.9206 7.0503 21.7652 6.2294 21.48 5.45C21.2257 4.78313 20.83 4.17928 20.32 3.68C19.8248 3.16743 19.2196 2.77418 18.55 2.53C17.7727 2.23616 16.9508 2.07721 16.12 2.06C15.06 2 14.72 2 12 2C9.28 2 8.94 2 7.88 2.06C7.04915 2.07721 6.22734 2.23616 5.45 2.53C4.78168 2.77665 4.17693 3.16956 3.68 3.68C3.16743 4.17518 2.77418 4.78044 2.53 5.45C2.23616 6.22734 2.07721 7.04915 2.06 7.88C2 8.94 2 9.28 2 12C2 14.72 2 15.06 2.06 16.12C2.07721 16.9508 2.23616 17.7727 2.53 18.55C2.77418 19.2196 3.16743 19.8248 3.68 20.32C4.17693 20.8304 4.78168 21.2234 5.45 21.47C6.22734 21.7638 7.04915 21.9228 7.88 21.94C8.94 22 9.28 22 12 22C14.72 22 15.06 22 16.12 21.94C16.9508 21.9228 17.7727 21.7638 18.55 21.47C19.2196 21.2258 19.8248 20.8326 20.32 20.32C20.8322 19.8226 21.2283 19.2182 21.48 18.55C21.7652 17.7706 21.9206 16.9497 21.94 16.12C21.94 15.06 22 14.72 22 12C22 9.28 22 8.94 21.94 7.88ZM20.14 16C20.1327 16.6348 20.0178 17.2637 19.8 17.86C19.6403 18.2952 19.3839 18.6884 19.05 19.01C18.7256 19.3405 18.3332 19.5964 17.9 19.76C17.3037 19.9778 16.6748 20.0927 16.04 20.1C15.04 20.15 14.67 20.16 12.04 20.16C9.41 20.16 9.04 20.16 8.04 20.1C7.38089 20.1123 6.72459 20.0109 6.1 19.8C5.68578 19.6281 5.31136 19.3728 5 19.05C4.66809 18.7287 4.41484 18.3352 4.26 17.9C4.01586 17.2952 3.88044 16.6519 3.86 16C3.86 15 3.8 14.63 3.8 12C3.8 9.37 3.8 9 3.86 8C3.86448 7.35106 3.98295 6.70795 4.21 6.1C4.38605 5.67791 4.65627 5.30166 5 5C5.30381 4.65617 5.67929 4.3831 6.1 4.2C6.70955 3.98004 7.352 3.86508 8 3.86C9 3.86 9.37 3.8 12 3.8C14.63 3.8 15 3.8 16 3.86C16.6348 3.86728 17.2637 3.98225 17.86 4.2C18.3144 4.36865 18.7223 4.64285 19.05 5C19.3777 5.30718 19.6338 5.68273 19.8 6.1C20.0223 6.70893 20.1373 7.35178 20.14 8C20.19 9 20.2 9.37 20.2 12C20.2 14.63 20.19 15 20.14 16ZM12 6.87C10.9858 6.87198 9.99496 7.17453 9.15265 7.73942C8.31035 8.30431 7.65438 9.1062 7.26763 10.0438C6.88089 10.9813 6.78072 12.0125 6.97979 13.0069C7.17886 14.0014 7.66824 14.9145 8.38608 15.631C9.10392 16.3474 10.018 16.835 11.0129 17.0321C12.0077 17.2293 13.0387 17.1271 13.9755 16.7385C14.9123 16.35 15.7129 15.6924 16.2761 14.849C16.8394 14.0056 17.14 13.0142 17.14 12C17.1413 11.3251 17.0092 10.6566 16.7512 10.033C16.4933 9.40931 16.1146 8.84281 15.6369 8.36605C15.1592 7.88929 14.5919 7.51168 13.9678 7.25493C13.3436 6.99818 12.6749 6.86736 12 6.87ZM12 15.33C11.3414 15.33 10.6976 15.1347 10.15 14.7688C9.60234 14.4029 9.17552 13.8828 8.92348 13.2743C8.67144 12.6659 8.6055 11.9963 8.73398 11.3503C8.86247 10.7044 9.17963 10.111 9.64533 9.64533C10.111 9.17963 10.7044 8.86247 11.3503 8.73398C11.9963 8.6055 12.6659 8.67144 13.2743 8.92348C13.8828 9.17552 14.4029 9.60234 14.7688 10.15C15.1347 10.6976 15.33 11.3414 15.33 12C15.33 12.4373 15.2439 12.8703 15.0765 13.2743C14.9092 13.6784 14.6639 14.0454 14.3547 14.3547C14.0454 14.6639 13.6784 14.9092 13.2743 15.0765C12.8703 15.2439 12.4373 15.33 12 15.33Z"
fill="black"
/>
</svg>
)
}

9
components/Icons/get-icon-by-icon-name.ts
View File

@@ -1,5 +1,8 @@
import { FC } from "react"
import FacebookIcon from "./Facebook"
import InstagramIcon from "./Instagram"
import TripAdvisorIcon from "./TripAdvisor"
import {
AccessibilityIcon,
AccountCircleIcon,
@@ -85,6 +88,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
return ElectricBikeIcon
case IconName.Email:
return EmailIcon
case IconName.Facebook:
return FacebookIcon
case IconName.Fitness:
return FitnessIcon
case IconName.Globe:
@@ -95,6 +100,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
return ImageIcon
case IconName.InfoCircle:
return InfoCircleIcon
case IconName.Instagram:
return InstagramIcon
case IconName.Location:
return LocationIcon
case IconName.Lock:
@@ -115,6 +122,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
return RestaurantIcon
case IconName.Sauna:
return SaunaIcon
case IconName.Tripadvisor:
return TripAdvisorIcon
case IconName.TshirtWash:
return TshirtWashIcon
case IconName.WarningTriangle:

3
types/components/icon.ts
View File

@@ -27,11 +27,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",
@@ -42,6 +44,7 @@ export enum IconName {
PlusCircle = "PlusCircle",
Restaurant = "Restaurant",
Sauna = "Sauna",
Tripadvisor = "Tripadvisor",
TshirtWash = "TshirtWash",
Wifi = "Wifi",
WarningTriangle = "WarningTriangle",