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

Merged in chore/BOOK-773-replace-old-typography-variables (pull request #3515)

Browse Source 
Chore/BOOK-773 replace old typography variables

* chore(BOOK-773): Replaced body typography

* chore(BOOK-773): Replaced caption typography

* chore(BOOK-773): Replaced footnote typography

* chore(BOOK-773): Replaced subtitle typography


Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2026-02-03 15:07:18 +00:00
committed by Bianca Widstam
parent dd65467573
commit b3c4761ae5
57 changed files with 261 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css
View File

@@ -16,18 +16,14 @@
.iconTh {
padding: var(--Space-x5) var(--Space-x2) var(--Space-x2);
font-weight: var(--typography-Caption-Regular-fontWeight);
vertical-align: bottom;
}
.summaryTh {
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: var(--typography-Caption-Regular-fontWeight);
padding: 0 var(--Space-x2) var(--Space-x2);
vertical-align: top;
}
.select {
font-weight: var(--typography-Caption-Regular-fontWeight);
padding: 0 var(--Space-x2) var(--Space-x2);
}

14
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx
View File

@@ -1,3 +1,5 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import MembershipLevelIcon from "@/components/Levels/Icon"
import LevelSummary from "../../LevelSummary"
@@ -37,12 +39,14 @@ export default function DesktopHeader({
<th />
{levels.map((level, idx) => {
return (
<th
key={"summary" + level.level_id + idx}
className={styles.summaryTh}
<Typography
variant="Body/Supporting text (caption)/smRegular"
key={"name" + level.level_id + idx}
>
<LevelSummary level={level} />
</th>
<th className={styles.summaryTh}>
<LevelSummary level={level} />
</th>
</Typography>
)
})}
</tr>

10
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
View File

@@ -82,10 +82,12 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
</span>
</hgroup>
</summary>
<p
className={styles.rewardDescription}
dangerouslySetInnerHTML={{ __html: description }}
/>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p
className={styles.rewardDescription}
dangerouslySetInnerHTML={{ __html: description }}
/>
</Typography>
</details>
)
}

3
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
View File

@@ -15,14 +15,11 @@
}
.td {
font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center;
}
.rewardTh {
padding: var(--Space-x3) var(--Space-x2);
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: var(--typography-Caption-Regular-fontWeight);
}
.details[open] .chevron {

6
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx
View File

@@ -1,5 +1,7 @@
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./levelSummary.module.css"
import type { LevelSummaryProps } from "@/types/components/overviewTable"
@@ -32,7 +34,9 @@ export default function LevelSummary({
return (
<div className={styles.levelSummary}>
<span className={styles.levelRequirements}>{pointsMsg}</span>
<Typography variant="Label/xsRegular">
<span className={styles.levelRequirements}>{pointsMsg}</span>
</Typography>
{showDescription && (
<p className={styles.levelSummaryText}>{level.description}</p>
)}

15
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
View File

@@ -8,16 +8,14 @@
.levelRequirements {
border-radius: var(--Corner-Radius-md);
background-color: var(--Scandic-Brand-Pale-Peach);
color: var(--Scandic-Peach-80);
background-color: var(--Surface-Brand-Primary-1-Default);
color: var(--Text-Interactive-Secondary);
padding: var(--Space-x05) var(--Space-x1);
text-align: center;
width: 100%;
}
.levelSummaryText {
font-size: var(--typography-Caption-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
margin: 0;
}
@@ -26,12 +24,3 @@
padding: var(--Space-x05) var(--Space-x1);
}
}
@media screen and (min-width: 1367px) {
.levelRequirements {
font-size: var(--typography-Footnote-Regular-fontSize);
}
.levelSummaryText {
font-size: var(--typography-Caption-Regular-fontSize);
}
}

10
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx
View File

@@ -27,10 +27,12 @@ export default function RewardCard({
</span>
</hgroup>
</summary>
<p
className={styles.rewardCardDescription}
dangerouslySetInnerHTML={{ __html: description }}
/>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p
className={styles.rewardCardDescription}
dangerouslySetInnerHTML={{ __html: description }}
/>
</Typography>
</details>
</div>
<div className={styles.rewardComparison}>

2
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css
View File

@@ -12,8 +12,6 @@
}
.rewardCardDescription {
font-size: var(--typography-Caption-Regular-fontSize);
line-height: 150%;
padding-right: var(--Space-x4);
}

7
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx
View File

@@ -1,6 +1,7 @@
import { Minus } from "react-feather"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./rewardValue.module.css"
@@ -21,8 +22,8 @@ export default function RewardValue({ reward }: RewardValueProps) {
)
}
return (
<div className={styles.rewardValueContainer}>
<span className={styles.rewardValue}>{reward.value}</span>
</div>
<Typography variant="Body/Paragraph/mdBold">
<div className={styles.rewardValueContainer}>{reward.value}</div>
</Typography>
)
}

11
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css
View File

@@ -7,17 +7,6 @@
text-wrap: balance;
}
.rewardValue {
font-size: var(--typography-Body-Bold-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight);
}
.rewardValueDetails {
font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center;
color: var(--UI-Grey-80);
}
.checkIcon {
display: inline-flex;
}