chore: rename perk to benefit

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

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

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

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