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

fix(SW-2696): Added white-space: pre-line on paragraphs inside the about the hotel sidepeek to handle \n characters from API

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-05-14 13:37:05 +00:00
parent 211cd5270b
commit 604a0cf5be
2 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/aboutTheHotel.module.css
View File

@@ -1,5 +1,9 @@
.wrapper { .wrapper {
display: flex; display: grid;
flex-direction: column; gap: var(--Space-x3);
gap: var(--Spacing-x3); }
.paragraph {
color: var(--Text-Default);
white-space: pre-line;
} }

23
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/index.tsx
View File

@@ -1,7 +1,7 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import SidePeek from "@/components/TempDesignSystem/SidePeek" import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import ContactInformation from "./ContactInformation" import ContactInformation from "./ContactInformation"
@@ -37,9 +37,22 @@ export default async function AboutTheHotelSidePeek({
ecoLabels={ecoLabels} ecoLabels={ecoLabels}
/> />
<Divider color="baseSurfaceSubtleHover" /> <Divider color="baseSurfaceSubtleHover" />
<Preamble>{descriptions.descriptions?.medium}</Preamble>
<Body>{descriptions.facilityInformation}</Body> {descriptions.descriptions ? (
<Body>{descriptions.surroundingInformation}</Body> <Typography variant="Body/Lead text">
<p className={styles.paragraph}>
{descriptions.descriptions.medium}
</p>
</Typography>
) : null}
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.paragraph}>{descriptions.facilityInformation}</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.paragraph}>
{descriptions.surroundingInformation}
</p>
</Typography>
</section> </section>
</SidePeek> </SidePeek>
) )