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/Accordion/index.tsx
+++ b/apps/scandic-web/components/Blocks/Accordion/index.tsx
@@ -6,8 +6,8 @@ import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"

-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 ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"

 import styles from "./accordion.module.css"
@@ -25,10 +25,7 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
  }

  return (
-    <SectionContainer
-      className={styles.accordionSection}
-      id={HotelHashValues.faq}
-    >
+    <Section className={styles.accordionSection} id={HotelHashValues.faq}>
      <SectionHeader textTransform="uppercase" title={title} />
      <Accordion
        className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
@@ -51,6 +48,6 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
          showLess={allAccordionsVisible}
        />
      ) : null}
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/CardGallery/index.tsx
+++ b/apps/scandic-web/components/Blocks/CardGallery/index.tsx
@@ -4,8 +4,8 @@ import { useState } from "react"

 import { Carousel } from "@/components/Carousel"
 import ContentCard from "@/components/ContentCard"
-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 TabFilters from "@/components/TabFilters"

@@ -21,7 +21,7 @@ export default function CardGallery({ card_gallery }: CardGalleryProps) {
  const filteredCards = cards.filter((card) => card.filterId === activeFilter)

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader title={heading} link={link} />
      {filterCategories.length > 0 && activeFilter && (
        <TabFilters
@@ -62,6 +62,6 @@ export default function CardGallery({ card_gallery }: CardGalleryProps) {
        <Carousel.Dots />
      </Carousel>
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/CardsGrid.tsx
+++ b/apps/scandic-web/components/Blocks/CardsGrid.tsx
@@ -4,8 +4,8 @@ import {
 } from "@scandic-hotels/trpc/types/cardsGridEnum"

 import InfoCard from "@/components/ContentType/StartPage/InfoCard"
-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 Card from "@/components/TempDesignSystem/Card"
 import Grids from "@/components/TempDesignSystem/Grids"
 import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
@@ -32,7 +32,7 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
  }

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader
        title={cards_grid.title}
        preamble={cards_grid.preamble}
@@ -99,6 +99,6 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
          }
        })}
      </Grids.Stackable>
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/CarouselCards/index.tsx
+++ b/apps/scandic-web/components/Blocks/CarouselCards/index.tsx
@@ -4,8 +4,8 @@ import { useState } from "react"

 import { Carousel } from "@/components/Carousel"
 import ContentCard from "@/components/ContentCard"
-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 TabFilters from "@/components/TabFilters"

@@ -35,7 +35,7 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
      )

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader
        title={heading}
        preamble={preamble}
@@ -69,6 +69,6 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
        <Carousel.Dots />
      </Carousel>
      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
+    </Section>
  )
 }
--- 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>
  )
 }
--- a/apps/scandic-web/components/Blocks/HotelListing/index.tsx
+++ b/apps/scandic-web/components/Blocks/HotelListing/index.tsx
@@ -2,7 +2,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"

 import { getHotelsByCSFilter } from "@/lib/trpc/memoizedRequests"

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

 import HotelListingItem from "./HotelListingItem"

@@ -26,7 +26,7 @@ export default async function HotelListing({
  }

  return (
-    <SectionContainer>
+    <Section>
      <Typography variant="Title/sm">
        <h3 className={styles.heading}>{heading}</h3>
      </Typography>
@@ -37,6 +37,6 @@ export default async function HotelListing({
          contentType={contentType}
        />
      ))}
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/ShortcutsList/index.tsx
+++ b/apps/scandic-web/components/Blocks/ShortcutsList/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 ShortcutsListItems from "./ShortcutsListItems"

@@ -34,7 +34,7 @@ export default function ShortcutsList({
        ]

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader
        preamble={subtitle}
        title={title}
@@ -50,6 +50,6 @@ export default function ShortcutsList({
          />
        ))}
      </section>
-    </SectionContainer>
+    </Section>
  )
 }
--- a/apps/scandic-web/components/Blocks/Table/index.tsx
+++ b/apps/scandic-web/components/Blocks/Table/index.tsx
@@ -10,8 +10,8 @@ import { useState } from "react"

 import Table from "@scandic-hotels/design-system/Table"

-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 ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"

 import styles from "./table.module.css"
@@ -53,7 +53,7 @@ export default function TableBlock({ data }: TableBlockProps) {
  }

  return (
-    <SectionContainer>
+    <Section>
      <SectionHeader preamble={preamble} title={heading} />
      <div className={styles.tableWrapper}>
        <Table
@@ -103,6 +103,6 @@ export default function TableBlock({ data }: TableBlockProps) {
          />
        ) : null}
      </div>
-    </SectionContainer>
+    </Section>
  )
 }