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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,23 @@
"use client"
import { useParams } from "next/navigation"
import { Check } from "react-feather"
import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages"
import Image from "@/components/Image"
import { CheckIcon } from "@/components/Icons"
import {
BestFriend,
CloseFriend,
DearFriend,
GoodFriend,
LoyalFriend,
NewFriend,
TrueFriend,
} from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "./data"
@@ -35,13 +44,11 @@ export default function LoyaltyLevels() {
/>
))}
</div>
<div className={styles.buttonContainer}>
<Button intent="primary" asChild>
<Link href={`/${lang}/compare-all-levels`}>
{formatMessage({ id: "Compare all levels" })}
</Link>
</Button>
</div>
<Button asChild intent="primary">
<Link className={styles.link} href={`/${lang}/compare-all-levels`}>
{formatMessage({ id: "Compare all levels" })}
</Link>
</Button>
</section>
)
}
@@ -51,19 +58,46 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
const qualifications = level.requiredNights
? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
: pointsString
let Level = null
switch (level.tier) {
case 1:
Level = NewFriend
break
case 2:
Level = GoodFriend
break
case 3:
Level = CloseFriend
break
case 4:
Level = DearFriend
break
case 5:
Level = LoyalFriend
break
case 6:
Level = TrueFriend
break
case 7:
Level = BestFriend
break
}
return (
<article className={styles.card}>
<Title className={styles.tierHeading} level="h4">
{level.tier}
</Title>
<Image src={level.icon} alt={level.name} width={140} height={54} />
<p className={styles.qualifications}>{qualifications}</p>
{level.benefits.map((benefit) => (
<p key={benefit.title} className={styles.benefits}>
<Check className={styles.icon} />
{benefit.title}
</p>
))}
{Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
<div className={styles.textContainer}>
<Body textTransform="bold">{qualifications}</Body>
{level.benefits.map((benefit) => (
<Body key={benefit.title} textAlign="center">
<CheckIcon className={styles.checkIcon} />
{benefit.title}
</Body>
))}
</div>
</article>
)
}

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

@@ -1,86 +1,69 @@
.container {
display: grid;
gap: 2.4rem;
}
.buttonContainer {
display: flex;
justify-content: center;
gap: var(--Spacing-x3);
}
.cardContainer {
display: flex;
gap: 0.8rem;
display: grid;
gap: var(--Spacing-x2);
margin-right: calc(0px - var(--Spacing-x2));
overflow-x: auto;
padding-right: 1.6rem;
margin-right: -1.6rem;
padding-right: var(--Spacing-x2);
/* Hide scrollbar IE and Edge */
-ms-overflow-style: none;
/* Hide Scrollbar Firefox */
scrollbar-width: none;
}
.link {
justify-self: center;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
height: 37rem;
min-width: 32rem;
padding: 4rem 1rem;
align-content: flex-start;
background-color: var(--UI-Grey-10);
border-radius: 1.6rem;
gap: 1.8rem;
border-radius: var(--Corner-radius-xLarge);
display: grid;
gap: var(--Spacing-x2);
justify-content: center;
justify-items: center;
padding: var(--Spacing-x5) var(--Spacing-x1);
}
.tierHeading {
color: #b05b65;
color: var(--Scandic-Peach-70);
}
.qualifications {
margin: 0;
font-size: var(--typography-Body-Bold-fontSize);
line-height: var(--typography-Body-Bold-lineHeight);
/* font-weight: var(--typography-Body-Bold-fontWeight); -- Tokens not parsable*/
font-weight: 600;
.textContainer {
align-content: flex-start;
display: grid;
gap: var(--Spacing-x-one-and-half);
justify-content: center;
justify-items: center;
}
.benefits {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
margin: 0;
text-align: center;
}
.icon {
font-family: var(--typography-Body-Regular-fontFamily);
position: relative;
top: 0.3rem;
height: 1.4rem;
.checkIcon {
vertical-align: text-bottom;
}
@media screen and (min-width: 1367px) {
.container {
gap: 3.2rem;
gap: var(--Spacing-x4);
}
.cardContainer {
display: grid;
grid-template-columns: repeat(12, auto);
grid-template-columns: repeat(12, 1fr);
margin-right: 0;
/* Three columns in the first row */
padding-right: 0;
margin-right: 0rem;
}
.card {
min-width: auto;
}
.card:nth-child(-n + 3) {
.card:nth-of-type(-n + 3) {
grid-column: span 4;
}
.card:nth-last-child(-n + 4) {
.card:nth-of-type(n + 4) {
grid-column: span 3;
}
}