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

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
@@ -1,5 +0,0 @@
@media screen and (max-width: 1366px) {
.membershipBtn {
display: none;
}
}
@@ -1,5 +0,0 @@
import styles from "./label.module.css"
export default function Label({ children }: React.PropsWithChildren) {
return <span className={styles.label}>{children}</span>
}
@@ -1,9 +0,0 @@
.label {
color: var(--Scandic-Brand-Pale-Peach);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
margin: 0;
}
@@ -1,9 +1,8 @@
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import Label from "../Label"
import styles from "./nextLevel.module.css"
import type { UserProps } from "@/types/components/myPages/user"
@@ -12,7 +11,7 @@ export default async function NextLevel({}: UserProps) {
const { formatMessage } = await getIntl()
return (
<section>
<Label>{formatMessage({ id: "Next level" })}:</Label>
<Body color="pale">{formatMessage({ id: "Next level" })}:</Body>
<Title className={styles.nextLevel} color="pale" level="h3">
N/A
<BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
@@ -1,9 +1,8 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"
import Label from "../Label"
import styles from "./totalPoints.module.css"
import type { UserProps } from "@/types/components/myPages/user"
@@ -14,14 +13,16 @@ export default async function Points({ user }: UserProps) {
return (
<section className={styles.points}>
<article>
<Label>{formatMessage({ id: "Total Points" })}</Label>
<Title color="pale" level="h2">
<Body color="pale">{formatMessage({ id: "Total Points" })}</Body>
<Title color="pale" hideEmpty={false} level="h2">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>
<article>
<Label>{formatMessage({ id: "Points until next level" })}</Label>
<Title color="pale" level="h2">
<Body color="pale">
{formatMessage({ id: "Points until next level" })}
</Body>
<Title color="pale" hideEmpty={false} level="h2">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>
@@ -1,6 +1,6 @@
.container {
display: grid;
gap: 1.5rem;
gap: var(--Spacing-x7);
}
.overview {