scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add table styling

Browse Source
This commit is contained in:
Arvid Norlin
2024-06-03 14:51:25 +02:00
parent 92f5f7f7c0
commit 349c95fbc4
7 changed files with 126 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
View File

@@ -8,26 +8,6 @@
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;

29
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
View File

@@ -1,33 +1,12 @@
import { ChevronDown, Minus } from "react-feather"
import { ChevronDown } from "react-feather"
import CheckCircle from "@/components/Icons/CheckCircle"
import Title from "@/components/TempDesignSystem/Text/Title"
import BenefitValue from "../BenefitValue"
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>
)
}
import { BenefitCardProps } from "@/types/components/loyalty/blocks"
export default function BenefitCard({
comparedValues,

19
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css Normal file
View File

@@ -0,0 +1,19 @@
.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-xLarge);
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;
}

26
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Minus } from "react-feather"
import CheckCircle from "@/components/Icons/CheckCircle"
import styles from "./benefitValue.module.css"
import { BenefitValueProps } from "@/types/components/loyalty/blocks"
export default 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>
)
}

50
components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
View File

@@ -1,26 +1,46 @@
import Image from "@/components/Image"
import BenefitValue from "../BenefitValue"
import LevelSummary from "../LevelSummary"
import styles from "./largeTable.module.css"
import { LargeTableProps } from "@/types/components/loyalty/blocks"
export default function LargeTable({ levels }: LargeTableProps) {
return (
<table>
<thead>
<th />
{levels.map((level) => {
console.log({ level })
<table className={styles.table}>
<thead className={styles.thead}>
<tr>
<th />
{levels.map((level) => {
return (
<th key={level.tier} className={styles.th}>
<LevelSummary level={level} />
</th>
)
})}
</tr>
</thead>
<tbody>
{levels[0].benefits.map((benefit, index) => {
return (
<th key={level.tier}>
<Image
src={level.icon}
alt={level.name}
width={140}
height={54}
/>
</th>
<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>
{levels.map((level) => {
return (
<td key={level.tier} className={styles.td}>
<BenefitValue benefit={level.benefits[index]} />
</td>
)
})}
</tr>
)
})}
</thead>
</tbody>
</table>
)
}

31
components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css Normal file
View File

@@ -0,0 +1,31 @@
.table {
border: 1px solid var(--Base-Border-Subtle);
border-collapse: collapse;
color: var(--BURGUNDY, #4d001b);
}
.thead {
background-color: var(--Base-Surface-Secondary-Normal);
position: sticky;
top: 0;
}
.th,
.td {
border: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x3) var(--Spacing-x2);
}
.th {
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: 400;
}
.td {
font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center;
}
.tr:nth-child(odd) {
background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
}

12
components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
View File

@@ -7,7 +7,7 @@
.levelRequirements {
background-color: var(--Main-Brand-Burgundy);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-xLarge);
color: #f7e1d5;
padding: var(--Spacing-x-half) var(--Spacing-x1);
}
@@ -18,3 +18,13 @@
line-height: var(--typography-Body-Regular-lineHeight);
margin: 0;
}
@media screen and (min-width: 1367px) {
.levelRequirements {
font-size: var(--typography-Footnote-Regular-fontSize);
}
.levelSummaryText {
font-size: var(--typography-Caption-Regular-fontSize);
}
}