fix: adjust LargeTable styling

2024-06-04 14:10:41 +02:00
parent 349c95fbc4
commit af33f18a6a
8 changed files with 178 additions and 14 deletions
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
@@ -19,7 +19,12 @@ export default function BenefitCard({
        <details className={styles.details}>
          <summary className={styles.summary}>
            <hgroup className={styles.benefitCardHeader}>
-              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
+              <Title
+                as="h5"
+                level="h2"
+                textTransform={"regular"}
+                className={styles.benefitCardTitle}
+              >
                {title}
              </Title>
              <span className={styles.chevron}>
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
@@ -14,6 +14,6 @@
 }

 .benefitValueDetails {
-  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-size: var(--typography-Caption-Regular-fontSize);
  text-align: center;
 }
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
+++ b/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>
+  )
+}
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
+++ b/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;
+}
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx
@@ -7,7 +7,6 @@ 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>
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"

 import { Lang } from "@/constants/languages"

+import Image from "@/components/Image"
 import Select from "@/components/TempDesignSystem/Form/Select"

 import levelsData from "./data/EN.json"
@@ -59,6 +60,16 @@ export default function OverviewTable() {
  const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
  const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))

+  const defaultLevelA = levelsData.levels.find(
+    (level) => level.tier === selectedLevelA.tier
+  ) as ComparisonLevel
+  const defaultLevelB = levelsData.levels.find(
+    (level) => level.tier === selectedLevelB.tier
+  ) as ComparisonLevel
+  const defaultLevelC = levelsData.levels.find(
+    (level) => level.tier === selectedLevelC.tier
+  ) as ComparisonLevel
+
  function handleSelectChange(
    callback: Dispatch<SetStateAction<ComparisonLevel>>
  ) {
@@ -97,6 +108,14 @@ export default function OverviewTable() {
              defaultSelectedKey={selectedLevelA.tier}
              onSelect={handleSelectChange(setSelectedLevelA)}
            />
+            <Image
+              className={styles.icon}
+              src={defaultLevelA.icon}
+              alt={defaultLevelA.name}
+              height={50}
+              width={100}
+            />
+
            <LevelSummary
              level={
                levelsData.levels.find(
@@ -113,6 +132,14 @@ export default function OverviewTable() {
              defaultSelectedKey={selectedLevelB.tier}
              onSelect={handleSelectChange(setSelectedLevelB)}
            />
+            <Image
+              className={styles.icon}
+              src={defaultLevelB.icon}
+              alt={defaultLevelB.name}
+              height={50}
+              width={100}
+            />
+
            <LevelSummary
              level={
                levelsData.levels.find(
@@ -134,6 +161,14 @@ export default function OverviewTable() {
              defaultSelectedKey={selectedLevelA.tier}
              onSelect={handleSelectChange(setSelectedLevelA)}
            />
+            <Image
+              className={styles.icon}
+              src={defaultLevelA.icon}
+              alt={defaultLevelA.name}
+              height={50}
+              width={100}
+            />
+
            <LevelSummary
              level={
                levelsData.levels.find(
@@ -150,6 +185,14 @@ export default function OverviewTable() {
              defaultSelectedKey={selectedLevelB.tier}
              onSelect={handleSelectChange(setSelectedLevelB)}
            />
+            <Image
+              className={styles.icon}
+              src={defaultLevelB.icon}
+              alt={defaultLevelB.name}
+              height={50}
+              width={100}
+            />
+
            <LevelSummary
              level={
                levelsData.levels.find(
@@ -166,6 +209,14 @@ export default function OverviewTable() {
              defaultSelectedKey={selectedLevelC.tier}
              onSelect={handleSelectChange(setSelectedLevelC)}
            />
+            <Image
+              className={styles.icon}
+              src={defaultLevelC.icon}
+              alt={defaultLevelC.name}
+              height={50}
+              width={100}
+            />
+
            <LevelSummary
              level={
                levelsData.levels.find(
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
@@ -56,6 +56,10 @@
  padding: var(--Spacing-x2);
 }

+.icon {
+  align-self: center;
+}
+
 .columnHeader:nth-child(1) {
  padding-right: var(--Spacing-x1);
 }
--- a/types/components/loyalty/blocks.ts
+++ b/types/components/loyalty/blocks.ts
@@ -92,3 +92,8 @@ export type BenefitListProps = {
 export type LargeTableProps = {
  levels: ComparisonLevel[]
 }
+
+export type BenefitTableHeaderProps = {
+  name: string
+  description: string
+}