From 65c6bc4c598952f684606619f2e2e125fbf07165 Mon Sep 17 00:00:00 2001 From: Anton Gunnarsson Date: Tue, 2 Sep 2025 06:46:58 +0000 Subject: [PATCH] Merged in feat/sw-3369-move-loadingspinner (pull request #2742) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(SW-3369): Move LoadingSpinner to design-system * Move LoadingSpinner to design-system Approved-by: Joakim Jäderberg --- .../app/[lang]/(live)/(protected)/loading.tsx | 2 +- .../my-pages/[...path]/loading.tsx | 2 +- .../(live)/(protected)/my-pages/loading.tsx | 2 +- .../(contentTypes)/@preview/loading.tsx | 2 +- .../(public)/(contentTypes)/loading.tsx | 2 +- .../gla-payment-callback/page.tsx | 2 +- .../hotelreservation/(standard)/loading.tsx | 2 +- .../app/[lang]/(live)/(public)/loading.tsx | 2 +- .../(partner)/(sas)/(protected)/loading.tsx | 2 +- .../(protected)/sas-x-scandic/otp/loading.tsx | 3 +- .../app/[lang]/webview/refresh/page.tsx | 2 +- .../EarnAndBurn/JourneyTable/Client.tsx | 2 +- .../DynamicContent/Stays/Previous/Client.tsx | 2 +- .../DynamicContent/Stays/Upcoming/Client.tsx | 2 +- .../Blocks/DynamicContent/index.tsx | 2 +- apps/scandic-web/components/Dialog/index.tsx | 3 +- .../Headers/DynamicContent/index.tsx | 2 +- .../PaymentCallback/HandleErrorCallback.tsx | 2 +- .../PaymentCallback/HandleSuccessCallback.tsx | 2 +- .../PaymentCallback/TimeoutSpinner/index.tsx | 2 +- .../AddAncillaryFlowModal/index.tsx | 2 +- .../Ancillaries/GuaranteeCallback/index.tsx | 2 +- .../GuaranteeLateArrival/Form/index.tsx | 2 +- .../MyStay/TrackGuarantee.tsx | 2 +- .../providers/EnterDetailsProvider.tsx | 2 +- .../LoadingSpinner/LoadingSpinner.stories.tsx | 29 +++++++++++++++++++ .../lib}/components/LoadingSpinner/index.tsx | 6 ++-- .../LoadingSpinner/loading.module.css | 2 +- packages/design-system/package.json | 1 + 29 files changed, 59 insertions(+), 31 deletions(-) create mode 100644 packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx rename {apps/scandic-web => packages/design-system/lib}/components/LoadingSpinner/index.tsx (73%) rename {apps/scandic-web => packages/design-system/lib}/components/LoadingSpinner/loading.module.css (98%) diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx index 92ff5739e..cedccc4df 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" export default function Loading() { return diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx index c739b6635..b278f9856 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" export default function Loading() { return diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx index 92ff5739e..cedccc4df 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" export default function Loading() { return diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx index c739b6635..b278f9856 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" export default function Loading() { return diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx index 92ff5739e..cedccc4df 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" export default function Loading() { return diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx index 3bb7ec960..129fac816 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx @@ -2,6 +2,7 @@ import { notFound } from "next/navigation" import { myStay } from "@scandic-hotels/common/constants/routes/myStay" import { logger } from "@scandic-hotels/common/logger" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { BookingErrorCodeEnum } from "@scandic-hotels/trpc/enums/bookingErrorCode" import { PaymentCallbackStatusEnum } from "@/constants/booking" @@ -9,7 +10,6 @@ import { serverClient } from "@/lib/trpc/server" import GuaranteeCallback from "@/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback" import TrackGuarantee from "@/components/HotelReservation/MyStay/TrackGuarantee" -import LoadingSpinner from "@/components/LoadingSpinner" import type { LangParams, PageArgs } from "@/types/params" diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx index 92ff5739e..cedccc4df 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" export default function Loading() { return diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx index c9bdc9f24..9d18c0905 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" // Commenting to trigger a build export default function Loading() { diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx index aaf3fb778..efcb7b912 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { SASModal } from "./sas-x-scandic/components/SASModal" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx index 92056cfc0..5db79b4d4 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx @@ -1,10 +1,9 @@ "use client" import { useIntl } from "react-intl" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { Typography } from "@scandic-hotels/design-system/Typography" -import LoadingSpinner from "@/components/LoadingSpinner" - import { SASModal } from "../components/SASModal" export default function Loading() { diff --git a/apps/scandic-web/app/[lang]/webview/refresh/page.tsx b/apps/scandic-web/app/[lang]/webview/refresh/page.tsx index 9677171db..262253793 100644 --- a/apps/scandic-web/app/[lang]/webview/refresh/page.tsx +++ b/apps/scandic-web/app/[lang]/webview/refresh/page.tsx @@ -1,4 +1,4 @@ -import LoadingSpinner from "@/components/LoadingSpinner" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import styles from "./page.module.css" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx index 966026ce1..3b572b68d 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx @@ -3,9 +3,9 @@ import { keepPreviousData } from "@tanstack/react-query" import { useState } from "react" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { trpc } from "@scandic-hotels/trpc/client" -import LoadingSpinner from "@/components/LoadingSpinner" import Pagination from "@/components/MyPages/Pagination" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx index 147c81817..752c6b4cb 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx @@ -1,8 +1,8 @@ "use client" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { trpc } from "@scandic-hotels/trpc/client" -import LoadingSpinner from "@/components/LoadingSpinner" import Grids from "@/components/TempDesignSystem/Grids" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx index 0d49d9c9e..9c6c8298c 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx @@ -1,8 +1,8 @@ "use client" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { trpc } from "@scandic-hotels/trpc/client" -import LoadingSpinner from "@/components/LoadingSpinner" import Grids from "@/components/TempDesignSystem/Grids" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx index 8d8a15d98..7b6901632 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx @@ -1,5 +1,6 @@ import { Suspense } from "react" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent" import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks" @@ -19,7 +20,6 @@ import SASTierComparisonBlock from "@/components/Blocks/DynamicContent/SASTierCo import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper" import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous" import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming" -import LoadingSpinner from "@/components/LoadingSpinner" import JobylonFeed from "./JobylonFeed" diff --git a/apps/scandic-web/components/Dialog/index.tsx b/apps/scandic-web/components/Dialog/index.tsx index 8044ada34..b61f7f600 100644 --- a/apps/scandic-web/components/Dialog/index.tsx +++ b/apps/scandic-web/components/Dialog/index.tsx @@ -8,11 +8,10 @@ import { import Body from "@scandic-hotels/design-system/Body" import Link from "@scandic-hotels/design-system/Link" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import LoadingSpinner from "@/components/LoadingSpinner" - import styles from "./dialog.module.css" import type { DialogProps } from "@/types/components/dialog" diff --git a/apps/scandic-web/components/Headers/DynamicContent/index.tsx b/apps/scandic-web/components/Headers/DynamicContent/index.tsx index 758f5f019..5bb8ace11 100644 --- a/apps/scandic-web/components/Headers/DynamicContent/index.tsx +++ b/apps/scandic-web/components/Headers/DynamicContent/index.tsx @@ -1,9 +1,9 @@ import { Suspense } from "react" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent" import EmployeeBenefitsCallToActions from "@/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions" -import LoadingSpinner from "@/components/LoadingSpinner" import type { HeaderDynamicContentProps } from "@/types/components/headers/dynamicContent" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx index 6d082a9f7..4ef3d1ab6 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx @@ -5,11 +5,11 @@ import { useEffect } from "react" import { serializeBookingSearchParams } from "@scandic-hotels/booking-flow/utils/url" import { trackEvent } from "@scandic-hotels/common/tracking/base" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { PaymentCallbackStatusEnum } from "@/constants/booking" import { detailsStorageName } from "@/stores/enter-details" -import LoadingSpinner from "@/components/LoadingSpinner" import { trackPaymentEvent } from "@/utils/tracking" import { diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx index 2391037a0..f71c1a843 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx @@ -3,11 +3,11 @@ import { useRouter } from "next/navigation" import { useEffect } from "react" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus" import { MEMBERSHIP_FAILED_ERROR } from "@/constants/booking" -import LoadingSpinner from "@/components/LoadingSpinner" import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus" import TimeoutSpinner from "./TimeoutSpinner" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx index 40196236c..b9abf33aa 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx @@ -4,11 +4,11 @@ import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" import Link from "@scandic-hotels/design-system/Link" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { customerService } from "@/constants/webHrefs" -import LoadingSpinner from "@/components/LoadingSpinner" import useLang from "@/hooks/useLang" import styles from "./timeoutSpinner.module.css" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx index 976759c68..edfd558a0 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx @@ -11,6 +11,7 @@ import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotel import { dt } from "@scandic-hotels/common/dt" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { Divider } from "@scandic-hotels/design-system/Divider" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import Modal from "@scandic-hotels/design-system/Modal" import { toast } from "@scandic-hotels/design-system/Toast" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -31,7 +32,6 @@ import { getAncillarySessionData, setAncillarySessionData, } from "@/components/HotelReservation/MyStay/utils/ancillaries" -import LoadingSpinner from "@/components/LoadingSpinner" import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking" import useLang from "@/hooks/useLang" import { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx index f364e0bd4..2b9f92443 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx @@ -3,13 +3,13 @@ import { useRouter } from "next/navigation" import { useEffect } from "react" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { trpc } from "@scandic-hotels/trpc/client" import { clearAncillarySessionData, getAncillarySessionData, } from "@/components/HotelReservation/MyStay/utils/ancillaries" -import LoadingSpinner from "@/components/LoadingSpinner" import { trackAncillaryFailed, trackAncillarySuccess, diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx index 4172a3c8f..295720096 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx @@ -9,6 +9,7 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { Divider } from "@scandic-hotels/design-system/Divider" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import Link from "@scandic-hotels/design-system/Link" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { toast } from "@scandic-hotels/design-system/Toast" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -20,7 +21,6 @@ import { writeGlaToSessionStorage } from "@/components/HotelReservation/EnterDet import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup" import MySavedCards from "@/components/HotelReservation/MySavedCards" import PaymentOption from "@/components/HotelReservation/PaymentOption" -import LoadingSpinner from "@/components/LoadingSpinner" import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking" import useLang from "@/hooks/useLang" import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx b/apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx index f4f658f87..ac7a6badc 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx @@ -4,6 +4,7 @@ import { useRouter } from "next/navigation" import { useEffect } from "react" import { trackEvent } from "@scandic-hotels/common/tracking/base" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { PaymentCallbackStatusEnum } from "@/constants/booking" @@ -12,7 +13,6 @@ import { readGlaFromSessionStorage, } from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/helpers" import { getAncillarySessionData } from "@/components/HotelReservation/MyStay/utils/ancillaries" -import LoadingSpinner from "@/components/LoadingSpinner" import { buildAncillariesTracking, buildBreakfastTracking, diff --git a/apps/scandic-web/providers/EnterDetailsProvider.tsx b/apps/scandic-web/providers/EnterDetailsProvider.tsx index 884127dbb..2684b34d3 100644 --- a/apps/scandic-web/providers/EnterDetailsProvider.tsx +++ b/apps/scandic-web/providers/EnterDetailsProvider.tsx @@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react" import { isSameBooking } from "@scandic-hotels/booking-flow/utils/isSameBooking" import { dt } from "@scandic-hotels/common/dt" +import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { createDetailsStore } from "@/stores/enter-details" import { @@ -15,7 +16,6 @@ import { import { getMultiroomDetailsSchema } from "@/components/HotelReservation/EnterDetails/Details/Multiroom/schema" import { guestDetailsSchema } from "@/components/HotelReservation/EnterDetails/Details/RoomOne/schema" -import LoadingSpinner from "@/components/LoadingSpinner" import { DetailsContext } from "@/contexts/Details" import type { DetailsStore } from "@/types/contexts/enter-details" diff --git a/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx b/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx new file mode 100644 index 000000000..19ec3ba17 --- /dev/null +++ b/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/nextjs-vite' + +import { LoadingSpinner } from './index' + +const meta: Meta = { + title: 'Components/LoadingSpinner', + component: LoadingSpinner, + argTypes: { + fullPage: { + control: 'check', + }, + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + fullPage: false, + }, +} + +export const Fullpage: Story = { + args: { + fullPage: true, + }, +} diff --git a/apps/scandic-web/components/LoadingSpinner/index.tsx b/packages/design-system/lib/components/LoadingSpinner/index.tsx similarity index 73% rename from apps/scandic-web/components/LoadingSpinner/index.tsx rename to packages/design-system/lib/components/LoadingSpinner/index.tsx index 93c87d3c1..06a9fc17a 100644 --- a/apps/scandic-web/components/LoadingSpinner/index.tsx +++ b/packages/design-system/lib/components/LoadingSpinner/index.tsx @@ -1,8 +1,8 @@ -import styles from "./loading.module.css" +import styles from './loading.module.css' -export default function LoadingSpinner({ fullPage }: { fullPage?: boolean }) { +export function LoadingSpinner({ fullPage }: { fullPage?: boolean }) { return ( -
+
diff --git a/apps/scandic-web/components/LoadingSpinner/loading.module.css b/packages/design-system/lib/components/LoadingSpinner/loading.module.css similarity index 98% rename from apps/scandic-web/components/LoadingSpinner/loading.module.css rename to packages/design-system/lib/components/LoadingSpinner/loading.module.css index 17b9cb741..543d933af 100644 --- a/apps/scandic-web/components/LoadingSpinner/loading.module.css +++ b/packages/design-system/lib/components/LoadingSpinner/loading.module.css @@ -22,7 +22,7 @@ } .spinner div::after { - content: " "; + content: ' '; display: block; position: absolute; top: 3px; diff --git a/packages/design-system/package.json b/packages/design-system/package.json index e7f0ce0d8..737fae0f5 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -131,6 +131,7 @@ "./Label": "./lib/components/Label/index.tsx", "./Lightbox": "./lib/components/Lightbox/index.tsx", "./Link": "./lib/components/Link/index.tsx", + "./LoadingSpinner": "./lib/components/LoadingSpinner/index.tsx", "./Map/InteractiveMap": "./lib/components/Map/InteractiveMap/index.tsx", "./Map/mapConstants": "./lib/components/Map/mapConstants.ts", "./Map/Markers/HotelMarkerByType": "./lib/components/Map/Markers/HotelMarkerByType.tsx",