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

Merged in feat/SW-1962-text-weight (pull request #1602)

Browse Source 
Feat(SW-1962): Fix title weights

* feat(SW-1962): Fix title weights


Approved-by: Christian Andolf
Approved-by: Fredrik Thorsson
This commit is contained in:
Matilda Landström
2025-03-24 08:52:17 +00:00
parent 4ab7117244
commit b972679c6e
7 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
View File

@@ -29,6 +29,10 @@
width: fit-content;
}
.facility {
color: var(--Text-Secondary);
}
@media screen and (min-width: 1367px) {
.amenitiesContainer {
margin-top: var(--Spacing-x5);

18
apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx
View File

@@ -1,8 +1,8 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import styles from "./amenitiesList.module.css"
@@ -18,9 +18,9 @@ export default async function AmenitiesList({
return (
<section className={styles.amenitiesContainer}>
<Subtitle type="two" color="black">
{intl.formatMessage({ id: "At the hotel" })}
</Subtitle>
<Typography variant="Title/Subtitle/md">
<p>{intl.formatMessage({ id: "At the hotel" })}</p>
</Typography>
<div className={styles.amenityItemList}>
{facilities.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
@@ -34,7 +34,12 @@ export default async function AmenitiesList({
height={20}
/>
)}
<Body color="uiTextMediumContrast">{facility.name}</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.facility}
>
<p>{facility.name}</p>
</Typography>
</div>
)
})}
@@ -44,6 +49,7 @@ export default async function AmenitiesList({
href={`#s-${SidepeekSlugs.amenities}`}
color="burgundy"
variant="icon"
weight="bold"
className={styles.showAllAmenities}
>
{intl.formatMessage({ id: "See all amenities" })}

1
apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -67,6 +67,7 @@ export default async function IntroSection({
className={styles.introLink}
color="burgundy"
variant="icon"
weight="bold"
href={`#s-${SidepeekSlugs.about}`}
scroll={false}
>

16
apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -3,11 +3,11 @@
import { useRef, useState } from "react"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SectionContainer from "@/components/Section/Container"
import Grids from "@/components/TempDesignSystem/Grids"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { RoomCard } from "./RoomCard"
@@ -37,10 +37,14 @@ export function Rooms({ rooms, preamble }: RoomsProps) {
>
<div ref={scrollRef} className={styles.scrollRef}></div>
<div className={styles.sectionHeader}>
<Title as="h3" level="h2">
{intl.formatMessage({ id: "Rooms" })}
</Title>
{preamble && <Body color="uiTextHighContrast">{preamble}</Body>}
<Typography variant="Title/md" className={styles.heading}>
<h2>{intl.formatMessage({ id: "Rooms" })}</h2>
</Typography>
{preamble && (
<Typography variant="Body/Paragraph/mdRegular">
<p>{preamble}</p>
</Typography>
)}
</div>
<Grids.Stackable
className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`}

4
apps/scandic-web/components/ContentType/HotelPage/Rooms/rooms.module.css
View File

@@ -26,3 +26,7 @@
gap: var(--Spacing-x-one-and-half);
max-width: var(--hotel-page-intro-section-width);
}
.heading {
color: var(--Text-Heading);
}

14
apps/scandic-web/components/TempDesignSystem/SidePeek/index.tsx
View File

@@ -5,11 +5,12 @@ import { useContext, useRef } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { CloseLargeIcon } from "@/components/Icons"
import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider"
import Button from "../Button"
import Title from "../Text/Title"
import styles from "./sidePeek.module.css"
@@ -58,14 +59,9 @@ function SidePeek({
<aside className={styles.sidePeek}>
<header className={styles.header}>
{title ? (
<Title
color="burgundy"
textTransform="uppercase"
level="h2"
as="h3"
>
{title}
</Title>
<Typography variant="Title/md" className={styles.heading}>
<h2>{title}</h2>
</Typography>
) : null}
<Button
aria-label={intl.formatMessage({ id: "Close" })}

4
apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
View File

@@ -84,6 +84,10 @@
padding: 0;
}
.heading {
color: var(--Text-Heading);
}
.sidePeekContent {
padding: var(--Spacing-x4);
overflow-y: auto;