feat(SW-938) Updated icons

This commit is contained in:
Pontus Dreij
2024-11-21 09:37:38 +01:00
parent c71c8af35a
commit 23fa17a450
11 changed files with 253 additions and 34 deletions

View File

@@ -14,8 +14,8 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
[FacilityEnum.GymTrainingFacilities]: IconName.Fitness,
[FacilityEnum.KeyAccessOnlyToHealthClubGym]: IconName.Fitness,
[FacilityEnum.FreeWiFi]: IconName.Wifi,
[FacilityEnum.MeetingRooms]: IconName.People2,
[FacilityEnum.MeetingConferenceFacilities]: IconName.People2,
[FacilityEnum.MeetingRooms]: IconName.Business,
[FacilityEnum.MeetingConferenceFacilities]: IconName.Business,
[FacilityEnum.PetFriendlyRooms]: IconName.Pets,
[FacilityEnum.Sauna]: IconName.Sauna,
[FacilityEnum.Restaurant]: IconName.Restaurant,

View File

@@ -15,7 +15,12 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] {
hotel.hotelData.hotelContent.images,
...(hotel.hotelData.gallery?.heroImages ?? []),
],
amenities: hotel.hotelData.detailedFacilities.slice(0, 3),
amenities: hotel.hotelData.detailedFacilities
.map((facility) => ({
...facility,
icon: facility.icon ?? "None",
}))
.slice(0, 3),
ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
operaId: hotel.hotelData.operaId,
}))

23
components/Icons/Bike.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function BikeIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<path
d="M5.125 19.825C3.75 19.825 2.59375 19.3563 1.65625 18.4188C0.71875 17.4813 0.25 16.325 0.25 14.95C0.25 13.575 0.72775 12.4146 1.68325 11.4688C2.63875 10.5229 3.79433 10.05 5.15 10.05C6.35833 10.05 7.39792 10.4292 8.26875 11.1875C9.13958 11.9459 9.68333 12.8834 9.9 14H10.65L8.85 8.97502H8.0625C7.80417 8.97502 7.58333 8.88336 7.4 8.70002C7.21667 8.51669 7.125 8.29586 7.125 8.03752C7.125 7.77919 7.21667 7.55836 7.4 7.37502C7.58333 7.19169 7.80417 7.10002 8.0625 7.10002H11.0375C11.2958 7.10002 11.5167 7.19169 11.7 7.37502C11.8833 7.55836 11.975 7.77919 11.975 8.03752C11.975 8.29586 11.8833 8.51669 11.7 8.70002C11.5167 8.88336 11.2958 8.97502 11.0375 8.97502H10.85L11.225 10.05H16.075L14.6 6.02502H12.9875C12.7292 6.02502 12.5083 5.93336 12.325 5.75002C12.1417 5.56669 12.05 5.34586 12.05 5.08752C12.05 4.82919 12.1417 4.60836 12.325 4.42502C12.5083 4.24169 12.7292 4.15002 12.9875 4.15002H14.575C14.9922 4.15002 15.3652 4.26044 15.6941 4.48127C16.023 4.70211 16.2583 5.00836 16.4 5.40002L18.075 10.025H18.9C20.2487 10.025 21.3984 10.5005 22.3491 11.4515C23.2997 12.4024 23.775 13.5525 23.775 14.9018C23.775 16.2673 23.3021 17.4292 22.3563 18.3875C21.4104 19.3459 20.2563 19.825 18.8938 19.825C17.7259 19.825 16.7 19.4547 15.816 18.7141C14.932 17.9735 14.3683 17.0271 14.125 15.875H9.9C9.68333 17.0167 9.13489 17.9604 8.25468 18.7063C7.37446 19.4521 6.33123 19.825 5.125 19.825ZM5.125 17.95C5.80833 17.95 6.4 17.7563 6.9 17.3688C7.4 16.9813 7.75 16.4834 7.95 15.875H6.1125C5.85417 15.875 5.63333 15.7834 5.45 15.6C5.26667 15.4167 5.175 15.1959 5.175 14.9375C5.175 14.6792 5.26667 14.4584 5.45 14.275C5.63333 14.0917 5.85417 14 6.1125 14H7.95C7.75 13.375 7.4 12.8771 6.9 12.5063C6.4 12.1354 5.80833 11.95 5.125 11.95C4.275 11.95 3.5625 12.2375 2.9875 12.8125C2.4125 13.3875 2.125 14.1 2.125 14.95C2.125 15.7917 2.4125 16.5021 2.9875 17.0813C3.5625 17.6604 4.275 17.95 5.125 17.95ZM12.6747 14H14.1209C14.207 13.6167 14.3271 13.2459 14.4812 12.8875C14.6354 12.5292 14.8417 12.2084 15.1 11.925H11.9L12.6747 14ZM18.9 17.95C19.75 17.95 20.4625 17.6604 21.0375 17.0813C21.6125 16.5021 21.9 15.7917 21.9 14.95C21.9 14.1 21.6125 13.3875 21.0375 12.8125C20.4625 12.2375 19.75 11.95 18.9 11.95H18.75L19.4 13.7C19.4917 13.95 19.4831 14.1889 19.3742 14.4168C19.2653 14.6447 19.0864 14.8057 18.8375 14.9C18.5875 14.9917 18.3462 14.9831 18.1136 14.8742C17.8809 14.7653 17.7181 14.5864 17.625 14.3375L17 12.6C16.6417 12.8834 16.3688 13.225 16.1813 13.625C15.9938 14.025 15.9 14.4682 15.9 14.9546C15.9 15.7932 16.1875 16.5021 16.7625 17.0813C17.3375 17.6604 18.05 17.95 18.9 17.95Z"
fill="#4D001B"
/>
</svg>
)
}

View File

@@ -19,7 +19,7 @@ export default function RestaurantIcon({
{...props}
>
<path
d="M11.9626 13.3501L5.15008 20.1376C4.96675 20.3209 4.748 20.4146 4.49383 20.4188C4.23966 20.423 4.01675 20.3292 3.82508 20.1376C3.64175 19.9542 3.55008 19.7334 3.55008 19.4751C3.55008 19.2167 3.64175 18.9959 3.82508 18.8126L13.2626 9.40006C12.9626 8.70007 12.9188 7.92298 13.1313 7.06881C13.3438 6.21465 13.8042 5.44173 14.5126 4.75007C15.3542 3.9084 16.3063 3.40632 17.3688 3.24382C18.4313 3.08132 19.2959 3.3334 19.9626 4.00007C20.6292 4.66673 20.8813 5.53131 20.7188 6.59381C20.5563 7.65631 20.0542 8.6084 19.2126 9.45007C18.5209 10.1584 17.748 10.6188 16.8938 10.8313C16.0397 11.0438 15.2626 11.0001 14.5626 10.7001L13.2876 12.0001L20.1126 18.8251C20.2876 19.0001 20.3772 19.2146 20.3813 19.4688C20.3855 19.723 20.2959 19.9459 20.1126 20.1376C19.9376 20.3209 19.7209 20.4126 19.4626 20.4126C19.2042 20.4126 18.9834 20.3209 18.8001 20.1376L11.9626 13.3501ZM7.38758 12.3751L4.46258 9.45007C3.77925 8.76673 3.35008 7.9084 3.17508 6.87506C3.00008 5.84173 3.20425 4.91673 3.78758 4.10007C3.96258 3.8584 4.19383 3.72715 4.48133 3.70632C4.76883 3.68548 5.01258 3.77923 5.21258 3.98757L10.4876 9.30007L7.38758 12.3751Z"
d="M7.12505 9.04999V3.11249C7.12505 2.85415 7.21672 2.63332 7.40005 2.44999C7.58338 2.26665 7.80422 2.17499 8.06255 2.17499C8.32088 2.17499 8.54172 2.26665 8.72505 2.44999C8.90838 2.63332 9.00005 2.85415 9.00005 3.11249V9.04999H10.05V3.11249C10.05 2.85415 10.1417 2.63332 10.325 2.44999C10.5084 2.26665 10.7292 2.17499 10.9875 2.17499C11.2459 2.17499 11.4667 2.26665 11.65 2.44999C11.8334 2.63332 11.925 2.85415 11.925 3.11249V9.04999C11.925 9.95832 11.6438 10.7562 11.0813 11.4437C10.5188 12.1312 9.82505 12.5833 9.00005 12.8V20.8625C9.00005 21.1208 8.90838 21.3417 8.72505 21.525C8.54172 21.7083 8.32088 21.8 8.06255 21.8C7.80422 21.8 7.58338 21.7083 7.40005 21.525C7.21672 21.3417 7.12505 21.1208 7.12505 20.8625V12.8C6.30005 12.5833 5.60213 12.1312 5.0313 11.4437C4.46047 10.7562 4.17505 9.95832 4.17505 9.04999V3.11249C4.17505 2.85415 4.26672 2.63332 4.45005 2.44999C4.63338 2.26665 4.85422 2.17499 5.11255 2.17499C5.37088 2.17499 5.59172 2.26665 5.77505 2.44999C5.95838 2.63332 6.05005 2.85415 6.05005 3.11249V9.04999H7.12505ZM16.9 13.9H14.9375C14.6792 13.9 14.4584 13.8083 14.275 13.625C14.0917 13.4417 14 13.2208 14 12.9625V7.07499C14 5.94165 14.4125 4.84165 15.2375 3.77499C16.0625 2.70832 16.9125 2.17499 17.7875 2.17499C18.0792 2.17499 18.3167 2.28957 18.5 2.51874C18.6834 2.7479 18.775 3.01249 18.775 3.31249V20.8625C18.775 21.1208 18.6834 21.3417 18.5 21.525C18.3167 21.7083 18.0959 21.8 17.8375 21.8C17.5792 21.8 17.3584 21.7083 17.175 21.525C16.9917 21.3417 16.9 21.1208 16.9 20.8625V13.9Z"
fill="#4D001B"
/>
</svg>

View File

@@ -0,0 +1,23 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function StoreIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<path
d="M5.07502 20.8C4.55938 20.8 4.11797 20.6165 3.75079 20.2493C3.38361 19.8821 3.20002 19.4407 3.20002 18.925V11.075C2.79168 10.7584 2.4896 10.3188 2.29377 9.7563C2.09793 9.1938 2.10002 8.59172 2.30002 7.95005L3.32502 4.62505C3.4566 4.20617 3.69097 3.85977 4.02814 3.58587C4.36531 3.31199 4.75593 3.17505 5.20002 3.17505H18.8258C19.267 3.17505 19.6542 3.3063 19.9875 3.5688C20.3209 3.8313 20.5603 4.18272 20.7059 4.62305L21.725 7.95005C21.925 8.59172 21.9271 9.18755 21.7313 9.73755C21.5354 10.2875 21.2334 10.7334 20.825 11.075V18.925C20.825 19.4407 20.6414 19.8821 20.2742 20.2493C19.9071 20.6165 19.4657 20.8 18.95 20.8H5.07502ZM14.175 10.075C14.6417 10.075 14.9896 9.92088 15.2188 9.61255C15.4479 9.30422 15.5375 8.95838 15.4875 8.57505L14.95 5.05005H12.95V8.72505C12.95 9.08852 13.0691 9.40438 13.3073 9.67265C13.5455 9.94092 13.8347 10.075 14.175 10.075ZM9.74902 10.075C10.14 10.075 10.4588 9.94092 10.7053 9.67265C10.9518 9.40438 11.075 9.08852 11.075 8.72505V5.05005H9.07502L8.53752 8.57505C8.47918 8.96672 8.56877 9.31463 8.80627 9.6188C9.04377 9.92297 9.35802 10.075 9.74902 10.075ZM5.37502 10.075C5.69168 10.075 5.96252 9.96436 6.18752 9.74297C6.41252 9.52161 6.55002 9.24063 6.60002 8.90005L7.16252 5.05005H5.13752L4.12502 8.37505C4.00835 8.76672 4.0646 9.14797 4.29377 9.5188C4.52293 9.88963 4.88335 10.075 5.37502 10.075ZM18.65 10.075C19.1334 10.075 19.4958 9.8938 19.7375 9.5313C19.9792 9.1688 20.0333 8.78338 19.9 8.37505L18.8625 5.05005H16.8625L17.4235 8.90005C17.4745 9.23338 17.6125 9.51255 17.8375 9.73755C18.0625 9.96255 18.3333 10.075 18.65 10.075ZM5.07502 18.925H18.95V11.9125C18.875 11.9375 18.8167 11.95 18.775 11.95H18.65C18.2066 11.95 17.8166 11.875 17.48 11.725C17.1433 11.575 16.8149 11.3334 16.4947 11C16.2066 11.3 15.8728 11.5334 15.4933 11.7C15.1139 11.8667 14.7097 11.95 14.2807 11.95C13.8352 11.95 13.4229 11.8667 13.0438 11.7C12.6646 11.5334 12.325 11.3 12.025 11C11.7417 11.3 11.4125 11.5334 11.0375 11.7C10.6625 11.8667 10.2662 11.95 9.84864 11.95C9.38289 11.95 8.95418 11.8709 8.56252 11.7125C8.17085 11.5542 7.82502 11.3167 7.52502 11C7.15835 11.3667 6.81043 11.6167 6.48127 11.75C6.1521 11.8834 5.78335 11.95 5.37502 11.95H5.23037C5.1768 11.95 5.12502 11.9375 5.07502 11.9125V18.925Z"
fill="#26201E"
/>
</svg>
)
}

View File

@@ -11,6 +11,7 @@ export { default as BarIcon } from "./Bar"
export { default as BathtubIcon } from "./Bathtub"
export { default as BedDoubleIcon } from "./BedDouble"
export { default as BedSingleIcon } from "./BedSingle"
export { default as BikeIcon } from "./Bike"
export { default as BikingIcon } from "./Biking"
export { default as BreakfastIcon } from "./Breakfast"
export { default as BusinessIcon } from "./Business"
@@ -124,6 +125,7 @@ export { default as SmokingIcon } from "./Smoking"
export { default as SnowflakeIcon } from "./Snowflake"
export { default as SpaIcon } from "./Spa"
export { default as StarFilledIcon } from "./StarFilled"
export { default as StoreIcon } from "./Store"
export { default as StreetIcon } from "./Street"
export { default as SwimIcon } from "./Swim"
export { default as ThermostatIcon } from "./Thermostat"

View File

@@ -0,0 +1,157 @@
import { FC } from "react"
import {
AcIcon,
BarIcon,
BathtubIcon,
BedDoubleIcon,
BikeIcon,
BikingIcon,
BreakfastIcon,
BusinessIcon,
ChairIcon,
CityIcon,
CoffeeIcon,
ConciergeIcon,
DeskIcon,
ElectricBikeIcon,
ElectricCarIcon,
FitnessIcon,
GarageIcon,
HairdryerIcon,
HandSoapIcon,
HeartIcon,
IronIcon,
KayakingIcon,
LaundryMachineIcon,
LocalBarIcon,
MirrorIcon,
NatureIcon,
NightlifeIcon,
NoSmokingIcon,
OutdoorFurnitureIcon,
ParkingIcon,
RestaurantIcon,
RoomServiceIcon,
SafetyBoxIcon,
SaunaIcon,
ShoppingIcon,
ShowerIcon,
SkateboardingIcon,
StarFilledIcon,
StoreIcon,
StreetIcon,
SwimIcon,
WifiIcon,
WindowCurtainsAltIcon,
WindowNotAvailableIcon,
WineBarIcon,
WoodFloorIcon,
YardIcon,
} from "@/components/Icons"
import { IconProps } from "@/types/components/icon"
export function getHotelFacilityIcon(
name: string | undefined
): FC<IconProps> | null {
if (!name) return StarFilledIcon
const iconMappings = [
{
icon: FitnessIcon,
name: ["Gym"],
},
{
icon: SwimIcon,
name: ["Pool"],
},
{
icon: WifiIcon,
name: ["FreeWiFi"],
},
{
icon: LaundryMachineIcon,
name: ["LaundryService"],
},
{
icon: LaundryMachineIcon,
name: ["ExpressLaundryService"],
},
{
icon: ParkingIcon,
name: ["Parking"],
},
{
icon: GarageIcon,
name: ["Garage"],
},
{
icon: BikeIcon,
name: ["BikesForLoan"],
},
{
icon: ElectricCarIcon,
name: ["ElectricChargingPoint"],
},
{
icon: KayakingIcon,
name: ["KayaksForLoan"],
},
{
icon: SkateboardingIcon,
name: ["SkateboardsForLoan"],
},
{
icon: NightlifeIcon,
name: ["LiveMusicExhibitions"],
},
{
icon: StoreIcon,
name: ["Shop"],
},
{
icon: CoffeeIcon,
name: ["Cafe"],
},
{
icon: BusinessIcon,
name: ["Meeting"],
},
{
icon: LocalBarIcon,
name: ["Bar"],
},
{
icon: RoomServiceIcon,
name: ["RoomService"],
},
{
icon: OutdoorFurnitureIcon,
name: ["OutdoorTerrace"],
},
{
icon: RestaurantIcon,
name: ["Restaurant"],
},
{
icon: LocalBarIcon,
name: ["Skybar"],
},
{
icon: BreakfastIcon,
name: ["Breakfast"],
},
{
icon: SaunaIcon,
name: ["Sauna"],
},
{
icon: ConciergeIcon,
name: ["LifestyleConcierge"],
},
]
const icon = iconMappings.find((icon) => icon.name.includes(name))
return icon ? icon.icon : StarFilledIcon
}

View File

@@ -1,6 +1,7 @@
import { useIntl } from "react-intl"
import Contact from "@/components/HotelReservation/Contact"
import { AccessibilityIcon } from "@/components/Icons"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Button from "@/components/TempDesignSystem/Button"
@@ -8,7 +9,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getFacilityIcon } from "../RoomSidePeek/facilityIcon"
import { getHotelFacilityIcon } from "./hotelFacilityIcon"
import styles from "./hotelSidePeek.module.css"
@@ -59,10 +60,15 @@ export default function HotelSidePeek({
</AccordionItem>
) : null}
<div className={styles.amenity}>
<AccessibilityIcon
width={24}
height={24}
color="uiTextMediumContrast"
/>
{intl.formatMessage({ id: "Accessibility" })}
</div>
{amenitiesList.map((amenity) => {
const Icon = getFacilityIcon(amenity.icon)
const Icon = getHotelFacilityIcon(amenity.icon)
return (
<div key={amenity.id} className={styles.amenity}>
{Icon && (

View File

@@ -9,13 +9,13 @@ import {
DeskIcon,
HairdryerIcon,
HandSoapIcon,
HeartIcon,
IronIcon,
MirrorIcon,
NatureIcon,
NoSmokingIcon,
SafetyBoxIcon,
ShowerIcon,
StarFilledIcon,
StreetIcon,
WifiIcon,
WindowCurtainsAltIcon,
@@ -27,98 +27,101 @@ import {
import { IconProps } from "@/types/components/icon"
export function getFacilityIcon(name: string): FC<IconProps> | null {
export function getFacilityIcon(
name: string | undefined
): FC<IconProps> | null {
if (!name) return StarFilledIcon
const iconMappings = [
{
icon: DeskIcon,
texts: ["Desk and chair"],
name: ["Desk and chair"],
},
{
icon: HairdryerIcon,
texts: ["Hairdryer"],
name: ["Hairdryer"],
},
{
icon: AcIcon,
texts: ["Air Condition"],
name: ["Air Condition"],
},
{
icon: ChairIcon,
texts: ["Armchair / armchairs"],
name: ["Armchair / armchairs"],
},
{
icon: BathtubIcon,
texts: ["Bathroom with shower or bathtub"],
name: ["Bathroom with shower or bathtub"],
},
{
icon: WindowCurtainsAltIcon,
texts: ["Blackout curtains"],
name: ["Blackout curtains"],
},
{
icon: MirrorIcon,
texts: ["Cosmetic mirror"],
name: ["Cosmetic mirror"],
},
{
icon: WifiIcon,
texts: ["Free WiFi"],
name: ["FreeWiFi"],
},
{
icon: ChairIcon,
texts: ["Connecting rooms"],
name: ["Connecting rooms"],
},
{
icon: YardIcon,
texts: ["View - atrium view"],
name: ["View - atrium view"],
},
{
icon: CityIcon,
texts: ["View - city view"],
name: ["View - city view"],
},
{
icon: NatureIcon,
texts: ["View - park view"],
name: ["View - park view"],
},
{
icon: StreetIcon,
texts: ["View - street view"],
name: ["View - street view"],
},
{
icon: WineBarIcon,
texts: ["Minibar"],
name: ["Minibar"],
},
{
icon: NoSmokingIcon,
texts: ["Non smoking"],
name: ["Non smoking"],
},
{
icon: ShowerIcon,
texts: ["Rain shower"],
name: ["Rain shower"],
},
{
icon: SafetyBoxIcon,
texts: ["Safety box"],
name: ["Safety box"],
},
{
icon: BedDoubleIcon,
texts: ["Set of two pillows"],
name: ["Set of two pillows"],
},
{
icon: IronIcon,
texts: ["Iron and ironing board"],
name: ["Iron and ironing board"],
},
{
icon: HandSoapIcon,
texts: ["Toiletries"],
name: ["Toiletries"],
},
{
icon: WoodFloorIcon,
texts: ["Wooden floor"],
name: ["Wooden floor"],
},
{
icon: WindowNotAvailableIcon,
texts: ["Not window"],
name: ["Not window"],
},
]
const icon = iconMappings.find((icon) => icon.texts.includes(name))
return icon ? icon.icon : HeartIcon
const icon = iconMappings.find((icon) => icon.name.includes(name))
return icon ? icon.icon : StarFilledIcon
}

View File

@@ -125,7 +125,7 @@ const detailedFacilitySchema = z.object({
public: z.boolean(),
sortOrder: z.number(),
filter: z.string().optional(),
icon: z.string(),
icon: z.string().optional(),
})
export const facilitySchema = z.object({

View File

@@ -56,7 +56,7 @@ const roomFacilitiesSchema = z.object({
name: z.string(),
isUniqueSellingPoint: z.boolean(),
sortOrder: z.number(),
icon: z.string(),
icon: z.string().optional(),
})
export const roomSchema = z