feat/SW-843-UI-hotel-card-select-hotel (pull request #887)

Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin

components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css

@@ -24,18 +24,6 @@
   border-radius: var(--Corner-radius-Medium);
 }
 
-.tripAdvisor {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-half);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  position: absolute;
-  left: 8px;
-  top: 8px;
-  padding: var(--Spacing-x-quarter) var(--Spacing-x1);
-  border-radius: var(--Corner-radius-Small);
-}
-
 .hotelContent {
   display: flex;
   flex-direction: column;

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -2,7 +2,6 @@
 import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import ImageGallery from "@/components/ImageGallery"
 import Alert from "@/components/TempDesignSystem/Alert"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -11,6 +10,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ReadMore from "../../ReadMore"
+import TripAdvisorChip from "../../TripAdvisorChip"
 
 import styles from "./hotelInfoCard.module.css"
 
@@ -35,12 +35,9 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
               fill
             />
             {hotelAttributes.ratings?.tripAdvisor && (
-              <div className={styles.tripAdvisor}>
-                <TripAdvisorIcon color="burgundy" />
-                <Caption color="burgundy">
-                  {hotelAttributes.ratings.tripAdvisor.rating}
-                </Caption>
-              </div>
+              <TripAdvisorChip
+                rating={hotelAttributes.ratings.tripAdvisor.rating}
+              />
             )}
           </div>
           <div className={styles.hotelContent}>