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 { .card {
align-items: center; align-items: center;
background-color: var(--Scandic-Opacity-White-100); 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 SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import Grids from "@/components/TempDesignSystem/Grids" 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 Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembershipLevelObject } from "@/utils/membershipLevel" import { getMembershipLevelObject } from "@/utils/membershipLevel"
import { getMembership } from "@/utils/user" import { getMembership } from "@/utils/user"
@@ -24,7 +21,6 @@ export default async function CurrentBenefitsBlock({
lang, lang,
}: AccountPageComponentProps & LangParams) { }: AccountPageComponentProps & LangParams) {
const user = await serverClient().user.get() const user = await serverClient().user.get()
const { formatMessage } = await getIntl()
// TAKE NOTE: we need clarification on how benefits stack from different levels // 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 // 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 // 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} /> <SectionHeader title={title} link={link} subtitle={subtitle} />
<Grids.Scrollable> <Grids.Scrollable>
{currentLevel.benefits.map((benefit, idx) => ( {currentLevel.benefits.map((benefit, idx) => (
<Link className={styles.card} href="#" key={`${currentLevel}-${idx}`}> <article className={styles.card} key={`${currentLevel}-${idx}`}>
<BiroScript <Title
className={styles.script} as="h5"
color="primaryLightOnSurfaceAccent" level="h3"
type="two" textAlign="center"
textTransform="uppercase"
> >
{formatMessage({ id: "As our" })} {currentLevel.name}
</BiroScript>
<Title as="h5" level="h3" textAlign="center">
{benefit.title} {benefit.title}
</Title> </Title>
</Link> </article>
))} ))}
</Grids.Scrollable> </Grids.Scrollable>
<SectionLink link={link} variant="mobile" /> <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 Chip from "@/components/TempDesignSystem/Chip"
import Grids from "@/components/TempDesignSystem/Grids" import Grids from "@/components/TempDesignSystem/Grids"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getMembershipLevelObject } from "@/utils/membershipLevel" import { getMembershipLevelObject } from "@/utils/membershipLevel"
@@ -49,15 +50,14 @@ export default async function NextLevelBenefitsBlock({
{formatMessage({ id: "Level up to unlock" })} {formatMessage({ id: "Level up to unlock" })}
</Chip> </Chip>
<div> <div>
<BiroScript <Body color="peach50" textAlign="center">
className={styles.level}
color="primaryLightOnSurfaceAccent"
textAlign="center"
type="two"
>
{formatMessage({ id: "As our" })} {nextLevel.name} {formatMessage({ id: "As our" })} {nextLevel.name}
</BiroScript>{" "} </Body>{" "}
<Subtitle color="pale" textAlign="center"> <Subtitle
color="pale"
textAlign="center"
textTransform="uppercase"
>
{benefit.title} {benefit.title}
</Subtitle> </Subtitle>
</div> </div>

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

@@ -8,7 +8,3 @@
justify-content: center; justify-content: center;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7); 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 { .white {
color: var(--Scandic-Opacity-White-100); 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, red: styles.red,
textMediumContrast: styles.textMediumContrast, textMediumContrast: styles.textMediumContrast,
white: styles.white, white: styles.white,
peach50: styles.peach50,
}, },
textAlign: { textAlign: {
center: styles.textAlignCenter, center: styles.textAlignCenter,