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

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

@@ -1,13 +1,13 @@
.details { .details {
background: var(--Main-Grey-100); background: var(--Main-Red-100);
color: var(--Main-Grey-White); color: var(--Main-Brand-PalePeach);
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7); padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x6);
} }
.topContainer { .topContainer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 0 var(--Spacing-x2) 0; padding-bottom: var(--Spacing-x2);
margin-bottom: var(--Spacing-x2); margin-bottom: var(--Spacing-x2);
} }
@@ -27,21 +27,38 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--Spacing-x2); margin-bottom: var(--Spacing-x2);
padding-bottom: var(--Spacing-x2); padding-bottom: var(--Spacing-x2);
border-bottom: 1px solid #e3d9d120; border-bottom: 1px solid var(--Scandic-Peach-80);
} }
.navigation { .navigation {
display: flex; 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) { @media screen and (min-width: 1367px) {
.details { .details {
background: var(--Main-Grey-100);
color: var(--Main-Grey-White); 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 { .bottomContainer {
border-top: 1px solid var(--Scandic-Peach-80);
flex-direction: row; flex-direction: row;
} }
.navigationContainer { .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 Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getLang } from "@/i18n/serverContext"
import { detailsData } from "../mockedData" import { detailsData } from "../mockedData"
@@ -15,11 +17,13 @@ function socialIcon(iconName: string): JSX.Element | null {
return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span> 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 ( return (
<section className={styles.details}> <section className={styles.details}>
<div className={styles.topContainer}> <div className={styles.topContainer}>
<Link href="/"> <Link href={`/${lang}`}>
<Image <Image
alt="Scandic Hotels logo" alt="Scandic Hotels logo"
className={styles.logo} className={styles.logo}
@@ -33,7 +37,7 @@ export default async function FooterDetails() {
</Link> </Link>
<nav className={styles.socialNav}> <nav className={styles.socialNav}>
{detailsData.social.links.map((link) => ( {detailsData.social.links.map((link) => (
<Link <a
className={styles.socialLink} className={styles.socialLink}
color="white" color="white"
href={link.href} href={link.href}
@@ -42,28 +46,33 @@ export default async function FooterDetails() {
title={link.title} title={link.title}
> >
{socialIcon(link.title)} {socialIcon(link.title)}
</Link> </a>
))} ))}
</nav> </nav>
</div> </div>
<div className={styles.bottomContainer}> <div className={styles.bottomContainer}>
<Body color="white"> <div className={styles.copyrightContainer}>
<strong>{detailsData.copyrightCompany}</strong>{" "} <Footnote textTransform="uppercase">
{detailsData.copyrightInfo} © {currentYear} {detailsData.copyrightCompany}
</Body> </Footnote>
<Footnote textTransform="uppercase" color="peach50">
{detailsData.copyrightInfo}
</Footnote>
</div>
<div className={styles.navigationContainer}> <div className={styles.navigationContainer}>
<nav className={styles.navigation}> <nav className={styles.navigation}>
{detailsData.links.map((link) => ( {detailsData.links.map((link) => (
<Link <Footnote asChild textTransform="uppercase" key={link.id}>
className={styles.link} <Link
color="white" className={styles.link}
href={link.href} color="peach50"
key={link.id} href={link.href}
target="_blank" target="_blank"
title={link.title} title={link.title}
> >
{link.title} {link.title}
</Link> </Link>
</Footnote>
))} ))}
</nav> </nav>
{ {

27
components/Footer/Navigation/MainNav/index.tsx
View File

@@ -1,27 +1,28 @@
import { ArrowRightIcon } from "@/components/Icons" import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./mainnav.module.css" import styles from "./mainnav.module.css"
export default async function FooterMainNav({ import { FooterMainNavProps } from "@/types/components/footer/navigation"
mainLinks,
}: { export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
mainLinks: Array<{ id: string; href: string; title: string }>
}) {
return ( return (
<nav className={styles.mainNavigation}> <nav className={styles.mainNavigation}>
<ul className={styles.mainNavigationList}> <ul className={styles.mainNavigationList}>
{mainLinks.map((link) => ( {mainLinks.map((link) => (
<li key={link.id} className={styles.mainNavigationItem}> <li key={link.id} className={styles.mainNavigationItem}>
<Link <Subtitle type="two" asChild>
color="burgundy" <Link
href={link.href} color="burgundy"
className={styles.mainNavigationLink} href={link.href}
> className={styles.mainNavigationLink}
{link.title} >
{link.title}
<ArrowRightIcon color="burgundy" /> <ArrowRightIcon color="burgundy" />
</Link> </Link>
</Subtitle>
</li> </li>
))} ))}
</ul> </ul>

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

@@ -18,8 +18,6 @@
} }
.mainNavigationLink { .mainNavigationLink {
font-size: 20px;
font-weight: 500;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }

29
components/Footer/Navigation/SecondaryNav/index.tsx
View File

@@ -1,29 +1,26 @@
import Image from "@/components/Image" import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./secondarynav.module.css" import styles from "./secondarynav.module.css"
export default async function FooterSecondaryNav({ import { FooterSecondaryNavProps } from "@/types/components/footer/navigation"
export default function FooterSecondaryNav({
secondaryLinks, secondaryLinks,
}: { }: FooterSecondaryNavProps) {
secondaryLinks: Record<
string,
{
title: string
links: Array<{
id: string
href: string
title: string
image?: { src: string }
}>
}
>
}) {
return ( return (
<div className={styles.secondaryNavigation}> <div className={styles.secondaryNavigation}>
{Object.entries(secondaryLinks).map(([key, group]) => ( {Object.entries(secondaryLinks).map(([key, group]) => (
<nav key={key} className={styles.secondaryNavigationGroup}> <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}> <ul className={styles.secondaryNavigationList}>
{group.links.map((link) => ( {group.links.map((link) => (
<li key={link.id} className={styles.secondaryNavigationItem}> <li key={link.id} className={styles.secondaryNavigationItem}>

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

@@ -19,7 +19,6 @@
} }
.secondaryNavigationGroupTitle { .secondaryNavigationGroupTitle {
font-size: 14px;
color: var(--Scandic-Peach-80); color: var(--Scandic-Peach-80);
font-weight: 500; font-weight: 500;
font-family: var(--typography-Body-Bold-fontFamily); font-family: var(--typography-Body-Bold-fontFamily);

2
components/Footer/Navigation/index.tsx
View File

@@ -6,7 +6,7 @@ import FooterSecondaryNav from "./SecondaryNav"
import styles from "./navigation.module.css" import styles from "./navigation.module.css"
export default async function FooterNavigation() { export default function FooterNavigation() {
const { mainLinks, secondaryLinks } = navigationData const { mainLinks, secondaryLinks } = navigationData
return ( return (
<section className={styles.section}> <section className={styles.section}>

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

@@ -1,6 +1,6 @@
.section { .section {
background: var(--Scandic-Brand-Pale-Peach); 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); color: var(--Scandic-Brand-Burgundy);
} }
@@ -13,7 +13,7 @@
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.section { .section {
padding: 160px var(--Spacing-x9); padding: var(--Spacing-x9) 0;
} }
.maxWidth { .maxWidth {
flex-direction: row; flex-direction: row;

2
components/Footer/index.tsx
View File

@@ -1,7 +1,7 @@
import FooterDetails from "./Details" import FooterDetails from "./Details"
import FooterNavigation from "./Navigation" import FooterNavigation from "./Navigation"
export default async function Footer() { export default function Footer() {
return ( return (
<footer> <footer>
<FooterNavigation /> <FooterNavigation />

2
components/Footer/mockedData.ts
View File

@@ -108,7 +108,7 @@ export const navigationData = {
} }
export const detailsData = { export const detailsData = {
copyrightCompany: "© 2024 Scandic AB", copyrightCompany: "Scandic AB",
copyrightInfo: "All rights reserved.", copyrightInfo: "All rights reserved.",
social: { social: {
links: [ links: [

4
components/TempDesignSystem/Link/link.module.css
View File

@@ -126,6 +126,10 @@
color: var(--Scandic-Brand-Pale-Peach); color: var(--Scandic-Brand-Pale-Peach);
} }
.peach50 {
color: var(--Scandic-Peach-50);
}
.peach80 { .peach80 {
color: var(--Primary-Light-On-Surface-Accent); color: var(--Primary-Light-On-Surface-Accent);
} }

1
components/TempDesignSystem/Link/variants.ts
View File

@@ -12,6 +12,7 @@ export const linkVariants = cva(styles.link, {
burgundy: styles.burgundy, burgundy: styles.burgundy,
none: "", none: "",
pale: styles.pale, pale: styles.pale,
peach50: styles.peach50,
peach80: styles.peach80, peach80: styles.peach80,
white: styles.white, white: styles.white,
}, },

14
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -34,6 +34,16 @@
text-decoration: var(--typography-Body-Underline-textDecoration); text-decoration: var(--typography-Body-Underline-textDecoration);
} }
.uppercase {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: 450;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration);
text-transform: uppercase;
}
.textAlignCenter { .textAlignCenter {
text-align: center; text-align: center;
} }
@@ -73,3 +83,7 @@
.peach50 { .peach50 {
color: var(--Primary-Dark-On-Surface-Accent); color: var(--Primary-Dark-On-Surface-Accent);
} }
.peach80 {
color: var(--Scandic-Peach-80);
}

18
components/TempDesignSystem/Text/Body/index.tsx
View File

@@ -16,15 +16,15 @@ export default function Body({
const Comp = asChild ? Slot : "p" const Comp = asChild ? Slot : "p"
const classNames = fontOnly const classNames = fontOnly
? bodyFontOnlyVariants({ ? bodyFontOnlyVariants({
className, className,
textAlign, textAlign,
textTransform, textTransform,
}) })
: bodyVariants({ : bodyVariants({
className, className,
color, color,
textAlign, textAlign,
textTransform, textTransform,
}) })
return <Comp className={classNames} {...props} /> return <Comp className={classNames} {...props} />
} }

3
components/TempDesignSystem/Text/Body/variants.ts
View File

@@ -13,6 +13,7 @@ const config = {
textMediumContrast: styles.textMediumContrast, textMediumContrast: styles.textMediumContrast,
white: styles.white, white: styles.white,
peach50: styles.peach50, peach50: styles.peach50,
peach80: styles.peach80,
}, },
textAlign: { textAlign: {
center: styles.textAlignCenter, center: styles.textAlignCenter,
@@ -22,6 +23,7 @@ const config = {
bold: styles.bold, bold: styles.bold,
regular: styles.regular, regular: styles.regular,
underlined: styles.underlined, underlined: styles.underlined,
uppercase: styles.uppercase,
}, },
}, },
defaultVariants: { defaultVariants: {
@@ -43,6 +45,7 @@ const fontOnlyconfig = {
bold: styles.bold, bold: styles.bold,
regular: styles.regular, regular: styles.regular,
underlined: styles.underlined, underlined: styles.underlined,
uppercase: styles.uppercase,
}, },
}, },
defaultVariants: { defaultVariants: {

14
components/TempDesignSystem/Text/Footnote/footnote.module.css
View File

@@ -25,6 +25,16 @@
text-decoration: var(--typography-Footnote-Regular-textDecoration); text-decoration: var(--typography-Footnote-Regular-textDecoration);
} }
.uppercase {
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: 450;
letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
line-height: var(--typography-Footnote-Regular-lineHeight);
text-decoration: var(--typography-Footnote-Regular-textDecoration);
text-transform: uppercase;
}
.center { .center {
text-align: center; text-align: center;
} }
@@ -45,6 +55,10 @@
color: var(--Scandic-Brand-Pale-Peach); color: var(--Scandic-Brand-Pale-Peach);
} }
.peach50 {
color: var(--Scandic-Peach-50);
}
.textMediumContrast { .textMediumContrast {
color: var(--UI-Text-Medium-contrast); color: var(--UI-Text-Medium-contrast);
} }

3
components/TempDesignSystem/Text/Footnote/variants.ts
View File

@@ -8,6 +8,7 @@ const config = {
black: styles.black, black: styles.black,
burgundy: styles.burgundy, burgundy: styles.burgundy,
pale: styles.pale, pale: styles.pale,
peach50: styles.peach50,
textMediumContrast: styles.textMediumContrast, textMediumContrast: styles.textMediumContrast,
}, },
textAlign: { textAlign: {
@@ -17,6 +18,7 @@ const config = {
textTransform: { textTransform: {
bold: styles.bold, bold: styles.bold,
regular: styles.regular, regular: styles.regular,
uppercase: styles.uppercase,
}, },
}, },
defaultVariants: { defaultVariants: {
@@ -35,6 +37,7 @@ const fontOnlyConfig = {
textTransform: { textTransform: {
bold: styles.bold, bold: styles.bold,
regular: styles.regular, regular: styles.regular,
uppercase: styles.uppercase,
}, },
}, },
defaultVariants: { defaultVariants: {

26
types/components/footer/navigation.ts Normal file
View File

@@ -0,0 +1,26 @@
export type FooterMainNav = {
id: string
href: string
title: string
}
export type FooterMainNavProps = {
mainLinks: FooterMainNav[]
}
export type FooterSecondaryNav = {
id: string
href: string
title: string
image?: {
src: string
}
}
export type FooterSecondaryNavProps = {
secondaryLinks: Record<
string,
{
title: string
links: FooterSecondaryNav[]
}
>
}