Merged in feat/book-425-optimize-campaign-rate-card (pull request #3015)

Feat/book 425 optimize campaign rate card

* feat(BOOK-425): design updates to RateCard

* feat(BOOK-425): design updates to campaign BookingCodeChip

* feat(BOOK-425): fixed breakfast message & booking code chips on select rate and enter detailss

* feat(BOOK-425): fixed booking code chip on Booking Confirmation page

* fixed draft comments

* fixed more comments

* feat(BOOK-425): removed fixed height from RateCard banner

* fixed another variable comment

* fixed more pr comments

* fixed more pr comments

* updated ratecard campaign standard rate title color

* removed deconstructed props


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra

packages/design-system/lib/components/RateCard/Campaign/index.tsx

@@ -1,3 +1,5 @@
+import { cx } from 'class-variance-authority'
+
 import { Typography } from '../../Typography'
 import { Rate, RateTermDetails } from '../types'
 
@@ -56,9 +58,12 @@ export default function CampaignRateCard({
         onChange={handleChange}
       />
       <div className={classNames}>
-        <Typography variant="Label/xsBold">
-          <p className={styles.banner}>{bannerText}</p>
-        </Typography>
+        <div className={styles.banner}>
+          <MaterialIcon size={16} icon="sell" color="CurrentColor" />
+          <Typography variant="Label/xsBold">
+            <p>{bannerText}</p>
+          </Typography>
+        </div>
         <div className={styles.container}>
           <header>
             <Typography variant="Tag/sm">
@@ -67,7 +72,7 @@ export default function CampaignRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                       <MaterialIcon
                         icon="info"
                         size={20}
@@ -109,14 +114,17 @@ export default function CampaignRateCard({
             </div>
           </header>
           <div className={styles.content}>
-            <div
-              className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
-            >
+            <div className={styles.rateRow}>
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <p>{rate.label}</p>
               </Typography>
               <Typography variant="Title/Subtitle/md">
-                <p>
+                <p
+                  className={cx(
+                    styles.rate,
+                    isHighlightedRate && styles.highlightedRate
+                  )}
+                >
                   {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                   {`${rate.price} `}
                   <Typography variant="Body/Supporting text (caption)/smBold">

packages/design-system/lib/components/RateCard/Code/index.tsx

@@ -63,7 +63,7 @@ export default function CodeRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                       <MaterialIcon
                         icon="info"
                         size={20}

packages/design-system/lib/components/RateCard/Points/index.tsx

@@ -49,7 +49,7 @@ export default function PointsRateCard({
                 title={rateTitle}
                 subtitle={paymentTerm}
                 trigger={
-                  <IconButton theme="Black" style="Muted">
+                  <IconButton theme="Black" style="Muted" wrapping>
                     <MaterialIcon icon="info" size={20} color="Icon/Default" />
                   </IconButton>
                 }

packages/design-system/lib/components/RateCard/Regular/index.tsx

@@ -56,7 +56,7 @@ export default function RegularRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                       <MaterialIcon
                         icon="info"
                         size={20}

packages/design-system/lib/components/RateCard/rate-card.module.css

@@ -58,7 +58,7 @@ label:not(:has(.radio:checked)) .checkIcon {
   border-top-right-radius: var(--Corner-radius-md);
   text-align: center;
   color: var(--Text-Inverted);
-  padding: var(--Space-x05) 0;
+  padding: var(--Space-x05) var(--Space-x1);
   text-transform: none;
 }
 
@@ -66,7 +66,6 @@ label:not(:has(.radio:checked)) .checkIcon {
   display: flex;
   flex-direction: column;
   gap: var(--Space-x1);
-
   padding: var(--Space-x1) var(--Space-x15) var(--Space-x15);
 }
 
@@ -100,7 +99,7 @@ label:not(:has(.radio:checked)) .checkIcon {
 }
 
 .highlightedRate {
-  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+  color: var(--Text-Accent-Primary);
 }
 
 .textSecondary {
@@ -160,7 +159,19 @@ label:not(:has(.radio:checked)) .checkIcon {
 }
 
 .variant-campaign .banner {
-  background-color: var(--Surface-Accent-3);
+  background-color: var(
+    --Surface-Feedback-Succes-light,
+    var(--Scandic-Green-60)
+  ); /*Should be updated to only use the new token --Surface-Feedback-Succes-light when tokens are up to date*/
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x05);
+  align-self: stretch;
+}
+
+.variant-campaign .rate {
+  color: var(--Text-Accent-Primary);
 }
 
 .variant-code .banner {