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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
View File

@@ -1,45 +1,21 @@
.container {
display: grid;
gap: 1.5rem;
gap: var(--Spacing-x7);
}
.script {
transform: rotate(-2deg);
}
.card {
display: flex;
flex: 1 1 0px;
flex-direction: column;
align-items: center;
background-color: var(--UI-Grey-10);
border-radius: var(--Corner-radius-Small);
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
justify-content: center;
gap: var(--Spacing-x2);
padding: var(--Spacing-x7) var(--Spacing-x3);
min-height: 280px;
background-color: var(--Scandic-Beige-00);
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Scandic-Beige-20);
text-decoration: none;
text-align: center;
color: var(--Theme-Primary-Light-On-Surface-Text);
}
.title {
display: flex;
flex-direction: column;
text-wrap: balance;
}
.titleValue {
color: var(--UI-Red-60);
}
.titleExplanation {
color: var(--Theme-Primary-Light-On-Surface-Text);
}
.subtitle {
color: var(--Theme-Primary-Light-On-Surface-Text);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 16px;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.096px;
text-align: center;
margin: 0;
padding: var(--Spacing-x3);
}

51
components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
View File

@@ -1,13 +1,11 @@
import { Lang } from "@/constants/languages"
import { serverClient } from "@/lib/trpc/server"
import Header from "@/components/MyPages/Blocks/Header"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Grids from "@/components/TempDesignSystem/Grids"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "../data"
import { getIntl } from "@/i18n"
import styles from "./current.module.css"
@@ -19,45 +17,36 @@ export default async function CurrentBenefitsBlock({
link,
}: AccountPageComponentProps) {
const user = await serverClient().user.get()
const { formatMessage } = await getIntl()
// TODO: level should be fetched from the `user` object once available
// TAKE NOTE: we need clarification on how benefits stack from different levels
// in order to determine if a benefit is specific to a level or if it is a cumulative benefit
// we might have to add a new boolean property "exclusive" or similar
const userLevel = 1
const currentLevel = levelsData[Lang.en].levels.find(
(level) => level.tier === userLevel
)
if (!currentLevel) {
// TODO: handle this case?
return null
}
const currentLevel = Array.of(...Array(3).keys())
return (
<section className={styles.container}>
<Header title={title} link={link} subtitle={subtitle} />
<CardGrid isMobileCarousel={true}>
{currentLevel.benefits.map((benefit, idx) => (
<Link
href={benefit.href}
key={`${currentLevel}-${idx}`}
className={styles.card}
>
<Title as="h5" level="h3" className={styles.title}>
<span className={styles.titleValue}>{benefit.value}</span>
{benefit.explaination ? (
<span className={styles.titleExplanation}>
{benefit.explaination}
</span>
) : null}
<Grids.Scrollable>
{currentLevel.map((benefit) => (
<Link className={styles.card} href="#" key={benefit}>
<BiroScript
className={styles.script}
color="primaryLightOnSurfaceAccent"
type="two"
>
{formatMessage({ id: "As our Close Friend" })}
</BiroScript>
<Title as="h5" level="h3" textAlign="center">
{formatMessage({
id: "Free soft drink voucher for the kids when staying",
})}
</Title>
<Subtitle className={styles.subtitle}>
{benefit.description}
</Subtitle>
</Link>
))}
</CardGrid>
</Grids.Scrollable>
</section>
)
}

50
components/MyPages/Blocks/Benefits/NextLevel/index.tsx
View File

@@ -4,8 +4,11 @@ import { serverClient } from "@/lib/trpc/server"
import Header from "@/components/MyPages/Blocks/Header"
import Button from "@/components/TempDesignSystem/Button"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Chip from "@/components/TempDesignSystem/Chip"
import Grids from "@/components/TempDesignSystem/Grids"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import styles from "./next.module.css"
@@ -22,35 +25,34 @@ export default async function NextLevelBenefitsBlock({
return (
<section className={styles.container}>
<Header title={title} subtitle={subtitle} link={link} />
<CardGrid variant="twoColumnGrid">
<Grids.Stackable>
{perks.map((perk) => (
<article key={perk.id} className={styles.card}>
<div className={styles.cardInner}>
{/*TODO: These label buttons will be rebuilt as "Chip" (Badge?) components according to design.*/}
<Button
type="button"
size="small"
className={styles.chip}
disabled
<Chip>
<Lock height={16} />
{formatMessage({ id: "Level up to unlock" })}
</Chip>
<div>
<BiroScript
className={styles.level}
color="primaryLightOnSurfaceAccent"
textAlign="center"
type="two"
>
<Lock height={16} />
Level up to unlock
</Button>
<div className={styles.mainContentContainer}>
<span className={styles.level}>As our {nextLevel}</span>{" "}
<p className={styles.cardSubtitle}>{perk.explanation}</p>
</div>
{formatMessage({ id: "As our" })} {nextLevel}
</BiroScript>{" "}
<Subtitle color="pale" textAlign="center">
{perk.explanation}
</Subtitle>
</div>
</article>
))}
</CardGrid>
<div className={styles.buttonContainer}>
<Button asChild intent="primary">
<Link href="#">
{formatMessage({ id: "Explore all levels and benefits" })}
</Link>
</Button>
</div>
</Grids.Stackable>
<Button asChild intent="primary">
<Link className={styles.link} href="#">
{formatMessage({ id: "Explore all levels and benefits" })}
</Link>
</Button>
</section>
)
}

97
components/MyPages/Blocks/Benefits/NextLevel/next.module.css
View File

@@ -1,104 +1,23 @@
.container {
display: grid;
gap: 1.5rem;
}
.cardContainer {
display: grid;
gap: 0.4rem;
}
.title {
font-weight: 600;
}
.subtitle {
margin: 0;
font-size: 2rem;
gap: var(--Spacing-x7);
}
.card {
text-decoration: none;
display: flex;
flex-direction: column;
flex: 1 0 0;
align-self: stretch;
border-radius: var(--Corner-radius-Medium);
align-items: center;
background-color: var(--Scandic-Brand-Burgundy);
text-align: center;
}
.cardInner {
border-radius: var(--Corner-radius-Small);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
gap: var(--Spacing-x2);
align-self: stretch;
}
.mainContentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--Spacing-x1);
align-self: stretch;
}
/* TODO: Remove once we have the "Chip" (badge?) component. */
.chip {
background-color: var(--Scandic-Red-90) !important;
color: var(--Scandic-Peach-50) !important;
padding: var(--Spacing-x-half) var(--Spacing-x1) !important;
font-size: 12px !important;
height: 22px !important;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
}
.level {
text-align: center;
font-family: var(--typography-Script-2-fontFamily);
font-size: var(--typography-Script-2-Mobile-fontSize);
font-weight: var(--typography-Script-2-fontWeight);
line-height: var(--typography-Script-2-lineHeight);
letter-spacing: 0.4px;
color: var(--Scandic-Peach-50);
transform: rotate(-2deg);
}
.cardSubtitle {
color: var(--Scandic-Brand-Pale-Peach);
font-family: var(--typography-Title-5-fontFamily);
font-size: var(--typography-Title-5-Mobile-fontSize);
font-weight: 500;
line-height: var(--typography-Title-5-lineHeight);
/* TODO: I presume the actual text-transform value should be: var(--typography-Title-5-textCase);
* - verify why we return "upper" and not uppercase.
* */
margin: 0;
text-transform: uppercase;
text-wrap: balance;
}
.buttonContainer {
display: flex;
justify-content: center;
}
@media screen and (min-width: 950px) {
.cardContainer {
grid-template-columns: 1fr 1fr 1fr;
}
.level {
font-size: var(--typography-Script-2-Desktop-fontSize);
letter-spacing: 0.48px;
}
.cardSubtitle {
font-size: var(--typography-Title-5-fontSize);
}
.level {
font-size: var(--typography-Script-2-fontSize);
}
}
.link {
justify-self: center;
}

2
components/MyPages/Blocks/Challenges/challenges.module.css
View File

@@ -1,3 +1,5 @@
/* TODO: Fix when brought back into the loop */
.challenges {
--card-height: 23.6rem;
--gap: 0.4rem;

6
components/MyPages/Blocks/Header/index.tsx
View File

@@ -4,7 +4,7 @@ import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./header.module.css"
import type { HeaderProps } from "@/types/components/myPages/stays/title"
import type { HeaderProps } from "@/types/components/myPages/header"
export default function Header({
link,
@@ -21,11 +21,11 @@ export default function Header({
>
{title}
</Title>
{link && (
{link ? (
<Link className={styles.link} href={link.href} variant="myPage">
{link.text}
</Link>
)}
) : null}
<Subtitle className={styles.subtitle}>{subtitle}</Subtitle>
</header>
)

5
components/MyPages/Blocks/Overview/Buttons/btn.module.css
View File

@@ -1,5 +0,0 @@
@media screen and (max-width: 1366px) {
.membershipBtn {
display: none;
}
}

5
components/MyPages/Blocks/Overview/Stats/Label/index.tsx
View File

@@ -1,5 +0,0 @@
import styles from "./label.module.css"
export default function Label({ children }: React.PropsWithChildren) {
return <span className={styles.label}>{children}</span>
}

9
components/MyPages/Blocks/Overview/Stats/Label/label.module.css
View File

@@ -1,9 +0,0 @@
.label {
color: var(--Scandic-Brand-Pale-Peach);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
margin: 0;
}

5
components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
View File

@@ -1,9 +1,8 @@
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import Label from "../Label"
import styles from "./nextLevel.module.css"
import type { UserProps } from "@/types/components/myPages/user"
@@ -12,7 +11,7 @@ export default async function NextLevel({}: UserProps) {
const { formatMessage } = await getIntl()
return (
<section>
<Label>{formatMessage({ id: "Next level" })}:</Label>
<Body color="pale">{formatMessage({ id: "Next level" })}:</Body>
<Title className={styles.nextLevel} color="pale" level="h3">
N/A
<BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>

13
components/MyPages/Blocks/Overview/Stats/Points/index.tsx
View File

@@ -1,9 +1,8 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"
import Label from "../Label"
import styles from "./totalPoints.module.css"
import type { UserProps } from "@/types/components/myPages/user"
@@ -14,14 +13,16 @@ export default async function Points({ user }: UserProps) {
return (
<section className={styles.points}>
<article>
<Label>{formatMessage({ id: "Total Points" })}</Label>
<Title color="pale" level="h2">
<Body color="pale">{formatMessage({ id: "Total Points" })}</Body>
<Title color="pale" hideEmpty={false} level="h2">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>
<article>
<Label>{formatMessage({ id: "Points until next level" })}</Label>
<Title color="pale" level="h2">
<Body color="pale">
{formatMessage({ id: "Points until next level" })}
</Body>
<Title color="pale" hideEmpty={false} level="h2">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>

2
components/MyPages/Blocks/Overview/overview.module.css
View File

@@ -1,6 +1,6 @@
.container {
display: grid;
gap: 1.5rem;
gap: var(--Spacing-x7);
}
.overview {

19
components/MyPages/Blocks/Shortcuts/index.tsx
View File

@@ -1,4 +1,4 @@
import Image from "@/components/Image"
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Header from "../Header"
@@ -8,28 +8,29 @@ import styles from "./shortcuts.module.css"
import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
export default function Shortcuts({
firstItem = false,
shortcuts,
subtitle,
title,
}: ShortcutsProps) {
return (
<section className={styles.shortcuts}>
<Header link={undefined} subtitle={subtitle} title={title} />
<Header
link={undefined}
subtitle={subtitle}
title={title}
topTitle={firstItem}
/>
<section className={styles.links}>
{shortcuts.map((shortcut) => (
<Link
className={styles.link}
href={shortcut.url}
key={shortcut.title}
target={shortcut.openInNewTab ? "_blank" : undefined}
variant="shortcut"
>
<span>{shortcut.text ? shortcut.text : shortcut.title}</span>
<Image
alt="Chevron Icon"
height={20}
src="/_static/icons/chevron.svg"
width={20}
/>
<ArrowRightIcon />
</Link>
))}
</section>

35
components/MyPages/Blocks/Shortcuts/shortcuts.module.css
View File

@@ -1,38 +1,9 @@
.shortcuts {
display: grid;
gap: 2rem;
}
.header {
display: grid;
gap: 2rem;
}
.subtitle {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.8rem;
font-weight: 400;
line-height: 2.2rem;
margin: 0;
gap: var(--Spacing-x4);
}
.links {
display: grid;
gap: 0.8rem;
}
.link {
align-items: center;
border: 0.1rem solid var(--some-grey-color, #d9d9d9);
border-radius: 0.4rem;
color: var(--some-black-color, #000);
display: flex;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 700;
gap: 0.4rem;
justify-content: space-between;
line-height: 2.2rem;
padding: 1.4rem 2rem;
text-decoration: none;
background-color: var(--Scandic-Brand-Warm-White);
border-radius: var(--Corner-radius-xLarge);
}

4
components/MyPages/Blocks/Stays/Container/container.module.css
View File

@@ -1,10 +1,10 @@
.container {
display: grid;
gap: 2rem;
gap: var(--Spacing-x3);
}
@media screen and (min-width: 1367px) {
.container {
gap: 3.5rem;
gap: var(--Spacing-x7);
}
}

2
components/MyPages/Blocks/Stays/ListContainer/container.module.css
View File

@@ -1,4 +1,4 @@
.container {
display: grid;
gap: 3rem;
gap: var(--Spacing-x2);
}

4
components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css
View File

@@ -1,8 +1,8 @@
.container {
align-items: center;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: var(--Corner-radius-Medium);
display: flex;
justify-content: center;
min-height: 25rem;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: 0.8rem;
}

6
components/MyPages/Blocks/Stays/Previous/index.tsx
View File

@@ -3,7 +3,7 @@
import { trpc } from "@/lib/trpc/client"
import LoadingSpinner from "@/components/LoadingSpinner"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Grids from "@/components/TempDesignSystem/Grids"
import Header from "../../Header"
import Container from "../Container"
@@ -43,7 +43,7 @@ export default function PreviousStays({
<LoadingSpinner />
) : stays.length ? (
<ListContainer>
<CardGrid>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
@@ -51,7 +51,7 @@ export default function PreviousStays({
stay={stay}
/>
))}
</CardGrid>
</Grids.Stackable>
{hasNextPage ? (
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
) : null}

32
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -1,25 +1,17 @@
.button {
background-color: var(--some-red-color, #ed2027);
}
.link {
text-decoration: none;
.container {
align-items: center;
background-color: var(--Scandic-Brand-Warm-White);
border-radius: var(--Corner-radius-Medium);
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
justify-content: center;
margin-bottom: var(--Spacing-x1);
min-height: 250px;
padding: var(--Spacing-x0) var(--Spacing-x3);
}
.grayTitle {
color: var(--some-grey-color, #727272);
color: var(--UI-Grey-60);
display: block;
}
.container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 25rem;
gap: 2.5rem;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: 0.8rem;
margin-bottom: 0.5rem;
padding: 0 2rem;
}

4
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -17,9 +17,7 @@ export default async function EmptyUpcomingStaysBlock() {
</span>
</Title>
<Button asChild intent="primary" type="button">
<Link className={styles.link} href="#" key="getInspired">
{formatMessage({ id: "Get inspired" })}
</Link>
<Link href="#">{formatMessage({ id: "Get inspired" })}</Link>
</Button>
</section>
)

6
components/MyPages/Blocks/Stays/Soonest/index.tsx
View File

@@ -1,6 +1,6 @@
import { serverClient } from "@/lib/trpc/server"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Grids from "@/components/TempDesignSystem/Grids"
import Header from "../../Header"
import StayCard from "../StayCard"
@@ -22,7 +22,7 @@ export default async function SoonestStays({
<section className={styles.container}>
<Header title={title} subtitle={subtitle} link={link} />
{stays.length ? (
<CardGrid>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
@@ -30,7 +30,7 @@ export default async function SoonestStays({
stay={stay}
/>
))}
</CardGrid>
</Grids.Stackable>
) : (
<EmptyUpcomingStaysBlock />
)}

2
components/MyPages/Blocks/Stays/Soonest/soonest.module.css
View File

@@ -1,4 +1,4 @@
.container {
display: grid;
gap: 1.5rem;
gap: var(--Spacing-x2);
}

6
components/MyPages/Blocks/Stays/StayCard/index.tsx
View File

@@ -33,7 +33,11 @@ export default function StayCard({ stay, lang }: StayCardProps) {
{hotelInformation.hotelName}
</Title>
<div className={styles.date}>
<Calendar height={20} width={20} color="var(--Main-Brand-Burgundy)" />
<Calendar
height={20}
width={20}
color="var(--Scandic-Brand-Burgundy)"
/>
<time dateTime={arrivalDateTime}>{arrivalDate}</time>
{" - "}
<time dateTime={departDateTime}>{departDate}</time>

38
components/MyPages/Blocks/Stays/StayCard/stay.module.css
View File

@@ -1,43 +1,43 @@
.stay {
border-radius: 0.4rem;
background-color: var(--Main-Grey-White);
border: 1px solid var(--Scandic-Brand-Burgundy);
border-radius: var(--Corner-radius-Small);
display: grid;
overflow: hidden;
background-color: var(--Main-Grey-White);
border: 1px solid #4d001b1a; /* var(--Main-Brand-Burgundy) 10% */
}
.image {
height: auto;
width: 100%;
min-height: 22rem;
min-height: 220px;
object-fit: cover;
overflow: hidden;
width: 100%;
}
.footer {
color: var(--Main-Brand-Burgundy);
padding: 1.6rem;
overflow: hidden;
margin-top: auto;
width: 100%;
color: var(--Scandic-Brand-Burgundy);
display: grid;
gap: 1.6rem;
gap: var(--Spacing-x2);
margin-top: auto;
overflow: hidden;
padding: var(--Spacing-x2);
width: 100%;
}
.hotel {
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
padding: 0;
margin: 0;
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
text-wrap: nowrap;
}
.date {
align-items: center;
display: flex;
gap: var(--Spacing-x-half);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: var(--typography-Caption-Regular-fontWeight);
line-height: var(--typography-Caption-Regular-lineHeight);
display: flex;
align-items: center;
gap: 0.4rem;
}

32
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -1,25 +1,17 @@
.button {
background-color: var(--some-red-color, #ed2027);
}
.link {
text-decoration: none;
.container {
align-items: center;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: var(--Corner-radius-Medium);
display: flex;
gap: var(--Spacing-x3);
flex-direction: column;
justify-content: center;
margin-bottom: var(--Spacing-x-half);
min-height: 250px;
padding: var(--Spacing-x0) var(--Spacing-x3);
}
.grayTitle {
color: var(--some-grey-color, #727272);
color: var(--UI-Grey-60);
display: block;
}
.container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 25rem;
gap: 2.5rem;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: 0.8rem;
margin-bottom: 0.5rem;
padding: 0 2rem;
}

4
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -18,9 +18,7 @@ export default function EmptyUpcomingStaysBlock() {
</span>
</Title>
<Button asChild intent="primary" type="button">
<Link className={styles.link} href="#" key="getInspired">
{formatMessage({ id: "Get inspired" })}
</Link>
<Link href="#">{formatMessage({ id: "Get inspired" })}</Link>
</Button>
</section>
)

6
components/MyPages/Blocks/Stays/Upcoming/index.tsx
View File

@@ -3,7 +3,7 @@
import { trpc } from "@/lib/trpc/client"
import LoadingSpinner from "@/components/LoadingSpinner"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Grids from "@/components/TempDesignSystem/Grids"
import Header from "../../Header"
import Container from "../Container"
@@ -43,7 +43,7 @@ export default function UpcomingStays({
<LoadingSpinner />
) : stays.length ? (
<ListContainer>
<CardGrid>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
@@ -51,7 +51,7 @@ export default function UpcomingStays({
stay={stay}
/>
))}
</CardGrid>
</Grids.Stackable>
{hasNextPage ? (
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
) : null}

9
components/MyPages/Breadcrumbs/Breadcrumb.tsx
View File

@@ -1,9 +0,0 @@
import styles from "./breadcrumbs.module.css"
export default function Breadcrumb({ children }: React.PropsWithChildren) {
return (
<li className={styles.listItem}>
<p className={styles.currentPage}>{children}</p>
</li>
)
}

17
components/MyPages/Breadcrumbs/BreadcrumbWithLink.tsx
View File

@@ -1,17 +0,0 @@
import Link from "@/components/TempDesignSystem/Link"
import styles from "./breadcrumbs.module.css"
export default function BreadcrumbsWithLink({
children,
href,
}: React.PropsWithChildren<{ href: string }>) {
return (
<li className={styles.listItem}>
<Link className={styles.link} href={href}>
{children}
</Link>
<span aria-hidden="true">/</span>
</li>
)
}

20
components/MyPages/Breadcrumbs/breadcrumbs.module.css
View File

@@ -2,34 +2,24 @@
display: block;
padding-left: var(--Spacing-x2);
padding-right: var(--Spacing-x2);
padding-top: var(--Spacing-x4);
padding-top: var(--Spacing-x2);
}
.list {
align-items: center;
display: flex;
gap: 0.4rem;
gap: var(--Spacing-x-quarter);
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
.listItem,
.link {
color: var(--some-text-color, #000);
font-size: 1.4rem;
font-weight: 400;
line-height: 1.56rem;
}
.listItem {
align-items: center;
display: flex;
gap: 0.4rem;
}
.currentPage {
margin: 0;
.homeLink {
display: flex;
}
@media screen and (min-width: 1367px) {

39
components/MyPages/Breadcrumbs/index.tsx
View File

@@ -1,26 +1,53 @@
import { serverClient } from "@/lib/trpc/server"
import Breadcrumb from "./Breadcrumb"
import BreadcrumbsWithLink from "./BreadcrumbWithLink"
import { ChevronRightIcon , HouseIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import styles from "./breadcrumbs.module.css"
export default async function Breadcrumbs() {
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
const homeBreadcrumb = breadcrumbs.shift()
return (
<nav className={styles.breadcrumbs}>
<ul className={styles.list}>
{homeBreadcrumb ? (
<li className={styles.listItem}>
<Link
className={styles.homeLink}
color="peach80"
href={homeBreadcrumb.href!}
variant="breadcrumb"
>
<HouseIcon color="peach80" />
</Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li>
) : null}
{breadcrumbs.map((breadcrumb) => {
if (breadcrumb.href) {
return (
<BreadcrumbsWithLink key={breadcrumb.uid} href={breadcrumb.href}>
{breadcrumb.title}
</BreadcrumbsWithLink>
<li key={breadcrumb.uid} className={styles.listItem}>
<Link
color="peach80"
href={breadcrumb.href}
variant="breadcrumb"
>
{breadcrumb.title}
</Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li>
)
}
return (
<Breadcrumb key={breadcrumb.uid}>{breadcrumb.title}</Breadcrumb>
<li key={breadcrumb.uid} className={styles.listItem}>
<Footnote color="burgundy" textTransform="bold">
{breadcrumb.title}
</Footnote>
</li>
)
})}
</ul>

61
components/MyPages/Sidebar/index.tsx
View File

@@ -1,52 +1,57 @@
import { Fragment } from "react"
import { LogOut } from "react-feather"
import { logout } from "@/constants/routes/handleAuth"
import { serverClient } from "@/lib/trpc/server"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./sidebar.module.css"
import { LangParams } from "@/types/params"
import type { LangParams } from "@/types/params"
export default async function Sidebar({ lang }: LangParams) {
const navigation = await serverClient().contentstack.myPages.navigation.get()
const { formatMessage } = await getIntl()
return (
<aside className={styles.sidebar}>
<nav className={styles.nav}>
<Title level="h5">{navigation.title}</Title>
{navigation.items.map((item) => (
<Fragment key={item.uid}>
<Link
href={item.originalUrl || item.url}
partialMatch
variant="sidebar"
>
{item.linkText}
</Link>
{item.subItems
? item.subItems.map((subItem) => (
<Link
key={subItem.uid}
href={subItem.originalUrl || subItem.url}
partialMatch
variant="sidebar"
>
{subItem.linkText}
</Link>
))
: null}
{navigation.menuItems.map((menuItem, idx) => (
<Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
<Divider color="peach" />
<ul className={styles.list}>
{menuItem.links.map((link) => (
<li key={link.uid}>
<Link
color="burgundy"
href={link.originalUrl || link.url}
partialMatch
size={menuItem.display_sign_out_link ? "small" : "regular"}
variant="sidebar"
>
{link.linkText}
</Link>
</li>
))}
{menuItem.display_sign_out_link ? (
<li>
<Link
color="burgundy"
href={logout[lang]}
prefetch={false}
size="small"
variant="sidebar"
>
{formatMessage({ id: "Log out" })}
</Link>
</li>
) : null}
</ul>
</Fragment>
))}
<Link prefetch={false} href={logout[lang]} variant="sidebar">
{formatMessage({ id: "Log out" })} <LogOut height={16} width={16} />
</Link>
</nav>
</aside>
)

18
components/MyPages/Sidebar/sidebar.module.css
View File

@@ -1,22 +1,20 @@
.sidebar {
align-self: flex-start;
display: none;
padding-top: var(--Spacing-x3);
position: sticky;
/* Based on header and breadcrumbs height, and gap */
top: 7.1rem;
}
.nav {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 2rem;
padding-left: 4rem;
display: grid;
gap: var(--Spacing-x2);
}
.list {
list-style: none;
}
@media screen and (min-width: 1367px) {
.sidebar {
align-self: flex-start;
display: block;
padding-top: var(--Spacing-x1);
}
}