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

fix(BOOK-436): Added new section component and deprecated the other

Browse Source 
Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Erik Tiekstra
2025-10-13 08:31:26 +00:00
parent 7bd75f01e4
commit 339e7195dc
34 changed files with 245 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx
View File

@@ -5,7 +5,7 @@ import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import Blocks from "@/components/Blocks" import Blocks from "@/components/Blocks"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import styles from "./page.module.css" import styles from "./page.module.css"

11
apps/scandic-web/components/Blocks/Accordion/index.tsx
View File

@@ -6,8 +6,8 @@ import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem" import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml" import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import styles from "./accordion.module.css" import styles from "./accordion.module.css"
@@ -25,10 +25,7 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
} }
return ( return (
<SectionContainer <Section className={styles.accordionSection} id={HotelHashValues.faq}>
className={styles.accordionSection}
id={HotelHashValues.faq}
>
<SectionHeader textTransform="uppercase" title={title} /> <SectionHeader textTransform="uppercase" title={title} />
<Accordion <Accordion
className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`} className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
@@ -51,6 +48,6 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
showLess={allAccordionsVisible} showLess={allAccordionsVisible}
/> />
) : null} ) : null}
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/CardGallery/index.tsx
View File

@@ -4,8 +4,8 @@ import { useState } from "react"
import { Carousel } from "@/components/Carousel" import { Carousel } from "@/components/Carousel"
import ContentCard from "@/components/ContentCard" import ContentCard from "@/components/ContentCard"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import TabFilters from "@/components/TabFilters" import TabFilters from "@/components/TabFilters"
@@ -21,7 +21,7 @@ export default function CardGallery({ card_gallery }: CardGalleryProps) {
const filteredCards = cards.filter((card) => card.filterId === activeFilter) const filteredCards = cards.filter((card) => card.filterId === activeFilter)
return ( return (
<SectionContainer> <Section>
<SectionHeader title={heading} link={link} /> <SectionHeader title={heading} link={link} />
{filterCategories.length > 0 && activeFilter && ( {filterCategories.length > 0 && activeFilter && (
<TabFilters <TabFilters
@@ -62,6 +62,6 @@ export default function CardGallery({ card_gallery }: CardGalleryProps) {
<Carousel.Dots /> <Carousel.Dots />
</Carousel> </Carousel>
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/CardsGrid.tsx
View File

@@ -4,8 +4,8 @@ import {
} from "@scandic-hotels/trpc/types/cardsGridEnum" } from "@scandic-hotels/trpc/types/cardsGridEnum"
import InfoCard from "@/components/ContentType/StartPage/InfoCard" import InfoCard from "@/components/ContentType/StartPage/InfoCard"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import Card from "@/components/TempDesignSystem/Card" import Card from "@/components/TempDesignSystem/Card"
import Grids from "@/components/TempDesignSystem/Grids" import Grids from "@/components/TempDesignSystem/Grids"
import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard" import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
@@ -32,7 +32,7 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
} }
return ( return (
<SectionContainer> <Section>
<SectionHeader <SectionHeader
title={cards_grid.title} title={cards_grid.title}
preamble={cards_grid.preamble} preamble={cards_grid.preamble}
@@ -99,6 +99,6 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
} }
})} })}
</Grids.Stackable> </Grids.Stackable>
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/CarouselCards/index.tsx
View File

@@ -4,8 +4,8 @@ import { useState } from "react"
import { Carousel } from "@/components/Carousel" import { Carousel } from "@/components/Carousel"
import ContentCard from "@/components/ContentCard" import ContentCard from "@/components/ContentCard"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import TabFilters from "@/components/TabFilters" import TabFilters from "@/components/TabFilters"
@@ -35,7 +35,7 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
) )
return ( return (
<SectionContainer> <Section>
<SectionHeader <SectionHeader
title={heading} title={heading}
preamble={preamble} preamble={preamble}
@@ -69,6 +69,6 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
<Carousel.Dots /> <Carousel.Dots />
</Carousel> </Carousel>
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/index.tsx
View File

@@ -1,7 +1,7 @@
import { getJobylonFeed } from "@/lib/trpc/memoizedRequests" import { getJobylonFeed } from "@/lib/trpc/memoizedRequests"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import JobList from "./JobList" import JobList from "./JobList"
@@ -24,7 +24,7 @@ export default async function JobylonFeed({
} }
return ( return (
<SectionContainer> <Section>
<SectionHeader <SectionHeader
link={link} link={link}
preamble={subtitle} preamble={subtitle}
@@ -34,6 +34,6 @@ export default async function JobylonFeed({
/> />
<JobList allJobs={allJobs} /> <JobList allJobs={allJobs} />
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

15
apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/index.tsx
View File

@@ -1,6 +1,6 @@
import { CookieConsentButton } from "@/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton" import { CookieConsentButton } from "@/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import { SectionHeader } from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
interface ManageCookieConsentProps { interface ManageCookieConsentProps {
@@ -15,16 +15,15 @@ export function ManageCookieConsent({
link, link,
}: ManageCookieConsentProps) { }: ManageCookieConsentProps) {
return ( return (
<SectionContainer> <Section>
<SectionHeader <SectionHeader
link={link} link={link}
preamble={subtitle} preamble={subtitle}
title={title} heading={title}
headingAs="h3" typography="Title/sm"
headingLevel="h2"
/> />
<CookieConsentButton /> <CookieConsentButton />
<SectionLink link={link} variant="mobile" /> {link ? <SectionLink link={link} variant="mobile" /> : null}
</SectionContainer> </Section>
) )
} }

62
apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/index.tsx
View File

@@ -2,8 +2,8 @@ import * as webHrefs from "@/constants/webHrefs"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import ShortcutsListItems from "@/components/Blocks/ShortcutsList/ShortcutsListItems" import ShortcutsListItems from "@/components/Blocks/ShortcutsList/ShortcutsListItems"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
@@ -99,35 +99,33 @@ export default async function MyPagesOverviewShortcuts() {
const scandicFriendsShortcuts = buildFriendsShortcuts(navigation) const scandicFriendsShortcuts = buildFriendsShortcuts(navigation)
return ( return (
<SectionContainer> <Section className={styles.section}>
<section className={styles.section}> <div className={styles.column}>
<div className={styles.column}> <SectionHeader
<SectionHeader title={intl.formatMessage({
title={intl.formatMessage({ defaultMessage: "Your Membership",
defaultMessage: "Your Membership", })}
})} headingAs="h4"
headingAs="h4" headingLevel="h3"
headingLevel="h3" />
/> <ShortcutsListItems
<ShortcutsListItems shortcutsListItems={membershipShortcuts}
shortcutsListItems={membershipShortcuts} className={styles.shortcuts}
className={styles.shortcuts} />
/> </div>
</div> <div className={styles.column}>
<div className={styles.column}> <SectionHeader
<SectionHeader title={intl.formatMessage({
title={intl.formatMessage({ defaultMessage: "Scandic Friends Links",
defaultMessage: "Scandic Friends Links", })}
})} headingAs="h4"
headingAs="h4" headingLevel="h3"
headingLevel="h3" />
/> <ShortcutsListItems
<ShortcutsListItems shortcutsListItems={scandicFriendsShortcuts}
shortcutsListItems={scandicFriendsShortcuts} className={styles.shortcuts}
className={styles.shortcuts} />
/> </div>
</div> </Section>
</section>
</SectionContainer>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx
View File

@@ -8,8 +8,8 @@ import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigge
import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard" import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCard/Alert" import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCard/Alert"
import LevelProgressCard from "@/components/MyPages/LevelProgressCard" import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
@@ -36,7 +36,7 @@ export default async function Overview({
} }
return ( return (
<SectionContainer> <Section>
{env.ENABLE_DTMC ? <DigitalTeamMemberCardAlert /> : null} {env.ENABLE_DTMC ? <DigitalTeamMemberCardAlert /> : null}
<SectionHeader <SectionHeader
link={link} link={link}
@@ -79,6 +79,6 @@ export default async function Overview({
)} )}
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
View File

@@ -1,5 +1,5 @@
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import ClaimPoints from "../ClaimPoints" import ClaimPoints from "../ClaimPoints"
@@ -15,7 +15,7 @@ export default function EarnAndBurn({
title, title,
}: AccountPageComponentProps) { }: AccountPageComponentProps) {
return ( return (
<SectionContainer> <Section>
<div className={styles.header}> <div className={styles.header}>
<SectionHeader title={title} link={link} preamble={subtitle} /> <SectionHeader title={title} link={link} preamble={subtitle} />
@@ -23,6 +23,6 @@ export default function EarnAndBurn({
</div> </div>
<JourneyTable /> <JourneyTable />
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx
View File

@@ -1,7 +1,7 @@
import { getMembershipLevel } from "@/lib/trpc/memoizedRequests" import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import ExpiringPointsTable from "./ExpiringPointsTable" import ExpiringPointsTable from "./ExpiringPointsTable"
@@ -19,12 +19,12 @@ export default async function ExpiringPoints({
} }
return ( return (
<SectionContainer> <Section>
<SectionHeader title={title} link={link} preamble={subtitle} /> <SectionHeader title={title} link={link} preamble={subtitle} />
<ExpiringPointsTable <ExpiringPointsTable
points={membershipLevel.pointsToExpire} points={membershipLevel.pointsToExpire}
expirationDate={membershipLevel.pointsExpiryDate} expirationDate={membershipLevel.pointsExpiryDate}
/> />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/index.tsx
View File

@@ -4,8 +4,8 @@ import { env } from "@/env/server"
import { getProfile } from "@/lib/trpc/memoizedRequests" import { getProfile } from "@/lib/trpc/memoizedRequests"
import LevelProgressCard from "@/components/MyPages/LevelProgressCard" import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import Friend from "../../Overview/Friend" import Friend from "../../Overview/Friend"
@@ -29,7 +29,7 @@ export default async function PointsOverview({
} }
return ( return (
<SectionContainer> <Section>
<SectionHeader <SectionHeader
link={link} link={link}
preamble={subtitle} preamble={subtitle}
@@ -55,6 +55,6 @@ export default async function PointsOverview({
</Hero> </Hero>
)} )}
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
View File

@@ -4,8 +4,8 @@ import {
getMembershipLevel, getMembershipLevel,
} from "@/lib/trpc/memoizedRequests" } from "@/lib/trpc/memoizedRequests"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import ClientCurrentRewards from "./Client" import ClientCurrentRewards from "./Client"
@@ -27,7 +27,7 @@ export default async function CurrentRewardsBlock({
} }
return ( return (
<SectionContainer> <Section>
<SectionHeader title={title} link={link} preamble={subtitle} /> <SectionHeader title={title} link={link} preamble={subtitle} />
<ClientCurrentRewards <ClientCurrentRewards
rewards={rewardsResponse.rewards} rewards={rewardsResponse.rewards}
@@ -35,6 +35,6 @@ export default async function CurrentRewardsBlock({
membershipNumber={membershipLevel?.membershipNumber} membershipNumber={membershipLevel?.membershipNumber}
/> />
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
View File

@@ -8,8 +8,8 @@ import Title from "@scandic-hotels/design-system/Title"
import { getMembershipLevel } from "@/lib/trpc/memoizedRequests" import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import Grids from "@/components/TempDesignSystem/Grids" import Grids from "@/components/TempDesignSystem/Grids"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
@@ -42,7 +42,7 @@ export default async function NextLevelRewardsBlock({
} }
return ( return (
<SectionContainer> <Section>
<SectionHeader title={title} preamble={subtitle} link={link} /> <SectionHeader title={title} preamble={subtitle} link={link} />
<Grids.Stackable columns={2}> <Grids.Stackable columns={2}>
{nextLevelRewards.rewards.map((reward) => ( {nextLevelRewards.rewards.map((reward) => (
@@ -70,6 +70,6 @@ export default async function NextLevelRewardsBlock({
))} ))}
</Grids.Stackable> </Grids.Stackable>
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx
View File

@@ -13,8 +13,8 @@ import {
} from "@/constants/membershipLevels" } from "@/constants/membershipLevels"
import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests" import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getSasTierExpirationDate } from "@/utils/sas" import { getSasTierExpirationDate } from "@/utils/sas"
@@ -40,13 +40,13 @@ export default async function SASLinkedAccount({
return ( return (
<div className={styles.container}> <div className={styles.container}>
<SectionContainer> <Section>
<SectionHeader link={link} preamble={subtitle} title={title} /> <SectionHeader link={link} preamble={subtitle} title={title} />
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
<Suspense fallback={<MatchedAccountInfoSkeleton />}> <Suspense fallback={<MatchedAccountInfoSkeleton />}>
<MatchedAccountInfo /> <MatchedAccountInfo />
</Suspense> </Suspense>
</SectionContainer> </Section>
<div className={styles.mutationSection}> <div className={styles.mutationSection}>
<Typography variant="Body/Supporting text (caption)/smRegular"> <Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.caption}> <p className={styles.caption}>

8
apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx
View File

@@ -2,8 +2,8 @@ import { Suspense } from "react"
import { env } from "@/env/server" import { env } from "@/env/server"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
@@ -30,12 +30,12 @@ export default async function SASTransferPoints({
const lang = await getLang() const lang = await getLang()
return ( return (
<SectionContainer> <Section>
<SectionHeader link={link} preamble={subtitle} title={title} /> <SectionHeader link={link} preamble={subtitle} title={title} />
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
<Suspense fallback={<TransferPointsFormSkeleton lang={lang} />}> <Suspense fallback={<TransferPointsFormSkeleton lang={lang} />}>
<TransferPointsForm lang={lang} /> <TransferPointsForm lang={lang} />
</Suspense> </Suspense>
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx
View File

@@ -1,5 +1,5 @@
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent" import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
@@ -14,7 +14,7 @@ export default function SectionWrapper({
dynamic_content.title dynamic_content.title
) )
return ( return (
<SectionContainer> <Section>
{displayHeader ? ( {displayHeader ? (
<SectionHeader <SectionHeader
link={dynamic_content.link} link={dynamic_content.link}
@@ -28,6 +28,6 @@ export default function SectionWrapper({
{dynamic_content.link ? ( {dynamic_content.link ? (
<SectionLink link={dynamic_content.link} variant="mobile" /> <SectionLink link={dynamic_content.link} variant="mobile" />
) : null} ) : null}
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
View File

@@ -1,8 +1,8 @@
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints" import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import ClientPreviousStays from "./Client" import ClientPreviousStays from "./Client"
@@ -25,7 +25,7 @@ export default async function PreviousStays({
} }
return ( return (
<SectionContainer> <Section>
<div className={styles.header}> <div className={styles.header}>
<SectionHeader title={title} link={link} /> <SectionHeader title={title} link={link} />
@@ -33,6 +33,6 @@ export default async function PreviousStays({
</div> </div>
<ClientPreviousStays initialPreviousStays={initialPreviousStays} /> <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
View File

@@ -1,7 +1,7 @@
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays" import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
@@ -21,7 +21,7 @@ export default async function UpcomingStays({
}) })
return ( return (
<SectionContainer className={styles.container}> <Section className={styles.container}>
<SectionHeader title={title} link={link} /> <SectionHeader title={title} link={link} />
{initialUpcomingStays?.data.length ? ( {initialUpcomingStays?.data.length ? (
<ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} /> <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
@@ -29,6 +29,6 @@ export default async function UpcomingStays({
<EmptyUpcomingStaysBlock /> <EmptyUpcomingStaysBlock />
)} )}
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </Section>
) )
} }

6
apps/scandic-web/components/Blocks/HotelListing/index.tsx
View File

@@ -2,7 +2,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { getHotelsByCSFilter } from "@/lib/trpc/memoizedRequests" import { getHotelsByCSFilter } from "@/lib/trpc/memoizedRequests"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import HotelListingItem from "./HotelListingItem" import HotelListingItem from "./HotelListingItem"
@@ -26,7 +26,7 @@ export default async function HotelListing({
} }
return ( return (
<SectionContainer> <Section>
<Typography variant="Title/sm"> <Typography variant="Title/sm">
<h3 className={styles.heading}>{heading}</h3> <h3 className={styles.heading}>{heading}</h3>
</Typography> </Typography>
@@ -37,6 +37,6 @@ export default async function HotelListing({
contentType={contentType} contentType={contentType}
/> />
))} ))}
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/ShortcutsList/index.tsx
View File

@@ -1,5 +1,5 @@
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import ShortcutsListItems from "./ShortcutsListItems" import ShortcutsListItems from "./ShortcutsListItems"
@@ -34,7 +34,7 @@ export default function ShortcutsList({
] ]
return ( return (
<SectionContainer> <Section>
<SectionHeader <SectionHeader
preamble={subtitle} preamble={subtitle}
title={title} title={title}
@@ -50,6 +50,6 @@ export default function ShortcutsList({
/> />
))} ))}
</section> </section>
</SectionContainer> </Section>
) )
} }

8
apps/scandic-web/components/Blocks/Table/index.tsx
View File

@@ -10,8 +10,8 @@ import { useState } from "react"
import Table from "@scandic-hotels/design-system/Table" import Table from "@scandic-hotels/design-system/Table"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header/Deprecated"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import styles from "./table.module.css" import styles from "./table.module.css"
@@ -53,7 +53,7 @@ export default function TableBlock({ data }: TableBlockProps) {
} }
return ( return (
<SectionContainer> <Section>
<SectionHeader preamble={preamble} title={heading} /> <SectionHeader preamble={preamble} title={heading} />
<div className={styles.tableWrapper}> <div className={styles.tableWrapper}>
<Table <Table
@@ -103,6 +103,6 @@ export default function TableBlock({ data }: TableBlockProps) {
/> />
) : null} ) : null}
</div> </div>
</SectionContainer> </Section>
) )
} }

9
apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -5,7 +5,7 @@ import { useMemo, useRef, useState } from "react"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
import SectionContainer from "@/components/Section/Container" import { Section } from "@/components/Section"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import { RoomCard } from "./RoomCard" import { RoomCard } from "./RoomCard"
@@ -32,10 +32,7 @@ export function Rooms({ heading, rooms, preamble }: RoomsProps) {
} }
return ( return (
<SectionContainer <Section id={HotelHashValues.rooms} className={styles.roomsContainer}>
id={HotelHashValues.rooms}
className={styles.roomsContainer}
>
<div ref={scrollRef} className={styles.scrollRef}></div> <div ref={scrollRef} className={styles.scrollRef}></div>
<header className={styles.sectionHeader}> <header className={styles.sectionHeader}>
<Typography variant="Title/md"> <Typography variant="Title/md">
@@ -65,6 +62,6 @@ export function Rooms({ heading, rooms, preamble }: RoomsProps) {
showLess={allRoomsVisible} showLess={allRoomsVisible}
/> />
) : null} ) : null}
</SectionContainer> </Section>
) )
} }

6
apps/scandic-web/components/SasTierComparison/index.tsx
View File

@@ -10,7 +10,7 @@ import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton
import Subtitle from "@scandic-hotels/design-system/Subtitle" import Subtitle from "@scandic-hotels/design-system/Subtitle"
import Title from "@scandic-hotels/design-system/Title" import Title from "@scandic-hotels/design-system/Title"
import SectionContainer from "../Section/Container" import { Section } from "@/components/Section"
import styles from "./sasTierComparison.module.css" import styles from "./sasTierComparison.module.css"
@@ -30,7 +30,7 @@ export function SasTierComparison({
tierComparison, tierComparison,
}: TierComparisonProps) { }: TierComparisonProps) {
return ( return (
<SectionContainer className={styles.comparisonSection}> <Section className={styles.comparisonSection}>
<div className={styles.header}> <div className={styles.header}>
<Title level="h2" textAlign="center"> <Title level="h2" textAlign="center">
{title} {title}
@@ -77,7 +77,7 @@ export function SasTierComparison({
</Link> </Link>
</Button> </Button>
)} )}
</SectionContainer> </Section>
) )
} }

5
apps/scandic-web/components/Section/Container/container.module.css
View File

@@ -1,5 +0,0 @@
.container {
display: grid;
gap: var(--Spacing-x3);
z-index: 0;
}

13
apps/scandic-web/components/Section/Container/index.tsx
View File

@@ -1,13 +0,0 @@
import styles from "./container.module.css"
export default function SectionContainer({
children,
className = "",
...props
}: React.HTMLAttributes<HTMLElement>) {
return (
<section {...props} className={`${styles.container} ${className}`}>
{children}
</section>
)
}

48
apps/scandic-web/components/Section/Header/Deprecated.tsx Normal file
View File

@@ -0,0 +1,48 @@
import Preamble from "@scandic-hotels/design-system/Preamble"
import Title, { type HeadingProps } from "@scandic-hotels/design-system/Title"
import SectionLink from "../Link"
import styles from "./header.module.css"
type HeaderProps = {
link?: {
href: string
text: string
}
preamble?: string | null
textTransform?: HeadingProps["textTransform"]
title?: string | null
headingLevel?: HeadingProps["level"]
headingAs?: HeadingProps["as"]
}
/**
* @deprecated Use `@/components/Section/Header` instead.
*/
export default function SectionHeader({
link,
preamble,
title,
textTransform,
headingAs = "h4",
headingLevel = "h2",
}: HeaderProps) {
if (!title && !preamble && !link) {
return null
}
return (
<header className={styles.header}>
<Title
as={headingAs}
className={styles.title}
level={headingLevel}
textTransform={textTransform}
>
{title}
</Title>
{preamble && <Preamble className={styles.preamble}>{preamble}</Preamble>}
<SectionLink link={link} variant="desktop" />
</header>
)
}

10
apps/scandic-web/components/Section/Header/header.module.css
View File

@@ -1,11 +1,15 @@
.header { .header {
display: grid; display: grid;
gap: var(--Spacing-x1) var(--Spacing-x5); gap: var(--Space-x1) var(--Space-x5);
grid-template-columns: 1fr; grid-template-columns: 1fr;
align-items: baseline; align-items: baseline;
} }
.title, .heading {
color: var(--Text-Heading);
}
.heading,
.preamble { .preamble {
grid-column: 1 / -1; grid-column: 1 / -1;
max-width: var(--max-width-text-block); max-width: var(--max-width-text-block);
@@ -16,7 +20,7 @@
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }
.title { .heading {
grid-column: 1 / 2; grid-column: 1 / 2;
} }

7
apps/scandic-web/components/Section/Header/headingVariants.ts Normal file
View File

@@ -0,0 +1,7 @@
import { cva } from "class-variance-authority"
import { withTypography } from "@scandic-hotels/design-system/Typography"
import styles from "./header.module.css"
export const headingVariants = cva(styles.heading, withTypography({}))

60
apps/scandic-web/components/Section/Header/index.tsx
View File

@@ -1,46 +1,54 @@
import Preamble from "@scandic-hotels/design-system/Preamble" import { cx, type VariantProps } from "class-variance-authority"
import Title, { type HeadingProps } from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { headingVariants } from "@/components/Section/Header/headingVariants"
import SectionLink from "../Link" import SectionLink from "../Link"
import styles from "./header.module.css" import styles from "./header.module.css"
type HeaderProps = { import type { HTMLAttributes } from "react"
interface SectionHeaderProps
extends HTMLAttributes<HTMLElement>,
VariantProps<typeof headingVariants> {
heading?: string
headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
preamble?: string
link?: { link?: {
href: string href: string
text: string text: string
} }
preamble?: string | null
textTransform?: HeadingProps["textTransform"]
title?: string | null
headingLevel?: HeadingProps["level"]
headingAs?: HeadingProps["as"]
} }
export default function SectionHeader({ export function SectionHeader({
link, className,
heading,
preamble, preamble,
title, link,
textTransform, typography = "Title/sm",
headingAs = "h4",
headingLevel = "h2", headingLevel = "h2",
}: HeaderProps) { ...props
if (!title && !preamble && !link) { }: SectionHeaderProps) {
if (!heading && !preamble && !link) {
return null return null
} }
const headingClassNames = headingVariants({ typography })
const Hx = headingLevel
return ( return (
<header className={styles.header}> <header className={cx(styles.header, className)} {...props}>
<Title <Hx className={headingClassNames}>{heading}</Hx>
as={headingAs} {preamble ? (
className={styles.title} <Typography
level={headingLevel} variant="Body/Paragraph/mdRegular"
textTransform={textTransform} className={styles.preamble}
> >
{title} <p>{preamble}</p>
</Title> </Typography>
{preamble && <Preamble className={styles.preamble}>{preamble}</Preamble>} ) : null}
<SectionLink link={link} variant="desktop" /> {link ? <SectionLink link={link} variant="desktop" /> : null}
</header> </header>
) )
} }

8
apps/scandic-web/components/Section/Link/index.tsx
View File

@@ -5,7 +5,13 @@ import { linkVariants } from "./variants"
import styles from "./link.module.css" import styles from "./link.module.css"
import type { SectionLinkProps } from "./link" import type { VariantProps } from "class-variance-authority"
interface SectionLinkProps
extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,
VariantProps<typeof linkVariants> {
link?: { href: string; text: string }
}
export default function SectionLink({ link, variant }: SectionLinkProps) { export default function SectionLink({ link, variant }: SectionLinkProps) {
if (!link) { if (!link) {

15
apps/scandic-web/components/Section/index.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { cx } from "class-variance-authority"
import styles from "./section.module.css"
export function Section({
children,
className,
...props
}: React.PropsWithChildren<React.HTMLAttributes<HTMLElement>>) {
return (
<section {...props} className={cx(styles.section, className)}>
{children}
</section>
)
}

5
apps/scandic-web/components/Section/section.module.css Normal file
View File

@@ -0,0 +1,5 @@
.section {
display: grid;
gap: var(--Space-x3);
z-index: 0;
}

4
packages/design-system/lib/components/Typography/variants.ts
View File

@@ -44,7 +44,9 @@ const typographyConfig = {
variants: { variants: {
typography: config.variants.variant, typography: config.variants.variant,
}, },
defaultVariants: config.defaultVariants, defaultVariants: {
typography: config.defaultVariants.variant,
},
} as const } as const
export function withTypography<T>(config: T) { export function withTypography<T>(config: T) {