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; width: fit-content;
} }
.facility {
color: var(--Text-Secondary);
}
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.amenitiesContainer { .amenitiesContainer {
margin-top: var(--Spacing-x5); 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 { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { ChevronRightSmallIcon } from "@/components/Icons" import { ChevronRightSmallIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link" 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 { getIntl } from "@/i18n"
import styles from "./amenitiesList.module.css" import styles from "./amenitiesList.module.css"
@@ -18,9 +18,9 @@ export default async function AmenitiesList({
return ( return (
<section className={styles.amenitiesContainer}> <section className={styles.amenitiesContainer}>
<Subtitle type="two" color="black"> <Typography variant="Title/Subtitle/md">
{intl.formatMessage({ id: "At the hotel" })} <p>{intl.formatMessage({ id: "At the hotel" })}</p>
</Subtitle> </Typography>
<div className={styles.amenityItemList}> <div className={styles.amenityItemList}>
{facilities.map((facility) => { {facilities.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id) const IconComponent = mapFacilityToIcon(facility.id)
@@ -34,7 +34,12 @@ export default async function AmenitiesList({
height={20} height={20}
/> />
)} )}
<Body color="uiTextMediumContrast">{facility.name}</Body> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.facility}
>
<p>{facility.name}</p>
</Typography>
</div> </div>
) )
})} })}
@@ -44,6 +49,7 @@ export default async function AmenitiesList({
href={`#s-${SidepeekSlugs.amenities}`} href={`#s-${SidepeekSlugs.amenities}`}
color="burgundy" color="burgundy"
variant="icon" variant="icon"
weight="bold"
className={styles.showAllAmenities} className={styles.showAllAmenities}
> >
{intl.formatMessage({ id: "See all amenities" })} {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} className={styles.introLink}
color="burgundy" color="burgundy"
variant="icon" variant="icon"
weight="bold"
href={`#s-${SidepeekSlugs.about}`} href={`#s-${SidepeekSlugs.about}`}
scroll={false} scroll={false}
> >

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

@@ -3,11 +3,11 @@
import { useRef, useState } from "react" import { useRef, useState } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SectionContainer from "@/components/Section/Container" import SectionContainer from "@/components/Section/Container"
import Grids from "@/components/TempDesignSystem/Grids" import Grids from "@/components/TempDesignSystem/Grids"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { RoomCard } from "./RoomCard" import { RoomCard } from "./RoomCard"
@@ -37,10 +37,14 @@ export function Rooms({ rooms, preamble }: RoomsProps) {
> >
<div ref={scrollRef} className={styles.scrollRef}></div> <div ref={scrollRef} className={styles.scrollRef}></div>
<div className={styles.sectionHeader}> <div className={styles.sectionHeader}>
<Title as="h3" level="h2"> <Typography variant="Title/md" className={styles.heading}>
{intl.formatMessage({ id: "Rooms" })} <h2>{intl.formatMessage({ id: "Rooms" })}</h2>
</Title> </Typography>
{preamble && <Body color="uiTextHighContrast">{preamble}</Body>} {preamble && (
<Typography variant="Body/Paragraph/mdRegular">
<p>{preamble}</p>
</Typography>
)}
</div> </div>
<Grids.Stackable <Grids.Stackable
className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`} 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); gap: var(--Spacing-x-one-and-half);
max-width: var(--hotel-page-intro-section-width); 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 { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { CloseLargeIcon } from "@/components/Icons" import { CloseLargeIcon } from "@/components/Icons"
import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider" import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider"
import Button from "../Button" import Button from "../Button"
import Title from "../Text/Title"
import styles from "./sidePeek.module.css" import styles from "./sidePeek.module.css"
@@ -58,14 +59,9 @@ function SidePeek({
<aside className={styles.sidePeek}> <aside className={styles.sidePeek}>
<header className={styles.header}> <header className={styles.header}>
{title ? ( {title ? (
<Title <Typography variant="Title/md" className={styles.heading}>
color="burgundy" <h2>{title}</h2>
textTransform="uppercase" </Typography>
level="h2"
as="h3"
>
{title}
</Title>
) : null} ) : null}
<Button <Button
aria-label={intl.formatMessage({ id: "Close" })} aria-label={intl.formatMessage({ id: "Close" })}

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

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