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

chore: rename perk to benefit

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-21 14:20:42 +02:00
parent e5b9da29d0
commit 6b016ce0e0
2 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
View File

@@ -30,7 +30,7 @@ function createComparison(levelA: Level, levelB: Level) {
const aBenefit = comparedLevels[0].benefits[idx] const aBenefit = comparedLevels[0].benefits[idx]
const bBenefit = comparedLevels[1].benefits[idx] const bBenefit = comparedLevels[1].benefits[idx]
return ( return (
<PerkCard <BenefitCard
key={benefit.name} key={benefit.name}
title={benefit.name} title={benefit.name}
description={benefit.description} description={benefit.description}
@@ -195,7 +195,7 @@ function LevelSummary({ level }: LevelSummaryProps) {
) )
} }
type PerkCardProps = { type BenefitCardProps = {
comparedValues: { comparedValues: {
a: { unlocked: boolean; value?: string; valueDetails?: string } a: { unlocked: boolean; value?: string; valueDetails?: string }
b: { unlocked: boolean; value?: string; valueDetails?: string } b: { unlocked: boolean; value?: string; valueDetails?: string }
@@ -203,14 +203,14 @@ type PerkCardProps = {
title: string title: string
description: string description: string
} }
function PerkCard({ comparedValues, title, description }: PerkCardProps) { function BenefitCard({ comparedValues, title, description }: BenefitCardProps) {
return ( return (
<div className={styles.perkCard}> <div className={styles.benefitCard}>
<div className={styles.perkInfo}> <div className={styles.benefitInfo}>
<details className={styles.details}> <details className={styles.details}>
<summary className={styles.summary}> <summary className={styles.summary}>
<hgroup className={styles.perkCardHeader}> <hgroup className={styles.benefitCardHeader}>
<Title as="h5" level="h2" className={styles.perkCardTitle}> <Title as="h5" level="h2" className={styles.benefitCardTitle}>
{title} {title}
</Title> </Title>
<span className={styles.chevron}> <span className={styles.chevron}>
@@ -218,22 +218,22 @@ function PerkCard({ comparedValues, title, description }: PerkCardProps) {
</span> </span>
</hgroup> </hgroup>
</summary> </summary>
<p className={styles.perkCardDescription}>{description}</p> <p className={styles.benefitCardDescription}>{description}</p>
</details> </details>
</div> </div>
<div className={styles.perkComparison}> <div className={styles.benefitComparison}>
<div className={styles.comparisonItem}> <div className={styles.comparisonItem}>
<PerkValue benefit={comparedValues.a} /> <BenefitValue benefit={comparedValues.a} />
</div> </div>
<div className={styles.comparisonItem}> <div className={styles.comparisonItem}>
<PerkValue benefit={comparedValues.b} /> <BenefitValue benefit={comparedValues.b} />
</div> </div>
</div> </div>
</div> </div>
) )
} }
function PerkValue({ function BenefitValue({
benefit, benefit,
}: { }: {
benefit: { benefit: {
@@ -249,10 +249,12 @@ function PerkValue({
return <CheckCircle height={32} width={32} /> return <CheckCircle height={32} width={32} />
} }
return ( return (
<div className={styles.perkValueContainer}> <div className={styles.benefitValueContainer}>
<span className={styles.perkValue}>{benefit.value}</span> <span className={styles.benefitValue}>{benefit.value}</span>
{benefit.valueDetails && ( {benefit.valueDetails && (
<span className={styles.perkValueDetails}>{benefit.valueDetails}</span> <span className={styles.benefitValueDetails}>
{benefit.valueDetails}
</span>
)} )}
</div> </div>
) )

16
components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
View File

@@ -104,7 +104,7 @@
margin: 0; margin: 0;
} }
.perkCard { .benefitCard {
background-color: var(--Main-Grey-White); background-color: var(--Main-Grey-White);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: 0.4rem; border-radius: 0.4rem;
@@ -130,21 +130,21 @@
list-style: none; list-style: none;
} }
.perkCardHeader { .benefitCardHeader {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }
.perkCardDescription { .benefitCardDescription {
line-height: 150%; line-height: 150%;
} }
.perkInfo { .benefitInfo {
border-bottom: 1px solid var(--Base-Border-Subtle); border-bottom: 1px solid var(--Base-Border-Subtle);
padding: 1.5rem 0; padding: 1.5rem 0;
} }
.perkComparison { .benefitComparison {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@@ -156,14 +156,14 @@
padding: 1rem; padding: 1rem;
} }
.perkValueContainer { .benefitValueContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
} }
.perkValue { .benefitValue {
background-color: var(--Main-Brand-Burgundy); background-color: var(--Main-Brand-Burgundy);
border-radius: 0.8rem; border-radius: 0.8rem;
color: var(--Base-Surface-Primary-Hover-alt, #fff); color: var(--Base-Surface-Primary-Hover-alt, #fff);
@@ -171,7 +171,7 @@
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
} }
.perkValueDetails { .benefitValueDetails {
font-size: var(--typography-Footnote-Regular-fontSize); font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center; text-align: center;
} }