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>