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

Merged in chore/sw-3145-move-skeleton-shimmer (pull request #2509)

Browse Source 
chore(SW-3145): Move SkeletonShimmer to design-system

* Move SkeletonShimmer to design-system


Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
2025-07-03 13:10:23 +00:00
parent 0ee6e8800d
commit 7ff8fee20e
60 changed files with 72 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx
View File

@@ -3,13 +3,13 @@ import React, { Suspense } from "react"
import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { hotelreservation } from "@/constants/routes/hotelReservation"
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
import Image from "@/components/Image"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Button from "@/components/TempDesignSystem/Button"
import { getIntl } from "@/i18n"

3
apps/scandic-web/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton.tsx
View File

@@ -1,9 +1,8 @@
"use client"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import HotelListingItemSkeleton from "./HotelListingItem/HotelListingItemSkeleton"
import styles from "./campaignHotelListing.module.css"

3
apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/HotelListingItemSkeleton.tsx
View File

@@ -1,8 +1,7 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "./hotelListingItem.module.css"
export default function HotelListingItemSkeleton() {

2
apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx
View File

@@ -3,6 +3,7 @@ import { type ReactNode, Suspense } from "react"
import DiamondAddIcon from "@scandic-hotels/design-system/Icons/DiamondAddIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
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"
@@ -15,7 +16,6 @@ import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { getIntl } from "@/i18n"
import { UnlinkSAS } from "./UnlinkSAS"

2
apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx
View File

@@ -1,11 +1,11 @@
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
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 SkeletonShimmer from "@/components/SkeletonShimmer"
import { getIntl } from "@/i18n"
import { TransferPointsFormClient } from "./TransferPointsFormClient"

2
apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -7,11 +7,11 @@ import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { shortDateFormat } from "@/constants/dateFormats"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import useLang from "@/hooks/useLang"
import styles from "./button.module.css"

2
apps/scandic-web/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import TopCampaignSkeleton from "@/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "./campaignOverviewPage.module.css"

2
apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton.tsx
View File

@@ -1,7 +1,7 @@
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import CampaignHotelListingSkeleton from "@/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "./topCampaign.module.css"

2
apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import CampaignHotelListingSkeleton from "@/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "./campaignPage.module.css"

3
apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/CityListingItemSkeleton.tsx
View File

@@ -1,8 +1,7 @@
"use client"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import ExperienceListSkeleton from "../../ExperienceList/ExperienceListSkeleton"

2
apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingSkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import CityListingItemSkeleton from "./CityListingItem/CityListingItemSkeleton"

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/HotelListSkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import HotelListItemSkeleton from "../HotelListItem/HotelListItemSkeleton"

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/HotelListItemSkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./hotelListItem.module.css"

3
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton.tsx
View File

@@ -1,6 +1,7 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import ExperienceListSkeleton from "../ExperienceList/ExperienceListSkeleton"

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/CityListSkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import CityListItemSkeleton from "../CityListItem/CityListItemSkeleton"

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/CityListItemSkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import ExperienceListSkeleton from "../../../ExperienceList/ExperienceListSkeleton"

3
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton.tsx
View File

@@ -1,6 +1,7 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import CityListingSkeleton from "../CityListing/CityListingSkeleton"

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx
View File

@@ -1,11 +1,11 @@
import { Suspense } from "react"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getDestinationOverviewPage } from "@/lib/trpc/memoizedRequests"
import Blocks from "@/components/Blocks"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import TrackingSDK from "@/components/TrackingSDK"
import { DestinationSearch } from "./DestinationSearch"

2
apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/ExperienceListSkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./experienceList.module.css"

3
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/HotelListingItemSkeleton.tsx
View File

@@ -1,8 +1,7 @@
"use client"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./hotelListingItem.module.css"

2
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingSkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import HotelListingItemSkeleton from "./HotelListingItem/HotelListingItemSkeleton"

2
apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/SidebarContentWrapperSkeleton.tsx
View File

@@ -2,7 +2,7 @@
import React from "react"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./sidebarContentWrapper.module.css"

2
apps/scandic-web/components/ContentType/DestinationPage/TopImages/TopImagesSkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./topImages.module.css"

2
apps/scandic-web/components/Current/Header/LanguageSwitcher/index.tsx
View File

@@ -2,9 +2,9 @@
import { usePathname } from "next/navigation"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { trpc } from "@scandic-hotels/trpc/client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import useLang from "@/hooks/useLang"
import Desktop from "./Desktop"

2
apps/scandic-web/components/Current/Header/MainMenu/index.tsx
View File

@@ -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 SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { logout } from "@/constants/routes/handleAuth"
import { env } from "@/env/client"
@@ -15,7 +16,6 @@ import useDropdownStore from "@/stores/main-menu"
import Image from "@/components/Image"
import LoginButton from "@/components/LoginButton"
import Avatar from "@/components/MyPages/Avatar"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import { trackClick } from "@/utils/tracking"

2
apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx
View File

@@ -3,12 +3,12 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { logout } from "@/constants/routes/handleAuth"
import useDropdownStore from "@/stores/main-menu"
import { useMyPagesNavigation } from "@/components/Header/MainMenu/MyPagesMenuContent"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"

2
apps/scandic-web/components/Current/Header/TopMenu/index.tsx
View File

@@ -1,10 +1,10 @@
import { overview } from "@scandic-hotels/common/constants/routes/myPages"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { logout } from "@/constants/routes/handleAuth"
import { getName } from "@/lib/trpc/memoizedRequests"
import LoginButton from "@/components/LoginButton"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

2
apps/scandic-web/components/Footer/Details/index.tsx
View File

@@ -1,10 +1,10 @@
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 SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

2
apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import { trackFooterClick } from "@/utils/tracking"

2
apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"

3
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/index.tsx
View File

@@ -1,6 +1,5 @@
import Body from "@scandic-hotels/design-system/Body"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { listItemVariants } from "./variants"

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/index.tsx
View File

@@ -1,4 +1,4 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import Label from "./Label"
import ListItem, { ListItemSkeleton } from "./ListItem"

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -9,9 +9,9 @@ import { useIntl } from "react-intl"
import { logger } from "@scandic-hotels/common/logger"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { useSearchHistory } from "@/hooks/useSearchHistory"
import { Input } from "../Input"

3
apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
View File

@@ -3,8 +3,7 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import Caption from "@scandic-hotels/design-system/Caption"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import BookingCode from "../BookingCode"
import RewardNight from "../RewardNight"

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -13,7 +14,6 @@ import { hotelreservation } from "@/constants/routes/hotelReservation"
import DatePicker from "@/components/DatePicker"
import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Button from "@/components/TempDesignSystem/Button"
import useLang from "@/hooks/useLang"

2
apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx
View File

@@ -5,10 +5,10 @@ import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import useDropdownStore from "@/stores/main-menu"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import useClickOutside from "@/hooks/useClickOutside"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import { getInitials } from "@/utils/user"

2
apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
View File

@@ -1,6 +1,6 @@
import { cx } from "class-variance-authority"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import NavigationMenuItem from "../NavigationMenuItem"

2
apps/scandic-web/components/Header/TopMenu/index.tsx
View File

@@ -1,10 +1,10 @@
import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { getHeader } from "@/lib/trpc/memoizedRequests"
import { IconName } from "@/components/Icons/iconName"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isLoggedInUser } from "@/utils/isLoggedInUser"

2
apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
View File

@@ -3,10 +3,10 @@
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./paymentDetails.module.css"

2
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/RoomSkeletonLoader.tsx
View File

@@ -1,4 +1,4 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./roomSkeletonLoader.module.css"

2
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
View File

@@ -4,12 +4,12 @@ import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import BookingCodeChip from "@/components/BookingCodeChip"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import PriceDetails from "../../PriceDetails"

2
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/LinkedReservationCardSkeleton.tsx
View File

@@ -1,4 +1,4 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./linkedReservationCardSkeleton.module.css"

2
apps/scandic-web/components/HotelReservation/HotelCard/HotelCardSkeleton.tsx
View File

@@ -1,4 +1,4 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./HotelCardSkeleton.module.css"

2
apps/scandic-web/components/HotelReservation/MyStay/PriceType/Cheques.tsx
View File

@@ -2,9 +2,9 @@
import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { formatPrice } from "@/utils/numberFormatting"
export default function Cheques({

2
apps/scandic-web/components/HotelReservation/MyStay/PriceType/Points.tsx
View File

@@ -2,9 +2,9 @@
import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { formatPrice } from "@/utils/numberFormatting"
export default function Points({

2
apps/scandic-web/components/HotelReservation/MyStay/PriceType/Vouchers.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import { useIntl } from "react-intl"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { formatPrice } from "@/utils/numberFormatting"
import type { CurrencyEnum } from "@scandic-hotels/common/constants/currency"

2
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx
View File

@@ -1,12 +1,12 @@
"use client"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
import PriceDetails from "@/components/HotelReservation/MyStay/PriceDetails"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import BookingInformation from "./BookingInformation"
import Details from "./Details"

2
apps/scandic-web/components/HotelReservation/MyStay/myStaySkeleton.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./myStay.module.css"

2
apps/scandic-web/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton.tsx
View File

@@ -1,4 +1,4 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./RoomCardSkeleton.module.css"

3
apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
View File

@@ -1,5 +1,6 @@
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "./SelectHotelMapContainerSkeleton.module.css"

2
apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx
View File

@@ -1,4 +1,4 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { HotelCardSkeleton } from "../HotelCard/HotelCardSkeleton"

2
apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -1,10 +1,10 @@
import { dt } from "@scandic-hotels/common/dt"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Alert from "@/components/TempDesignSystem/Alert"
import { getIntl } from "@/i18n"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

2
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
View File

@@ -4,10 +4,10 @@ import { useSession } from "next-auth/react"
import { dt } from "@scandic-hotels/common/dt"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { useRatesStore } from "@/stores/select-rate"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import { isValidClientSession } from "@/utils/clientSession"

2
apps/scandic-web/components/LanguageSwitcher/index.tsx
View File

@@ -6,6 +6,7 @@ import FocusLock from "react-focus-lock"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -17,7 +18,6 @@ import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import useLang from "@/hooks/useLang"
import { trackLanguageSwitchClick } from "@/utils/tracking/navigation"
import SkeletonShimmer from "../SkeletonShimmer"
import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
import LanguageSwitcherContent from "./LanguageSwitcherContent"
import { languageSwitcherVariants } from "./variants"

2
apps/scandic-web/components/MeetingPackageWidget/Skeleton/index.tsx
View File

@@ -1,4 +1,4 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./skeleton.module.css"

2
apps/scandic-web/components/Sidebar/SidebarSkeleton.tsx
View File

@@ -1,4 +1,4 @@
import SkeletonShimmer from "../SkeletonShimmer"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import styles from "./sidebar.module.css"

2
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx
View File

@@ -1,7 +1,7 @@
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
import { breadcrumbsVariants } from "../variants"

21
apps/scandic-web/components/SkeletonShimmer/index.tsx → packages/design-system/lib/components/SkeletonShimmer/index.tsx
View File

@@ -1,6 +1,6 @@
import { cva, cx } from "class-variance-authority"
import { cva, cx } from 'class-variance-authority'
import styles from "./skeleton.module.css"
import styles from './skeleton.module.css'
const variants = cva(styles.shimmer, {
variants: {
@@ -10,12 +10,12 @@ const variants = cva(styles.shimmer, {
},
display: {
block: styles.block,
"inline-block": styles.inlineBlock,
'inline-block': styles.inlineBlock,
},
},
defaultVariants: {
contrast: "light",
display: "inline-block",
contrast: 'light',
display: 'inline-block',
},
})
@@ -23,14 +23,14 @@ export default function SkeletonShimmer({
className,
height,
width,
contrast = "light",
display = "inline-block",
contrast = 'light',
display = 'inline-block',
}: {
className?: string
height?: string
width?: string
contrast?: "light" | "dark"
display?: "block" | "inline-block"
contrast?: 'light' | 'dark'
display?: 'block' | 'inline-block'
}) {
return (
<span
@@ -38,11 +38,10 @@ export default function SkeletonShimmer({
style={{
height: height,
width: width,
maxWidth: "100%",
maxWidth: '100%',
}}
>
{/* zero width space, allows for font styles to affect height */}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span aria-hidden="true">&#8203;</span>
</span>
)

2
apps/scandic-web/components/SkeletonShimmer/skeleton.module.css → packages/design-system/lib/components/SkeletonShimmer/skeleton.module.css
View File

@@ -35,7 +35,7 @@
transform: translateX(-100%);
background-image: var(--shimmer);
animation: shimmer 3s infinite;
content: "";
content: '';
}
.shimmer span {
visibility: hidden;

1
packages/design-system/package.json
View File

@@ -17,6 +17,7 @@
"./Input": "./dist/components/Input/index.js",
"./Label": "./dist/components/Label/index.js",
"./Select": "./dist/components/Select/index.js",
"./SkeletonShimmer": "./dist/components/SkeletonShimmer/index.js",
"./Tooltip": "./dist/components/Tooltip/index.js",
"./Typography": "./dist/components/Typography/index.js",
"./RegularRateCard": "./dist/components/RateCard/Regular/index.js",