diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx index 60402bbc0..3b55c2288 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx @@ -1,9 +1,9 @@ +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" import { serverClient } from "@/lib/trpc/server" import Blocks from "@/components/Blocks" -import Image from "@/components/Image" import SectionHeader from "@/components/Section/Header" import TrackingSDK from "@/components/TrackingSDK" import { getIntl } from "@/i18n" diff --git a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx index d573bd2ac..44a8aa17e 100644 --- a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx +++ b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx @@ -6,13 +6,13 @@ import { type IntlShape, useIntl } from "react-intl" import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { Typography } from "@scandic-hotels/design-system/Typography" import { supportEmail, supportPhone } from "@/constants/contactSupport" import { employeeBenefits } from "@/constants/routes/dtmc" -import Image from "@/components/Image" import useLang from "@/hooks/useLang" import background from "@/public/_static/img/Scandic_Computer_Coffee.png" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx index 289c7751e..882aae459 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx @@ -1,9 +1,9 @@ import { ArrowLeft } from "react-feather" import { overview as profileOverview } from "@scandic-hotels/common/constants/routes/myPages" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" -import Image from "@/components/Image" import { getIntl } from "@/i18n" import background from "@/public/_static/img/partner/sas/sas_x_scandic_airplane_window_background.jpg" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx index 9255f55f9..ebf53fc1d 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx @@ -8,14 +8,13 @@ import { useIntl } from "react-intl" import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import { sasPartnershipTermsAndConditions } from "@/constants/webHrefs" -import Image from "@/components/Image" - import styles from "./link-sas.module.css" import type { LangParams } from "@/types/params" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx index 546c260fd..071a4f3f6 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx @@ -3,12 +3,12 @@ import React from "react" import { z } from "zod" import Footnote from "@scandic-hotels/design-system/Footnote" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { Typography } from "@scandic-hotels/design-system/Typography" import { env } from "@/env/server" -import Image from "@/components/Image" import { Redirect } from "@/components/Redirect" import { getIntl } from "@/i18n" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx index 711e1b53e..c454f957c 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx @@ -4,13 +4,13 @@ import React, { Suspense } from "react" import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelReservation" import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" import { Typography } from "@scandic-hotels/design-system/Typography" import { getProfileSafely } from "@/lib/trpc/memoizedRequests" -import Image from "@/components/Image" import { getIntl } from "@/i18n" import { SASModal } from "../../components/SASModal" diff --git a/apps/scandic-web/app/global-error.tsx b/apps/scandic-web/app/global-error.tsx index 181c9ee5d..69ae51587 100644 --- a/apps/scandic-web/app/global-error.tsx +++ b/apps/scandic-web/app/global-error.tsx @@ -4,8 +4,7 @@ import * as Sentry from "@sentry/nextjs" import { useEffect } from "react" import { logger } from "@scandic-hotels/common/logger" - -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" /* eslint-disable formatjs/no-literal-string-in-jsx */ export default function GlobalError({ diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx index 3d35fb200..55f95faf5 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx @@ -1,10 +1,10 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers" import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests" -import Image from "@/components/Image" import { getIntl } from "@/i18n" import desktopBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-desktop.png" import mobileBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-mobile.png" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx index ffb233d5a..fe7ba4681 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx @@ -1,11 +1,11 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" import { Typography } from "@scandic-hotels/design-system/Typography" import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers" import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests" -import Image from "@/components/Image" import { getIntl } from "@/i18n" import { TransferPointsFormClient } from "./TransferPointsFormClient" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx index 2e3c2bc6c..030199fcf 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx @@ -16,12 +16,12 @@ import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import { Input } from "@scandic-hotels/design-system/Input" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import { SAS_TRANSFER_POINT_KEY } from "@scandic-hotels/trpc/constants/partnerSAS" -import Image from "@/components/Image" import Modal from "@/components/Modal" import styles from "./transferPoints.module.css" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx index 50b599915..eb5c2c42d 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx @@ -3,10 +3,10 @@ import { dt } from "@scandic-hotels/common/dt" import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import Title from "@scandic-hotels/design-system/Title" -import Image from "@/components/Image" import useLang from "@/hooks/useLang" import styles from "./stay.module.css" diff --git a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx index 4d69f1a68..ea2e5f1e9 100644 --- a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx +++ b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx @@ -1,9 +1,9 @@ +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Preamble from "@scandic-hotels/design-system/Preamble" import Title from "@scandic-hotels/design-system/Title" -import Image from "@/components/Image" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import styles from "./fullWidthCampaign.module.css" diff --git a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx b/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx index 7f6152727..765999f75 100644 --- a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx +++ b/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx @@ -2,9 +2,9 @@ import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting" import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" import { getIntl } from "@/i18n" import styles from "./hotelListingItem.module.css" diff --git a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx index 1fddf3c8f..cf4b48d70 100644 --- a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx +++ b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx @@ -1,8 +1,8 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import SurpriseIcon from "@scandic-hotels/design-system/Icons/SurpriseIcon" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" import { isLoggedInUser } from "@/utils/isLoggedInUser" import styles from "./joinScandicFriends.module.css" diff --git a/apps/scandic-web/components/ContentCard/index.tsx b/apps/scandic-web/components/ContentCard/index.tsx index 98f57c4f1..618716615 100644 --- a/apps/scandic-web/components/ContentCard/index.tsx +++ b/apps/scandic-web/components/ContentCard/index.tsx @@ -1,8 +1,8 @@ import Body from "@scandic-hotels/design-system/Body" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import Image from "@/components/Image" import Chip from "@/components/TempDesignSystem/Chip" import styles from "./contentCard.module.css" diff --git a/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx b/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx index a6007131f..1feecc0f9 100644 --- a/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx +++ b/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx @@ -2,10 +2,9 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" - import { variants } from "./variants" import styles from "./hero.module.css" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx index dccbc5bd7..661be3ca2 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx @@ -1,7 +1,7 @@ import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" import Chip from "@/components/TempDesignSystem/Chip" import styles from "./dialogImage.module.css" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx index aa01e6a04..77d3468c5 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx @@ -3,9 +3,9 @@ import { useState } from "react" import { useIntl } from "react-intl" +import Image from "@scandic-hotels/design-system/Image" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" -import Image from "@/components/Image" import Lightbox from "@/components/Lightbox" import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery" diff --git a/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx index 35e6c4674..fb80892e3 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx @@ -1,4 +1,5 @@ -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" + import Card from "@/components/TempDesignSystem/Card" import styles from "./cardImage.module.css" diff --git a/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx index fc10f1e09..55be6edec 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx @@ -1,4 +1,5 @@ -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" + import Card from "@/components/TempDesignSystem/Card" import { filterFacilityCards, diff --git a/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx index 77c45f668..2d00eca8c 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx @@ -5,8 +5,8 @@ import { Button as ButtonRAC } from "react-aria-components" import { useIntl } from "react-intl" import { Button } from "@scandic-hotels/design-system/Button" +import Image from "@scandic-hotels/design-system/Image" -import Image from "@/components/Image" import Lightbox from "@/components/Lightbox/" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx index 8ffe63aee..39a90b5c8 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx @@ -1,9 +1,9 @@ import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon" import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" import LocalCallCharges from "@/components/LocalCallCharges" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Images/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Images/index.tsx index e4aac3b5a..d81f1b1a7 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Images/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Images/index.tsx @@ -1,4 +1,4 @@ -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" import styles from "./images.module.css" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/index.tsx index 019bc3411..4850daa98 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/index.tsx @@ -1,6 +1,6 @@ +import Image from "@scandic-hotels/design-system/Image" import SidePeek from "@scandic-hotels/design-system/SidePeek" -import Image from "@/components/Image" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" diff --git a/apps/scandic-web/components/ContentType/StartPage/InfoCard/index.tsx b/apps/scandic-web/components/ContentType/StartPage/InfoCard/index.tsx index 4c91d4732..d64e78589 100644 --- a/apps/scandic-web/components/ContentType/StartPage/InfoCard/index.tsx +++ b/apps/scandic-web/components/ContentType/StartPage/InfoCard/index.tsx @@ -1,4 +1,5 @@ -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" + import Card from "@/components/TempDesignSystem/Card" import styles from "./infoCard.module.css" diff --git a/apps/scandic-web/components/ContentType/StartPage/index.tsx b/apps/scandic-web/components/ContentType/StartPage/index.tsx index f8132b445..9288477e3 100644 --- a/apps/scandic-web/components/ContentType/StartPage/index.tsx +++ b/apps/scandic-web/components/ContentType/StartPage/index.tsx @@ -1,4 +1,5 @@ import { FloatingBookingWidget } from "@scandic-hotels/booking-flow/BookingWidget/FloatingBookingWidget" +import Image from "@scandic-hotels/design-system/Image" import Title from "@scandic-hotels/design-system/Title" import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum" @@ -6,7 +7,6 @@ import { getStartPage } from "@/lib/trpc/memoizedRequests" import Blocks from "@/components/Blocks" import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign" -import Image from "@/components/Image" import TrackingSDK from "@/components/TrackingSDK" import { getLang } from "@/i18n/serverContext" diff --git a/apps/scandic-web/components/Current/Aside/Puff/index.tsx b/apps/scandic-web/components/Current/Aside/Puff/index.tsx index 83c7dab2e..f98f2b538 100644 --- a/apps/scandic-web/components/Current/Aside/Puff/index.tsx +++ b/apps/scandic-web/components/Current/Aside/Puff/index.tsx @@ -1,11 +1,11 @@ "use client" import { useRouter } from "next/navigation" +import Image from "@scandic-hotels/design-system/Image" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { renderOptions as currentRenderOptions } from "@/components/Current/currentRenderOptions" import DeprecatedJsonToHtml from "@/components/DeprecatedJsonToHtml" -import Image from "@/components/Image" import { renderOptions } from "./renderOptions" diff --git a/apps/scandic-web/components/Current/Footer/index.tsx b/apps/scandic-web/components/Current/Footer/index.tsx index ad8613995..c5fb23a04 100644 --- a/apps/scandic-web/components/Current/Footer/index.tsx +++ b/apps/scandic-web/components/Current/Footer/index.tsx @@ -1,8 +1,9 @@ /* eslint-disable formatjs/no-literal-string-in-jsx */ +import Image from "@scandic-hotels/design-system/Image" + import { getCurrentFooter } from "@/lib/trpc/memoizedRequests" -import Image from "@/components/Image" import { getLang } from "@/i18n/serverContext" import Navigation from "./Navigation" diff --git a/apps/scandic-web/components/Current/Header/MainMenu/index.tsx b/apps/scandic-web/components/Current/Header/MainMenu/index.tsx index 283306456..b3d49c694 100644 --- a/apps/scandic-web/components/Current/Header/MainMenu/index.tsx +++ b/apps/scandic-web/components/Current/Header/MainMenu/index.tsx @@ -7,6 +7,7 @@ import { useIntl } from "react-intl" import { findMyBookingCurrentWebPath } from "@scandic-hotels/common/constants/routes/findMyBooking" import { myPages } from "@scandic-hotels/common/constants/routes/myPages" import { getCurrentWebUrl } from "@scandic-hotels/common/utils/url" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" @@ -14,7 +15,6 @@ import { logout } from "@/constants/routes/handleAuth" import { env } from "@/env/client" import useDropdownStore from "@/stores/main-menu" -import Image from "@/components/Image" import LoginButton from "@/components/LoginButton" import Avatar from "@/components/MyPages/Avatar" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Current/Hero/index.tsx b/apps/scandic-web/components/Current/Hero/index.tsx index f7a451139..bd78507a6 100644 --- a/apps/scandic-web/components/Current/Hero/index.tsx +++ b/apps/scandic-web/components/Current/Hero/index.tsx @@ -1,6 +1,6 @@ /* eslint-disable formatjs/no-literal-string-in-jsx */ -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" import styles from "./hero.module.css" diff --git a/apps/scandic-web/components/Current/currentRenderOptions.tsx b/apps/scandic-web/components/Current/currentRenderOptions.tsx index 99e736b40..2907625ac 100644 --- a/apps/scandic-web/components/Current/currentRenderOptions.tsx +++ b/apps/scandic-web/components/Current/currentRenderOptions.tsx @@ -1,11 +1,10 @@ +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { RTEItemTypeEnum, RTETypeEnum, } from "@scandic-hotels/trpc/types/RTEenums" -import Image from "@/components/Image" - import styles from "./currentRenderOptions.module.css" import type { EmbedByUid } from "@/types/components/deprecatedjsontohtml" diff --git a/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx b/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx index 8ebb7a745..cf093d75e 100644 --- a/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx +++ b/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx @@ -3,6 +3,7 @@ import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" import { Divider } from "@scandic-hotels/design-system/Divider" import Footnote from "@scandic-hotels/design-system/Footnote" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import Subtitle from "@scandic-hotels/design-system/Subtitle" import Title from "@scandic-hotels/design-system/Title" @@ -13,8 +14,6 @@ import { } from "@scandic-hotels/trpc/types/RTEenums" import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault" -import Image from "@/components/Image" - import ImageContainer from "../ImageContainer" import Table from "../TempDesignSystem/Table" import BiroScript from "../TempDesignSystem/Text/BiroScript" diff --git a/apps/scandic-web/components/Footer/Details/index.tsx b/apps/scandic-web/components/Footer/Details/index.tsx index acefd1e84..5798f1e8d 100644 --- a/apps/scandic-web/components/Footer/Details/index.tsx +++ b/apps/scandic-web/components/Footer/Details/index.tsx @@ -1,10 +1,10 @@ +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" import { Typography } from "@scandic-hotels/design-system/Typography" import { getFooter } from "@/lib/trpc/memoizedRequests" -import Image from "@/components/Image" import LanguageSwitcher from "@/components/LanguageSwitcher" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" diff --git a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx index f6159729d..4b1ed2b64 100644 --- a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx +++ b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx @@ -1,10 +1,10 @@ "use client" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" import useLang from "@/hooks/useLang" import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking" diff --git a/apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx b/apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx index ecc1ab703..db3cf3a98 100644 --- a/apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx +++ b/apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx @@ -1,7 +1,6 @@ import Footnote from "@scandic-hotels/design-system/Footnote" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" import styles from "./avatar.module.css" diff --git a/apps/scandic-web/components/Hero/index.tsx b/apps/scandic-web/components/Hero/index.tsx index 8c792eeaa..542690fae 100644 --- a/apps/scandic-web/components/Hero/index.tsx +++ b/apps/scandic-web/components/Hero/index.tsx @@ -1,4 +1,4 @@ -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" import styles from "./hero.module.css" diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx index b61e91cd4..cdd561f29 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx @@ -9,11 +9,11 @@ import { import { dt } from "@scandic-hotels/common/dt" import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" import { CancellationRuleEnum } from "@/constants/booking" -import Image from "@/components/Image" import useLang from "@/hooks/useLang" import RoomDetailsSidePeek from "./RoomDetailsSidePeek" diff --git a/apps/scandic-web/components/HotelReservation/Contact/index.tsx b/apps/scandic-web/components/HotelReservation/Contact/index.tsx index c3eaa417e..cbcbf4656 100644 --- a/apps/scandic-web/components/HotelReservation/Contact/index.tsx +++ b/apps/scandic-web/components/HotelReservation/Contact/index.tsx @@ -5,9 +5,9 @@ import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon" import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" -import Image from "@/components/Image" import useLang from "@/hooks/useLang" import styles from "./contact.module.css" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx index 35906eca9..09ba7d639 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx @@ -1,8 +1,7 @@ +import Image from "@scandic-hotels/design-system/Image" import Title from "@scandic-hotels/design-system/Title" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" - import ToggleSidePeek from "./ToggleSidePeek" import styles from "./header.module.css" diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx index ac2d33b09..aec7a045b 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx @@ -1,6 +1,6 @@ import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon" +import Image from "@scandic-hotels/design-system/Image" -import Image from "@/components/Image" import Chip from "@/components/TempDesignSystem/Chip" import { hotelCardDialogImageVariants } from "./variants" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx index a9b3642c2..119002c2c 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx @@ -1,8 +1,7 @@ +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" - import styles from "./summaryCard.module.css" interface SummaryCardProps { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx index e86961bbb..2a760fc95 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx @@ -1,9 +1,8 @@ +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" - import styles from "./promo.module.css" import type { PromoProps } from "@/types/components/hotelReservation/bookingConfirmation/promo" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx index 3d85fc441..234374aee 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx @@ -8,6 +8,7 @@ import { Divider } from "@scandic-hotels/design-system/Divider" import { IconButton } from "@scandic-hotels/design-system/IconButton" import IconChip from "@scandic-hotels/design-system/IconChip" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" import { RateEnum } from "@scandic-hotels/trpc/enums/rate" import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter" @@ -15,7 +16,6 @@ import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter" import { CancellationRuleEnum } from "@/constants/booking" import { IconForFeatureCode } from "@/components/HotelReservation/utils" -import Image from "@/components/Image" import Modal from "@/components/Modal" import useRateTitles from "@/hooks/booking/useRateTitles" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx index 5b5fbf77f..a5bc86411 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx @@ -1,7 +1,7 @@ "use client" -import { useMyStayStore } from "@/stores/my-stay" +import Image from "@scandic-hotels/design-system/Image" -import Image from "@/components/Image" +import { useMyStayStore } from "@/stores/my-stay" import styles from "./img.module.css" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/index.tsx index fa58d4343..e9a148ea2 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/index.tsx @@ -4,6 +4,7 @@ import { notFound } from "next/navigation" import { dt } from "@scandic-hotels/common/dt" import { logger } from "@scandic-hotels/common/logger" import * as maskValue from "@scandic-hotels/common/utils/maskValue" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" import { parseRefId } from "@scandic-hotels/trpc/utils/refId" @@ -35,7 +36,6 @@ import { ReferenceCard } from "@/components/HotelReservation/MyStay/ReferenceCar import MultiRoom from "@/components/HotelReservation/MyStay/Rooms/MultiRoom" import SingleRoom from "@/components/HotelReservation/MyStay/Rooms/SingleRoom" import SidePeek from "@/components/HotelReservation/SidePeek" -import Image from "@/components/Image" import { getIntl } from "@/i18n" import MyStayProvider from "@/providers/MyStay" import { isLoggedInUser } from "@/utils/isLoggedInUser" diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx index 4a6d98669..cf079b746 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx @@ -8,13 +8,13 @@ import { logger } from "@scandic-hotels/common/logger" import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { RateEnum } from "@scandic-hotels/trpc/enums/rate" import { useRatesStore } from "@/stores/select-rate" -import Image from "@/components/Image" import Chip from "@/components/TempDesignSystem/Chip" import { useRoomContext } from "@/contexts/SelectRate/Room" import { isValidClientSession } from "@/utils/clientSession" diff --git a/apps/scandic-web/components/Image.tsx b/apps/scandic-web/components/Image.tsx deleted file mode 100644 index 840e69a5b..000000000 --- a/apps/scandic-web/components/Image.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client" - -import NextImage, { type ImageLoaderProps } from "next/image" - -import ImageFallback from "./ImageFallback" - -import type { CSSProperties } from "react" - -import type { ImageProps } from "@/types/components/image" - -function imageLoader({ quality, src, width }: ImageLoaderProps) { - const isAbsoluteUrl = src.startsWith("https://") || src.startsWith("http://") - const hasQS = src.indexOf("?") !== -1 - - if (isAbsoluteUrl) { - return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? "&q=" + quality : ""}` - } - - return `${src}${hasQS ? "&" : "?"}w=${width}${quality ? "&q=" + quality : ""}` -} - -// Next/Image adds & instead of ? before the params -export default function Image({ focalPoint, style, ...props }: ImageProps) { - const styles: CSSProperties = focalPoint - ? { - objectFit: "cover", - objectPosition: `${focalPoint.x}% ${focalPoint.y}%`, - ...style, - } - : { ...style } - - if (!props.src) { - return - } - - return -} diff --git a/apps/scandic-web/components/ImageContainer/index.tsx b/apps/scandic-web/components/ImageContainer/index.tsx index 897699def..5d66ebf43 100644 --- a/apps/scandic-web/components/ImageContainer/index.tsx +++ b/apps/scandic-web/components/ImageContainer/index.tsx @@ -1,6 +1,5 @@ import Caption from "@scandic-hotels/design-system/Caption" - -import Image from "../Image" +import Image from "@scandic-hotels/design-system/Image" import styles from "./imageContainer.module.css" diff --git a/apps/scandic-web/components/ImageGallery/index.tsx b/apps/scandic-web/components/ImageGallery/index.tsx index a8c1850d8..e48933936 100644 --- a/apps/scandic-web/components/ImageGallery/index.tsx +++ b/apps/scandic-web/components/ImageGallery/index.tsx @@ -5,13 +5,12 @@ import { Button as ButtonRAC } from "react-aria-components" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" +import ImageFallback from "@scandic-hotels/design-system/ImageFallback" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" import Lightbox from "@/components/Lightbox" -import ImageFallback from "../ImageFallback" - import styles from "./imageGallery.module.css" import type { ImageGalleryProps } from "@/types/components/imageGallery" diff --git a/apps/scandic-web/components/JsonToHtml/renderOptions.tsx b/apps/scandic-web/components/JsonToHtml/renderOptions.tsx index 914d26c96..b64844bfd 100644 --- a/apps/scandic-web/components/JsonToHtml/renderOptions.tsx +++ b/apps/scandic-web/components/JsonToHtml/renderOptions.tsx @@ -2,13 +2,12 @@ import { cx } from "class-variance-authority" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import { Typography } from "@scandic-hotels/design-system/Typography" import { ContentEnum } from "@scandic-hotels/trpc/types/content" import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault" -import Image from "@/components/Image" - import ImageContainer from "../ImageContainer" import Table from "../TempDesignSystem/Table" import { diff --git a/apps/scandic-web/components/Lightbox/FullView/index.tsx b/apps/scandic-web/components/Lightbox/FullView/index.tsx index 1e99df925..d18485780 100644 --- a/apps/scandic-web/components/Lightbox/FullView/index.tsx +++ b/apps/scandic-web/components/Lightbox/FullView/index.tsx @@ -6,10 +6,9 @@ import { useIntl } from "react-intl" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" - import styles from "./fullView.module.css" import type { FullViewProps } from "@/types/components/lightbox/lightbox" diff --git a/apps/scandic-web/components/Lightbox/Gallery/index.tsx b/apps/scandic-web/components/Lightbox/Gallery/index.tsx index 496c10499..2cb7d95bd 100644 --- a/apps/scandic-web/components/Lightbox/Gallery/index.tsx +++ b/apps/scandic-web/components/Lightbox/Gallery/index.tsx @@ -6,10 +6,9 @@ import { useIntl } from "react-intl" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" - import styles from "./gallery.module.css" import type { GalleryProps } from "@/types/components/lightbox/lightbox" diff --git a/apps/scandic-web/components/MyPages/Surprises/Card.tsx b/apps/scandic-web/components/MyPages/Surprises/Card.tsx index fc512f993..eca492fbb 100644 --- a/apps/scandic-web/components/MyPages/Surprises/Card.tsx +++ b/apps/scandic-web/components/MyPages/Surprises/Card.tsx @@ -1,9 +1,8 @@ import { useIntl } from "react-intl" +import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" - import styles from "./surprises.module.css" import type { CardProps } from "@/types/components/blocks/surprises" diff --git a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx index 5424f3fbe..965696873 100644 --- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx @@ -4,8 +4,7 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" import { Divider } from "@scandic-hotels/design-system/Divider" - -import Image from "@/components/Image" +import Image from "@scandic-hotels/design-system/Image" import styles from "./ancillaryCard.module.css" diff --git a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx index ccdbfd6a9..ee6128fb7 100644 --- a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx @@ -2,10 +2,10 @@ import { cx } from "class-variance-authority" import Link from "next/link" import Body from "@scandic-hotels/design-system/Body" +import Image from "@scandic-hotels/design-system/Image" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" -import Image from "@/components/Image" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import { diff --git a/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx index 077a1a821..ea3634d98 100644 --- a/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx @@ -1,10 +1,9 @@ import Body from "@scandic-hotels/design-system/Body" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" import Link from "@scandic-hotels/design-system/Link" import Title from "@scandic-hotels/design-system/Title" -import Image from "@/components/Image" - import { loyaltyCardVariants } from "./variants" import styles from "./loyaltyCard.module.css" diff --git a/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx index 6eb1422b2..7e44946c9 100644 --- a/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx @@ -4,11 +4,10 @@ import { useIntl } from "react-intl" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Image from "@scandic-hotels/design-system/Image" +import ImageFallback from "@scandic-hotels/design-system/ImageFallback" import { Typography } from "@scandic-hotels/design-system/Typography" -import Image from "@/components/Image" -import ImageFallback from "@/components/ImageFallback" - import ShowMoreButton from "../ShowMoreButton" import { translateRoomLighting, translateSeatingType } from "./utils" diff --git a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx index 290b9a521..6314eaf7e 100644 --- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx @@ -1,9 +1,8 @@ import Body from "@scandic-hotels/design-system/Body" import ButtonLink from "@scandic-hotels/design-system/ButtonLink" +import Image from "@scandic-hotels/design-system/Image" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import Image from "@/components/Image" - import TeaserCardSidepeek from "./Sidepeek" import { teaserCardVariants } from "./variants" diff --git a/apps/scandic-web/providers/BookingConfirmationProvider.tsx b/apps/scandic-web/providers/BookingConfirmationProvider.tsx index 544fef2e3..c781d7223 100644 --- a/apps/scandic-web/providers/BookingConfirmationProvider.tsx +++ b/apps/scandic-web/providers/BookingConfirmationProvider.tsx @@ -4,11 +4,11 @@ import { useRef } from "react" import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" +import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { createBookingConfirmationStore } from "@/stores/booking-confirmation" import { BookingConfirmationContext } from "@/contexts/BookingConfirmation" -import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import type { BookingConfirmationStore } from "@/types/contexts/booking-confirmation" import type { BookingConfirmationProviderProps } from "@/types/providers/booking-confirmation" diff --git a/apps/scandic-web/stores/my-stay/helpers.ts b/apps/scandic-web/stores/my-stay/helpers.ts index ba8828a60..eecfd9777 100644 --- a/apps/scandic-web/stores/my-stay/helpers.ts +++ b/apps/scandic-web/stores/my-stay/helpers.ts @@ -1,5 +1,4 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" - import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import type { IntlShape } from "react-intl" diff --git a/apps/scandic-web/types/components/image.ts b/apps/scandic-web/types/components/image.ts index 220e598f5..88444e637 100644 --- a/apps/scandic-web/types/components/image.ts +++ b/apps/scandic-web/types/components/image.ts @@ -1,5 +1,4 @@ import type { FocalPoint } from "@scandic-hotels/trpc/types/image" -import type { ImageProps as NextImageProps } from "next/image" interface Dimensions { width: number @@ -20,7 +19,3 @@ export interface ApiImage { dimensions?: Dimensions focalPoint?: FocalPoint } - -export interface ImageProps extends NextImageProps { - focalPoint?: FocalPoint -} diff --git a/packages/design-system/lib/components/Image.tsx b/packages/design-system/lib/components/Image.tsx new file mode 100644 index 000000000..0eba7aaec --- /dev/null +++ b/packages/design-system/lib/components/Image.tsx @@ -0,0 +1,47 @@ +'use client' + +import NextImage, { + type ImageLoaderProps, + ImageProps as NextImageProps, +} from 'next/image' + +import ImageFallback from './ImageFallback' + +import type { CSSProperties } from 'react' + +type FocalPoint = { + x: number + y: number +} + +export interface ImageProps extends NextImageProps { + focalPoint?: FocalPoint +} + +function imageLoader({ quality, src, width }: ImageLoaderProps) { + const isAbsoluteUrl = src.startsWith('https://') || src.startsWith('http://') + const hasQS = src.indexOf('?') !== -1 + + if (isAbsoluteUrl) { + return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? '&q=' + quality : ''}` + } + + return `${src}${hasQS ? '&' : '?'}w=${width}${quality ? '&q=' + quality : ''}` +} + +// Next/Image adds & instead of ? before the params +export default function Image({ focalPoint, style, ...props }: ImageProps) { + const styles: CSSProperties = focalPoint + ? { + objectFit: 'cover', + objectPosition: `${focalPoint.x}% ${focalPoint.y}%`, + ...style, + } + : { ...style } + + if (!props.src) { + return + } + + return +} diff --git a/apps/scandic-web/components/ImageFallback/imageFallback.module.css b/packages/design-system/lib/components/ImageFallback/imageFallback.module.css similarity index 100% rename from apps/scandic-web/components/ImageFallback/imageFallback.module.css rename to packages/design-system/lib/components/ImageFallback/imageFallback.module.css diff --git a/apps/scandic-web/components/ImageFallback/index.tsx b/packages/design-system/lib/components/ImageFallback/index.tsx similarity index 67% rename from apps/scandic-web/components/ImageFallback/index.tsx rename to packages/design-system/lib/components/ImageFallback/index.tsx index 6b38ce1f3..f5f727cbd 100644 --- a/apps/scandic-web/components/ImageFallback/index.tsx +++ b/packages/design-system/lib/components/ImageFallback/index.tsx @@ -1,6 +1,6 @@ -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { MaterialIcon } from '../Icons/MaterialIcon' -import styles from "./imageFallback.module.css" +import styles from './imageFallback.module.css' interface ImageFallbackProps { width?: string @@ -8,8 +8,8 @@ interface ImageFallbackProps { } export default function ImageFallback({ - width = "100%", - height = "100%", + width = '100%', + height = '100%', }: ImageFallbackProps) { return (
diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 97102e54b..7750ef4ee 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -25,6 +25,8 @@ "./Form/Phone": "./lib/components/Form/Phone/index.tsx", "./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx", "./IconChip": "./lib/components/IconChip/index.tsx", + "./Image": "./lib/components/Image.tsx", + "./ImageFallback": "./lib/components/ImageFallback/index.tsx", "./Input": "./lib/components/Input/index.tsx", "./Label": "./lib/components/Label/index.tsx", "./Link": "./lib/components/Link/index.tsx",