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">