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

fix: update loyalty cards and join loyalty sidebar design

Browse Source
This commit is contained in:
Christel Westerberg
2024-06-27 16:44:40 +02:00
parent 33771a0608
commit 5be118d9e5
20 changed files with 166 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Icons/ArrowRight.tsx
View File

@@ -5,6 +5,8 @@ import type { IconProps } from "@/types/components/icon"
export default function ArrowRightIcon({ export default function ArrowRightIcon({
className, className,
color, color,
height = "25",
width = "24",
...props ...props
}: IconProps) { }: IconProps) {
const classNames = iconVariants({ className, color }) const classNames = iconVariants({ className, color })
@@ -12,9 +14,9 @@ export default function ArrowRightIcon({
<svg <svg
className={classNames} className={classNames}
fill="none" fill="none"
height="25" height={height}
viewBox="0 0 24 25" viewBox="0 0 24 25"
width="24" width={width}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...props} {...props}
> >

12
components/Icons/Email.tsx
View File

@@ -2,15 +2,21 @@ import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon" import type { IconProps } from "@/types/components/icon"
export default function EmailIcon({ className, color, ...props }: IconProps) { export default function EmailIcon({
className,
color,
width = "20",
height = "20",
...props
}: IconProps) {
const classNames = iconVariants({ className, color }) const classNames = iconVariants({ className, color })
return ( return (
<svg <svg
className={classNames} className={classNames}
fill="none" fill="none"
height="20" height={height}
viewBox="0 0 20 20" viewBox="0 0 20 20"
width="20" width={width}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...props} {...props}
> >

12
components/Icons/Phone.tsx
View File

@@ -2,15 +2,21 @@ import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon" import type { IconProps } from "@/types/components/icon"
export default function PhoneIcon({ className, color, ...props }: IconProps) { export default function PhoneIcon({
className,
color,
height = "24",
width = "24",
...props
}: IconProps) {
const classNames = iconVariants({ className, color }) const classNames = iconVariants({ className, color })
return ( return (
<svg <svg
className={classNames} className={classNames}
fill="none" fill="none"
height="24" height={height}
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="24" width={width}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...props} {...props}
> >

41
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import { useParams } from "next/navigation" import { notFound, useParams } from "next/navigation"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages" import { Lang } from "@/constants/languages"
@@ -15,7 +15,8 @@ import {
NewFriend, NewFriend,
TrueFriend, TrueFriend,
} from "@/components/Levels" } from "@/components/Levels"
import Body from "@/components/TempDesignSystem/Text/Body" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "./data" import levelsData from "./data"
@@ -45,7 +46,7 @@ export default function LoyaltyLevels() {
} }
function LevelCard({ formatMessage, lang, level }: LevelCardProps) { function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
const pointsString = `${level.requiredPoints.toLocaleString(lang)}p` const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} `
const qualifications = level.requiredNights const qualifications = level.requiredNights
? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}` ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
: pointsString : pointsString
@@ -73,20 +74,40 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
case 7: case 7:
Level = BestFriend Level = BestFriend
break break
default: {
const loyaltyLevel = level.level as never
console.error(`Unsupported loyalty level given: ${loyaltyLevel}`)
notFound()
}
} }
return ( return (
<article className={styles.card}> <article className={styles.card}>
<Title className={styles.levelHeading} level="h4"> <section>
{level.level} <BiroScript
type="two"
color="primaryLightOnSurfaceAccent"
tilted="large"
>
{formatMessage({ id: "Level" })} {level.level}
</BiroScript>
<Level color="red" />
</section>
<Title textAlign="center" level="h5">
{qualifications}
</Title> </Title>
{Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
<div className={styles.textContainer}> <div className={styles.textContainer}>
<Body textTransform="bold">{qualifications}</Body>
{level.benefits.map((benefit) => ( {level.benefits.map((benefit) => (
<Body key={benefit.title} textAlign="center"> <Footnote
<CheckIcon className={styles.checkIcon} /> key={benefit.title}
textAlign="center"
color="textMediumContrast"
>
<CheckIcon
className={styles.checkIcon}
color="primaryLightOnSurfaceAccent"
/>
{benefit.title} {benefit.title}
</Body> </Footnote>
))} ))}
</div> </div>
</article> </article>

26
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
View File

@@ -1,8 +1,3 @@
.container {
display: grid;
gap: var(--Spacing-x3);
}
.cardContainer { .cardContainer {
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
@@ -20,37 +15,30 @@
} }
.card { .card {
align-content: flex-start; background-color: var(--Scandic-Brand-Pale-Peach);
background-color: var(--UI-Grey-10);
border-radius: var(--Corner-radius-xLarge); border-radius: var(--Corner-radius-xLarge);
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
min-height: 280px;
justify-content: center; justify-content: center;
justify-items: center; justify-items: center;
padding: var(--Spacing-x5) var(--Spacing-x1); padding: var(--Spacing-x5) var(--Spacing-x1);
} }
.levelHeading {
color: var(--Scandic-Peach-70);
}
.textContainer { .textContainer {
align-content: flex-start; align-content: flex-end;
display: grid; display: flex;
gap: var(--Spacing-x-one-and-half); gap: var(--Spacing-x-one-and-half);
width: 100%;
flex-wrap: wrap;
justify-content: center; justify-content: center;
justify-items: center;
} }
.checkIcon { .checkIcon {
vertical-align: text-bottom; vertical-align: middle;
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.container {
gap: var(--Spacing-x4);
}
.cardContainer { .cardContainer {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);

8
components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
View File

@@ -1,5 +1,5 @@
.icon, .link {
.icon * { display: flex;
fill: var(--Scandic-Brand-Burgundy); align-items: center;
margin-bottom: var(--Spacing-x-half); gap: var(--Spacing-x1);
} }

24
components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
View File

@@ -1,7 +1,9 @@
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import { EmailIcon, PhoneIcon } from "@/components/Icons" import { EmailIcon, PhoneIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getValueFromContactConfig } from "@/utils/contactConfig" import { getValueFromContactConfig } from "@/utils/contactConfig"
import styles from "./contactRow.module.css" import styles from "./contactRow.module.css"
@@ -27,15 +29,29 @@ export default async function ContactRow({ contact }: ContactRowProps) {
Icon = PhoneIcon Icon = PhoneIcon
} }
let openableLink = val
if (contact.contact_field.includes("email")) {
openableLink = `mailto:${val}`
} else if (contact.contact_field.includes("phone")) {
openableLink = `tel:${val}`
}
return ( return (
<div> <div>
{Icon ? <Icon className={styles.icon} /> : null} <Body color="burgundy" textTransform="bold">
<Body color="burgundy" textAlign="center" textTransform="bold">
{contact.display_text} {contact.display_text}
</Body> </Body>
<Body color="burgundy" textAlign="center"> <Link
className={styles.link}
href={openableLink}
variant="myPage"
color="burgundy"
size="small"
>
{Icon ? <Icon width="20" height="20" color="burgundy" /> : null}
{val} {val}
</Body> </Link>
<Footnote color="burgundy">{contact.footnote}</Footnote>
</div> </div>
) )
} }

6
components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
View File

@@ -4,14 +4,12 @@
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.contactContainer { .contactContainer {
align-items: center;
border-top: 1px solid var(--UI-Grey-30); border-top: 1px solid var(--UI-Grey-30);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x5); gap: var(--Spacing-x2);
justify-content: center; justify-content: center;
padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5); padding-top: var(--Spacing-x2);
text-align: center;
} }
.contact { .contact {

4
components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
View File

@@ -12,9 +12,7 @@ export default async function Contact({ contactBlock }: ContactProps) {
const { formatMessage } = await getIntl() const { formatMessage } = await getIntl()
return ( return (
<article className={styles.contactContainer}> <article className={styles.contactContainer}>
<Subtitle textAlign="center"> <Subtitle>{formatMessage({ id: "Contact us" })}</Subtitle>
{formatMessage({ id: "Contact us" })}
</Subtitle>
<section className={styles.contact}> <section className={styles.contact}>
{contactBlock.map(({ contact, __typename }, i) => { {contactBlock.map(({ contact, __typename }, i) => {
switch (__typename) { switch (__typename) {

46
components/Loyalty/Sidebar/JoinLoyalty/index.tsx
View File

@@ -1,10 +1,10 @@
import { login } from "@/constants/routes/handleAuth" import { login } from "@/constants/routes/handleAuth"
import ArrowRight from "@/components/Icons/ArrowRight"
import { ScandicFriends } from "@/components/Levels" import { ScandicFriends } from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
@@ -21,28 +21,38 @@ export default async function JoinLoyaltyContact({
}: JoinLoyaltyContactProps & LangParams) { }: JoinLoyaltyContactProps & LangParams) {
const { formatMessage } = await getIntl() const { formatMessage } = await getIntl()
return ( return (
<section className={styles.container}> <section>
<article className={styles.wrapper}> <article className={styles.wrapper}>
<Title as="h4" level="h3"> <Title as="h4" level="h3">
{block.title} {block.title}
</Title> </Title>
<ScandicFriends color="primaryLightOnSurfaceAccent" /> <ScandicFriends color="red" />
{block.preamble ? ( {block.preamble ? <Body>{block.preamble}</Body> : null}
<Body textAlign="center">{block.preamble}</Body> <Button asChild intent="primary" theme="base" className={styles.button}>
) : null} <Link href={login[lang]} color="white">
<Button asChild intent="primary"> {formatMessage({ id: "Join Scandic Friends" })}
<Body asChild fontOnly textAlign="center" textTransform="bold">
<Link href={login[lang]}>
{formatMessage({ id: "Join Scandic Friends" })}
</Link>
</Body>
</Button>
<Footnote asChild fontOnly textAlign="center" textTransform="bold">
<Link color="burgundy" href={`/${lang}/login`}>
{formatMessage({ id: "Already a friend?" })} <br />
{formatMessage({ id: "Click here to log in" })}
</Link> </Link>
</Footnote> </Button>
<section className={styles.loginContainer}>
<Body>{formatMessage({ id: "Already a friend?" })}</Body>
<span className={styles.linkWrapper}>
<ArrowRight
color="burgundy"
className={styles.icon}
height="20"
width="20"
/>
<Link
className={styles.link}
color="burgundy"
href={`/${lang}/login`}
variant="icon"
size="small"
>
{formatMessage({ id: "Log in here" })}
</Link>
</span>
</section>
</article> </article>
{block.contact ? <Contact contactBlock={block.contact} /> : null} {block.contact ? <Contact contactBlock={block.contact} /> : null}
</section> </section>

32
components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
View File

@@ -1,12 +1,30 @@
.container { .wrapper {
background-color: var(--Main-Grey-White);
display: grid; display: grid;
gap: var(--Spacing-x3);
padding-bottom: var(--Spacing-x5);
padding-top: var(--Spacing-x4);
} }
.wrapper { .loginContainer {
display: grid;
gap: var(--Spacing-x2);
}
.button {
width: fit-content;
}
.linkWrapper {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; gap: var(--Spacing-x-half);
gap: var(--Spacing-x5); }
padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
} .link {
display: flex;
align-items: center;
}
.icon {
align-self: center;
}

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

@@ -16,7 +16,7 @@ export default function SectionHeader({
return ( return (
<header className={styles.header}> <header className={styles.header}>
<Title <Title
as={topTitle ? "h2" : "h3"} as={topTitle ? "h3" : "h4"}
className={styles.title} className={styles.title}
level={topTitle ? "h1" : "h2"} level={topTitle ? "h1" : "h2"}
> >

2
components/TempDesignSystem/Card/index.tsx
View File

@@ -1,5 +1,4 @@
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
@@ -47,7 +46,6 @@ export default function Card({
<BiroScript className={styles.scriptedTitle} type="two"> <BiroScript className={styles.scriptedTitle} type="two">
{scriptedTopTitle} {scriptedTopTitle}
</BiroScript> </BiroScript>
<Divider />
</section> </section>
) : null} ) : null}
<Title as="h5" className={styles.heading} level="h3"> <Title as="h5" className={styles.heading} level="h3">

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

@@ -102,6 +102,10 @@
color: var(--Scandic-Peach-80); color: var(--Scandic-Peach-80);
} }
.white {
color: var(--Base-Button-Primary-On-Fill-Normal);
}
.regular { .regular {
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize); font-size: var(--typography-Body-Regular-fontSize);

1
components/TempDesignSystem/Link/variants.ts
View File

@@ -13,6 +13,7 @@ export const linkVariants = cva(styles.link, {
none: "", none: "",
pale: styles.pale, pale: styles.pale,
peach80: styles.peach80, peach80: styles.peach80,
white: styles.white,
}, },
size: { size: {
small: styles.small, small: styles.small,

8
components/TempDesignSystem/Text/BiroScript/biroScript.module.css
View File

@@ -26,6 +26,14 @@
line-height: var(--typography-Script-2-lineHeight); line-height: var(--typography-Script-2-lineHeight);
} }
.tiltedSmall {
transform: rotate(-2deg);
}
.tiltedLarge {
transform: rotate(-13deg) translate(0px, -15px);
}
.center { .center {
text-align: center; text-align: center;
} }

2
components/TempDesignSystem/Text/BiroScript/index.tsx
View File

@@ -10,6 +10,7 @@ export default function BiroScript({
color, color,
textAlign, textAlign,
type, type,
tilted,
...props ...props
}: BiroScriptProps) { }: BiroScriptProps) {
const Comp = asChild ? Slot : "span" const Comp = asChild ? Slot : "span"
@@ -18,6 +19,7 @@ export default function BiroScript({
color, color,
textAlign, textAlign,
type, type,
tilted,
}) })
return <Comp className={classNames} {...props} /> return <Comp className={classNames} {...props} />
} }

4
components/TempDesignSystem/Text/BiroScript/variants.ts
View File

@@ -19,6 +19,10 @@ const config = {
one: styles.one, one: styles.one,
two: styles.two, two: styles.two,
}, },
tilted: {
small: styles.tiltedSmall,
large: styles.tiltedLarge,
},
}, },
defaultVariants: { defaultVariants: {
type: "one", type: "one",

6
components/TempDesignSystem/Text/Footnote/footnote.module.css
View File

@@ -43,4 +43,8 @@
.pale { .pale {
color: var(--Scandic-Brand-Pale-Peach); color: var(--Scandic-Brand-Pale-Peach);
} }
.textMediumContrast {
color: var(--Base-Text-UI-Medium-contrast);
}

1
components/TempDesignSystem/Text/Footnote/variants.ts
View File

@@ -8,6 +8,7 @@ const config = {
black: styles.black, black: styles.black,
burgundy: styles.burgundy, burgundy: styles.burgundy,
pale: styles.pale, pale: styles.pale,
textMediumContrast: styles.textMediumContrast,
}, },
textAlign: { textAlign: {
center: styles.center, center: styles.center,