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

Approved-by: Chuma Mcphoy (We Ahead)
2025-10-13 08:31:26 +00:00
parent 7bd75f01e4
commit 339e7195dc
34 changed files with 245 additions and 177 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/index.tsx
@@ -1,7 +1,7 @@
 import { getJobylonFeed } from "@/lib/trpc/memoizedRequests"

-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"

 import JobList from "./JobList"
@@ -24,7 +24,7 @@ export default async function JobylonFeed({
  }

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader
        link={link}
        preamble={subtitle}
@@ -34,6 +34,6 @@ export default async function JobylonFeed({
      />
      <JobList allJobs={allJobs} />
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/index.tsx
@@ -1,6 +1,6 @@
 import { CookieConsentButton } from "@/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton"
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"

 interface ManageCookieConsentProps {
@@ -15,16 +15,15 @@ export function ManageCookieConsent({
  link,
 }: ManageCookieConsentProps) {
  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader
        link={link}
        preamble={subtitle}
-        title={title}
-        headingAs="h3"
-        headingLevel="h2"
+        heading={title}
+        typography="Title/sm"
      />
      <CookieConsentButton />
-      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+      {link ? <SectionLink link={link} variant="mobile" /> : null}
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/index.tsx
@@ -2,8 +2,8 @@ import * as webHrefs from "@/constants/webHrefs"
 import { serverClient } from "@/lib/trpc/server"

 import ShortcutsListItems from "@/components/Blocks/ShortcutsList/ShortcutsListItems"
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

@@ -99,35 +99,33 @@ export default async function MyPagesOverviewShortcuts() {
  const scandicFriendsShortcuts = buildFriendsShortcuts(navigation)

  return (
-    <SectionContainer>
-      <section className={styles.section}>
-        <div className={styles.column}>
-          <SectionHeader
-            title={intl.formatMessage({
-              defaultMessage: "Your Membership",
-            })}
-            headingAs="h4"
-            headingLevel="h3"
-          />
-          <ShortcutsListItems
-            shortcutsListItems={membershipShortcuts}
-            className={styles.shortcuts}
-          />
-        </div>
-        <div className={styles.column}>
-          <SectionHeader
-            title={intl.formatMessage({
-              defaultMessage: "Scandic Friends Links",
-            })}
-            headingAs="h4"
-            headingLevel="h3"
-          />
-          <ShortcutsListItems
-            shortcutsListItems={scandicFriendsShortcuts}
-            className={styles.shortcuts}
-          />
-        </div>
-      </section>
-    </SectionContainer>
+    <Section className={styles.section}>
+      <div className={styles.column}>
+        <SectionHeader
+          title={intl.formatMessage({
+            defaultMessage: "Your Membership",
+          })}
+          headingAs="h4"
+          headingLevel="h3"
+        />
+        <ShortcutsListItems
+          shortcutsListItems={membershipShortcuts}
+          className={styles.shortcuts}
+        />
+      </div>
+      <div className={styles.column}>
+        <SectionHeader
+          title={intl.formatMessage({
+            defaultMessage: "Scandic Friends Links",
+          })}
+          headingAs="h4"
+          headingLevel="h3"
+        />
+        <ShortcutsListItems
+          shortcutsListItems={scandicFriendsShortcuts}
+          className={styles.shortcuts}
+        />
+      </div>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx
@@ -8,8 +8,8 @@ import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigge
 import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
 import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCard/Alert"
 import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"
 import { getIntl } from "@/i18n"

@@ -36,7 +36,7 @@ export default async function Overview({
  }

  return (
-    <SectionContainer>
+    <Section>
      {env.ENABLE_DTMC ? <DigitalTeamMemberCardAlert /> : null}
      <SectionHeader
        link={link}
@@ -79,6 +79,6 @@ export default async function Overview({
      )}

      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
@@ -1,5 +1,5 @@
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"

 import ClaimPoints from "../ClaimPoints"
@@ -15,7 +15,7 @@ export default function EarnAndBurn({
  title,
 }: AccountPageComponentProps) {
  return (
-    <SectionContainer>
+    <Section>
      <div className={styles.header}>
        <SectionHeader title={title} link={link} preamble={subtitle} />

@@ -23,6 +23,6 @@ export default function EarnAndBurn({
      </div>
      <JourneyTable />
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx
@@ -1,7 +1,7 @@
 import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"

-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"

 import ExpiringPointsTable from "./ExpiringPointsTable"

@@ -19,12 +19,12 @@ export default async function ExpiringPoints({
  }

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader title={title} link={link} preamble={subtitle} />
      <ExpiringPointsTable
        points={membershipLevel.pointsToExpire}
        expirationDate={membershipLevel.pointsExpiryDate}
      />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/index.tsx
@@ -4,8 +4,8 @@ import { env } from "@/env/server"
 import { getProfile } from "@/lib/trpc/memoizedRequests"

 import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"

 import Friend from "../../Overview/Friend"
@@ -29,7 +29,7 @@ export default async function PointsOverview({
  }

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader
        link={link}
        preamble={subtitle}
@@ -55,6 +55,6 @@ export default async function PointsOverview({
        </Hero>
      )}
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
@@ -4,8 +4,8 @@ import {
  getMembershipLevel,
 } from "@/lib/trpc/memoizedRequests"

-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"

 import ClientCurrentRewards from "./Client"
@@ -27,7 +27,7 @@ export default async function CurrentRewardsBlock({
  }

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader title={title} link={link} preamble={subtitle} />
      <ClientCurrentRewards
        rewards={rewardsResponse.rewards}
@@ -35,6 +35,6 @@ export default async function CurrentRewardsBlock({
        membershipNumber={membershipLevel?.membershipNumber}
      />
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
@@ -8,8 +8,8 @@ import Title from "@scandic-hotels/design-system/Title"
 import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"

-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 import { getIntl } from "@/i18n"
@@ -42,7 +42,7 @@ export default async function NextLevelRewardsBlock({
  }

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader title={title} preamble={subtitle} link={link} />
      <Grids.Stackable columns={2}>
        {nextLevelRewards.rewards.map((reward) => (
@@ -70,6 +70,6 @@ export default async function NextLevelRewardsBlock({
        ))}
      </Grids.Stackable>
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx
@@ -13,8 +13,8 @@ import {
 } from "@/constants/membershipLevels"
 import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"

-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"
 import { getIntl } from "@/i18n"
 import { getSasTierExpirationDate } from "@/utils/sas"
@@ -40,13 +40,13 @@ export default async function SASLinkedAccount({

  return (
    <div className={styles.container}>
-      <SectionContainer>
+      <Section>
        <SectionHeader link={link} preamble={subtitle} title={title} />
        <SectionLink link={link} variant="mobile" />
        <Suspense fallback={<MatchedAccountInfoSkeleton />}>
          <MatchedAccountInfo />
        </Suspense>
-      </SectionContainer>
+      </Section>
      <div className={styles.mutationSection}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p className={styles.caption}>
--- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx
@@ -2,8 +2,8 @@ import { Suspense } from "react"

 import { env } from "@/env/server"

-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"
 import { getLang } from "@/i18n/serverContext"

@@ -30,12 +30,12 @@ export default async function SASTransferPoints({
  const lang = await getLang()

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader link={link} preamble={subtitle} title={title} />
      <SectionLink link={link} variant="mobile" />
      <Suspense fallback={<TransferPointsFormSkeleton lang={lang} />}>
        <TransferPointsForm lang={lang} />
      </Suspense>
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx
@@ -1,5 +1,5 @@
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"

 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
@@ -14,7 +14,7 @@ export default function SectionWrapper({
    dynamic_content.title
  )
  return (
-    <SectionContainer>
+    <Section>
      {displayHeader ? (
        <SectionHeader
          link={dynamic_content.link}
@@ -28,6 +28,6 @@ export default function SectionWrapper({
      {dynamic_content.link ? (
        <SectionLink link={dynamic_content.link} variant="mobile" />
      ) : null}
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
@@ -1,8 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"

 import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"

 import ClientPreviousStays from "./Client"
@@ -25,7 +25,7 @@ export default async function PreviousStays({
  }

  return (
-    <SectionContainer>
+    <Section>
      <div className={styles.header}>
        <SectionHeader title={title} link={link} />

@@ -33,6 +33,6 @@ export default async function PreviousStays({
      </div>
      <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
@@ -1,7 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"

-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
+import { Section } from "@/components/Section"
+import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"

 import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
@@ -21,7 +21,7 @@ export default async function UpcomingStays({
  })

  return (
-    <SectionContainer className={styles.container}>
+    <Section className={styles.container}>
      <SectionHeader title={title} link={link} />
      {initialUpcomingStays?.data.length ? (
        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
@@ -29,6 +29,6 @@ export default async function UpcomingStays({
        <EmptyUpcomingStaysBlock />
      )}
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }