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

Merged in feat/SW-1711-switch-icons (pull request #1558)

Browse Source 
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2025-03-27 09:42:52 +00:00
parent 93c7fe64bf
commit 5de2a993a7
524 changed files with 4442 additions and 6802 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/scandic-web/components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx
View File

@@ -1,4 +1,5 @@
import { TripAdvisorIcon } from "@/components/Icons"
import { TripadvisorIcon } from "@scandic-hotels/design-system/Icons"
import Image from "@/components/Image"
import Chip from "@/components/TempDesignSystem/Chip"
@@ -32,7 +33,7 @@ export default function HotelCardDialogImage({
)}
<div className={styles.tripAdvisor}>
<Chip className={styles.tripAdvisor}>
<TripAdvisorIcon color="burgundy" />
<TripadvisorIcon color="Icon/Interactive/Default" />
{ratings}
</Chip>
</div>

14
apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
View File

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
import { selectRate } from "@/constants/routes/hotelReservation"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -68,12 +68,16 @@ export default function ListingHotelCardDialog({
</div>
<div className={styles.facilities}>
{amenities.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
const Icon = (
<FacilityToIcon
id={facility.id}
size={20}
color="Icon/Default"
/>
)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent width={20} height={20} color="grey80" />
)}
{Icon && Icon}
<Caption color="uiTextMediumContrast">
{facility.name}
</Caption>

10
apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
View File

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
import { selectRate } from "@/constants/routes/hotelReservation"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -73,12 +73,12 @@ export default function StandaloneHotelCardDialog({
</div>
<div className={styles.facilities}>
{amenities.slice(0, 3).map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
const Icon = (
<FacilityToIcon id={facility.id} size={16} color="Icon/Default" />
)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent width={16} height={16} color="grey80" />
)}
{Icon && Icon}
<Footnote color="uiTextMediumContrast">
{facility.name}
</Footnote>

12
apps/scandic-web/components/HotelReservation/HotelCardDialog/index.tsx
View File

@@ -3,7 +3,7 @@
import { useParams } from "next/navigation"
import { useState } from "react"
import { CloseLargeIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import ListingHotelCardDialog from "./ListingHotelCardDialog"
import StandaloneHotelCardDialog from "./StandaloneHotelCardDialog"
@@ -30,12 +30,10 @@ export default function HotelCardDialog({
return (
<dialog open={isOpen} className={styles.dialog}>
<div className={styles.dialogContainer} data-type={type}>
<CloseLargeIcon
onClick={handleClose}
className={styles.closeIcon}
width={16}
height={16}
/>
<div onClick={handleClose}>
<MaterialIcon icon="close" className={styles.closeIcon} size={16} />
</div>
{type === "standalone" ? (
<StandaloneHotelCardDialog
data={data}