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

feat(SW-630) Added alerts to hotel cards

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-15 14:06:33 +01:00
parent 51f8412e2b
commit 821f667d06
3 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/HotelReservation/HotelCard/hotelCard.module.css
View File

@@ -85,6 +85,12 @@
min-width: 160px; min-width: 160px;
} }
.specialAlerts {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.card.pageListing { .card.pageListing {
flex-direction: row; flex-direction: row;

8
components/HotelReservation/HotelCard/index.tsx
View File

@@ -39,8 +39,6 @@ export default function HotelCard({
const { hotelData } = hotel const { hotelData } = hotel
const { price } = hotel const { price } = hotel
console.log(hotelData)
const amenities = hotelData.detailedFacilities.slice(0, 5) const amenities = hotelData.detailedFacilities.slice(0, 5)
const classNames = hotelCardVariants({ const classNames = hotelCardVariants({
@@ -138,11 +136,7 @@ export default function HotelCard({
{hotelData.specialAlerts.length > 0 && ( {hotelData.specialAlerts.length > 0 && (
<div className={styles.specialAlerts}> <div className={styles.specialAlerts}>
{hotelData.specialAlerts.map((alert) => ( {hotelData.specialAlerts.map((alert) => (
<Alert <Alert key={alert.id} type={alert.type} text={alert.text} />
key={alert.id}
type={alert.type}
heading={alert.heading}
/>
))} ))}
</div> </div>
)} )}

2
components/TempDesignSystem/Alert/index.tsx
View File

@@ -44,6 +44,7 @@ export default function Alert({
<h2>{heading}</h2> <h2>{heading}</h2>
</Body> </Body>
) : null} ) : null}
{text ? (
<Body className={styles.text}> <Body className={styles.text}>
{text} {text}
{phoneContact?.phoneNumber ? ( {phoneContact?.phoneNumber ? (
@@ -61,6 +62,7 @@ export default function Alert({
</> </>
) : null} ) : null}
</Body> </Body>
) : null}
</div> </div>
{link ? ( {link ? (
<Link color="burgundy" href={link.url}> <Link color="burgundy" href={link.url}>