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

feat(SW-252): change semantic element

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-27 09:44:47 +02:00
parent 8c4ade719f
commit 51285f359f
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,7 @@
object-fit: cover; object-fit: cover;
} }
.header { .hotelInformation {
grid-area: header; grid-area: header;
} }
@@ -87,8 +87,8 @@
} }
.tripAdvisor { .tripAdvisor {
display: block;
position: absolute; position: absolute;
display: block;
left: 7px; left: 7px;
top: 7px; top: 7px;
} }
@@ -97,7 +97,7 @@
width: 518px; width: 518px;
} }
.header { .hotelInformation {
padding-top: var(--Spacing-x2); padding-top: var(--Spacing-x2);
padding-right: var(--Spacing-x2); padding-right: var(--Spacing-x2);
} }

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

@@ -27,7 +27,7 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
return ( return (
<article className={styles.card}> <article className={styles.card}>
<div className={styles.imageContainer}> <section className={styles.imageContainer}>
<Image <Image
src={hotel.hotelContent.images.imageSizes.large} src={hotel.hotelContent.images.imageSizes.large}
alt={hotel.hotelContent.images.metaData.altText} alt={hotel.hotelContent.images.metaData.altText}
@@ -41,8 +41,8 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
{hotel.ratings?.tripAdvisor.rating} {hotel.ratings?.tripAdvisor.rating}
</Chip> </Chip>
</div> </div>
</div> </section>
<header className={styles.header}> <section className={styles.hotelInformation}>
<ScandicLogoIcon color="red" /> <ScandicLogoIcon color="red" />
<Title as="h4" textTransform="capitalize"> <Title as="h4" textTransform="capitalize">
{hotel.name} {hotel.name}
@@ -53,7 +53,7 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
<Footnote color="textMediumContrast"> <Footnote color="textMediumContrast">
{`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`} {`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
</Footnote> </Footnote>
</header> </section>
<section className={styles.hotel}> <section className={styles.hotel}>
<div className={styles.facilities}> <div className={styles.facilities}>
{sortedAmenities.map((facility) => { {sortedAmenities.map((facility) => {