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 {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
display: grid;
gap: var(--Space-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 SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import { getIntl } from "@/i18n"
import ContactInformation from "./ContactInformation"
@@ -37,9 +37,22 @@ export default async function AboutTheHotelSidePeek({
ecoLabels={ecoLabels}
/>
<Divider color="baseSurfaceSubtleHover" />
<Preamble>{descriptions.descriptions?.medium}</Preamble>
<Body>{descriptions.facilityInformation}</Body>
<Body>{descriptions.surroundingInformation}</Body>
{descriptions.descriptions ? (
<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>
</SidePeek>
)