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

Merged in refactor-tripadvisor-chip (pull request #3404)

Browse Source 
Refactor TripadvisorChip

* feat: create new StaticChip componeny

* refactor tripadvisor chip to use ChipStatic

* refactor: use TripadvisorChip everywhere

* fix: use withChipStatic


Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2026-01-23 12:19:37 +00:00
parent 5171d2d4d7
commit ae77fa3028
18 changed files with 129 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/hotelListingItem.module.css
View File

@@ -14,19 +14,6 @@
position: relative;
}
.tripAdvisor {
position: absolute;
top: var(--Space-x2);
left: var(--Space-x2);
display: flex;
align-items: center;
gap: var(--Space-x05);
background-color: var(--Surface-Primary-Default);
padding: var(--Space-x025) var(--Space-x1);
border-radius: var(--Corner-Radius-sm);
color: var(--Text-Interactive-Default);
}
.content {
padding: 0 var(--Space-x2);
display: grid;

14
apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx
View File

@@ -5,8 +5,8 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
@@ -47,12 +47,12 @@ export default function HotelListingItem({
)}
/>
{tripadvisorRating ? (
<Typography variant="Title/Overline/sm">
<div className={styles.tripAdvisor}>
<TripadvisorIcon color="CurrentColor" />
<span>{tripadvisorRating}</span>
</div>
</Typography>
<TripAdvisorChip
color="Neutral"
rating={tripadvisorRating}
wrapper="x2"
size="sm"
/>
) : null}
</div>
<div className={styles.content}>

18
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
View File

@@ -25,19 +25,6 @@
height: 200px;
}
.tripAdvisor {
position: absolute;
top: var(--Space-x2);
left: var(--Space-x2);
display: flex;
align-items: center;
gap: var(--Space-x05);
background-color: var(--Surface-Primary-Default);
padding: var(--Space-x025) var(--Space-x1);
border-radius: var(--Corner-Radius-sm);
color: var(--Text-Interactive-Default);
}
.intro {
display: grid;
gap: var(--Space-x05);
@@ -90,11 +77,6 @@
height: 100%;
}
.tripAdvisor {
top: 12px;
left: 12px;
}
.content {
padding: var(--Space-x15);
gap: var(--Space-x1);

14
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
View File

@@ -9,8 +9,8 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
@@ -80,12 +80,12 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
)}
/>
{hotel.tripadvisor && (
<Typography variant="Title/Overline/sm">
<div className={styles.tripAdvisor}>
<TripadvisorIcon color="CurrentColor" />
<span>{hotel.tripadvisor}</span>
</div>
</Typography>
<TripAdvisorChip
color="Neutral"
rating={hotel.tripadvisor}
wrapper="x2"
size="sm"
/>
)}
</div>
<div className={styles.content}>

13
apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css
View File

@@ -18,19 +18,6 @@
height: 200px;
}
.tripAdvisor {
position: absolute;
top: var(--Space-x2);
left: var(--Space-x2);
display: flex;
align-items: center;
gap: var(--Space-x05);
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Space-x025) var(--Space-x1);
border-radius: var(--Corner-Radius-sm);
color: var(--Text-Interactive-Default);
}
.hotelName {
color: var(--Text-Default);
}

14
apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/index.tsx
View File

@@ -10,8 +10,8 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
@@ -54,12 +54,12 @@ export default function HotelListingItem({
)}
/>
{hotel.tripadvisor && (
<Typography variant="Title/Overline/sm">
<div className={styles.tripAdvisor}>
<TripadvisorIcon color="CurrentColor" />
<span>{hotel.tripadvisor}</span>
</div>
</Typography>
<TripAdvisorChip
color="Neutral"
rating={hotel.tripadvisor}
wrapper="x2"
size="sm"
/>
)}
</div>
<div className={styles.content}>

7
apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/dialogImage.module.css
View File

@@ -9,13 +9,6 @@
object-fit: cover;
}
.imageContainer .tripAdvisor {
position: absolute;
left: 7px;
top: 7px;
border-radius: var(--Corner-Radius-sm);
}
@media screen and (max-width: 500px) {
.imageContainer {
min-width: 120px;

15
apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx
View File

@@ -1,7 +1,6 @@
import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
import Image from "@scandic-hotels/design-system/Image"
import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
import styles from "./dialogImage.module.css"
@@ -32,12 +31,12 @@ export default function DialogImage({
/>
)}
{rating ? (
<div className={styles.tripAdvisor}>
<ChipStatic color="Neutral" size="sm" className={styles.tripAdvisor}>
<TripadvisorIcon color="Icon/Interactive/Default" />
{rating}
</ChipStatic>
</div>
<TripAdvisorChip
rating={rating}
color="Neutral"
size="sm"
wrapper="x15"
/>
) : null}
</div>
)

14
apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorSection/index.tsx
View File

@@ -39,22 +39,12 @@ export default async function TripAdvisorSection({
: null
if (!tripAdvisorHref) {
return (
<TripAdvisorChip
rating={tripAdvisor.rating}
color="subtle"
wrapper={false}
/>
)
return <TripAdvisorChip rating={tripAdvisor.rating} color="Subtle" />
}
return (
<div className={styles.tripAdvisorSection}>
<TripAdvisorChip
rating={tripAdvisor.rating}
color="subtle"
wrapper={false}
/>
<TripAdvisorChip rating={tripAdvisor.rating} color="Subtle" />
<ButtonLink
href={tripAdvisorHref}
variant="Text"