Merged in feat/SW-196-design-fixes (pull request #547)

Feat/SW-196 design fixes

* feat(SW-196): Updated copy My credit cards -> My payment cards

* fix: update design system version

* feat(SW-196): Update Header component to use Preamble instead of Subtitle

* feat(SW-196): Minor design fixes


Approved-by: Christel Westerberg

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -43,7 +43,7 @@ export default async function CurrentBenefitsBlock({
 
   return (
     <SectionContainer>
-      <SectionHeader title={title} link={link} subtitle={subtitle} />
+      <SectionHeader title={title} link={link} preamble={subtitle} />
       <Grids.Stackable>
         {currentLevel.benefits.map((benefit, idx) => (
           <article className={styles.card} key={`${currentLevel}-${idx}`}>

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -39,7 +39,7 @@ export default async function NextLevelBenefitsBlock({
   // TODO: how to handle different count of unlockable benefits?
   return (
     <SectionContainer>
-      <SectionHeader title={title} subtitle={subtitle} link={link} />
+      <SectionHeader title={title} preamble={subtitle} link={link} />
       <Grids.Stackable columns={2}>
         {nextLevel.benefits.map((benefit) => (
           <article key={benefit.title} className={styles.card}>

components/MyPages/Blocks/Overview/index.tsx

@@ -26,7 +26,7 @@ export default async function Overview({
 
   return (
     <SectionContainer>
-      <SectionHeader link={link} subtitle={subtitle} title={title} topTitle />
+      <SectionHeader link={link} preamble={subtitle} title={title} topTitle />
       <Hero color="red">
         <Friend user={user} color="burgundy" />
         <Divider className={styles.divider} color="peach" />

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -13,7 +13,7 @@ export default async function EarnAndBurn({
 }: AccountPageComponentProps) {
   return (
     <SectionContainer>
-      <SectionHeader title={title} link={link} subtitle={subtitle} />
+      <SectionHeader title={title} link={link} preamble={subtitle} />
       <JourneyTable />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Points/Overview/index.tsx

@@ -25,7 +25,7 @@ export default async function PointsOverview({
 
   return (
     <SectionContainer>
-      <SectionHeader link={link} subtitle={subtitle} title={title} topTitle />
+      <SectionHeader link={link} preamble={subtitle} title={title} topTitle />
       <Hero color="burgundy">
         <Friend user={user} color="red" />
         <Divider className={styles.divider} color="peach" />

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -16,7 +16,7 @@ export default function Shortcuts({
 }: ShortcutsProps) {
   return (
     <SectionContainer>
-      <SectionHeader subtitle={subtitle} title={title} topTitle={firstItem} />
+      <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
       <section className={styles.links}>
         {shortcuts.map((shortcut) => (
           <Link

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -23,7 +23,7 @@ export default async function PreviousStays({
 
   return (
     <SectionContainer>
-      <SectionHeader title={title} subtitle={subtitle} link={link} />
+      <SectionHeader title={title} preamble={subtitle} link={link} />
       <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -22,7 +22,7 @@ export default async function SoonestStays({
 
   return (
     <SectionContainer>
-      <SectionHeader title={title} subtitle={subtitle} link={link} />
+      <SectionHeader title={title} preamble={subtitle} link={link} />
       {response.data.length ? (
         <Grids.Stackable>
           {response.data.map((stay) => (

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -22,7 +22,7 @@ export default async function UpcomingStays({
 
   return (
     <SectionContainer className={styles.container}>
-      <SectionHeader title={title} subtitle={subtitle} link={link} />
+      <SectionHeader title={title} preamble={subtitle} link={link} />
       {initialUpcomingStays?.data.length ? (
         <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
       ) : (