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
2024-09-03 08:43:13 +00:00
parent c0b16e8dee
commit bc3233ff64
27 changed files with 33 additions and 33 deletions
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -54,7 +54,7 @@ export function Rooms({ rooms }: RoomsProps) {
      <SectionHeader
        textTransform="uppercase"
        title={intl.formatMessage({ id: "Rooms" })}
-        subtitle={null}
+        preamble={null}
      />
      <Grids.Stackable>
        {mappedRooms.map(
--- a/components/Loyalty/Blocks/CardsGrid/index.tsx
+++ b/components/Loyalty/Blocks/CardsGrid/index.tsx
@@ -15,7 +15,7 @@ export default function CardsGrid({
    <SectionContainer>
      <SectionHeader
        title={cards_grid.title}
-        subtitle={cards_grid.preamble}
+        preamble={cards_grid.preamble}
        topTitle={firstItem}
      />
      <Grids.Stackable>
--- a/components/Loyalty/Blocks/DynamicContent/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/index.tsx
@@ -53,7 +53,7 @@ export default function DynamicContent({
      ) : displayHeader ? (
        <SectionHeader
          link={dynamicContent.link}
-          subtitle={dynamicContent.subtitle}
+          preamble={dynamicContent.subtitle}
          title={dynamicContent.title}
          topTitle={firstItem}
        />
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
+++ b/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}`}>
--- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
+++ b/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}>
--- a/components/MyPages/Blocks/Overview/index.tsx
+++ b/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" />
--- a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
+++ b/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>
--- a/components/MyPages/Blocks/Points/Overview/index.tsx
+++ b/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" />
--- a/components/MyPages/Blocks/Shortcuts/index.tsx
+++ b/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
--- a/components/MyPages/Blocks/Stays/Previous/index.tsx
+++ b/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>
--- a/components/MyPages/Blocks/Stays/Soonest/index.tsx
+++ b/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) => (
--- a/components/MyPages/Blocks/Stays/Upcoming/index.tsx
+++ b/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} />
      ) : (
--- a/components/Section/Header/header.module.css
+++ b/components/Section/Header/header.module.css
@@ -6,7 +6,7 @@
 }

 .title,
-.subtitle {
+.preamble {
  grid-column: 1 / -1;
 }

@@ -19,7 +19,7 @@
    grid-column: 1 / 2;
  }

-  .subtitle {
+  .preamble {
    grid-column: 1 / 2;
  }
 }
--- a/components/Section/Header/index.tsx
+++ b/components/Section/Header/index.tsx
@@ -1,4 +1,4 @@
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"

 import SectionLink from "../Link"
@@ -9,7 +9,7 @@ import type { HeaderProps } from "@/types/components/myPages/header"

 export default function SectionHeader({
  link,
-  subtitle,
+  preamble,
  title,
  topTitle = false,
  textTransform,
@@ -24,7 +24,7 @@ export default function SectionHeader({
      >
        {title}
      </Title>
-      {subtitle && <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>}
+      {preamble && <Preamble className={styles.preamble}>{preamble}</Preamble>}
      <SectionLink link={link} variant="desktop" />
    </header>
  )
--- a/components/Section/Link/index.tsx
+++ b/components/Section/Link/index.tsx
@@ -20,8 +20,8 @@ export default function SectionLink({ link, variant }: SectionLinkProps) {
      href={link.href}
      variant="underscored"
    >
-      <ArrowRight color="burgundy" className={styles.icon} />
      {link.text}
+      <ArrowRight color="burgundy" className={styles.icon} />
    </Link>
  )
 }
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -131,7 +131,7 @@
 }

 .peach80 {
-  color: var(--Primary-Light-On-Surface-Accent);
+  color: var(--Base-Text-Medium-contrast);
 }

 .red {
@@ -140,12 +140,12 @@

 .peach80:hover,
 .peach80:active {
-  color: var(--Primary-Light-On-Surface-Hover);
+  color: var(--Base-Text-High-contrast);
 }

 .peach80:hover *,
 .peach80:active * {
-  fill: var(--Primary-Light-On-Surface-Hover);
+  fill: var(--Base-Text-High-contrast);
 }

 .white {
--- a/components/TempDesignSystem/Text/Subtitle/variants.ts
+++ b/components/TempDesignSystem/Text/Subtitle/variants.ts
@@ -24,7 +24,7 @@ const config = {
    },
  },
  defaultVariants: {
-    color: "burgundy",
+    color: "black",
    textAlign: "left",
    textTransform: "regular",
    type: "one",