feat(SW-285): ship support for dynamic content

components/Content/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css

@@ -0,0 +1,28 @@
+.iconRow {
+  border-bottom: none;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.verticalTableHeader {
+  min-width: 242px;
+}
+
+.iconTh {
+  padding: var(--Spacing-x5) var(--Spacing-x2) var(--Spacing-x2);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  vertical-align: bottom;
+}
+
+.summaryTh {
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x2);
+  vertical-align: top;
+}
+
+.select {
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x2);
+}

components/Content/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx

@@ -0,0 +1,63 @@
+import Image from "@/components/Image"
+
+import LevelSummary from "../../LevelSummary"
+import YourLevel from "../../YourLevelScript"
+
+import styles from "./desktopHeader.module.css"
+
+import type {
+  DesktopSelectColumns,
+  LargeTableProps,
+} from "@/types/components/loyalty/blocks"
+
+export default function DesktopHeader({
+  levels,
+  activeLevel,
+  Select,
+}: LargeTableProps) {
+  return (
+    <thead>
+      <tr className={styles.iconRow}>
+        <th className={styles.verticalTableHeader} />
+        {levels.map((level, idx) => {
+          return (
+            <th key={"image" + level.level + idx} className={styles.iconTh}>
+              {activeLevel === level.level ? <YourLevel /> : null}
+              <Image
+                height={50}
+                width={100}
+                alt={level.name}
+                src={level.icon}
+              />
+            </th>
+          )
+        })}
+      </tr>
+      <tr>
+        <th />
+        {levels.map((level, idx) => {
+          return (
+            <th
+              key={"summary" + level.level + idx}
+              className={styles.summaryTh}
+            >
+              <LevelSummary level={level} />
+            </th>
+          )
+        })}
+      </tr>
+      {Select && (
+        <tr>
+          <th />
+          {["A", "B", "C"].map((column, idx) => {
+            return (
+              <th key={column + idx} className={styles.select}>
+                <Select column={column as DesktopSelectColumns["column"]} />
+              </th>
+            )
+          })}
+        </tr>
+      )}
+    </thead>
+  )
+}

components/Content/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

@@ -0,0 +1,77 @@
+import { ChevronDown } from "react-feather"
+
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { findBenefit, getUnlockedBenefits } from "@/utils/loyaltyTable"
+
+import BenefitValue from "../BenefitValue"
+import DesktopHeader from "./DesktopHeader"
+
+import styles from "./largeTable.module.css"
+
+import type {
+  BenefitTableHeaderProps,
+  LargeTableProps,
+} from "@/types/components/loyalty/blocks"
+
+export default function LargeTable({
+  levels,
+  activeLevel,
+  Select,
+}: LargeTableProps) {
+  return (
+    <table className={styles.table}>
+      <DesktopHeader
+        levels={levels}
+        activeLevel={activeLevel}
+        Select={Select}
+      />
+      <tbody className={styles.tbody}>
+        {getUnlockedBenefits(levels).map((benefit) => {
+          return (
+            <tr key={benefit.name} className={styles.tr}>
+              <th scope={"row"} className={styles.benefitTh}>
+                <BenefitTableHeader
+                  name={benefit.name}
+                  description={benefit.description}
+                />
+              </th>
+              {levels.map((level, idx) => {
+                return (
+                  <td key={"icon" + level.level + idx} className={styles.td}>
+                    <BenefitValue benefit={findBenefit(benefit, level)} />
+                  </td>
+                )
+              })}
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}
+
+function BenefitTableHeader({ name, description }: BenefitTableHeaderProps) {
+  return (
+    <details className={styles.details}>
+      <summary className={styles.summary}>
+        <hgroup className={styles.benefitHeader}>
+          <Title
+            as="h5"
+            level="h2"
+            textTransform={"regular"}
+            className={styles.benefitTitle}
+          >
+            {name}
+          </Title>
+          <span className={styles.chevron}>
+            <ChevronDown />
+          </span>
+        </hgroup>
+      </summary>
+      <p
+        className={styles.benefitDescription}
+        dangerouslySetInnerHTML={{ __html: description }}
+      />
+    </details>
+  )
+}

components/Content/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -0,0 +1,58 @@
+.table {
+  border: none;
+  border-collapse: collapse;
+  background-color: var(--UI-Opacity-White-100);
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--UI-Grey-100);
+}
+
+.tr {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.tr:last-child {
+  border: none;
+}
+
+.td {
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  text-align: center;
+}
+
+.benefitTh {
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+}
+
+.details[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.benefitHeader {
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr auto;
+  text-align: start;
+}
+
+.benefitDescription {
+  margin: 0;
+  padding-top: var(--Spacing-x1);
+  text-align: start;
+  padding-right: calc(var(--Spacing-x3) + var(--Spacing-x1));
+}
+
+.chevron {
+  display: flex;
+  align-self: start;
+  color: var(--UI-Grey-80);
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary {
+  list-style: none;
+}