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

Merged in feat/SW-1067-special-needs-accessibility-page (pull request #1253)

Browse Source 
feat/SW-1067 special needs accessibility page

* feat(SW-1067): update types

* feat(SW-1067): add sidebar

* feat(SW-1067): add additional content component

* feat(SW-1067): add special needs list

* feat(SW-1067): update type

* feat(SW-1067): update import

* feat(SW-1067): remove component

* feat(SW-1067): re add component

* feat(SW-1067): update folder structure


Approved-by: Erik Tiekstra
This commit is contained in:
Fredrik Thorsson
2025-02-05 10:27:26 +00:00
parent 86a7650813
commit a389fba8ce
21 changed files with 145 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/ContentType/HotelSubpage/AdditionalContent/Accessibility/accessibilityAdditionalContent.module.css Normal file
View File

@@ -0,0 +1,23 @@
.container {
display: grid;
gap: var(--Spacing-x2);
}
.accessibilityGroup {
display: grid;
gap: var(--Spacing-x1);
}
.list {
display: grid;
gap: var(--Spacing-x1);
list-style-type: none;
}
.list > li::before {
content: url("/_static/icons/heart.svg");
position: relative;
height: 8px;
top: 3px;
margin-right: var(--Spacing-x1);
}

40
components/ContentType/HotelSubpage/AdditionalContent/Accessibility/index.tsx Normal file
View File

@@ -0,0 +1,40 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./accessibilityAdditionalContent.module.css"
import type { AdditionalData } from "@/types/hotel"
interface AccessibilityAdditionalContentProps {
additionalData: AdditionalData
}
export default function AccessibilityAdditionalContent({
additionalData,
}: AccessibilityAdditionalContentProps) {
return (
<div className={styles.container}>
{additionalData.specialNeedGroups.map((accessibilityGroup) => (
<div
key={accessibilityGroup.name}
className={styles.accessibilityGroup}
>
<Subtitle type="two" color="uiTextHighContrast" asChild>
<h2>{accessibilityGroup.name}</h2>
</Subtitle>
<ul className={styles.list}>
{accessibilityGroup.specialNeeds.map((groupItem) => (
<Body key={groupItem.name} asChild>
<li>
{groupItem.details
? `${groupItem.name}: ${groupItem.details}`
: groupItem.name}
</li>
</Body>
))}
</ul>
</div>
))}
</div>
)
}

2
components/ContentType/HotelSubpage/AdditionalContent/ParkingAdditionalContent.tsx → components/ContentType/HotelSubpage/AdditionalContent/Parking/index.tsx
View File

@@ -1,6 +1,6 @@
import ParkingInformation from "@/components/ParkingInformation"
import styles from "./additionalContent.module.css"
import styles from "./parkingAdditionalContent.module.css"
import type { Hotel } from "@/types/hotel"

0
components/ContentType/HotelSubpage/AdditionalContent/additionalContent.module.css → components/ContentType/HotelSubpage/AdditionalContent/Parking/parkingAdditionalContent.module.css
View File

10
components/ContentType/HotelSubpage/AdditionalContent/index.tsx
View File

@@ -1,22 +1,26 @@
import {
accessibilitySubPage,
parkingSubPage,
wellnessSubPage,
} from "@/constants/routes/hotelSubpages"
import { getLang } from "@/i18n/serverContext"
import ParkingAdditionalContent from "./ParkingAdditionalContent"
import AccessibilityAdditionalContent from "./Accessibility"
import ParkingAdditionalContent from "./Parking"
import type { Hotel } from "@/types/hotel"
import type { AdditionalData, Hotel } from "@/types/hotel"
interface HotelSubpageAdditionalContentProps {
subpage: string
hotel: Hotel
additionalData: AdditionalData
}
export default function HotelSubpageAdditionalContent({
subpage,
hotel,
additionalData,
}: HotelSubpageAdditionalContentProps) {
const lang = getLang()
@@ -25,6 +29,8 @@ export default function HotelSubpageAdditionalContent({
return <ParkingAdditionalContent hotel={hotel} />
case wellnessSubPage[lang]:
return null
case accessibilitySubPage[lang]:
return <AccessibilityAdditionalContent additionalData={additionalData} />
default:
return null
}

3
components/ContentType/HotelSubpage/Sidebar/index.tsx
View File

@@ -1,4 +1,5 @@
import {
accessibilitySubPage,
parkingSubPage,
wellnessSubPage,
} from "@/constants/routes/hotelSubpages"
@@ -25,6 +26,8 @@ export default function HotelSubpageSidebar({
return <ParkingSidebar hotel={hotel} />
case wellnessSubPage[lang]:
return <WellnessSidebar hotel={hotel} />
case accessibilitySubPage[lang]:
return null
default:
return null
}

5
components/ContentType/HotelSubpage/index.tsx
View File

@@ -63,7 +63,9 @@ export default async function HotelSubpage({
<div className={styles.contentContainer}>
<main className={styles.mainContent}>
<div className={styles.intro}>
<Title level="h1">{pageData.heading}</Title>
<Title as="h2" level="h1">
{pageData.heading}
</Title>
<Preamble>{pageData.elevatorPitch}</Preamble>
</div>
@@ -72,6 +74,7 @@ export default async function HotelSubpage({
<HotelSubpageAdditionalContent
subpage={subpage}
hotel={hotelData.hotel}
additionalData={hotelData.additionalData}
/>
</main>

18
components/ContentType/HotelSubpage/utils.ts
View File

@@ -1,4 +1,5 @@
import {
accessibilitySubPage,
parkingSubPage,
wellnessSubPage,
} from "@/constants/routes/hotelSubpages"
@@ -44,6 +45,23 @@ export function getSubpageData(
}
: null,
}
case accessibilitySubPage[lang]:
const accessibilityImage = additionalData.accessibility?.heroImages[0]
return {
...additionalData.hotelSpecialNeeds,
heading: intl.formatMessage(
{ id: "Accessibility at {hotel}" },
{
hotel: hotel.name,
}
),
heroImage: accessibilityImage
? {
src: accessibilityImage.imageSizes.medium,
alt: accessibilityImage.metaData.altText || "",
}
: null,
}
default:
return null
}