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/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/index.tsx
View File

@@ -3,9 +3,10 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { dt } from "@/lib/dt"
import { PriceTagIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
@@ -177,7 +178,7 @@ export default function PriceDetailsTable({
{bookingCode && totalPrice.local.regularPrice && (
<tr className={styles.row}>
<td>
<PriceTagIcon />
<MaterialIcon icon="sell" />
{bookingCode}
</td>
<td></td>

29
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
View File

@@ -2,15 +2,12 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { dt } from "@/lib/dt"
import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import {
ArrowRightIcon,
CheckIcon,
ChevronDownSmallIcon,
} from "@/components/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
@@ -75,7 +72,11 @@ export default function Summary({
</Subtitle>
<Body className={styles.date} color="baseTextMediumContrast">
{dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
<ArrowRightIcon color="peach80" height={15} width={15} />
<MaterialIcon
icon="arrow_forward"
size={15}
color="Icon/Interactive/Secondary"
/>
{dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
</Body>
<Button
@@ -84,7 +85,11 @@ export default function Summary({
className={styles.chevronButton}
onClick={toggleSummaryOpen}
>
<ChevronDownSmallIcon height="20" width="20" />
<MaterialIcon
icon="keyboard_arrow_down"
size={20}
color="CurrentColor"
/>
</Button>
</header>
<Divider color="primaryLightSubtle" />
@@ -186,12 +191,12 @@ export default function Summary({
color="uiTextHighContrast"
className={styles.termsText}
>
<CheckIcon
color="uiSemanticSuccess"
width={20}
height={20}
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
></CheckIcon>
/>
{info}
</Body>
))}

5
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
View File

@@ -1,9 +1,10 @@
"use client"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { useRatesStore } from "@/stores/select-rate"
import { EditIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip"
@@ -96,7 +97,7 @@ export default function SelectedRoomPanel() {
<div className={styles.modifyButtonContainer}>
<Button clean onClick={modifyRate}>
<Chip size="small" variant="uiTextHighContrast">
<EditIcon />
<MaterialIcon icon="edit_square" />
{intl.formatMessage({ id: "Modify" })}
</Chip>
</Button>

9
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
View File

@@ -1,9 +1,10 @@
import { useEffect } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { useRatesStore } from "@/stores/select-rate"
import { ChevronUpIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useRoomContext } from "@/contexts/SelectRate/Room"
@@ -93,7 +94,11 @@ export default function MultiRoomWrapper({
variant="icon"
>
{intl.formatMessage({ id: "Close" })}
<ChevronUpIcon height={20} width={20} />
<MaterialIcon
icon="keyboard_arrow_up"
size={20}
color="CurrentColor"
/>
</Button>
) : null}
</div>

29
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/index.tsx
View File

@@ -1,9 +1,10 @@
"use client"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { useRatesStore } from "@/stores/select-rate"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Label from "@/components/TempDesignSystem/Form/Label"
@@ -57,7 +58,11 @@ export default function FlexibilityOption({
return (
<div className={styles.noPricesCard}>
<div className={styles.header}>
<InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
<MaterialIcon
icon="info"
size={16}
color="Icon/Interactive/Placeholder"
/>
<div className={styles.priceType}>
<Caption>{title}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
@@ -108,10 +113,10 @@ export default function FlexibilityOption({
<Modal
trigger={
<Button intent="text">
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
<MaterialIcon
icon="info"
size={16}
color="Icon/Interactive/Placeholder"
/>
</Button>
}
@@ -125,12 +130,12 @@ export default function FlexibilityOption({
color="uiTextHighContrast"
className={styles.termsText}
>
<CheckIcon
color="uiSemanticSuccess"
width={20}
height={20}
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
></CheckIcon>
/>
{info}
</Body>
))}
@@ -149,7 +154,7 @@ export default function FlexibilityOption({
/>
<div className={styles.checkIcon}>
<CheckIcon color="white" height="16" width="16" />
<MaterialIcon icon="check" color="Icon/Inverted" size={16} />
</div>
</div>
</label>

21
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionCheque/index.tsx
View File

@@ -2,7 +2,8 @@
import { useIntl } from "react-intl"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -71,11 +72,7 @@ export default function FlexibilityOptionCheque({
<Modal
trigger={
<Button intent="text">
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
/>
<MaterialIcon icon="info" size={16} color="Icon/Default" />
</Button>
}
title={chequeRateName}
@@ -88,12 +85,12 @@ export default function FlexibilityOptionCheque({
color="uiTextHighContrast"
className={styles.termsText}
>
<CheckIcon
color="uiSemanticSuccess"
width={20}
height={20}
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
></CheckIcon>
/>
{info}
</Body>
))}
@@ -110,7 +107,7 @@ export default function FlexibilityOptionCheque({
/>
<div className={styles.checkIcon}>
<CheckIcon color="white" height="16" width="16" />
<MaterialIcon icon="check" color="Icon/Inverted" size={16} />
</div>
</div>
</label>

19
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionPoints/index.tsx
View File

@@ -1,7 +1,8 @@
"use client"
import { useIntl } from "react-intl"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Label from "@/components/TempDesignSystem/Form/Label"
@@ -38,7 +39,7 @@ export default function FlexibilityOptionPoints({
return (
<div className={styles.noPricesCard}>
<div className={styles.header}>
<InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
<MaterialIcon icon="info" size={16} />
<div className={styles.priceType}>
<Caption>{title}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
@@ -79,11 +80,7 @@ export default function FlexibilityOptionPoints({
<Modal
trigger={
<Button intent="text">
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
/>
<MaterialIcon icon="info" size={16} />
</Button>
}
title={rewardNightTitle}
@@ -97,10 +94,10 @@ export default function FlexibilityOptionPoints({
color="uiTextHighContrast"
className={styles.termsText}
>
<CheckIcon
color="uiSemanticSuccess"
width={20}
height={20}
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
/>
{info}

21
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOptionVoucher/index.tsx
View File

@@ -2,7 +2,8 @@
import { useIntl } from "react-intl"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -70,11 +71,7 @@ export default function FlexibilityOptionVoucher({
<Modal
trigger={
<Button intent="text">
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
/>
<MaterialIcon icon="info" size={16} color="Icon/Default" />
</Button>
}
title={voucherRateName}
@@ -87,12 +84,12 @@ export default function FlexibilityOptionVoucher({
color="uiTextHighContrast"
className={styles.termsText}
>
<CheckIcon
color="uiSemanticSuccess"
width={20}
height={20}
<MaterialIcon
icon="check"
color="Icon/Feedback/Success"
size={20}
className={styles.termsIcon}
></CheckIcon>
/>
{info}
</Body>
))}
@@ -109,7 +106,7 @@ export default function FlexibilityOptionVoucher({
/>
<div className={styles.checkIcon}>
<CheckIcon color="white" height="16" width="16" />
<MaterialIcon icon="check" color="Icon/Inverted" size={16} />
</div>
</div>
</label>

37
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
View File

@@ -4,12 +4,13 @@ import { useSearchParams } from "next/navigation"
import { createElement } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { REDEMPTION } from "@/constants/booking"
import { useRatesStore } from "@/stores/select-rate"
import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
import { ErrorCircleIcon, PriceTagIcon } from "@/components/Icons"
import { IconForFeatureCode } from "@/components/HotelReservation/utils"
import ImageGallery from "@/components/ImageGallery"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -19,8 +20,8 @@ import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { cardVariants } from "./cardVariants"
import FlexibilityOption from "./FlexibilityOption"
import FlexibilityOptionPoints from "./FlexibilityOptionPoints"
import FlexibilityOptionCheque from "./FlexibilityOptionCheque"
import FlexibilityOptionPoints from "./FlexibilityOptionPoints"
import FlexibilityOptionVoucher from "./FlexibilityOptionVoucher"
import RoomSize from "./RoomSize"
@@ -211,11 +212,12 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
.filter((feature) => selectedPackage === feature.code)
.map((feature) => (
<span className={styles.chip} key={feature.code}>
{createElement(getIconForFeatureCode(feature.code), {
color: "burgundy",
height: 16,
width: 16,
})}
{createElement(() => (
<IconForFeatureCode
featureCode={feature.code}
color={"Icon/Interactive/Default"}
/>
))}
</span>
))}
</div>
@@ -271,7 +273,11 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
<div></div>
<div className={styles.noRoomsContainer}>
<div className={styles.noRooms}>
<ErrorCircleIcon color="red" width={16} />
<MaterialIcon
icon="error"
color="Icon/Interactive/Accent"
size={16}
/>
<Caption color="uiTextHighContrast" type="bold">
{intl.formatMessage({
id: "This room is not available",
@@ -288,7 +294,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
)}
{bookingCode ? (
<span className={!isBookingCodeRate ? styles.strikedText : ""}>
<PriceTagIcon />
<MaterialIcon icon="sell" />
{bookingCode}
</span>
) : null}
@@ -315,15 +321,18 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
roomTypeCode: roomConfiguration.roomTypeCode,
title: rateTitle,
rateName:
isBookingCodeRate || isRedemption ||
isBookingCodeRate ||
isRedemption ||
product.voucher ||
product.bonusCheque
? rateDefinition?.title
: undefined,
}
return (<>
{isRedemption &&
<FlexibilityOptionPoints key={product.rate} {...props} />}
return (
<>
{isRedemption && (
<FlexibilityOptionPoints key={product.rate} {...props} />
)}
{product.voucher ? (
<FlexibilityOptionVoucher
key={product.rate}