refactor: break out Section container

app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css

@@ -3,6 +3,7 @@
   gap: var(--Spacing-x5);
   padding-left: var(--Spacing-x2);
   padding-right: var(--Spacing-x2);
+  align-content: flex-start;
 }
 
 @media screen and (min-width: 1367px) {
@@ -11,4 +12,4 @@
     padding-left: var(--Spacing-x0);
     padding-right: var(--Spacing-x0);
   }
-}
+}

components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css

@@ -1,4 +0,0 @@
-.section {
-  display: grid;
-  gap: var(--Spacing-x2);
-}

components/Loyalty/Blocks/CardsGrid/index.tsx

@@ -1,14 +1,13 @@
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Card from "@/components/TempDesignSystem/Card"
 import Grids from "@/components/TempDesignSystem/Grids"
 
-import styles from "./cardsGrid.module.css"
-
 import { CardsGridProps } from "@/types/components/loyalty/blocks"
 
 export default function CardsGrid({ cards_grid }: CardsGridProps) {
   return (
-    <section className={styles.section}>
+    <SectionContainer>
       <Header title={cards_grid.title} subtitle={cards_grid.preamble} />
       <Grids.Stackable>
         {cards_grid.cards.map((card) => (
@@ -23,6 +22,6 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
           />
         ))}
       </Grids.Stackable>
-    </section>
+    </SectionContainer>
   )
 }

components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css

@@ -1,6 +1,4 @@
 .container {
-  display: grid;
-  gap: var(--Spacing-x4);
   /* These negative margins are needed for horizontally scrollable lists of cards */
   margin-right: calc(0px - var(--Spacing-x2));
   overflow-x: hidden;

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 
 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"
@@ -46,7 +47,7 @@ export default function DynamicContent({
   )
 
   return (
-    <section className={styles.container}>
+    <SectionContainer className={styles.container}>
       {displayHeader ? (
         <Header
           link={dynamicContent.link}
@@ -56,6 +57,6 @@ export default function DynamicContent({
         />
       ) : null}
       <DynamicComponentBlock component={dynamicContent.component} />
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x7);
-}
-
 .script {
   transform: rotate(-2deg);
 }
@@ -18,4 +13,4 @@
   justify-content: center;
   min-height: 280px;
   padding: var(--Spacing-x7) var(--Spacing-x3);
-}
+}

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -1,7 +1,8 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -45,7 +46,7 @@ export default async function CurrentBenefitsBlock({
   }
 
   return (
-    <section className={styles.container}>
+    <SectionContainer>
       <Header title={title} link={link} subtitle={subtitle} />
       <Grids.Scrollable>
         {currentLevel.benefits.map((benefit, idx) => (
@@ -63,6 +64,6 @@ export default async function CurrentBenefitsBlock({
           </Link>
         ))}
       </Grids.Scrollable>
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -2,7 +2,8 @@ import { Lock } from "react-feather"
 
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"
@@ -23,7 +24,7 @@ export default async function NextLevelBenefitsBlock({
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
   const { formatMessage } = await getIntl()
   return (
-    <section className={styles.container}>
+    <SectionContainer>
       <Header title={title} subtitle={subtitle} link={link} />
       <Grids.Stackable>
         {perks.map((perk) => (
@@ -53,6 +54,6 @@ export default async function NextLevelBenefitsBlock({
           {formatMessage({ id: "Explore all levels and benefits" })}
         </Link>
       </Button>
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x7);
-}
-
 .card {
   align-items: center;
   background-color: var(--Scandic-Brand-Burgundy);
@@ -20,4 +15,4 @@
 
 .link {
   justify-self: center;
-}
+}

components/MyPages/Blocks/Challenges/challenges.module.css

@@ -1,115 +0,0 @@
-/* TODO: Fix when brought back into the loop */
-
-.challenges {
-  --card-height: 23.6rem;
-  --gap: 0.4rem;
-  --radius: 0.4rem;
-
-  display: grid;
-  gap: 1.6rem;
-  grid-template-areas:
-    "header"
-    "section"
-    "aside";
-}
-
-.header {
-  grid-area: header;
-}
-
-.section {
-  display: grid;
-  gap: 0.8rem;
-  grid-area: section;
-}
-
-.journeys {
-  display: grid;
-  gap: var(--gap);
-  grid-template-columns: 1fr 1fr;
-}
-
-.journey {
-  align-content: center;
-  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2));
-  border-radius: var(--radius);
-  display: grid;
-  gap: 1.2rem;
-  height: var(--card-height);
-  justify-items: center;
-}
-
-.journey:first-of-type {
-  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1));
-}
-
-.aside {
-  display: grid;
-  gap: 0.8rem;
-  grid-area: aside;
-  grid-template-rows: auto 1fr;
-}
-
-.victories {
-  display: grid;
-  gap: var(--gap);
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: repeat(2, minmax(11.6rem, 1fr));
-}
-
-.victory {
-  align-content: center;
-  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1));
-  border-radius: var(--radius);
-  display: grid;
-  gap: 0.6rem;
-  height: 100%;
-  justify-items: center;
-}
-
-.victory:first-of-type {
-  background-color: var(--some-grey-color, rgba(3, 3, 3, 0.3));
-}
-
-.victory:last-of-type {
-  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2));
-}
-
-.circle {
-  display: none;
-}
-
-@media screen and (max-width: 1366px) {
-  .victory:first-of-type {
-    grid-row: 1 / -1;
-  }
-}
-
-@media screen and (min-width: 1367px) {
-  .challenges {
-    gap: 2.6rem 1.5rem;
-    grid-template-areas:
-      "header header"
-      "section aside";
-    grid-template-columns: 1fr 16.6rem;
-  }
-
-  .journeys {
-    grid-template-columns: 1fr;
-  }
-
-  .victories {
-    grid-template-columns: 1fr;
-    grid-template-rows: var(--card-height) 1fr 1fr;
-  }
-
-  .circle {
-    align-items: center;
-    background-color: var(--Main-Grey-White);
-    border-radius: 50%;
-    display: flex;
-    height: 2rem;
-    justify-content: center;
-    width: 2rem;
-  }
-}

components/MyPages/Blocks/Challenges/index.tsx

@@ -1,64 +0,0 @@
-import Image from "@/components/Image"
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-
-import styles from "./challenges.module.css"
-
-import type { ChallengesProps } from "@/types/components/myPages/myPage/challenges"
-
-export default async function Challenges({
-  journeys,
-  victories,
-}: ChallengesProps) {
-  const { formatMessage } = await getIntl()
-  return (
-    <section className={styles.challenges}>
-      <header className={styles.header}>
-        <Title level="h2">
-          {formatMessage({ id: "Your Challenges Conquer & Earn!" })}
-        </Title>
-      </header>
-      <section className={styles.section}>
-        <header>
-          <Title level="h3">{formatMessage({ id: "On your journey" })}</Title>
-        </header>
-        <section className={styles.journeys}>
-          {journeys.map((journey) => (
-            <article className={styles.journey} key={journey.title}>
-              <BiroScript color="black">{journey.tag}</BiroScript>
-              <Title as="h5" level="h4">
-                {journey.title}
-              </Title>
-            </article>
-          ))}
-        </section>
-      </section>
-      <aside className={styles.aside}>
-        <header>
-          <Title level="h3">
-            {formatMessage({ id: "Previous victories" })}
-          </Title>
-        </header>
-        <section className={styles.victories}>
-          {victories.map((victory) => (
-            <article className={styles.victory} key={victory.title}>
-              <div className={styles.circle}>
-                <Image
-                  alt="Checkmark Icon"
-                  height={9}
-                  src="/_static/icons/check.svg"
-                  width={12}
-                />
-              </div>
-              <BiroScript color="black">{victory.tag}</BiroScript>
-              <Title as="h5" level="h4">
-                {victory.title}
-              </Title>
-            </article>
-          ))}
-        </section>
-      </aside>
-    </section>
-  )
-}

components/MyPages/Blocks/Overview/index.tsx

@@ -1,6 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Divider from "@/components/TempDesignSystem/Divider"
 
 import Friend from "./Friend"
@@ -22,13 +23,13 @@ export default async function Overview({
     return null
   }
   return (
-    <section className={styles.container}>
+    <SectionContainer>
       <Header link={link} subtitle={subtitle} title={title} topTitle />
       <section className={styles.overview}>
         <Friend user={user} />
         <Divider className={styles.divider} />
         <Stats user={user} lang={lang} />
       </section>
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Overview/overview.module.css

@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x7);
-}
-
 .overview {
   background-color: var(--Scandic-Brand-Scandic-Red);
   border-radius: var(--Corner-radius-xLarge);

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -1,6 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import { getIntl } from "@/i18n"
 import { getMembership } from "@/utils/user"
 
@@ -20,18 +21,18 @@ async function CurrentPointsBalance({
   }
   const membership = getMembership(user.memberships)
   return (
-    <div>
+    <SectionContainer>
       <Header title={title} link={link} subtitle={subtitle} />
       <div className={styles.card}>
         <h2>{`${formatMessage({ id: "Total Points" })}*`}</h2>
         <p className={styles.points}>
           {`${formatMessage({ id: "Points" })}: ${membership ? membership.currentPoints : "N/A"}`}
         </p>
-        <p className={styles.disclaimer}>
+        <p>
           {`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}
         </p>
       </div>
-    </div>
+    </SectionContainer>
   )
 }
 

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -1,11 +1,10 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 
 import ClientEarnAndBurn from "./Client"
 
-import styles from "./earnAndBurn.module.css"
-
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function EarnAndBurn({
@@ -20,9 +19,9 @@ export default async function EarnAndBurn({
     return null
   }
   return (
-    <div className={styles.container}>
+    <SectionContainer>
       <Header title={title} link={link} subtitle={subtitle} />
       <ClientEarnAndBurn initialData={initialTransactions} lang={lang} />
-    </div>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightIcon } from "@/components/Icons"
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -14,7 +15,7 @@ export default function Shortcuts({
   title,
 }: ShortcutsProps) {
   return (
-    <section className={styles.shortcuts}>
+    <SectionContainer>
       <Header
         link={undefined}
         subtitle={subtitle}
@@ -36,6 +37,6 @@ export default function Shortcuts({
           </Link>
         ))}
       </section>
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Shortcuts/shortcuts.module.css

@@ -1,8 +1,3 @@
-.shortcuts {
-  display: grid;
-  gap: var(--Spacing-x4);
-}
-
 .links {
   display: grid;
   background-color: var(--Scandic-Brand-Warm-White);

components/MyPages/Blocks/Stays/Container/container.module.css

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

components/MyPages/Blocks/Stays/Container/index.tsx

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

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -1,8 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import SectionHeader from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
 
-import Container from "../Container"
 import ClientPreviousStays from "./Client"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -18,12 +18,12 @@ export default async function PreviousStays({
     return null
   }
   return (
-    <Container>
+    <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       <ClientPreviousStays
         initialPreviousStays={initialPreviousStays}
         lang={lang}
       />
-    </Container>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -1,13 +1,12 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Grids from "@/components/TempDesignSystem/Grids"
 
 import StayCard from "../StayCard"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
-import styles from "./soonest.module.css"
-
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function SoonestStays({
@@ -22,7 +21,7 @@ export default async function SoonestStays({
   }
 
   return (
-    <section className={styles.container}>
+    <SectionContainer>
       <Header title={title} subtitle={subtitle} link={link} />
       {response.data.length ? (
         <Grids.Stackable>
@@ -37,6 +36,6 @@ export default async function SoonestStays({
       ) : (
         <EmptyUpcomingStaysBlock />
       )}
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -1,8 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import SectionHeader from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
 
-import Container from "../Container"
 import ClientUpcomingStays from "./Client"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -18,12 +18,12 @@ export default async function UpcomingStays({
     return null
   }
   return (
-    <Container>
+    <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       <ClientUpcomingStays
         initialUpcomingStays={initialUpcomingStays}
         lang={lang}
       />
-    </Container>
+    </SectionContainer>
   )
 }

components/Section/Container/container.module.css

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

components/Section/Container/index.tsx

@@ -0,0 +1,13 @@
+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>
+  )
+}

components/Section/Header/index.tsx

@@ -2,7 +2,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
-import styles from "./sectionHeader.module.css"
+import styles from "./header.module.css"
 
 import type { HeaderProps } from "@/types/components/myPages/header"