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 d72080ffe3
commit 72e28307de
18 changed files with 158 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Footer/Details/details.module.css
+25 -8
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 {
components/Footer/Details/index.tsx
+27 -18
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>
{
components/Footer/Navigation/MainNav/index.tsx
+14 -13
View File
@@ -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 (
<nav className={styles.mainNavigation}>
<ul className={styles.mainNavigationList}>
{mainLinks.map((link) => (
<li key={link.id} className={styles.mainNavigationItem}>
<Link
color="burgundy"
href={link.href}
className={styles.mainNavigationLink}
>
{link.title}
<Subtitle type="two" asChild>
<Link
color="burgundy"
href={link.href}
className={styles.mainNavigationLink}
>
{link.title}
<ArrowRightIcon color="burgundy" />
</Link>
<ArrowRightIcon color="burgundy" />
</Link>
</Subtitle>
</li>
))}
</ul>
components/Footer/Navigation/MainNav/mainnav.module.css
-2
View File
@@ -18,8 +18,6 @@
}
.mainNavigationLink {
font-size: 20px;
font-weight: 500;
display: flex;
justify-content: space-between;
}
components/Footer/Navigation/SecondaryNav/index.tsx
+13 -16
View File
@@ -1,29 +1,26 @@
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./secondarynav.module.css"
export default async function FooterSecondaryNav({
import { FooterSecondaryNavProps } from "@/types/components/footer/navigation"
export default function FooterSecondaryNav({
secondaryLinks,
}: {
secondaryLinks: Record<
string,
{
title: string
links: Array<{
id: string
href: string
title: string
image?: { src: string }
}>
}
>
}) {
}: FooterSecondaryNavProps) {
return (
<div className={styles.secondaryNavigation}>
{Object.entries(secondaryLinks).map(([key, group]) => (
<nav key={key} className={styles.secondaryNavigationGroup}>
<p className={styles.secondaryNavigationGroupTitle}>{group.title}</p>
<Body
className={styles.secondaryNavigationGroupDescription}
color="peach80"
textTransform="uppercase"
>
{group.title}
</Body>
<ul className={styles.secondaryNavigationList}>
{group.links.map((link) => (
<li key={link.id} className={styles.secondaryNavigationItem}>
components/Footer/Navigation/SecondaryNav/secondarynav.module.css
-1
View File
@@ -19,7 +19,6 @@
}
.secondaryNavigationGroupTitle {
font-size: 14px;
color: var(--Scandic-Peach-80);
font-weight: 500;
font-family: var(--typography-Body-Bold-fontFamily);
components/Footer/Navigation/index.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import FooterSecondaryNav from "./SecondaryNav"
import styles from "./navigation.module.css"
export default async function FooterNavigation() {
export default function FooterNavigation() {
const { mainLinks, secondaryLinks } = navigationData
return (
<section className={styles.section}>
components/Footer/Navigation/navigation.module.css
+2 -2
View File
@@ -1,6 +1,6 @@
.section {
background: var(--Scandic-Brand-Pale-Peach);
padding: var(--Spacing-x9) var(--Spacing-x2);
padding: var(--Spacing-x7) var(--Spacing-x2);
color: var(--Scandic-Brand-Burgundy);
}
@@ -13,7 +13,7 @@
@media screen and (min-width: 1367px) {
.section {
padding: 160px var(--Spacing-x9);
padding: var(--Spacing-x9) 0;
}
.maxWidth {
flex-direction: row;
components/Footer/index.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import FooterDetails from "./Details"
import FooterNavigation from "./Navigation"
export default async function Footer() {
export default function Footer() {
return (
<footer>
<FooterNavigation />
components/Footer/mockedData.ts
+1 -1
View File
@@ -108,7 +108,7 @@ export const navigationData = {
}
export const detailsData = {
copyrightCompany: "© 2024 Scandic AB",
copyrightCompany: "Scandic AB",
copyrightInfo: "All rights reserved.",
social: {
links: [