fix: adjust LargeTable styling

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

@@ -1,19 +1,43 @@
+import { ChevronDown } from "react-feather"
+
+import Image from "@/components/Image"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
 import BenefitValue from "../BenefitValue"
 import LevelSummary from "../LevelSummary"
 
 import styles from "./largeTable.module.css"
 
-import { LargeTableProps } from "@/types/components/loyalty/blocks"
+import {
+  BenefitTableHeaderProps,
+  LargeTableProps,
+} from "@/types/components/loyalty/blocks"
 
 export default function LargeTable({ levels }: LargeTableProps) {
   return (
     <table className={styles.table}>
       <thead className={styles.thead}>
+        <tr className={styles.iconRow}>
+          <th className={styles.verticalTableHeader} />
+
+          {levels.map((level) => {
+            return (
+              <th key={level.tier} className={styles.iconTh}>
+                <Image
+                  height={50}
+                  width={100}
+                  alt={level.name}
+                  src={level.icon}
+                />
+              </th>
+            )
+          })}
+        </tr>
         <tr>
           <th />
           {levels.map((level) => {
             return (
-              <th key={level.tier} className={styles.th}>
+              <th key={level.tier} className={styles.summaryTh}>
                 <LevelSummary level={level} />
               </th>
             )
@@ -24,11 +48,11 @@ export default function LargeTable({ levels }: LargeTableProps) {
         {levels[0].benefits.map((benefit, index) => {
           return (
             <tr key={benefit.name} className={styles.tr}>
-              <th scope={"row"} className={styles.th}>
-                <span className={styles.benefitName}>{benefit.name}</span>
-                <span className={styles.benefitDescription}>
-                  {benefit.description}
-                </span>
+              <th scope={"row"} className={styles.benefitTh}>
+                <BenefitTableHeader
+                  name={benefit.name}
+                  description={benefit.description}
+                />
               </th>
               {levels.map((level) => {
                 return (
@@ -44,3 +68,26 @@ export default function LargeTable({ levels }: LargeTableProps) {
     </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}>{description}</p>
+    </details>
+  )
+}

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

@@ -6,26 +6,79 @@
 
 .thead {
   background-color: var(--Base-Surface-Secondary-Normal);
+}
+
+.iconRow {
+  background-color: var(--Base-Surface-Secondary-Normal);
+  border-bottom: none;
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
-.th,
-.td {
+.verticalTableHeader {
+  width: 242px;
+}
+
+.iconTh {
   border: 1px solid var(--Base-Border-Subtle);
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  border-bottom: none;
+  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half);
 }
 
-.th {
+.summaryTh {
+  border: 1px solid var(--Base-Border-Subtle);
+  border-top: none;
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: 400;
+  padding: 0 var(--Spacing-x3) var(--Spacing-x2);
 }
 
 .td {
+  border: 1px solid var(--Base-Border-Subtle);
   font-size: var(--typography-Footnote-Regular-fontSize);
+  /* padding: var(--Spacing-x3) var(--Spacing-x2); */
   text-align: center;
 }
 
 .tr:nth-child(odd) {
   background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
 }
+
+.benefitTh {
+  border: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: 400;
+}
+
+.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(24px + var(--Spacing-x1));
+}
+
+.chevron {
+  display: flex;
+  align-self: start;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary {
+  list-style: none;
+}