Merged in feature/loyalty-viewports (pull request #211)

Feature/loyalty viewports

Approved-by: Michael Zetterberg

components/ContentType/LoyaltyPage.tsx

@@ -8,10 +8,11 @@ import styles from "./loyaltyPage.module.css"
 
 export default async function LoyaltyPage() {
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
-
   return (
     <section className={styles.content}>
-      {loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null}
+      {loyaltyPage.sidebar.length ? (
+        <Sidebar blocks={loyaltyPage.sidebar} />
+      ) : null}
 
       <MaxWidth className={styles.blocks} tag="main">
         {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}

components/ContentType/loyaltyPage.module.css

@@ -15,17 +15,23 @@
 @media screen and (min-width: 950px) {
   .content {
     gap: 2.7rem;
-    grid-template-columns: 30rem 1fr;
     padding-bottom: 17.5rem;
     padding-left: 2.4rem;
     padding-right: 2.4rem;
     padding-top: 5.8rem;
   }
 
+  .content:has(> aside) {
+    grid-template-columns: 30rem 1fr;
+  }
+
   .blocks {
     gap: 6.4rem;
     padding-left: 0;
     padding-right: 0;
+  }
+
+  .hasLeftSidebar .blocks {
     grid-column: 2 / -1;
   }
 }

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css

@@ -0,0 +1,78 @@
+.benefitCard {
+  background-color: var(--Main-Grey-White);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Small);
+  color: var(--Main-Brand-Burgundy);
+  padding: 0 var(--Spacing-x2);
+  z-index: 2;
+  grid-column: 1/3;
+}
+
+.benefitValueContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.benefitValue {
+  background-color: var(--Main-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Base-Surface-Primary-Hover-alt, #fff);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.benefitValueDetails {
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  text-align: center;
+}
+
+.benefitCardHeader {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.benefitCardDescription {
+  line-height: 150%;
+}
+
+.benefitInfo {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x-one-and-half) 0;
+}
+
+.benefitComparison {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.comparisonItem {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Spacing-x-one-and-half);
+}
+
+.details[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary {
+  list-style: none;
+}
+
+@media screen and (min-width: 950px) {
+  .benefitComparison {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx

@@ -0,0 +1,63 @@
+import { ChevronDown, Minus } from "react-feather"
+
+import CheckCircle from "@/components/Icons/CheckCircle"
+import Title from "@/components/Title"
+
+import styles from "./benefitCard.module.css"
+
+import {
+  BenefitCardProps,
+  BenefitValueProps,
+} from "@/types/components/loyalty/blocks"
+
+function BenefitValue({ benefit }: BenefitValueProps) {
+  if (!benefit.unlocked) {
+    return <Minus />
+  }
+  if (!benefit.value) {
+    return <CheckCircle height={32} width={32} />
+  }
+  return (
+    <div className={styles.benefitValueContainer}>
+      <span className={styles.benefitValue}>{benefit.value}</span>
+      {benefit.valueDetails && (
+        <span className={styles.benefitValueDetails}>
+          {benefit.valueDetails}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default function BenefitCard({
+  comparedValues,
+  title,
+  description,
+}: BenefitCardProps) {
+  return (
+    <div className={styles.benefitCard}>
+      <div className={styles.benefitInfo}>
+        <details className={styles.details}>
+          <summary className={styles.summary}>
+            <hgroup className={styles.benefitCardHeader}>
+              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
+                {title}
+              </Title>
+              <span className={styles.chevron}>
+                <ChevronDown />
+              </span>
+            </hgroup>
+          </summary>
+          <p className={styles.benefitCardDescription}>{description}</p>
+        </details>
+      </div>
+      <div className={styles.benefitComparison}>
+        {comparedValues.map((benefit, idx) => (
+          <div key={idx} className={styles.comparisonItem}>
+            <BenefitValue benefit={benefit} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css

@@ -0,0 +1,49 @@
+.benefitCardWrapper {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column: 1/3;
+  padding: var(--Spacing-x2);
+  padding-top: 0;
+}
+
+.firstColumn {
+  background-color: var(--Main-Brand-PalePeach);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 50%;
+  z-index: 1;
+}
+
+.secondColumn {
+  background-color: var(--Base-Background-Normal);
+  position: absolute;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin-bottom: calc(var(--Spacing-x2) * -1);
+  left: 50%;
+  right: 0;
+  z-index: 1;
+  border-top-left-radius: var(--Corner-radius-Medium);
+}
+
+@media screen and (min-width: 950px) {
+  .benefitCardWrapper {
+    grid-column: 1/4;
+  }
+
+  .firstColumn {
+    width: calc((100%) / 3);
+    right: calc(100% / 3 * 2);
+    margin-left: 0;
+  }
+
+  .secondColumn {
+    width: calc(100% / 3);
+    left: calc(100% / 3);
+    right: calc(100% / 3);
+  }
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx

@@ -0,0 +1,43 @@
+import BenefitCard from "../BenefitCard"
+
+import styles from "./benefitList.module.css"
+
+import {
+  BenefitListProps,
+  ComparisonLevel,
+} from "@/types/components/loyalty/blocks"
+
+export default function BenefitList({ levels }: BenefitListProps) {
+  const highestTier = levels.reduce(
+    (acc: ComparisonLevel | null, level: ComparisonLevel) => {
+      if (!acc) {
+        return level
+      }
+      return level.tier > acc.tier ? level : acc
+    },
+    null
+  )
+
+  return highestTier?.benefits
+    .filter((benefit) => benefit.unlocked)
+    .map((benefit, idx) => {
+      const levelBenefits = levels.map((level) => level.benefits[idx])
+      return (
+        <div key={benefit.name} className={styles.benefitCardWrapper}>
+          <div className={styles.firstColumn} />
+          <div className={styles.secondColumn} />
+          <BenefitCard
+            title={benefit.name}
+            description={benefit.description}
+            comparedValues={levelBenefits.map((benefit) => {
+              return {
+                value: benefit.value,
+                unlocked: benefit.unlocked,
+                valueDetails: benefit.valueDetails,
+              }
+            })}
+          />
+        </div>
+      )
+    })
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx

@@ -0,0 +1,15 @@
+import Image from "@/components/Image"
+
+import styles from "./levelSummary.module.css"
+
+import { LevelSummaryProps } from "@/types/components/loyalty/blocks"
+
+export default function LevelSummary({ level }: LevelSummaryProps) {
+  return (
+    <div className={styles.levelSummary}>
+      <Image src={level.icon} alt={level.name} height={50} width={100} />
+      <span className={styles.levelRequirements}>{level.requirement}</span>
+      <p className={styles.levelSummaryText}>{level.description}</p>
+    </div>
+  )
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css

@@ -0,0 +1,20 @@
+.levelSummary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x2);
+}
+
+.levelRequirements {
+  background-color: var(--Main-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Medium);
+  color: #f7e1d5;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.levelSummaryText {
+  color: var(--Main-Brand-Burgundy);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  margin: 0;
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/index.tsx

@@ -0,0 +1,20 @@
+import { Fragment } from "react"
+
+import Title from "@/components/Title"
+
+import styles from "./overviewTableTitle.module.css"
+
+import { OverviewTableTitleProps } from "@/types/components/loyalty/blocks"
+
+export default function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
+  return (
+    <Title as="h1" level="h1" weight="semiBold" uppercase>
+      {texts.map(({ text, highlight }, idx) => (
+        <Fragment key={idx}>
+          <span className={highlight ? styles.highlight : ""}>{text}</span>
+          {idx < texts.length - 1 && " "}
+        </Fragment>
+      ))}
+    </Title>
+  )
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/overviewTableTitle.module.css

@@ -0,0 +1,3 @@
+.highlight {
+  color: var(--Base-Text-Primary-Accent);
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -1,27 +1,21 @@
 "use client"
 
-import { Fragment, useState } from "react"
-import { Minus } from "react-feather"
+import { Dispatch, SetStateAction, useState } from "react"
+import { type Key } from "react-aria-components"
 
 import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
-import ChevronDown from "@/components/Icons/ChevronDown"
-import Image from "@/components/Image"
-import Title from "@/components/Title"
+import Select from "@/components/TempDesignSystem/Form/Select"
 
 import levelsData from "./data/EN.json"
+import BenefitList from "./BenefitList"
+import LevelSummary from "./LevelSummary"
+import OverviewTableTitle from "./Title"
 
 import styles from "./overviewTable.module.css"
 
-import {
-  BenefitCardProps,
-  BenefitValueProps,
-  ComparisonLevel,
-  LevelSummaryProps,
-  OverviewTableTitleProps,
-} from "@/types/components/loyalty/blocks"
+import { ComparisonLevel } from "@/types/components/loyalty/blocks"
 
 // These should ultimately be fetched from Contentstack
 const titleTranslations = {
@@ -52,78 +46,26 @@ const titleTranslations = {
   ],
 }
 
-function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
-  return (
-    <Title as="h1" level="h1" weight="semiBold" uppercase>
-      {texts.map(({ text, highlight }, idx) => (
-        <Fragment key={idx}>
-          <span className={highlight ? styles.highlight : ""}>{text}</span>
-          {idx < texts.length - 1 && " "}
-        </Fragment>
-      ))}
-    </Title>
-  )
-}
-
 function getLevelByTier(tier: number) {
   return levelsData.levels.find(
     (level) => level.tier === tier
   ) as ComparisonLevel
 }
 
-function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
-  const unlockedBenefitsA = levelA.benefits.filter(
-    (benefit) => benefit.unlocked
-  )
-  const unlockedBenefitsB = levelB.benefits.filter(
-    (benefit) => benefit.unlocked
-  )
-
-  const higherLevelBenefits =
-    unlockedBenefitsA.length > unlockedBenefitsB.length
-      ? unlockedBenefitsA
-      : unlockedBenefitsB
-
-  return higherLevelBenefits.map((benefit, idx) => {
-    const aBenefit = levelA.benefits[idx]
-    const bBenefit = levelB.benefits[idx]
-    return (
-      <BenefitCard
-        key={benefit.name}
-        title={benefit.name}
-        description={benefit.description}
-        comparedValues={{
-          a: {
-            unlocked: aBenefit.unlocked,
-            value: aBenefit.value,
-            valueDetails: aBenefit.valueDetails,
-          },
-          b: {
-            unlocked: bBenefit.unlocked,
-            value: bBenefit.value,
-            valueDetails: bBenefit.valueDetails,
-          },
-        }}
-      />
-    )
-  })
-}
-
 export default function OverviewTable() {
   const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
   const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
+  const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))
 
-  // TODO Come up with a nice wat to make these two a single reusable function
-  function handleSelectChangeA(event: React.ChangeEvent<HTMLSelectElement>) {
-    const tier = parseInt(event.target.value)
-    const level = getLevelByTier(tier)
-    setSelectedLevelA(level)
-  }
-
-  function handleSelectChangeB(event: React.ChangeEvent<HTMLSelectElement>) {
-    const tier = parseInt(event.target.value)
-    const level = getLevelByTier(tier)
-    setSelectedLevelB(level)
+  function handleSelectChange(
+    callback: Dispatch<SetStateAction<ComparisonLevel>>
+  ) {
+    return (key: Key) => {
+      if (typeof key === "number") {
+        const level = getLevelByTier(key)
+        callback(level)
+      }
+    }
   }
 
   const levelOptions = levelsData.levels.map((level) => ({
@@ -143,15 +85,15 @@ export default function OverviewTable() {
           eleifend mi in nulla posuere.
         </p>
       </div>
-      <div className={styles.columns}>
-        <div className={styles.leftColumn} />
-        <div className={styles.rightColumn} />
+      <div className={styles.mobileColumns}>
         <div className={styles.columnHeaderContainer}>
           <div className={styles.columnHeader}>
             <Select
-              options={levelOptions}
-              defaultOption={selectedLevelA.tier}
-              onChange={handleSelectChangeA}
+              name={"benefitA"}
+              label={"Level"}
+              items={levelOptions}
+              defaultSelectedKey={selectedLevelA.tier}
+              onSelect={handleSelectChange(setSelectedLevelA)}
             />
             <LevelSummary
               level={
@@ -163,9 +105,11 @@ export default function OverviewTable() {
           </div>
           <div className={styles.columnHeader}>
             <Select
-              options={levelOptions}
-              defaultOption={selectedLevelB.tier}
-              onChange={handleSelectChangeB}
+              name={"benefitB"}
+              label={"Level"}
+              items={levelOptions}
+              defaultSelectedKey={selectedLevelB.tier}
+              onSelect={handleSelectChange(setSelectedLevelB)}
             />
             <LevelSummary
               level={
@@ -176,98 +120,63 @@ export default function OverviewTable() {
             />
           </div>
         </div>
-        {createComparison(selectedLevelA, selectedLevelB)}
+        <BenefitList levels={[selectedLevelA, selectedLevelB]} />
       </div>
-    </div>
-  )
-}
-
-type SelectProps = {
-  options: {
-    label: string
-    value: number
-  }[]
-  defaultOption: number
-  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
-}
-// TODO: replace with Select component from TempDesignSystem
-function Select({ options, defaultOption, onChange }: SelectProps) {
-  return (
-    <div className={styles.selectContainer}>
-      <select
-        className={styles.select}
-        onChange={onChange}
-        defaultValue={defaultOption}
-      >
-        {options.map((option) => (
-          <option key={option.label} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-      <label className={styles.selectLabel}>{_("Level")}</label>
-      <span className={styles.selectChevron}>
-        <ChevronDown />
-      </span>
-    </div>
-  )
-}
-
-function LevelSummary({ level }: LevelSummaryProps) {
-  return (
-    <div className={styles.levelSummary}>
-      <Image src={level.icon} alt={level.name} height={50} width={100} />
-      <span className={styles.levelRequirements}>{level.requirement}</span>
-      <p className={styles.levelSummaryText}>{level.description}</p>
-    </div>
-  )
-}
-
-function BenefitCard({ comparedValues, title, description }: BenefitCardProps) {
-  return (
-    <div className={styles.benefitCard}>
-      <div className={styles.benefitInfo}>
-        <details className={styles.details}>
-          <summary className={styles.summary}>
-            <hgroup className={styles.benefitCardHeader}>
-              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
-                {title}
-              </Title>
-              <span className={styles.chevron}>
-                <ChevronDown />
-              </span>
-            </hgroup>
-          </summary>
-          <p className={styles.benefitCardDescription}>{description}</p>
-        </details>
-      </div>
-      <div className={styles.benefitComparison}>
-        <div className={styles.comparisonItem}>
-          <BenefitValue benefit={comparedValues.a} />
-        </div>
-        <div className={styles.comparisonItem}>
-          <BenefitValue benefit={comparedValues.b} />
+      <div className={styles.columns}>
+        <div className={styles.columnHeaderContainer}>
+          <div className={styles.columnHeader}>
+            <Select
+              name={"benefitA"}
+              label={"Level"}
+              items={levelOptions}
+              defaultSelectedKey={selectedLevelA.tier}
+              onSelect={handleSelectChange(setSelectedLevelA)}
+            />
+            <LevelSummary
+              level={
+                levelsData.levels.find(
+                  (level) => level.tier === selectedLevelA.tier
+                ) as ComparisonLevel
+              }
+            />
+          </div>
+          <div className={styles.columnHeader}>
+            <Select
+              name={"benefitB"}
+              label={"Level"}
+              items={levelOptions}
+              defaultSelectedKey={selectedLevelB.tier}
+              onSelect={handleSelectChange(setSelectedLevelB)}
+            />
+            <LevelSummary
+              level={
+                levelsData.levels.find(
+                  (level) => level.tier === selectedLevelB.tier
+                ) as ComparisonLevel
+              }
+            />
+          </div>
+          <div className={styles.columnHeader}>
+            <Select
+              name={"benefitC"}
+              label={"Level"}
+              items={levelOptions}
+              defaultSelectedKey={selectedLevelC.tier}
+              onSelect={handleSelectChange(setSelectedLevelC)}
+            />
+            <LevelSummary
+              level={
+                levelsData.levels.find(
+                  (level) => level.tier === selectedLevelC.tier
+                ) as ComparisonLevel
+              }
+            />
+          </div>
         </div>
+        <BenefitList
+          levels={[selectedLevelA, selectedLevelB, selectedLevelC]}
+        />
       </div>
     </div>
   )
 }
-
-function BenefitValue({ benefit }: BenefitValueProps) {
-  if (!benefit.unlocked) {
-    return <Minus />
-  }
-  if (!benefit.value) {
-    return <CheckCircle height={32} width={32} />
-  }
-  return (
-    <div className={styles.benefitValueContainer}>
-      <span className={styles.benefitValue}>{benefit.value}</span>
-      {benefit.valueDetails && (
-        <span className={styles.benefitValueDetails}>
-          {benefit.valueDetails}
-        </span>
-      )}
-    </div>
-  )
-}

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -1,14 +1,12 @@
 .container {
   background-color: var(--Main-Brand-PalePeach);
-  left: 50%;
   margin-top: calc(var(--Spacing-x2) * -1);
-  margin-left: -50vw;
-  margin-right: -50vw;
+  margin-left: calc(var(--Spacing-x2) * -1);
+  margin-right: calc(var(--Spacing-x2) * -1);
   margin-bottom: calc(
     (var(--Spacing-x2) + 7.7rem) * -1
   ); /* Based on the MaxWidth's 1.6rem + the LoyaltyPage's 7.7rem bottom margins */
   position: relative;
-  right: 50%;
   width: 100dvw;
   padding: var(--Spacing-x2);
   display: grid;
@@ -20,10 +18,6 @@
   gap: var(--Spacing-x3);
 }
 
-.highlight {
-  color: var(--Base-Text-Primary-Accent);
-}
-
 .preamble {
   color: var(--Base-Text-Primary-High-contrast);
   font-size: var(--typography-Body-Regular-fontSize);
@@ -32,15 +26,20 @@
 }
 
 .columns {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
+  display: none;
+  position: relative;
+}
+
+.mobileColumns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin: 0 calc(var(--Spacing-x2) * -1);
   padding-top: var(--Spacing-x2);
   position: relative;
 }
 
 .columnHeaderContainer {
-  display: grid;
+  display: contents;
   grid-template-columns: 1fr 1fr;
   gap: var(--Spacing-x2);
   z-index: 2;
@@ -50,150 +49,49 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
-}
-
-.selectContainer {
-  position: relative;
-  width: 100%;
-}
-
-.selectLabel {
-  color: var(--Base-Text-UI-Placeholder);
-  position: absolute;
-  top: 7px;
-  left: var(--Spacing-x2);
-}
-
-.select {
-  appearance: none;
-  border: 1px solid var(--Base-Input-Controls-Border-Normal, #b8a79a);
-  border-radius: var(--Corner-radius-Medium);
   padding: var(--Spacing-x2);
-  width: 100%;
 }
 
-.selectChevron {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  right: var(--Spacing-x2);
-  bottom: var(--Spacing-x2);
+.columnHeader:nth-child(1) {
+  padding-right: var(--Spacing-x1);
 }
 
-.leftColumn {
-  background-color: var(--Main-Brand-PalePeach);
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 50%;
-  margin-left: calc(var(--Spacing-x2) * -1);
-  z-index: 1;
-}
-
-.rightColumn {
+.columnHeader:nth-child(2) {
   background-color: var(--Base-Background-Normal);
-  position: absolute;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin-bottom: calc(var(--Spacing-x2) * -1);
-  left: 50%;
-  right: 0;
-  margin-right: calc(var(--Spacing-x2) * -1);
-  z-index: 1;
+  padding-left: var(--Spacing-x1);
   border-top-left-radius: var(--Corner-radius-Medium);
 }
 
-.levelSummary {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x2);
+.columnHeader:nth-child(2):has(+ .columnHeader) {
+  padding-left: var(--Spacing-x1);
+  padding-right: var(--Spacing-x1);
 }
 
-.levelRequirements {
-  background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-Medium);
-  color: #f7e1d5;
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
+.columnHeader:nth-child(3) {
+  padding-left: var(--Spacing-x1);
 }
 
-.levelSummaryText {
-  color: var(--Main-Brand-Burgundy);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  margin: 0;
-}
+@media screen and (min-width: 950px) {
+  .container {
+    margin-top: calc((var(--Spacing-x2) + 5.8rem) * -1);
+    margin-left: calc(var(--Spacing-x3) * -1);
+    margin-right: calc(var(--Spacing-x3) * -1);
+    margin-bottom: calc((17.5rem + var(--Spacing-x2)) * -1);
+  }
+  .mobileColumns {
+    display: none;
+  }
 
-.benefitCard {
-  background-color: var(--Main-Grey-White);
-  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Small);
-  color: var(--Main-Brand-Burgundy);
-  padding: 0 var(--Spacing-x2);
-  z-index: 2;
-}
+  .columnHeaderContainer {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .columnHeader:nth-child(2) {
+    border-top-right-radius: var(--Corner-radius-Medium);
+  }
 
-.details[open] .chevron {
-  transform: rotate(180deg);
-}
-
-.chevron {
-  display: flex;
-  align-items: center;
-}
-
-.summary::-webkit-details-marker {
-  display: none;
-}
-
-.summary {
-  list-style: none;
-}
-
-.benefitCardHeader {
-  display: grid;
-  grid-template-columns: 1fr auto;
-}
-
-.benefitCardDescription {
-  line-height: 150%;
-}
-
-.benefitInfo {
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-  padding: var(--Spacing-x-one-and-half) 0;
-}
-
-.benefitComparison {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.comparisonItem {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--Spacing-x-one-and-half);
-}
-
-.benefitValueContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.benefitValue {
-  background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-Medium);
-  color: var(--Base-Surface-Primary-Hover-alt, #fff);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-}
-
-.benefitValueDetails {
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  text-align: center;
+  .columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    margin: 0 calc(var(--Spacing-x2) * -1);
+  }
 }

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

@@ -1,6 +1,7 @@
 .container {
   display: grid;
   gap: 2.4rem;
+  /* These negative margins are needed for horizontally scrollable lists of cards */
   margin-right: -1.6rem;
   padding-right: 1.6rem;
 }
@@ -26,3 +27,10 @@
   margin: 0;
   grid-area: subtitle;
 }
+
+@media screen and (min-width: 950px) {
+  .container {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}

components/TempDesignSystem/Form/Select/index.tsx

@@ -0,0 +1,79 @@
+"use client"
+import { useRef } from "react"
+import {
+  Button,
+  type Key,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select as ReactAriaSelect,
+  SelectValue,
+} from "react-aria-components"
+
+import SelectChevron from "../SelectChevron"
+
+import styles from "./select.module.css"
+
+import type { SelectProps } from "./select"
+
+export default function Select({
+  "aria-label": ariaLabel,
+  items,
+  label,
+  name,
+  onSelect,
+  placeholder,
+  value,
+  defaultSelectedKey,
+}: SelectProps) {
+  const divRef = useRef<HTMLDivElement>(null)
+
+  function handleOnSelect(key: Key) {
+    onSelect(key)
+  }
+
+  return (
+    <div className={styles.date} ref={divRef}>
+      <ReactAriaSelect
+        defaultSelectedKey={defaultSelectedKey}
+        aria-label={ariaLabel}
+        className={styles.select}
+        onSelectionChange={handleOnSelect}
+        placeholder={placeholder}
+        selectedKey={value as Key}
+      >
+        <Label className={styles.label}>{label}</Label>
+        <Button className={styles.input}>
+          <SelectValue />
+          <SelectChevron />
+        </Button>
+        <Popover
+          className={styles.popover}
+          placement="bottom"
+          shouldFlip={false}
+          /**
+           * react-aria uses portals to render Popover in body
+           * unless otherwise specified. We need it to be contained
+           * by this component to both access css variables assigned
+           * on the container as well as to not overflow it at any time.
+           */
+          UNSTABLE_portalContainer={divRef.current ?? undefined}
+        >
+          <ListBox className={styles.listBox}>
+            {items.map((item) => (
+              <ListBoxItem
+                aria-label={String(item)}
+                className={styles.listBoxItem}
+                id={item.value}
+                key={item.label}
+              >
+                {item.label}
+              </ListBoxItem>
+            ))}
+          </ListBox>
+        </Popover>
+      </ReactAriaSelect>
+    </div>
+  )
+}

components/TempDesignSystem/Form/Select/select.module.css

@@ -0,0 +1,57 @@
+.date {
+  position: relative;
+}
+
+.label {
+  color: var(--Base-Text-UI-Placeholder);
+  font-family: var(--ff-fira-sans);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: 400;
+  position: absolute;
+  left: 1.6rem;
+}
+
+.select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.input {
+  align-items: end;
+  background-color: var(--some-white-color, #fff);
+  border: 1px solid var(--Base-Input-Controls-Border-Normal, #b8a79a);
+  border-radius: 0.8rem;
+  color: var(--some-black-color, #757575);
+  display: grid;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 1rem;
+  grid-template-columns: 1fr auto;
+  height: 5.6rem;
+  /* letter-spacing: -1.5%; */
+  line-height: 2.4rem;
+  padding: 0.8rem 1.6rem;
+}
+
+.popover {
+  background-color: var(--some-white-color, #fff);
+  border: var(--border);
+  border-radius: var(--radius);
+  overflow: auto;
+  width: 100%;
+}
+
+.listBox {
+  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+}
+
+.listBoxItem {
+  padding: 0 0.8rem;
+}
+
+.listBoxItem[data-selected="true"],
+.listBoxItem[data-focused="true"] {
+  background-color: rgba(75, 75, 75, 0.2);
+}

components/TempDesignSystem/Form/Select/select.ts

@@ -0,0 +1,11 @@
+import type { Key } from "react-aria-components"
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect"> {
+  items: { label: string; value: Key }[]
+  label: string
+  name: string
+  onSelect: (key: Key) => void
+  placeholder?: string
+  defaultSelectedKey: Key
+}

types/components/loyalty/blocks.ts

@@ -72,10 +72,7 @@ export type LevelSummaryProps = {
 }
 
 export type BenefitCardProps = {
-  comparedValues: {
-    a: BenefitValueInformation
-    b: BenefitValueInformation
-  }
+  comparedValues: BenefitValueInformation[]
   title: string
   description: string
 }
@@ -89,3 +86,7 @@ type BenefitValueInformation = {
 export type BenefitValueProps = {
   benefit: BenefitValueInformation
 }
+
+export type BenefitListProps = {
+  levels: ComparisonLevel[]
+}