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

Merged in feat/benefit-cards (pull request #334)

Browse Source 
feat: update benefit cards ui

Approved-by: Simon.Emanuelsson
This commit is contained in:
Matilda Landström
2024-07-09 11:14:30 +00:00
parent fc12356862
commit ada65b8612
6 changed files with 20 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
View File

@@ -1,7 +1,3 @@
.script {
transform: rotate(-2deg);
}
.card {
align-items: center;
background-color: var(--Scandic-Opacity-White-100);

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

@@ -5,10 +5,7 @@ import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Grids from "@/components/TempDesignSystem/Grids"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembershipLevelObject } from "@/utils/membershipLevel"
import { getMembership } from "@/utils/user"
@@ -24,7 +21,6 @@ export default async function CurrentBenefitsBlock({
lang,
}: AccountPageComponentProps & LangParams) {
const user = await serverClient().user.get()
const { formatMessage } = await getIntl()
// TAKE NOTE: we need clarification on how benefits stack from different levels
// in order to determine if a benefit is specific to a level or if it is a cumulative benefit
// we might have to add a new boolean property "exclusive" or similar
@@ -51,18 +47,16 @@ export default async function CurrentBenefitsBlock({
<SectionHeader title={title} link={link} subtitle={subtitle} />
<Grids.Scrollable>
{currentLevel.benefits.map((benefit, idx) => (
<Link className={styles.card} href="#" key={`${currentLevel}-${idx}`}>
<BiroScript
className={styles.script}
color="primaryLightOnSurfaceAccent"
type="two"
<article className={styles.card} key={`${currentLevel}-${idx}`}>
<Title
as="h5"
level="h3"
textAlign="center"
textTransform="uppercase"
>
{formatMessage({ id: "As our" })} {currentLevel.name}
</BiroScript>
<Title as="h5" level="h3" textAlign="center">
{benefit.title}
</Title>
</Link>
</article>
))}
</Grids.Scrollable>
<SectionLink link={link} variant="mobile" />

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

@@ -9,6 +9,7 @@ import SectionLink from "@/components/Section/Link"
import Chip from "@/components/TempDesignSystem/Chip"
import Grids from "@/components/TempDesignSystem/Grids"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { getMembershipLevelObject } from "@/utils/membershipLevel"
@@ -49,15 +50,14 @@ export default async function NextLevelBenefitsBlock({
{formatMessage({ id: "Level up to unlock" })}
</Chip>
<div>
<BiroScript
className={styles.level}
color="primaryLightOnSurfaceAccent"
textAlign="center"
type="two"
>
<Body color="peach50" textAlign="center">
{formatMessage({ id: "As our" })} {nextLevel.name}
</BiroScript>{" "}
<Subtitle color="pale" textAlign="center">
</Body>{" "}
<Subtitle
color="pale"
textAlign="center"
textTransform="uppercase"
>
{benefit.title}
</Subtitle>
</div>

4
components/MyPages/Blocks/Benefits/NextLevel/next.module.css
View File

@@ -8,7 +8,3 @@
justify-content: center;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
}
.level {
transform: rotate(-2deg);
}

4
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -65,3 +65,7 @@
.white {
color: var(--Scandic-Opacity-White-100);
}
.peach50 {
color: var(--Scandic-Peach-50);
}

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

@@ -11,6 +11,7 @@ const config = {
red: styles.red,
textMediumContrast: styles.textMediumContrast,
white: styles.white,
peach50: styles.peach50,
},
textAlign: {
center: styles.textAlignCenter,