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

feat(SW-185): Fixing comments

Browse Source
This commit is contained in:
Pontus Dreij
2024-08-22 11:01:31 +02:00
parent 4db97c43f8
commit 4ae1c390f2
18 changed files with 158 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 {

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

@@ -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 ? <SocialIcon color="white" /> : <span>{iconName}</span>
}
export default async function FooterDetails() {
export default function FooterDetails() {
const lang = getLang()
const currentYear = new Date().getFullYear()
return (
<section className={styles.details}>
<div className={styles.topContainer}>
<Link href="/">
<Link href={`/${lang}`}>
<Image
alt="Scandic Hotels logo"
className={styles.logo}
@@ -33,7 +37,7 @@ export default async function FooterDetails() {
</Link>
<nav className={styles.socialNav}>
{detailsData.social.links.map((link) => (
<Link
<a
className={styles.socialLink}
color="white"
href={link.href}
@@ -42,28 +46,33 @@ export default async function FooterDetails() {
title={link.title}
>
{socialIcon(link.title)}
</Link>
</a>
))}
</nav>
</div>
<div className={styles.bottomContainer}>
<Body color="white">
<strong>{detailsData.copyrightCompany}</strong>{" "}
{detailsData.copyrightInfo}
</Body>
<div className={styles.copyrightContainer}>
<Footnote textTransform="uppercase">
© {currentYear} {detailsData.copyrightCompany}
</Footnote>
<Footnote textTransform="uppercase" color="peach50">
{detailsData.copyrightInfo}
</Footnote>
</div>
<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>
<Footnote asChild textTransform="uppercase" key={link.id}>
<Link
className={styles.link}
color="peach50"
href={link.href}
target="_blank"
title={link.title}
>
{link.title}
</Link>
</Footnote>
))}
</nav>
{