scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Tobias Johansson
2024-09-03 08:43:13 +00:00
parent c0b16e8dee
commit bc3233ff64
27 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
View File

@@ -23,7 +23,7 @@ export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
<section className={styles.container}> <section className={styles.container}>
<article className={styles.content}> <article className={styles.content}>
<Subtitle type="two" color="black"> <Subtitle type="two" color="black">
{formatMessage({ id: "My credit cards" })} {formatMessage({ id: "My payment cards" })}
</Subtitle> </Subtitle>
<Body color="black"> <Body color="black">
{formatMessage({ {formatMessage({

2
components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -54,7 +54,7 @@ export function Rooms({ rooms }: RoomsProps) {
<SectionHeader <SectionHeader
textTransform="uppercase" textTransform="uppercase"
title={intl.formatMessage({ id: "Rooms" })} title={intl.formatMessage({ id: "Rooms" })}
subtitle={null} preamble={null}
/> />
<Grids.Stackable> <Grids.Stackable>
{mappedRooms.map( {mappedRooms.map(

2
components/Loyalty/Blocks/CardsGrid/index.tsx
View File

@@ -15,7 +15,7 @@ export default function CardsGrid({
<SectionContainer> <SectionContainer>
<SectionHeader <SectionHeader
title={cards_grid.title} title={cards_grid.title}
subtitle={cards_grid.preamble} preamble={cards_grid.preamble}
topTitle={firstItem} topTitle={firstItem}
/> />
<Grids.Stackable> <Grids.Stackable>

2
components/Loyalty/Blocks/DynamicContent/index.tsx
View File

@@ -53,7 +53,7 @@ export default function DynamicContent({
) : displayHeader ? ( ) : displayHeader ? (
<SectionHeader <SectionHeader
link={dynamicContent.link} link={dynamicContent.link}
subtitle={dynamicContent.subtitle} preamble={dynamicContent.subtitle}
title={dynamicContent.title} title={dynamicContent.title}
topTitle={firstItem} topTitle={firstItem}
/> />

2
components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
View File

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

2
components/MyPages/Blocks/Benefits/NextLevel/index.tsx
View File

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

2
components/MyPages/Blocks/Overview/index.tsx
View File

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

2
components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
View File

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

2
components/MyPages/Blocks/Points/Overview/index.tsx
View File

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

2
components/MyPages/Blocks/Shortcuts/index.tsx
View File

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

2
components/MyPages/Blocks/Stays/Previous/index.tsx
View File

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

2
components/MyPages/Blocks/Stays/Soonest/index.tsx
View File

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

2
components/MyPages/Blocks/Stays/Upcoming/index.tsx
View File

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

4
components/Section/Header/header.module.css
View File

@@ -6,7 +6,7 @@
} }
.title, .title,
.subtitle { .preamble {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@@ -19,7 +19,7 @@
grid-column: 1 / 2; grid-column: 1 / 2;
} }
.subtitle { .preamble {
grid-column: 1 / 2; grid-column: 1 / 2;
} }
} }

6
components/Section/Header/index.tsx
View File

@@ -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 Title from "@/components/TempDesignSystem/Text/Title"
import SectionLink from "../Link" import SectionLink from "../Link"
@@ -9,7 +9,7 @@ import type { HeaderProps } from "@/types/components/myPages/header"
export default function SectionHeader({ export default function SectionHeader({
link, link,
subtitle, preamble,
title, title,
topTitle = false, topTitle = false,
textTransform, textTransform,
@@ -24,7 +24,7 @@ export default function SectionHeader({
> >
{title} {title}
</Title> </Title>
{subtitle && <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>} {preamble && <Preamble className={styles.preamble}>{preamble}</Preamble>}
<SectionLink link={link} variant="desktop" /> <SectionLink link={link} variant="desktop" />
</header> </header>
) )

2
components/Section/Link/index.tsx
View File

@@ -20,8 +20,8 @@ export default function SectionLink({ link, variant }: SectionLinkProps) {
href={link.href} href={link.href}
variant="underscored" variant="underscored"
> >
<ArrowRight color="burgundy" className={styles.icon} />
{link.text} {link.text}
<ArrowRight color="burgundy" className={styles.icon} />
</Link> </Link>
) )
} }

6
components/TempDesignSystem/Link/link.module.css
View File

@@ -131,7 +131,7 @@
} }
.peach80 { .peach80 {
color: var(--Primary-Light-On-Surface-Accent); color: var(--Base-Text-Medium-contrast);
} }
.red { .red {
@@ -140,12 +140,12 @@
.peach80:hover, .peach80:hover,
.peach80:active { .peach80:active {
color: var(--Primary-Light-On-Surface-Hover); color: var(--Base-Text-High-contrast);
} }
.peach80:hover *, .peach80:hover *,
.peach80:active * { .peach80:active * {
fill: var(--Primary-Light-On-Surface-Hover); fill: var(--Base-Text-High-contrast);
} }
.white { .white {

2
components/TempDesignSystem/Text/Subtitle/variants.ts
View File

@@ -24,7 +24,7 @@ const config = {
}, },
}, },
defaultVariants: { defaultVariants: {
color: "burgundy", color: "black",
textAlign: "left", textAlign: "left",
textTransform: "regular", textTransform: "regular",
type: "one", type: "one",

2
i18n/dictionaries/da.json
View File

@@ -94,9 +94,9 @@
"Modify": "Ændre", "Modify": "Ændre",
"Month": "Måned", "Month": "Måned",
"My communication preferences": "Mine kommunikationspræferencer", "My communication preferences": "Mine kommunikationspræferencer",
"My credit cards": "Mine kreditkort",
"My membership cards": "Mine medlemskort", "My membership cards": "Mine medlemskort",
"My pages": "Mine sider", "My pages": "Mine sider",
"My payment cards": "Mine betalingskort",
"My wishes": "Mine ønsker", "My wishes": "Mine ønsker",
"New password": "Nyt kodeord", "New password": "Nyt kodeord",
"Next": "Næste", "Next": "Næste",

2
i18n/dictionaries/de.json
View File

@@ -92,9 +92,9 @@
"Modify": "Ändern", "Modify": "Ändern",
"Month": "Monat", "Month": "Monat",
"My communication preferences": "Meine Kommunikationseinstellungen", "My communication preferences": "Meine Kommunikationseinstellungen",
"My credit cards": "Meine Kreditkarten",
"My membership cards": "Meine Mitgliedskarten", "My membership cards": "Meine Mitgliedskarten",
"My pages": "Meine Seiten", "My pages": "Meine Seiten",
"My payment cards": "Meine Zahlungskarten",
"My wishes": "Meine Wünsche", "My wishes": "Meine Wünsche",
"New password": "Neues Kennwort", "New password": "Neues Kennwort",
"Next": "Nächste", "Next": "Nächste",

2
i18n/dictionaries/en.json
View File

@@ -99,9 +99,9 @@
"Modify": "Modify", "Modify": "Modify",
"Month": "Month", "Month": "Month",
"My communication preferences": "My communication preferences", "My communication preferences": "My communication preferences",
"My credit cards": "My credit cards",
"My membership cards": "My membership cards", "My membership cards": "My membership cards",
"My pages": "My pages", "My pages": "My pages",
"My payment cards": "My payment cards",
"My wishes": "My wishes", "My wishes": "My wishes",
"New password": "New password", "New password": "New password",
"Next": "Next", "Next": "Next",

2
i18n/dictionaries/fi.json
View File

@@ -94,9 +94,9 @@
"Modify": "Muokkaa", "Modify": "Muokkaa",
"Month": "Kuukausi", "Month": "Kuukausi",
"My communication preferences": "Viestintämieltymykseni", "My communication preferences": "Viestintämieltymykseni",
"My credit cards": "Luottokorttini",
"My membership cards": "Jäsenkorttini", "My membership cards": "Jäsenkorttini",
"My pages": "Omat sivut", "My pages": "Omat sivut",
"My payment cards": "Minun maksukortit",
"My wishes": "Toiveeni", "My wishes": "Toiveeni",
"New password": "Uusi salasana", "New password": "Uusi salasana",
"Next": "Seuraava", "Next": "Seuraava",

2
i18n/dictionaries/no.json
View File

@@ -94,9 +94,9 @@
"Modify": "Endre", "Modify": "Endre",
"Month": "Måned", "Month": "Måned",
"My communication preferences": "Mine kommunikasjonspreferanser", "My communication preferences": "Mine kommunikasjonspreferanser",
"My credit cards": "Kredittkortene mine",
"My membership cards": "Mine medlemskort", "My membership cards": "Mine medlemskort",
"My pages": "Mine sider", "My pages": "Mine sider",
"My payment cards": "Mine betalingskort",
"My wishes": "Mine ønsker", "My wishes": "Mine ønsker",
"New password": "Nytt passord", "New password": "Nytt passord",
"Next": "Neste", "Next": "Neste",

4
i18n/dictionaries/sv.json
View File

@@ -96,9 +96,9 @@
"Modify": "Ändra", "Modify": "Ändra",
"Month": "Månad", "Month": "Månad",
"My communication preferences": "Mina kommunikationspreferenser", "My communication preferences": "Mina kommunikationspreferenser",
"My credit cards": "Mina kreditkort",
"My membership cards": "Mina medlemskort", "My membership cards": "Mina medlemskort",
"My pages": "Mina sidor", "My pages": "Mina sidor",
"My payment cards": "Mina betalningskort",
"My wishes": "Mina önskningar", "My wishes": "Mina önskningar",
"New password": "Nytt lösenord", "New password": "Nytt lösenord",
"Next": "Nästa", "Next": "Nästa",
@@ -183,7 +183,7 @@
"Type of room": "Rumstyp", "Type of room": "Rumstyp",
"uppercase letter": "stor bokstav", "uppercase letter": "stor bokstav",
"Use bonus cheque": "Use bonus cheque", "Use bonus cheque": "Use bonus cheque",
"User information": "Användar information", "User information": "Användarinformation",
"View your booking": "Visa din bokning", "View your booking": "Visa din bokning",
"Visiting address": "Besöksadress", "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.", "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.",

2
package-lock.json generated
View File

@@ -19,7 +19,7 @@
"@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@react-aria/ssr": "^3.9.5", "@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", "@t3-oss/env-nextjs": "^0.9.2",
"@tanstack/react-query": "^5.28.6", "@tanstack/react-query": "^5.28.6",
"@trpc/client": "^11.0.0-rc.467", "@trpc/client": "^11.0.0-rc.467",

2
package.json
View File

@@ -35,7 +35,7 @@
"@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@react-aria/ssr": "^3.9.5", "@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", "@t3-oss/env-nextjs": "^0.9.2",
"@tanstack/react-query": "^5.28.6", "@tanstack/react-query": "^5.28.6",
"@trpc/client": "^11.0.0-rc.467", "@trpc/client": "^11.0.0-rc.467",

2
types/components/myPages/header.ts
View File

@@ -5,7 +5,7 @@ export type HeaderProps = {
href: string href: string
text: string text: string
} }
subtitle: string | null preamble: string | null
textTransform?: HeadingProps["textTransform"] textTransform?: HeadingProps["textTransform"]
title: string | null title: string | null
topTitle?: boolean topTitle?: boolean