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

feat(SW-185): Refactor mocked data

Browse Source
This commit is contained in:
Pontus Dreij
2024-08-22 16:08:11 +02:00
parent 4ae1c390f2
commit d658e223e2
5 changed files with 92 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote" import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import { detailsData } from "../mockedData" import { footer } from "../mockedData"
import styles from "./details.module.css" import styles from "./details.module.css"
@@ -20,6 +20,13 @@ function socialIcon(iconName: string): JSX.Element | null {
export default function FooterDetails() { export default function FooterDetails() {
const lang = getLang() const lang = getLang()
const currentYear = new Date().getFullYear() const currentYear = new Date().getFullYear()
const {
socialMedia,
copyrightCompany,
copyrightInfo,
tertiaryLinks,
languageSwitcher,
} = footer
return ( return (
<section className={styles.details}> <section className={styles.details}>
<div className={styles.topContainer}> <div className={styles.topContainer}>
@@ -36,7 +43,7 @@ export default function FooterDetails() {
/> />
</Link> </Link>
<nav className={styles.socialNav}> <nav className={styles.socialNav}>
{detailsData.social.links.map((link) => ( {socialMedia.links.map((link) => (
<a <a
className={styles.socialLink} className={styles.socialLink}
color="white" color="white"
@@ -53,15 +60,15 @@ export default function FooterDetails() {
<div className={styles.bottomContainer}> <div className={styles.bottomContainer}>
<div className={styles.copyrightContainer}> <div className={styles.copyrightContainer}>
<Footnote textTransform="uppercase"> <Footnote textTransform="uppercase">
© {currentYear} {detailsData.copyrightCompany} © {currentYear} {copyrightCompany}
</Footnote> </Footnote>
<Footnote textTransform="uppercase" color="peach50"> <Footnote textTransform="uppercase" color="peach50">
{detailsData.copyrightInfo} {copyrightInfo}
</Footnote> </Footnote>
</div> </div>
<div className={styles.navigationContainer}> <div className={styles.navigationContainer}>
<nav className={styles.navigation}> <nav className={styles.navigation}>
{detailsData.links.map((link) => ( {tertiaryLinks.map((link) => (
<Footnote asChild textTransform="uppercase" key={link.id}> <Footnote asChild textTransform="uppercase" key={link.id}>
<Link <Link
className={styles.link} className={styles.link}
@@ -78,7 +85,7 @@ export default function FooterDetails() {
{ {
// This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
} }
<LanguageSwitcher urls={detailsData.languageSwitcher.urls} /> <LanguageSwitcher urls={languageSwitcher.urls} />
</div> </div>
</div> </div>
</section> </section>

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

@@ -1,4 +1,3 @@
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"
@@ -11,35 +10,27 @@ export default function FooterSecondaryNav({
}: FooterSecondaryNavProps) { }: FooterSecondaryNavProps) {
return ( return (
<div className={styles.secondaryNavigation}> <div className={styles.secondaryNavigation}>
{Object.entries(secondaryLinks).map(([key, group]) => ( {secondaryLinks.map((link) => (
<nav key={key} className={styles.secondaryNavigationGroup}> <nav className={styles.secondaryNavigationGroup} key={link.title}>
<Body <Body color="peach80" textTransform="uppercase">
className={styles.secondaryNavigationGroupDescription} {link.title}
color="peach80"
textTransform="uppercase"
>
{group.title}
</Body> </Body>
<ul className={styles.secondaryNavigationList}> <ul className={styles.secondaryNavigationList}>
{group.links.map((link) => ( {link.links.map((link) => (
<li key={link.id} className={styles.secondaryNavigationItem}> <li key={link.id} className={styles.secondaryNavigationItem}>
<Link {link.isExternal ? (
color="burgundy" <a
href={link.href} href={link.href}
className={styles.secondaryNavigationLink} key={link.title}
> target={link.openInNewTab ? "_blank" : "_self"}
{link.image ? ( >
<Image {link.title}
src={link.image.src} </a>
alt={link.title} ) : (
width={125} <Link href={link.href} key={link.title}>
height={40} {link.title}
/> </Link>
) : ( )}
link.title
)}
</Link>
</li> </li>
))} ))}
</ul> </ul>

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

@@ -1,13 +1,13 @@
import MaxWidth from "@/components/MaxWidth" import MaxWidth from "@/components/MaxWidth"
import { navigationData } from "../mockedData" import { footer } from "../mockedData"
import FooterMainNav from "./MainNav" import FooterMainNav from "./MainNav"
import FooterSecondaryNav from "./SecondaryNav" import FooterSecondaryNav from "./SecondaryNav"
import styles from "./navigation.module.css" import styles from "./navigation.module.css"
export default function FooterNavigation() { export default function FooterNavigation() {
const { mainLinks, secondaryLinks } = navigationData const { mainLinks, secondaryLinks } = footer
return ( return (
<section className={styles.section}> <section className={styles.section}>
<MaxWidth tag="div" className={styles.maxWidth}> <MaxWidth tag="div" className={styles.maxWidth}>

82
components/Footer/mockedData.ts
View File

@@ -1,116 +1,136 @@
export const navigationData = { export const footer = {
mainLinks: [ mainLinks: [
{ {
title: "Travel guides", title: "Travel guides",
href: "/travel-guides", href: "/travel-guides",
id: "travel-guides", id: "travel-guides",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "New hotels", title: "New hotels",
href: "/new-hotels", href: "/new-hotels",
id: "new-hotels", id: "new-hotels",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Accessibililty", title: "Accessibililty",
href: "/accessibility", href: "/accessibility",
id: "accessibility", id: "accessibility",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Sustanability", title: "Sustanability",
href: "/sustainability", href: "/sustainability",
id: "sustainability", id: "sustainability",
openInNewTab: false,
isExternal: false,
}, },
], ],
secondaryLinks: { appDownloads: {
app: { title: "Scandic App",
title: "Scandic App", links: [
links: [ {
{ title: "App Store",
title: "App Store", href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712",
href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712", id: "app-store",
id: "app-store", },
image: { {
src: "/_static/img/app-store-badge.svg", title: "Google Play",
alt: "Download on the App Store", href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels",
}, id: "google-play",
}, },
{ ],
title: "Google Play", },
href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels",
id: "google-play", secondaryLinks: [
image: { {
src: "/_static/img/google-play-badge.svg",
},
},
],
},
customerService: {
title: "Customer service", title: "Customer service",
links: [ links: [
{ {
title: "Contact us", title: "Contact us",
href: "/contact-us", href: "/contact-us",
id: "contact-us", id: "contact-us",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Frequntly asked questions", title: "Frequntly asked questions",
href: "/frequently-asked-questions", href: "/frequently-asked-questions",
id: "frequently-asked-questions", id: "frequently-asked-questions",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Rates and policys", title: "Rates and policys",
href: "/rates-and-policies", href: "/rates-and-policies",
id: "rates-and-policies", id: "rates-and-policies",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Terms and conditions", title: "Terms and conditions",
href: "/terms-and-conditions", href: "/terms-and-conditions",
id: "terms-and-conditions", id: "terms-and-conditions",
openInNewTab: false,
isExternal: false,
}, },
], ],
}, },
about: { {
title: "About Scandic Hotels", title: "About Scandic Hotels",
links: [ links: [
{ {
title: "Scandic Group", title: "Scandic Group",
href: "/scandic-group", href: "/scandic-group",
id: "scandic-group", id: "scandic-group",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Investors", title: "Investors",
href: "/investors", href: "/investors",
id: "investors", id: "investors",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Press", title: "Press",
href: "/press", href: "/press",
id: "press", id: "press",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Sponsors", title: "Sponsors",
href: "/sponsors", href: "/sponsors",
id: "sponsors", id: "sponsors",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Partners", title: "Partners",
href: "/partners", href: "/partners",
id: "partners", id: "partners",
openInNewTab: false,
isExternal: false,
}, },
{ {
title: "Career", title: "Career",
href: "/career", href: "/career",
id: "career", id: "career",
openInNewTab: false,
isExternal: false,
}, },
], ],
}, },
}, ],
}
export const detailsData = {
copyrightCompany: "Scandic AB", copyrightCompany: "Scandic AB",
copyrightInfo: "All rights reserved.", copyrightInfo: "All rights reserved.",
social: { socialMedia: {
links: [ links: [
{ {
title: "Facebook", title: "Facebook",
@@ -129,7 +149,7 @@ export const detailsData = {
}, },
], ],
}, },
links: [ tertiaryLinks: [
{ {
title: "Cookies", title: "Cookies",
href: "/cookies", href: "/cookies",

18
types/components/footer/navigation.ts
View File

@@ -2,6 +2,8 @@ export type FooterMainNav = {
id: string id: string
href: string href: string
title: string title: string
openInNewTab: boolean
isExternal: boolean
} }
export type FooterMainNavProps = { export type FooterMainNavProps = {
mainLinks: FooterMainNav[] mainLinks: FooterMainNav[]
@@ -11,16 +13,12 @@ export type FooterSecondaryNav = {
id: string id: string
href: string href: string
title: string title: string
image?: { openInNewTab: boolean
src: string isExternal: boolean
}
} }
export type FooterSecondaryNavProps = { export type FooterSecondaryNavProps = {
secondaryLinks: Record< secondaryLinks: {
string, title: string
{ links: FooterSecondaryNav[]
title: string }[]
links: FooterSecondaryNav[]
}
>
} }