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

style(SW-762): update styling for headings

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-01 15:02:14 +01:00
parent d5efaa686c
commit fdd48ff48a
16 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -51,7 +51,7 @@ async function LevelCard({ level }: LevelCardProps) {
</BiroScript>
<MembershipLevelIcon level={level.level_id} color="red" />
</header>
<Title textAlign="center" level="h5">
<Title textAlign="center" level="h4">
{pointsString}
{level.required_nights ? (
<span className={styles.redText}>

2
components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
View File

@@ -70,7 +70,7 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
<details className={styles.details}>
<summary className={styles.summary}>
<hgroup className={styles.rewardHeader}>
<Title as="h5" level="h2" textTransform={"regular"}>
<Title as="h4" level="h2" textTransform={"regular"}>
{name}
</Title>
<span className={styles.chevron}>

2
components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx
View File

@@ -19,7 +19,7 @@ export default function RewardCard({
<details className={styles.details}>
<summary className={styles.summary}>
<hgroup className={styles.rewardCardHeader}>
<Title as="h5" level="h2" textTransform={"regular"}>
<Title as="h4" level="h2" textTransform={"regular"}>
{title}
</Title>
<span className={styles.chevron}>

2
components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
View File

@@ -56,7 +56,7 @@ export default async function NextLevelRewardsBlock({
{ level: nextLevelRewards.level?.name }
)}
</Body>
<Title level="h4" as="h5" color="pale" textAlign="center">
<Title level="h4" as="h4" color="pale" textAlign="center">
{reward.label}
</Title>
</div>

2
components/Blocks/DynamicContent/Stays/Previous/EmptyPreviousStays/index.tsx
View File

@@ -7,7 +7,7 @@ export default async function EmptyPreviousStaysBlock() {
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>
<Title as="h5" level="h3" color="red" textAlign="center">
<Title as="h4" level="h3" color="red" textAlign="center">
{formatMessage({
id: "You have no previous stays.",
})}

2
components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -14,7 +14,7 @@ export default async function EmptyUpcomingStaysBlock() {
return (
<section className={styles.container}>
<div className={styles.titleContainer}>
<Title as="h5" level="h3" color="red" className={styles.title}>
<Title as="h4" level="h3" color="red" className={styles.title}>
{formatMessage({ id: "You have no upcoming stays." })}
<span className={styles.burgundyTitle}>
{formatMessage({ id: "Where should you go next?" })}

2
components/Blocks/DynamicContent/Stays/StayCard/index.tsx
View File

@@ -47,7 +47,7 @@ export default function StayCard({ stay }: StayCardProps) {
height={240}
/>
<footer className={styles.footer}>
<Title as="h5" className={styles.hotel} level="h3">
<Title as="h4" className={styles.hotel} level="h3">
{hotelInformation.hotelName}
</Title>
<div className={styles.date}>

2
components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -14,7 +14,7 @@ export default async function EmptyUpcomingStaysBlock() {
return (
<section className={styles.container}>
<div className={styles.titleContainer}>
<Title as="h5" level="h3" color="red" className={styles.title}>
<Title as="h4" level="h3" color="red" className={styles.title}>
{formatMessage({ id: "You have no upcoming stays." })}
<span className={styles.burgundyTitle}>
{formatMessage({ id: "Where should you go next?" })}

2
components/Current/Header/MyPagesMobileDropdown/index.tsx
View File

@@ -34,7 +34,7 @@ export default function MyPagesMobileDropdown({
<nav
className={`${styles.navigationMenu} ${isMyPagesMobileMenuOpen ? styles.navigationMenuIsOpen : ""}`}
>
<Title className={styles.heading} textTransform="capitalize" level="h5">
<Title className={styles.heading} textTransform="capitalize" level="h4">
{navigation.title}
</Title>
{navigation.menuItems.map((menuItem, idx) => (

2
components/DeprecatedJsonToHtml/renderOptions.tsx
View File

@@ -198,7 +198,7 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<Title key={node.uid} {...props} level="h5">
<Title key={node.uid} {...props} level="h4">
{next(node.children, embeds, fullRenderOptions)}
</Title>
)

2
components/HotelReservation/SelectRate/SelectionCard/index.tsx
View File

@@ -20,7 +20,7 @@ export default function SelectionCard({
return (
<div className={styles.card}>
<div>
<Title className={styles.name} as="h5" level="h3">
<Title className={styles.name} as="h4" level="h3">
{title}
</Title>
<div className={styles.nameInfo}>i</div>

2
components/JsonToHtml/renderOptions.tsx
View File

@@ -221,7 +221,7 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<Title key={node.uid} {...props} level="h5">
<Title key={node.uid} {...props} level="h4">
{next(node.children, embeds, fullRenderOptions)}
</Title>
)

2
components/TempDesignSystem/LoyaltyCard/index.tsx
View File

@@ -35,7 +35,7 @@ export default function LoyaltyCard({
focalPoint={image.focalPoint}
/>
) : null}
<Title as="h5" level="h3" textAlign="center">
<Title as="h4" level="h3" textAlign="center">
{heading}
</Title>
{bodyText ? <Body textAlign="center">{bodyText}</Body> : null}

14
components/TempDesignSystem/Text/Title/title.module.css
View File

@@ -4,7 +4,9 @@
font-weight: 500;
}
.h1 {
/* Temporarily remove h1 styling until design tokens är updated */
/* .h1 {
font-family: var(--typography-Title-1-fontFamily);
font-size: clamp(
var(--typography-Title-1-Mobile-fontSize),
@@ -14,9 +16,9 @@
letter-spacing: var(--typography-Title-1-letterSpacing);
line-height: var(--typography-Title-1-lineHeight);
text-decoration: var(--typography-Title-1-textDecoration);
}
} */
.h2 {
.h1 {
font-family: var(--typography-Title-2-fontFamily);
font-size: clamp(
var(--typography-Title-2-Mobile-fontSize),
@@ -28,7 +30,7 @@
text-decoration: var(--typography-Title-2-textDecoration);
}
.h3 {
.h2 {
font-family: var(--typography-Title-3-fontFamily);
font-size: clamp(
var(--typography-Title-3-Mobile-fontSize),
@@ -40,7 +42,7 @@
text-decoration: var(--typography-Title-3-textDecoration);
}
.h4 {
.h3 {
font-family: var(--typography-Title-4-fontFamily);
font-size: clamp(
var(--typography-Title-4-Mobile-fontSize),
@@ -52,7 +54,7 @@
text-decoration: var(--typography-Title-4-textDecoration);
}
.h5 {
.h4 {
font-family: var(--typography-Title-5-fontFamily);
font-size: clamp(
var(--typography-Title-5-Mobile-fontSize),

2
components/TempDesignSystem/Text/Title/title.ts
View File

@@ -2,7 +2,7 @@ import { headingVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
type HeadingLevel = "h1" | "h2" | "h3" | "h4"
export interface HeadingProps
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,

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

@@ -26,7 +26,6 @@ const config = {
h2: styles.h2,
h3: styles.h3,
h4: styles.h4,
h5: styles.h5,
},
},
defaultVariants: {