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/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
@@ -23,7 +23,7 @@ export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
    <section className={styles.container}>
      <article className={styles.content}>
        <Subtitle type="two" color="black">
-          {formatMessage({ id: "My credit cards" })}
+          {formatMessage({ id: "My payment cards" })}
        </Subtitle>
        <Body color="black">
          {formatMessage({
--- 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",
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -94,9 +94,9 @@
  "Modify": "Ændre",
  "Month": "Måned",
  "My communication preferences": "Mine kommunikationspræferencer",
-  "My credit cards": "Mine kreditkort",
  "My membership cards": "Mine medlemskort",
  "My pages": "Mine sider",
+  "My payment cards": "Mine betalingskort",
  "My wishes": "Mine ønsker",
  "New password": "Nyt kodeord",
  "Next": "Næste",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -92,9 +92,9 @@
  "Modify": "Ändern",
  "Month": "Monat",
  "My communication preferences": "Meine Kommunikationseinstellungen",
-  "My credit cards": "Meine Kreditkarten",
  "My membership cards": "Meine Mitgliedskarten",
  "My pages": "Meine Seiten",
+  "My payment cards": "Meine Zahlungskarten",
  "My wishes": "Meine Wünsche",
  "New password": "Neues Kennwort",
  "Next": "Nächste",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -99,9 +99,9 @@
  "Modify": "Modify",
  "Month": "Month",
  "My communication preferences": "My communication preferences",
-  "My credit cards": "My credit cards",
  "My membership cards": "My membership cards",
  "My pages": "My pages",
+  "My payment cards": "My payment cards",
  "My wishes": "My wishes",
  "New password": "New password",
  "Next": "Next",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -94,9 +94,9 @@
  "Modify": "Muokkaa",
  "Month": "Kuukausi",
  "My communication preferences": "Viestintämieltymykseni",
-  "My credit cards": "Luottokorttini",
  "My membership cards": "Jäsenkorttini",
  "My pages": "Omat sivut",
+  "My payment cards": "Minun maksukortit",
  "My wishes": "Toiveeni",
  "New password": "Uusi salasana",
  "Next": "Seuraava",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -94,9 +94,9 @@
  "Modify": "Endre",
  "Month": "Måned",
  "My communication preferences": "Mine kommunikasjonspreferanser",
-  "My credit cards": "Kredittkortene mine",
  "My membership cards": "Mine medlemskort",
  "My pages": "Mine sider",
+  "My payment cards": "Mine betalingskort",
  "My wishes": "Mine ønsker",
  "New password": "Nytt passord",
  "Next": "Neste",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -96,9 +96,9 @@
  "Modify": "Ändra",
  "Month": "Månad",
  "My communication preferences": "Mina kommunikationspreferenser",
-  "My credit cards": "Mina kreditkort",
  "My membership cards": "Mina medlemskort",
  "My pages": "Mina sidor",
+  "My payment cards": "Mina betalningskort",
  "My wishes": "Mina önskningar",
  "New password": "Nytt lösenord",
  "Next": "Nästa",
@@ -183,7 +183,7 @@
  "Type of room": "Rumstyp",
  "uppercase letter": "stor bokstav",
  "Use bonus cheque": "Use bonus cheque",
-  "User information": "Användar information",
+  "User information": "Användarinformation",
  "View your booking": "Visa din bokning",
  "Visiting address": "Besöksadress",
  "We could not add a card right now, please try again later.": "Vi kunde inte lägga till ett kort just nu, vänligen försök igen senare.",
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
        "@radix-ui/react-dialog": "^1.1.1",
        "@radix-ui/react-slot": "^1.0.2",
        "@react-aria/ssr": "^3.9.5",
-        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.8",
+        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.9",
        "@t3-oss/env-nextjs": "^0.9.2",
        "@tanstack/react-query": "^5.28.6",
        "@trpc/client": "^11.0.0-rc.467",
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-slot": "^1.0.2",
    "@react-aria/ssr": "^3.9.5",
-    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.8",
+    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.9",
    "@t3-oss/env-nextjs": "^0.9.2",
    "@tanstack/react-query": "^5.28.6",
    "@trpc/client": "^11.0.0-rc.467",
--- a/types/components/myPages/header.ts
+++ b/types/components/myPages/header.ts
@@ -5,7 +5,7 @@ export type HeaderProps = {
    href: string
    text: string
  }
-  subtitle: string | null
+  preamble: string | null
  textTransform?: HeadingProps["textTransform"]
  title: string | null
  topTitle?: boolean