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

fix: match footer to design documents with typography and colors

Browse Source
This commit is contained in:
Christian Andolf
2025-05-27 13:12:01 +02:00
parent 32cc0cbe88
commit ade0279c8d
7 changed files with 100 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
View File

@@ -1,9 +1,10 @@
"use client"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"
@@ -20,58 +21,49 @@ export default function FooterSecondaryNav({
return (
<div className={styles.secondaryNavigation}>
{appDownloads && (
<nav className={styles.secondaryNavigationGroup}>
<Caption
color="textMediumContrast"
textTransform="uppercase"
type="label"
>
{appDownloads.title}
</Caption>
{appDownloads.links.length ? (
<ul className={styles.secondaryNavigationList}>
{appDownloads.links.map(
({ href, type }) =>
href && (
<li key={type} className={styles.appDownloadItem}>
<a
href={href.href}
target="_blank"
aria-label={href.title}
onClick={() => trackSocialMediaClick(href.title)}
>
<Image
src={
AppDownLoadLinks[
`${type}_${lang}` as keyof typeof AppDownLoadLinks
]
}
alt=""
width={125}
height={40}
/>
</a>
</li>
)
)}
</ul>
) : null}
</nav>
)}
<nav className={styles.secondaryNavigationGroup}>
<Typography variant="Title/Overline/sm">
<h3>{appDownloads.title}</h3>
</Typography>
{appDownloads.links.length ? (
<ul className={styles.secondaryNavigationList}>
{appDownloads.links.map(
({ href, type }) =>
href && (
<li key={type}>
<a
href={href.href}
target="_blank"
aria-label={href.title}
onClick={() => trackSocialMediaClick(href.title)}
>
<Image
src={
AppDownLoadLinks[
`${type}_${lang}` as keyof typeof AppDownLoadLinks
]
}
alt={href.title}
width={125}
height={40}
/>
</a>
</li>
)
)}
</ul>
) : null}
</nav>
{secondaryLinks.map((group) => (
<nav className={styles.secondaryNavigationGroup} key={group.title}>
<Caption
color="textMediumContrast"
textTransform="uppercase"
type="label"
>
{group.title}
</Caption>
{group?.links.length ? (
<Typography variant="Title/Overline/sm">
<h3>{group.title}</h3>
</Typography>
{group.links.length ? (
<ul className={styles.secondaryNavigationList}>
{group.links.map((link) => (
<li key={link.title} className={styles.secondaryNavigationItem}>
<li key={link.title}>
<Link
href={link.url}
target={link.openInNewTab ? "_blank" : undefined}
@@ -96,10 +88,10 @@ export function FooterSecondaryNavSkeleton() {
<nav className={styles.secondaryNavigationGroup}>
<SkeletonShimmer width="10ch" />
<ul className={styles.secondaryNavigationList}>
<li className={styles.appDownloadItem}>
<li>
<SkeletonShimmer width="16ch" />
</li>
<li className={styles.appDownloadItem}>
<li>
<SkeletonShimmer width="16ch" />
</li>
</ul>
@@ -107,7 +99,7 @@ export function FooterSecondaryNavSkeleton() {
<nav className={styles.secondaryNavigationGroup}>
<SkeletonShimmer width="20ch" />
<ul className={styles.secondaryNavigationList}>
<li className={styles.secondaryNavigationItem}>
<li>
<SkeletonShimmer width="25ch" />
</li>
</ul>
@@ -115,16 +107,16 @@ export function FooterSecondaryNavSkeleton() {
<nav className={styles.secondaryNavigationGroup}>
<SkeletonShimmer width="15ch" />
<ul className={styles.secondaryNavigationList}>
<li className={styles.secondaryNavigationItem}>
<li>
<SkeletonShimmer width="30ch" />
</li>
<li className={styles.secondaryNavigationItem}>
<li>
<SkeletonShimmer width="36ch" />
</li>
<li className={styles.secondaryNavigationItem}>
<li>
<SkeletonShimmer width="12ch" />
</li>
<li className={styles.secondaryNavigationItem}>
<li>
<SkeletonShimmer width="20ch" />
</li>
</ul>

22
apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
View File

@@ -1,35 +1,21 @@
.secondaryNavigation {
display: flex;
flex-direction: column-reverse;
gap: var(--Spacing-x6);
gap: var(--Space-x6);
}
.secondaryNavigationList {
display: flex;
flex-direction: column;
list-style: none;
gap: var(--Spacing-x3);
gap: var(--Space-x2);
}
.secondaryNavigationGroup {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
}
.secondaryNavigationGroupTitle {
color: var(--Base-Text-Medium-contrast);
font-weight: var(--typography-Body-Bold-fontWeight);
font-family: var(--typography-Body-Bold-fontFamily);
margin: 0;
}
.secondaryNavigationLink {
color: var(--Base-Text-High-contrast);
font-weight: var(--typography-Body-Bold-fontWeight);
font-family: var(--typography-Body-Bold-fontFamily);
margin: 0;
text-decoration: none;
gap: var(--Space-x3);
color: var(--Primary-Dim-On-Surface-Accent);
}
@media screen and (min-width: 768px) {