From 71c6f4cab3a72bc3465b07b2b2e0ef92d1897fb4 Mon Sep 17 00:00:00 2001 From: Hrishikesh Vaipurkar Date: Mon, 7 Jul 2025 07:11:18 +0000 Subject: [PATCH] Merged in chore/SW-3145-move-button (pull request #2527) chore: SW-3145 Moved tempdesign button to design-system * chore: SW-3145 Moved tempdesign button to design-system Approved-by: Anton Gunnarsson --- .../components/AlreadyLinkedError.tsx | 2 +- .../components/DateOfBirthError.tsx | 2 +- .../components/TooManyCodesError.tsx | 3 +- .../components/TooManyFailedAttemptsError.tsx | 3 +- .../sas-x-scandic/link/LinkAccountForm.tsx | 2 +- .../sas-x-scandic/transfer/success/page.tsx | 2 +- .../JobylonFeed/JobylonCard/index.tsx | 2 +- .../Overview/Buttons/CopyButton.tsx | 2 +- .../Rewards/Redeem/ConfirmClose.tsx | 3 +- .../Rewards/Redeem/Flows/Campaign.tsx | 2 +- .../Rewards/Redeem/Flows/Tier.tsx | 2 +- .../DynamicContent/Rewards/Redeem/index.tsx | 2 +- .../SAS/LinkedAccounts/UnlinkSAS.tsx | 2 +- .../TransferPointsFormClient.tsx | 2 +- .../Stays/ShowMoreButton/index.tsx | 3 +- .../Blocks/FullWidthCampaign/index.tsx | 2 +- .../CityListing/CityListingItem/index.tsx | 2 +- .../CountryMap/CityListItem/index.tsx | 2 +- .../DestinationPage/HotelListing/index.tsx | 2 +- .../DestinationPage/Map/DynamicMap/index.tsx | 2 +- .../ContentType/DestinationPage/Map/index.tsx | 2 +- .../DestinationPage/Sidepeek/index.tsx | 2 +- .../StaticMap/MapButton/index.tsx | 3 +- .../DestinationPage/TopImages/index.tsx | 3 +- .../HotelPage/Map/MapCard/index.tsx | 2 +- .../HotelPage/SidePeeks/Activities/index.tsx | 2 +- .../HotelPage/SidePeeks/Room/index.tsx | 2 +- .../Sidebar/RestaurantSidebar.tsx | 2 +- .../components/Current/Aside/Puff/index.tsx | 3 +- .../components/DatePicker/Range/Desktop.tsx | 2 +- .../components/DatePicker/Range/Mobile.tsx | 2 +- .../components/DatePicker/Single/Desktop.tsx | 2 +- .../components/DatePicker/Single/Mobile.tsx | 2 +- .../DestinationFilterAndSort/index.tsx | 3 +- apps/scandic-web/components/Dialog/index.tsx | 2 +- .../FormContent/BookingCode/index.tsx | 2 +- .../FormContent/RewardNight/index.tsx | 2 +- .../Forms/BookingWidget/FormContent/index.tsx | 2 +- .../components/Forms/Edit/Profile/index.tsx | 2 +- .../GuestsRoomsPicker/Counter/index.tsx | 3 +- .../GuestsRoomsPicker/GuestsRoom/index.tsx | 3 +- .../Header/Actions/AddToCalendarButton.tsx | 3 +- .../Header/Actions/DownloadInvoice.tsx | 3 +- .../Header/Actions/ManageBooking.tsx | 2 +- .../Promos/Promo/index.tsx | 2 +- .../Rooms/LinkedReservation/Retry.tsx | 3 +- .../Details/MemberPriceModal/index.tsx | 2 +- .../RoomOne/JoinScandicFriendsCard/index.tsx | 2 +- .../PriceChangeSummary/index.tsx | 2 +- .../EnterDetails/PriceChangeDialog/index.tsx | 2 +- .../FindMyBooking/AdditionalInfoForm.tsx | 2 +- .../HotelReservation/FindMyBooking/index.tsx | 2 +- .../ListingHotelCardDialog/index.tsx | 2 +- .../StandaloneHotelCardDialog/index.tsx | 2 +- .../AddedAncillaries/RemoveButton.tsx | 2 +- .../Ancillaries/ViewAllAncillaries/index.tsx | 3 +- .../MyStay/GuestDetails/index.tsx | 2 +- .../Modal/ModalContent/Footer/index.tsx | 2 +- .../HotelReservation/MyStay/Promo/index.tsx | 2 +- .../Actions/Cancelled/CustomerSupport.tsx | 3 +- .../Rooms/SingleRoom/RoomDetailsSidePeek.tsx | 2 +- .../Filters/FilterAndSortModal/index.tsx | 2 +- .../MobileMapButtonContainer/index.tsx | 2 +- .../SelectHotelMapContent/index.tsx | 2 +- .../RoomsContainer/RateSummary/index.tsx | 2 +- .../SelectedRoomPanel/index.tsx | 2 +- .../Rooms/MultiRoomWrapper/index.tsx | 2 +- .../components/Maps/InteractiveMap/index.tsx | 3 +- .../Modal/ModalContentWithActions/index.tsx | 3 +- .../Profile/AddCreditCardButton/index.tsx | 2 +- .../Profile/DeleteCreditCardConfirmation.tsx | 2 +- .../Profile/ManagePreferencesButton/index.tsx | 2 +- .../components/Sidebar/JoinLoyalty/index.tsx | 2 +- .../TempDesignSystem/Alert/Sidepeek/index.tsx | 2 +- .../TempDesignSystem/Card/index.tsx | 2 +- .../Form/PasswordInput/index.tsx | 3 +- .../TempDesignSystem/ShowMoreButton/index.tsx | 3 +- .../components/OldDSButton/button.module.css | 843 ++++++++++++++++++ .../lib/components/OldDSButton/button.ts | 20 + .../lib/components/OldDSButton/index.tsx | 53 ++ .../lib/components/OldDSButton/variants.ts | 154 ++++ packages/design-system/package.json | 1 + 82 files changed, 1151 insertions(+), 93 deletions(-) create mode 100644 packages/design-system/lib/components/OldDSButton/button.module.css create mode 100644 packages/design-system/lib/components/OldDSButton/button.ts create mode 100644 packages/design-system/lib/components/OldDSButton/index.tsx create mode 100644 packages/design-system/lib/components/OldDSButton/variants.ts diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx index 38a0358f4..70785089c 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx @@ -4,9 +4,9 @@ import { useIntl } from "react-intl" import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import { SASModal, SASModalContactBlock, SASModalDivider } from "./SASModal" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx index c74cb45f7..d86826d57 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx @@ -4,9 +4,9 @@ import { useIntl } from "react-intl" import { profile } from "@scandic-hotels/common/constants/routes/myPages" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import { SASModal, SASModalContactBlock, SASModalDivider } from "./SASModal" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx index 91ee95d62..ed926f9bc 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx @@ -2,10 +2,9 @@ import { useIntl } from "react-intl" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" -import Button from "@/components/TempDesignSystem/Button" - import { GenericError } from "./GenericError" export function TooManyCodesError() { diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx index 8b4947062..68dac05d5 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx @@ -2,10 +2,9 @@ import { useIntl } from "react-intl" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" -import Button from "@/components/TempDesignSystem/Button" - import { GenericError } from "./GenericError" export function TooManyFailedAttemptsError() { 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 8f1ee6d80..912e33bdb 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,12 +8,12 @@ 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 { 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 Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import styles from "./link-sas.module.css" 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 cde207452..1c2979201 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 @@ -3,6 +3,7 @@ import React, { Suspense } from "react" import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +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" @@ -10,7 +11,6 @@ import { hotelreservation } from "@/constants/routes/hotelReservation" import { getProfileSafely } from "@/lib/trpc/memoizedRequests" import Image from "@/components/Image" -import Button from "@/components/TempDesignSystem/Button" import { getIntl } from "@/i18n" import { SASModal } from "../../components/SASModal" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx index ecc875e80..c085fbe57 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx @@ -5,9 +5,9 @@ import { useIntl } from "react-intl" 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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import styles from "./jobylonCard.module.css" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx index 7f99cb5a0..0fe1c5518 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx @@ -3,8 +3,8 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" -import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" import styles from "./copybutton.module.css" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx index 961626ff5..c767d5386 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx @@ -1,10 +1,9 @@ import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" -import Button from "@/components/TempDesignSystem/Button" - import useRedeemFlow from "./useRedeemFlow" import styles from "./redeem.module.css" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx index aea5a8eef..fec692c0b 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx @@ -5,9 +5,9 @@ import { useIntl } from "react-intl" 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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" -import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" import { RewardIcon } from "../../RewardIcon" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx index 3ab09d385..0b6c60432 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx @@ -3,10 +3,10 @@ import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" import JsonToHtml from "@/components/JsonToHtml" -import Button from "@/components/TempDesignSystem/Button" import { isRestaurantOnSiteTierReward } from "@/utils/rewards" import { RewardIcon } from "../../RewardIcon" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx index ebf7eb0ac..338b85c3d 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx @@ -12,9 +12,9 @@ import { useIntl } from "react-intl" import { logger } from "@scandic-hotels/common/logger" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { trpc } from "@scandic-hotels/trpc/client" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import { isRestaurantOnSiteTierReward } from "@/utils/rewards" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx index 73e29790c..8f2e657ed 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx @@ -4,9 +4,9 @@ import { useParams } from "next/navigation" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Dialog from "@/components/Dialog" -import Button from "@/components/TempDesignSystem/Button" import type { LangParams } from "@/types/params" 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 6a813a5f3..b05b42792 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx @@ -17,12 +17,12 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" 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 Button from "@/components/TempDesignSystem/Button" import styles from "./transferPoints.module.css" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx index 99d65b1c3..94f2497ed 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx @@ -3,8 +3,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import styles from "./button.module.css" diff --git a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx index d658adb91..81081db8a 100644 --- a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx +++ b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx @@ -1,8 +1,8 @@ +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 Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx index 4b3c748b5..08bf91de8 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx @@ -5,10 +5,10 @@ import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" import { Divider } from "@scandic-hotels/design-system/Divider" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import ImageGallery from "@/components/ImageGallery" -import Button from "@/components/TempDesignSystem/Button" import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery" import ExperienceList from "../../ExperienceList" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx index c2320288c..e081296e5 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx @@ -3,10 +3,10 @@ import Link from "next/link" import { useIntl } from "react-intl" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import ImageGallery from "@/components/ImageGallery" -import Button from "@/components/TempDesignSystem/Button" import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery" import ExperienceList from "../../../ExperienceList" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx index 0b4d0e9c9..96f9d7004 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx @@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType" @@ -14,7 +15,6 @@ import { useDestinationDataStore } from "@/stores/destination-data" import DestinationFilterAndSort from "@/components/DestinationFilterAndSort" import Alert from "@/components/TempDesignSystem/Alert" import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton" -import Button from "@/components/TempDesignSystem/Button" import { useScrollToTop } from "@/hooks/useScrollToTop" import HotelListingItem from "./HotelListingItem" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx index 4a9858371..df8c78795 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx @@ -8,12 +8,12 @@ import { type PropsWithChildren, useEffect, useRef, useState } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { MAP_RESTRICTIONS } from "@/constants/map" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" import ErrorBoundary from "@/components/ErrorBoundary/ErrorBoundary" -import Button from "@/components/TempDesignSystem/Button" import { useHandleKeyUp } from "@/hooks/useHandleKeyUp" import { usePageType } from "../PageTypeProvider" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx index 8a7f8342f..3c5e4d2d7 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx @@ -12,13 +12,13 @@ import { import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { useDestinationDataStore } from "@/stores/destination-data" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" import DestinationFilterAndSort from "@/components/DestinationFilterAndSort" import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton" -import Button from "@/components/TempDesignSystem/Button" import { useScrollToTop } from "@/hooks/useScrollToTop" import { debounce } from "@/utils/debounce" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx index cc001fcb9..8f24902b2 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx @@ -4,9 +4,9 @@ import { useState } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import JsonToHtml from "@/components/JsonToHtml" -import Button from "@/components/TempDesignSystem/Button" import SidePeek from "@/components/TempDesignSystem/SidePeek" import { trackOpenSidePeekOnDestinationPagesEvent } from "@/utils/tracking/destinationPage" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx index a6236c2bf..539d61a5f 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx @@ -6,8 +6,7 @@ import { useEffect, useState } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" interface MapButtonProps { className?: string diff --git a/apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx index 6df6105e1..aa01e6a04 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx @@ -3,9 +3,10 @@ import { useState } from "react" import { useIntl } from "react-intl" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" + import Image from "@/components/Image" import Lightbox from "@/components/Lightbox" -import Button from "@/components/TempDesignSystem/Button" import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery" import styles from "./topImages.module.css" diff --git a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx index 3173fd864..ffb4f8d23 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx @@ -7,10 +7,10 @@ import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" import PoiMarker from "@/components/Maps/Markers/Poi" -import Button from "@/components/TempDesignSystem/Button" import { trackHotelMapClick } from "@/utils/tracking" import styles from "./mapCard.module.css" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx index e2cc09875..f76e553b0 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx @@ -1,6 +1,6 @@ +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Preamble from "@scandic-hotels/design-system/Preamble" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import SidePeek from "@/components/TempDesignSystem/SidePeek" import { getIntl } from "@/i18n" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx index 818b4721d..48d6bc190 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx @@ -1,12 +1,12 @@ import Link from "next/link" import { dt } from "@scandic-hotels/common/dt" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import { selectRateWithParams } from "@/constants/routes/hotelReservation" import ImageGallery from "@/components/ImageGallery" -import Button from "@/components/TempDesignSystem/Button" import SidePeek from "@/components/TempDesignSystem/SidePeek" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx index 30804cba7..84e681faa 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx @@ -1,9 +1,9 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import LocalCallCharges from "@/components/LocalCallCharges" import OpeningHours from "@/components/OpeningHours" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" diff --git a/apps/scandic-web/components/Current/Aside/Puff/index.tsx b/apps/scandic-web/components/Current/Aside/Puff/index.tsx index feb3db661..83c7dab2e 100644 --- a/apps/scandic-web/components/Current/Aside/Puff/index.tsx +++ b/apps/scandic-web/components/Current/Aside/Puff/index.tsx @@ -1,10 +1,11 @@ "use client" import { useRouter } from "next/navigation" +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 Button from "@/components/TempDesignSystem/Button" import { renderOptions } from "./renderOptions" diff --git a/apps/scandic-web/components/DatePicker/Range/Desktop.tsx b/apps/scandic-web/components/DatePicker/Range/Desktop.tsx index 0ccf12aa7..b2d6760d5 100644 --- a/apps/scandic-web/components/DatePicker/Range/Desktop.tsx +++ b/apps/scandic-web/components/DatePicker/Range/Desktop.tsx @@ -9,9 +9,9 @@ import { dt } from "@scandic-hotels/common/dt" import Caption from "@scandic-hotels/design-system/Caption" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import { locales } from "../locales" diff --git a/apps/scandic-web/components/DatePicker/Range/Mobile.tsx b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx index 9364a27dc..78d5ec7b3 100644 --- a/apps/scandic-web/components/DatePicker/Range/Mobile.tsx +++ b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx @@ -7,9 +7,9 @@ import { Lang } from "@scandic-hotels/common/constants/language" import { dt } from "@scandic-hotels/common/dt" import Body from "@scandic-hotels/design-system/Body" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import { locales } from "../locales" diff --git a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx index 9526ddb03..7f1bd914f 100644 --- a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx +++ b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx @@ -9,9 +9,9 @@ import { dt } from "@scandic-hotels/common/dt" import Caption from "@scandic-hotels/design-system/Caption" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import { locales } from "../locales" diff --git a/apps/scandic-web/components/DatePicker/Single/Mobile.tsx b/apps/scandic-web/components/DatePicker/Single/Mobile.tsx index 8dff89704..794728d0a 100644 --- a/apps/scandic-web/components/DatePicker/Single/Mobile.tsx +++ b/apps/scandic-web/components/DatePicker/Single/Mobile.tsx @@ -5,9 +5,9 @@ import { useIntl } from "react-intl" import { Lang } from "@scandic-hotels/common/constants/language" import { dt } from "@scandic-hotels/common/dt" import Body from "@scandic-hotels/design-system/Body" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import { locales } from "../locales" diff --git a/apps/scandic-web/components/DestinationFilterAndSort/index.tsx b/apps/scandic-web/components/DestinationFilterAndSort/index.tsx index 2c6a299d9..5aaa1c045 100644 --- a/apps/scandic-web/components/DestinationFilterAndSort/index.tsx +++ b/apps/scandic-web/components/DestinationFilterAndSort/index.tsx @@ -13,13 +13,12 @@ import { useIntl } from "react-intl" import { Divider } from "@scandic-hotels/design-system/Divider" import Footnote from "@scandic-hotels/design-system/Footnote" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType" import { useDestinationDataStore } from "@/stores/destination-data" -import Button from "@/components/TempDesignSystem/Button" - import Alert from "../TempDesignSystem/Alert" import Filter from "./Filter" import Sort from "./Sort" diff --git a/apps/scandic-web/components/Dialog/index.tsx b/apps/scandic-web/components/Dialog/index.tsx index 1e6086bb5..369c7af9d 100644 --- a/apps/scandic-web/components/Dialog/index.tsx +++ b/apps/scandic-web/components/Dialog/index.tsx @@ -7,10 +7,10 @@ import { } from "react-aria-components" import Body from "@scandic-hotels/design-system/Body" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import LoadingSpinner from "@/components/LoadingSpinner" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import styles from "./dialog.module.css" diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx index dc9da3e62..3df369dfe 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx @@ -8,12 +8,12 @@ import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Switch from "@scandic-hotels/design-system/Switch" import { Typography } from "@scandic-hotels/design-system/Typography" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import Modal from "@/components/Modal" -import Button from "@/components/TempDesignSystem/Button" import Input from "@/components/TempDesignSystem/Form/Input" import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors" diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx index adb90df81..e9de7f537 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx @@ -8,11 +8,11 @@ import { useMediaQuery } from "usehooks-ts" import Caption from "@scandic-hotels/design-system/Caption" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import Modal from "@/components/Modal" -import Button from "@/components/TempDesignSystem/Button" import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors" import { RemoveExtraRooms } from "../BookingCode" diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx index a1e43e166..d2d0f509e 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx @@ -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 { 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 { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" @@ -14,7 +15,6 @@ import { hotelreservation } from "@/constants/routes/hotelReservation" import DatePicker from "@/components/DatePicker" import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker" -import Button from "@/components/TempDesignSystem/Button" import useLang from "@/hooks/useLang" import { RemoveExtraRooms } from "./BookingCode" diff --git a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/index.tsx index 78ab0dd07..743f050bf 100644 --- a/apps/scandic-web/components/Forms/Edit/Profile/index.tsx +++ b/apps/scandic-web/components/Forms/Edit/Profile/index.tsx @@ -7,6 +7,7 @@ import { useIntl } from "react-intl" import { profile } from "@scandic-hotels/common/constants/routes/myPages" import { logger } from "@scandic-hotels/common/logger" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" import { trpc } from "@scandic-hotels/trpc/client" import { langToApiLang } from "@scandic-hotels/trpc/constants/apiLang" @@ -17,7 +18,6 @@ import { logout } from "@/constants/routes/handleAuth" import { editProfile } from "@/actions/editProfile" import Dialog from "@/components/Dialog" import ChangeNameDisclaimer from "@/components/MyPages/Profile/ChangeNameDisclaimer" -import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing" import { formatPhoneNumber } from "@/utils/phone" diff --git a/apps/scandic-web/components/GuestsRoomsPicker/Counter/index.tsx b/apps/scandic-web/components/GuestsRoomsPicker/Counter/index.tsx index 2755eaa9b..85ca46cc1 100644 --- a/apps/scandic-web/components/GuestsRoomsPicker/Counter/index.tsx +++ b/apps/scandic-web/components/GuestsRoomsPicker/Counter/index.tsx @@ -2,8 +2,7 @@ import Body from "@scandic-hotels/design-system/Body" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import styles from "./counter.module.css" diff --git a/apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx b/apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx index c1b237d7a..00117cef9 100644 --- a/apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx +++ b/apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx @@ -2,11 +2,10 @@ import { useIntl } from "react-intl" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum" -import Button from "@/components/TempDesignSystem/Button" - import AdultSelector from "../AdultSelector" import ChildSelector from "../ChildSelector" diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx index 8b70567dd..1adf042ae 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx @@ -2,8 +2,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" export default function AddToCalendarButton({ onPress, diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx index a63aeaa32..900fa1499 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx @@ -3,8 +3,7 @@ import { useIntl } from "react-intl" import { useReactToPrint } from "react-to-print" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice" diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx index 38df0c035..8ca50a18f 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx @@ -5,8 +5,8 @@ import { useIntl } from "react-intl" import { myStay } from "@scandic-hotels/common/constants/routes/myStay" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx index 3591d79c1..5c7f91431 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx @@ -1,7 +1,7 @@ import Body from "@scandic-hotels/design-system/Body" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import styles from "./promo.module.css" diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx index 788f880a8..8618d6e09 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx @@ -3,8 +3,7 @@ import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" - -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import styles from "./retry.module.css" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx index f25580ad3..42549b6e0 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx @@ -7,11 +7,11 @@ import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import Body from "@scandic-hotels/design-system/Body" import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import Title from "@scandic-hotels/design-system/Title" import Modal from "@/components/Modal" -import Button from "@/components/TempDesignSystem/Button" import { useRoomContext } from "@/contexts/Details/Room" import { formatPrice } from "@/utils/numberFormatting" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx index d1cedc973..2f7e99522 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx @@ -4,12 +4,12 @@ import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import Footnote from "@scandic-hotels/design-system/Footnote" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import { membershipTermsAndConditions } from "@/constants/webHrefs" import LoginButton from "@/components/LoginButton" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import { useRoomContext } from "@/contexts/Details/Room" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx index 9549ef4a6..32803f92c 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx @@ -13,9 +13,9 @@ 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 { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import Button from "@/components/TempDesignSystem/Button" import { formatPrice } from "@/utils/numberFormatting" import styles from "./priceChangeSummary.module.css" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx index 1eba14616..6e05a6954 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx @@ -4,12 +4,12 @@ import { useIntl } from "react-intl" 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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import Title from "@scandic-hotels/design-system/Title" import { useEnterDetailsStore } from "@/stores/enter-details" -import Button from "@/components/TempDesignSystem/Button" import { formatPrice } from "@/utils/numberFormatting" import { calculateTotalRoomPrice } from "../Payment/helpers" diff --git a/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx b/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx index 1420c1788..738c8eab0 100644 --- a/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx +++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx @@ -6,9 +6,9 @@ import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" -import Button from "@/components/TempDesignSystem/Button" import Input from "@/components/TempDesignSystem/Form/Input" import { diff --git a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx index 848b4cb48..59f83ae7c 100644 --- a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx +++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx @@ -9,12 +9,12 @@ import { myStay } from "@scandic-hotels/common/constants/routes/myStay" import { logger } from "@scandic-hotels/common/logger" import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" import { trpc } from "@scandic-hotels/trpc/client" import { customerService } from "@/constants/webHrefs" -import Button from "@/components/TempDesignSystem/Button" import Input from "@/components/TempDesignSystem/Form/Input" import Link from "@/components/TempDesignSystem/Link" import { toast } from "@/components/TempDesignSystem/Toasts" diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx index 0bcd88ca4..806f4d7a8 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx @@ -7,11 +7,11 @@ import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReserva import Caption from "@scandic-hotels/design-system/Caption" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { Typography } from "@scandic-hotels/design-system/Typography" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" import { isValidClientSession } from "@/utils/clientSession" diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx index 9b34ab4cc..943427634 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx @@ -9,11 +9,11 @@ import Caption from "@scandic-hotels/design-system/Caption" import Footnote from "@scandic-hotels/design-system/Footnote" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { Typography } from "@scandic-hotels/design-system/Typography" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" import { isValidClientSession } from "@/utils/clientSession" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx index a96a4705c..d86bb9207 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx @@ -2,10 +2,10 @@ import { useRouter } from "next/navigation" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { trpc } from "@scandic-hotels/trpc/client" import Dialog from "@/components/Dialog" -import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" import useLang from "@/hooks/useLang" import { trackRemoveAncillary } from "@/utils/tracking/myStay" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ViewAllAncillaries/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ViewAllAncillaries/index.tsx index bfed362b3..ace7a65cd 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ViewAllAncillaries/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ViewAllAncillaries/index.tsx @@ -1,11 +1,10 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow" -import Button from "@/components/TempDesignSystem/Button" - export default function ViewAllAncillaries() { const intl = useIntl() const openModal = useAddAncillaryStore((state) => state.openModal) diff --git a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx index 487de3e8b..3814acf35 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx @@ -8,6 +8,7 @@ import { useIntl } from "react-intl" import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import { trpc } from "@scandic-hotels/trpc/client" @@ -16,7 +17,6 @@ import { isWebview } from "@/constants/routes/webviews" import MembershipLevelIcon from "@/components/Levels/Icon" import Modal from "@/components/Modal" import { ModalContentWithActions } from "@/components/Modal/ModalContentWithActions" -import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx index 8947c186c..0aeb34735 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx @@ -1,4 +1,4 @@ -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import styles from "./footer.module.css" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx index 5afeee3c1..241ee87db 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx @@ -1,7 +1,7 @@ +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import Image from "@/components/Image" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import styles from "./promo.module.css" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Cancelled/CustomerSupport.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Cancelled/CustomerSupport.tsx index 9ccaecb9f..cbd9cbfb7 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Cancelled/CustomerSupport.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Cancelled/CustomerSupport.tsx @@ -2,8 +2,9 @@ import { DialogTrigger } from "react-aria-components" import { useIntl } from "react-intl" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" + import CustomerSupportModal from "@/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal" -import Button from "@/components/TempDesignSystem/Button" export default function CustomerSupport() { const intl = useIntl() diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx index ef6ec9d42..b4b38bcdc 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx @@ -4,11 +4,11 @@ import { DialogTrigger } from "react-aria-components" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { useMyStayStore } from "@/stores/my-stay" import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek" -import Button from "@/components/TempDesignSystem/Button" import type { SafeUser } from "@/types/user" diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx index f1f84460d..b4f866ce7 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx @@ -17,11 +17,11 @@ import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect" import { Divider } from "@scandic-hotels/design-system/Divider" import Footnote from "@scandic-hotels/design-system/Footnote" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { useHotelFilterStore } from "@/stores/hotel-filters" -import Button from "@/components/TempDesignSystem/Button" import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl" import { DEFAULT_SORT } from "../../HotelSorter" diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx index 4c3e38ec8..01e320733 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx @@ -3,13 +3,13 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { alternativeHotelsMap, selectHotelMap, } from "@/constants/routes/hotelReservation" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx index 1f996b786..bac0d139c 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx @@ -5,6 +5,7 @@ import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { alternativeHotels, @@ -17,7 +18,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map" import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton" import InteractiveMap from "@/components/Maps/InteractiveMap" import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" import { useScrollToTop } from "@/hooks/useScrollToTop" diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx index d63811a91..cd639b134 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx @@ -8,6 +8,7 @@ import { dt } from "@scandic-hotels/common/dt" import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" import Footnote from "@scandic-hotels/design-system/Footnote" +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 { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType" @@ -15,7 +16,6 @@ import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType" import { useRatesStore } from "@/stores/select-rate" import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop" -import Button from "@/components/TempDesignSystem/Button" import { isValidClientSession } from "@/utils/clientSession" import { formatPrice } from "@/utils/numberFormatting" 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 286653784..ea31129ac 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 { 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 Button from "@/components/TempDesignSystem/Button" import Chip from "@/components/TempDesignSystem/Chip" import { useRoomContext } from "@/contexts/SelectRate/Room" import { isValidClientSession } from "@/utils/clientSession" diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx index 336dd02ee..5ebd58b26 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx @@ -2,11 +2,11 @@ import { useEffect } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { useRatesStore } from "@/stores/select-rate" -import Button from "@/components/TempDesignSystem/Button" import { useRoomContext } from "@/contexts/SelectRate/Room" import useStickyPosition from "@/hooks/useStickyPosition" diff --git a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx index f68205f5f..a0efdac1e 100644 --- a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx +++ b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx @@ -5,11 +5,10 @@ import { useEffect, useState } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { MAP_RESTRICTIONS } from "@/constants/map" -import Button from "@/components/TempDesignSystem/Button" - import HotelListingMapContent from "./HotelListingMapContent" import PoiMapMarkers from "./PoiMapMarkers" diff --git a/apps/scandic-web/components/Modal/ModalContentWithActions/index.tsx b/apps/scandic-web/components/Modal/ModalContentWithActions/index.tsx index 0d77c1301..db9f33339 100644 --- a/apps/scandic-web/components/Modal/ModalContentWithActions/index.tsx +++ b/apps/scandic-web/components/Modal/ModalContentWithActions/index.tsx @@ -1,8 +1,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import Button from "@/components/TempDesignSystem/Button" - import styles from "./modalContent.module.css" import type { ReactNode } from "react" diff --git a/apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx b/apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx index f1ffc4520..7c7f3c18c 100644 --- a/apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx +++ b/apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx @@ -5,9 +5,9 @@ import { useEffect, useRef } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { trpc } from "@scandic-hotels/trpc/client" -import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx b/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx index e82dffc81..9ad64eeec 100644 --- a/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx +++ b/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx @@ -2,10 +2,10 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { trpc } from "@scandic-hotels/trpc/client" import Dialog from "@/components/Dialog" -import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" import type { DeleteCreditCardConfirmationProps } from "@/types/components/myPages/myProfile/creditCards" diff --git a/apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx b/apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx index a8af17640..f735e509f 100644 --- a/apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx +++ b/apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx @@ -3,9 +3,9 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { trpc } from "@scandic-hotels/trpc/client" -import Button from "@/components/TempDesignSystem/Button" import { toast } from "@/components/TempDesignSystem/Toasts" import styles from "./managePreferencesButton.module.css" diff --git a/apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx b/apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx index 5839c66f8..9d91f942e 100644 --- a/apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx +++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx @@ -1,10 +1,10 @@ import Body from "@scandic-hotels/design-system/Body" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" import { ScandicFriends } from "@/components/Levels" import LoginButton from "@/components/LoginButton" -import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" import { isLoggedInUser } from "@/utils/isLoggedInUser" diff --git a/apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/index.tsx b/apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/index.tsx index 60b018db6..b9db62022 100644 --- a/apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/index.tsx @@ -3,9 +3,9 @@ import { useState } from "react" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import JsonToHtml from "@/components/JsonToHtml" -import Button from "@/components/TempDesignSystem/Button" import SidePeek from "../../SidePeek" diff --git a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx index 3481e56d4..ccdbfd6a9 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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" import Image from "@/components/Image" -import Button from "@/components/TempDesignSystem/Button" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import { diff --git a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx index c08f8e04e..cc917f88c 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx @@ -9,8 +9,7 @@ import { passwordValidators } from "@scandic-hotels/common/utils/zod/passwordVal import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Input } from "@scandic-hotels/design-system/Input" - -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { getErrorMessage } from "../Input/errors" diff --git a/apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx b/apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx index 668d20383..a2f920f67 100644 --- a/apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx @@ -3,8 +3,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Button from "@/components/TempDesignSystem/Button" +import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { showMoreButtonVariants } from "./variants" diff --git a/packages/design-system/lib/components/OldDSButton/button.module.css b/packages/design-system/lib/components/OldDSButton/button.module.css new file mode 100644 index 000000000..33dae6479 --- /dev/null +++ b/packages/design-system/lib/components/OldDSButton/button.module.css @@ -0,0 +1,843 @@ +.btn { + background: none; + border-radius: var(--Corner-radius-rounded); + cursor: pointer; + margin: 0; + padding: 0; + text-align: center; + transition: + background-color 300ms ease, + color 300ms ease; + + font-family: var(--typography-Body-Bold-fontFamily); + font-size: var(--typography-Body-Bold-fontSize); + font-weight: 500; + line-height: var(--typography-Body-Bold-lineHeight); + letter-spacing: 0.084px; + text-decoration: none; +} + +.wrapping { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.fullWidth { + width: 100%; +} + +/* INTENT */ +.primary, +a.primary { + border: none; +} + +.secondary, +a.secondary { + background: none; + border-style: solid; + border-width: 2px; +} + +.tertiary, +a.tertiary { + border: none; +} + +.inverted, +a.inverted { + border: none; +} + +.text, +a.text { + background: none; + border: none; + outline: none; +} + +/* TODO: The variants for combinations of size/text/wrapping should be looked at and iterated on */ +.text:not(.wrapping) { + padding: 0 !important; +} + +/* VARIANTS */ +.default, +a.default { + align-items: center; + display: flex; + gap: var(--Spacing-x1); + justify-content: center; +} + +.btn.icon:is(.small, .medium, .large) { + align-items: center; + display: flex; + gap: var(--Spacing-x1); + justify-content: center; +} + +/* SIZES */ +.btn.small { + font-size: var(--typography-Caption-Bold-fontSize); + line-height: var(--typography-Caption-Bold-lineHeight); + gap: var(--Spacing-x-quarter); + padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); + /* Special case padding to adjust the missing border */ +} + +.btn.small.secondary { + padding: var(--Spacing-x1) var(--Spacing-x2); +} + +.btn.medium { + gap: var(--Spacing-x-half); + padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); + /* Special case padding to adjust the missing border */ +} + +.medium.secondary { + padding: var(--Spacing-x-one-and-half) var(--Spacing-x2); +} + +.btn.large { + gap: var(--Spacing-x-half); + padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); + /* Special case padding to adjust the missing border */ +} + +.large.secondary { + gap: var(--Spacing-x-half); + padding: var(--Spacing-x2) var(--Spacing-x3); +} + +/* DISABLED */ +.btn:disabled { + background-color: var(--disabled-background-color); + color: var(--disabled-color); + cursor: not-allowed; +} + +/* THEMES */ +.basePrimary { + background-color: var(--Base-Button-Primary-Fill-Normal); + color: var(--Base-Button-Primary-On-Fill-Normal); +} + +.basePrimary:active, +.basePrimary:focus, +.basePrimary:hover { + background-color: var(--Base-Button-Primary-Fill-Hover); + color: var(--Base-Button-Primary-On-Fill-Hover); +} + +.basePrimary:disabled { + background-color: var(--Base-Button-Primary-Fill-Disabled); + color: var(--Base-Button-Primary-On-Fill-Disabled); +} + +.icon.basePrimary svg, +.icon.basePrimary svg * { + fill: var(--Base-Button-Primary-On-Fill-Normal); +} + +.icon.basePrimary:active svg, +.icon.basePrimary:focus svg, +.icon.basePrimary:hover svg, +.icon.basePrimary:active svg *, +.icon.basePrimary:focus svg *, +.icon.basePrimary:hover svg * { + fill: var(--Base-Button-Primary-On-Fill-Hover); +} + +.icon.basePrimary:disabled *, +.icon.basePrimary:disabled svg * { + fill: var(--Base-Button-Primary-On-Fill-Disabled); +} + +.baseSecondary { + background-color: var(--Base-Button-Secondary-Fill-Normal); + border-color: var(--Base-Button-Secondary-Border-Normal); + color: var(--Base-Button-Secondary-On-Fill-Normal); +} + +.baseSecondary:active, +.baseSecondary:focus, +.baseSecondary:hover { + background-color: var(--Base-Button-Secondary-Fill-Hover); + border-color: var(--Base-Button-Secondary-Border-Hover); + color: var(--Base-Button-Secondary-On-Fill-Hover); +} + +.baseSecondary:disabled { + background-color: var(--Base-Button-Secondary-Fill-Disabled); + border-color: var(--Base-Button-Secondary-Border-Disabled); + color: var(--Base-Button-Secondary-On-Fill-Disabled); +} + +.icon.baseSecondary svg, +.icon.baseSecondary svg * { + fill: var(--Base-Button-Secondary-On-Fill-Normal); +} + +.icon.baseSecondary:active svg, +.icon.baseSecondary:focus svg, +.icon.baseSecondary:hover svg, +.icon.baseSecondary:active svg *, +.icon.baseSecondary:focus svg *, +.icon.baseSecondary:hover svg * { + fill: var(--Base-Button-Secondary-On-Fill-Hover); +} + +.icon.baseSecondary:disabled svg, +.icon.baseSecondary:disabled svg * { + fill: var(--Base-Button-Secondary-On-Fill-Disabled); +} + +.btn.baseTertiary { + background-color: var(--Base-Button-Tertiary-Fill-Normal); + color: var(--Base-Button-Tertiary-On-Fill-Normal); +} + +.btn.baseTertiary:active, +.btn.baseTertiary:focus, +.btn.baseTertiary:hover { + background-color: var(--Base-Button-Tertiary-Fill-Hover); + color: var(--Base-Button-Tertiary-On-Fill-Hover); +} + +.btn.baseTertiary:disabled { + background-color: var(--Base-Button-Tertiary-Fill-Disabled); + color: var(--Base-Button-Tertiary-On-Fill-Disabled); +} + +.icon.baseTertiary svg, +.icon.baseTertiary svg * { + fill: var(--Base-Button-Tertiary-On-Fill-Normal); +} + +.icon.baseTertiary:active svg, +.icon.baseTertiary:focus svg, +.icon.baseTertiary:hover svg, +.icon.baseTertiary:active svg *, +.icon.baseTertiary:focus svg *, +.icon.baseTertiary:hover svg * { + fill: var(--Base-Button-Tertiary-On-Fill-Hover); +} + +.icon.baseTertiary:disabled svg, +.icon.baseTertiary:disabled svg * { + fill: var(--Base-Button-Tertiary-On-Fill-Disabled); +} + +.baseInverted { + background-color: var(--Base-Button-Inverted-Fill-Normal); + color: var(--Base-Button-Inverted-On-Fill-Normal); +} + +.baseInverted:active, +.baseInverted:focus, +.baseInverted:hover { + background-color: var(--Base-Button-Inverted-Fill-Hover); + color: var(--Base-Button-Inverted-On-Fill-Hover); +} + +.baseInverted:disabled { + background-color: var(--Base-Button-Inverted-Fill-Disabled); + color: var(--Base-Button-Inverted-On-Fill-Disabled); +} + +.icon.baseInverted svg, +.icon.baseInverted svg * { + fill: var(--Base-Button-Inverted-On-Fill-Normal); +} + +.icon.baseInverted:active svg, +.icon.baseInverted:focus svg, +.icon.baseInverted:hover svg, +.icon.baseInverted:active svg *, +.icon.baseInverted:focus svg *, +.icon.baseInverted:hover svg * { + fill: var(--Base-Button-Inverted-On-Fill-Hover); +} + +.icon.baseInverted:disabled svg, +.icon.baseInverted:disabled svg * { + fill: var(--Base-Button-Inverted-On-Fill-Disabled); +} + +.baseText { + color: var(--Base-Button-Text-On-Fill-Normal); +} + +.baseTextInverted { + color: var(--Base-Button-Primary-On-Fill-Normal); +} + +.baseText:active, +.baseText:focus, +.baseText:hover { + color: var(--Base-Button-Text-On-Fill-Hover); + text-decoration: underline; +} + +.baseText:disabled { + color: var(--Base-Button-Text-On-Fill-Disabled); +} + +.icon.baseText svg, +.icon.baseText svg * { + fill: var(--Base-Button-Text-On-Fill-Normal); +} + +.icon.baseText:active svg, +.icon.baseText:focus svg, +.icon.baseText:hover svg, +.icon.baseText:active svg *, +.icon.baseText:focus svg *, +.icon.baseText:hover svg * { + fill: var(--Base-Button-Text-On-Fill-Hover); + text-decoration: underline; +} + +.icon.baseText:disabled svg, +.icon.baseText:disabled svg * { + fill: var(--Base-Button-Text-On-Fill-Disabled); +} + +.primaryStrongPrimary { + background-color: var(--Primary-Strong-Button-Primary-Fill-Normal); + color: var(--Primary-Strong-Button-Primary-On-Fill-Normal); +} + +.primaryStrongPrimary:active, +.primaryStrongPrimary:focus, +.primaryStrongPrimary:hover { + background-color: var(--Primary-Strong-Button-Primary-Fill-Hover); + color: var(--Primary-Strong-Button-Primary-On-Fill-Hover); +} + +.primaryStrongPrimary:disabled { + background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled); + color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled); +} + +.icon.primaryStrongPrimary svg, +.icon.primaryStrongPrimary svg * { + fill: var(--Primary-Strong-Button-Primary-On-Fill-Normal); +} + +.icon.primaryStrongPrimary:active svg, +.icon.primaryStrongPrimary:focus svg, +.icon.primaryStrongPrimary:hover svg, +.icon.primaryStrongPrimary:active svg *, +.icon.primaryStrongPrimary:focus svg *, +.icon.primaryStrongPrimary:hover svg * { + fill: var(--Primary-Strong-Button-Primary-On-Fill-Hover); +} + +.icon.primaryStrongPrimary:disabled svg, +.icon.primaryStrongPrimary:disabled svg * { + fill: var(--Primary-Strong-Button-Primary-On-Fill-Disabled); +} + +.primaryStrongSecondary { + background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal); + border-color: var(--Primary-Strong-Button-Secondary-Border-Normal); + color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal); +} + +.primaryStrongSecondary:active, +.primaryStrongSecondary:focus, +.primaryStrongSecondary:hover { + background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover); + border-color: var(--Primary-Strong-Button-Secondary-Border-Hover); + color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover); +} + +.primaryStrongSecondary:disabled { + background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled); + border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled); + color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled); +} + +.icon.primaryStrongSecondary svg, +.icon.primaryStrongSecondary svg * { + fill: var(--Primary-Strong-Button-Secondary-On-Fill-Normal); +} + +.icon.primaryStrongSecondary:active svg, +.icon.primaryStrongSecondary:focus svg, +.icon.primaryStrongSecondary:hover svg, +.icon.primaryStrongSecondary:active svg *, +.icon.primaryStrongSecondary:focus svg *, +.icon.primaryStrongSecondary:hover svg * { + fill: var(--Primary-Strong-Button-Secondary-On-Fill-Hover); +} + +.icon.primaryStrongSecondary:disabled svg, +.icon.primaryStrongSecondary:disabled svg * { + fill: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled); +} + +.primaryDarkPrimary { + background-color: var(--Primary-Dark-Button-Primary-Fill-Normal); + color: var(--Primary-Dark-Button-Primary-On-Fill-Normal); +} + +.primaryDarkPrimary:active, +.primaryDarkPrimary:focus, +.primaryDarkPrimary:hover { + background-color: var(--Primary-Dark-Button-Primary-Fill-Hover); + color: var(--Primary-Dark-Button-Primary-On-Fill-Hover); +} + +.primaryDarkPrimary:disabled { + background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled); + color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled); +} + +.icon.primaryDarkPrimary svg, +.icon.primaryDarkPrimary svg * { + fill: var(--Primary-Dark-Button-Primary-On-Fill-Normal); +} + +.icon.primaryDarkPrimary:active svg, +.icon.primaryDarkPrimary:focus svg, +.icon.primaryDarkPrimary:hover svg, +.icon.primaryDarkPrimary:active svg *, +.icon.primaryDarkPrimary:focus svg *, +.icon.primaryDarkPrimary:hover svg * { + fill: var(--Primary-Dark-Button-Primary-On-Fill-Hover); +} + +.icon.primaryDarkPrimary:disabled svg, +.icon.primaryDarkPrimary:disabled svg * { + fill: var(--Primary-Dark-Button-Primary-On-Fill-Disabled); +} + +.primaryDarkSecondary { + background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal); + border-color: var(--Primary-Dark-Button-Secondary-Border-Normal); + color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal); +} + +.primaryDarkSecondary:active, +.primaryDarkSecondary:focus, +.primaryDarkSecondary:hover { + background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover); + border-color: var(--Primary-Dark-Button-Secondary-Border-Hover); + color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover); +} + +.primaryDarkSecondary:disabled { + background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled); + border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled); + color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled); +} + +.icon.primaryDarkSecondary svg, +.icon.primaryDarkSecondary svg * { + fill: var(--Primary-Dark-Button-Secondary-On-Fill-Normal); +} + +.icon.primaryDarkSecondary:active svg, +.icon.primaryDarkSecondary:focus svg, +.icon.primaryDarkSecondary:hover svg, +.icon.primaryDarkSecondary:active svg *, +.icon.primaryDarkSecondary:focus svg *, +.icon.primaryDarkSecondary:hover svg * { + fill: var(--Primary-Dark-Button-Secondary-On-Fill-Hover); +} + +.icon.primaryDarkSecondary:disabled svg, +.icon.primaryDarkSecondary:disabled svg * { + fill: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled); +} + +.primaryLightPrimary { + background-color: var(--Primary-Light-Button-Primary-Fill-Normal); + color: var(--Primary-Light-Button-Primary-On-Fill-Normal); +} + +.primaryLightPrimary:active, +.primaryLightPrimary:focus, +.primaryLightPrimary:hover { + background-color: var(--Primary-Light-Button-Primary-Fill-Hover); + color: var(--Primary-Light-Button-Primary-On-Fill-Hover); +} + +.primaryLightPrimary:disabled { + background-color: var(--Primary-Light-Button-Primary-Fill-Disabled); + color: var(--Primary-Light-Button-Primary-On-Fill-Disabled); +} + +.icon.primaryLightPrimary svg, +.icon.primaryLightPrimary svg * { + fill: var(--Primary-Light-Button-Primary-On-Fill-Normal); +} + +.icon.primaryLightPrimary:active svg, +.icon.primaryLightPrimary:focus svg, +.icon.primaryLightPrimary:hover svg, +.icon.primaryLightPrimary:active svg *, +.icon.primaryLightPrimary:focus svg *, +.icon.primaryLightPrimary:hover svg * { + fill: var(--Primary-Light-Button-Primary-On-Fill-Hover); +} + +.icon.primaryLightPrimary:disabled svg, +.icon.primaryLightPrimary:disabled svg * { + fill: var(--Primary-Light-Button-Primary-On-Fill-Disabled); +} + +.primaryLightSecondary { + background-color: var(--Primary-Light-Button-Secondary-Fill-Normal); + border-color: var(--Primary-Light-Button-Secondary-Border-Normal); + color: var(--Primary-Light-Button-Secondary-On-Fill-Normal); +} + +.primaryLightSecondary:active, +.primaryLightSecondary:focus, +.primaryLightSecondary:hover { + background-color: var(--Primary-Light-Button-Secondary-Fill-Hover); + border-color: var(--Primary-Light-Button-Secondary-Border-Hover); + color: var(--Primary-Light-Button-Secondary-On-Fill-Hover); +} + +.primaryLightSecondary:disabled { + background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled); + border-color: var(--Primary-Light-Button-Secondary-Border-Disabled); + color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled); +} + +.icon.primaryLightSecondary svg, +.icon.primaryLightSecondary svg * { + fill: var(--Primary-Light-Button-Secondary-On-Fill-Normal); +} + +.icon.primaryLightSecondary:active svg, +.icon.primaryLightSecondary:focus svg, +.icon.primaryLightSecondary:hover svg, +.icon.primaryLightSecondary:active svg *, +.icon.primaryLightSecondary:focus svg *, +.icon.primaryLightSecondary:hover svg * { + fill: var(--Primary-Light-Button-Secondary-On-Fill-Hover); +} + +.icon.primaryLightSecondary:disabled svg, +.icon.primaryLightSecondary:disabled svg * { + fill: var(--Primary-Light-Button-Secondary-On-Fill-Disabled); +} + +.secondaryDarkPrimary { + background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal); + color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal); +} + +.secondaryDarkPrimary:active, +.secondaryDarkPrimary:focus, +.secondaryDarkPrimary:hover { + background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover); + color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover); +} + +.secondaryDarkPrimary:disabled { + background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled); + color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled); +} + +.icon.secondaryDarkPrimary svg, +.icon.secondaryDarkPrimary svg * { + fill: var(--Secondary-Dark-Button-Primary-On-Fill-Normal); +} + +.icon.secondaryDarkPrimary:active svg, +.icon.secondaryDarkPrimary:focus svg, +.icon.secondaryDarkPrimary:hover svg, +.icon.secondaryDarkPrimary:active svg *, +.icon.secondaryDarkPrimary:focus svg *, +.icon.secondaryDarkPrimary:hover svg * { + fill: var(--Secondary-Dark-Button-Primary-On-Fill-Hover); +} + +.icon.secondaryDarkPrimary:disabled svg, +.icon.secondaryDarkPrimary:disabled svg * { + fill: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled); +} + +.secondaryDarkSecondary { + background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal); + border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal); + color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal); +} + +.secondaryDarkSecondary:active, +.secondaryDarkSecondary:focus, +.secondaryDarkSecondary:hover { + background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover); + border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover); + color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover); +} + +.secondaryDarkSecondary:disabled { + background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled); + border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled); + color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled); +} + +.icon.secondaryDarkSecondary svg, +.icon.secondaryDarkSecondary svg * { + fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal); +} + +.icon.secondaryDarkSecondary:active svg, +.icon.secondaryDarkSecondary:focus svg, +.icon.secondaryDarkSecondary:hover svg, +.icon.secondaryDarkSecondary:active svg *, +.icon.secondaryDarkSecondary:focus svg *, +.icon.secondaryDarkSecondary:hover svg * { + fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover); +} + +.icon.secondaryDarkSecondary:disabled svg, +.icon.secondaryDarkSecondary:disabled svg * { + fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled); +} + +.secondaryLightPrimary { + background-color: var(--Secondary-Light-Button-Primary-Fill-Normal); + color: var(--Secondary-Light-Button-Primary-On-Fill-Normal); +} + +.secondaryLightPrimary:active, +.secondaryLightPrimary:focus, +.secondaryLightPrimary:hover { + background-color: var(--Secondary-Light-Button-Primary-Fill-Hover); + color: var(--Secondary-Light-Button-Primary-On-Fill-Hover); +} + +.secondaryLightPrimary:disabled { + background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled); + color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled); +} + +.icon.secondaryLightPrimary svg, +.icon.secondaryLightPrimary svg * { + fill: var(--Secondary-Light-Button-Primary-On-Fill-Normal); +} + +.icon.secondaryLightPrimary:active svg, +.icon.secondaryLightPrimary:focus svg, +.icon.secondaryLightPrimary:hover svg, +.icon.secondaryLightPrimary:active svg *, +.icon.secondaryLightPrimary:focus svg *, +.icon.secondaryLightPrimary:hover svg * { + fill: var(--Secondary-Light-Button-Primary-On-Fill-Hover); +} + +.icon.secondaryLightPrimary:disabled svg, +.icon.secondaryLightPrimary:disabled svg * { + fill: var(--Secondary-Light-Button-Primary-On-Fill-Disabled); +} + +.secondaryLightSecondary { + background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal); + border-color: var(--Secondary-Light-Button-Secondary-Border-Normal); + color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal); +} + +.secondaryLightSecondary:active, +.secondaryLightSecondary:focus, +.secondaryLightSecondary:hover { + background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover); + border-color: var(--Secondary-Light-Button-Secondary-Border-Hover); + color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover); +} + +.secondaryLightSecondary:disabled { + background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled); + border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled); + color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled); +} + +.icon.secondaryLightSecondary svg, +.icon.secondaryLightSecondary svg * { + fill: var(--Secondary-Light-Button-Secondary-On-Fill-Normal); +} + +.icon.secondaryLightSecondary:active svg, +.icon.secondaryLightSecondary:focus svg, +.icon.secondaryLightSecondary:hover svg, +.icon.secondaryLightSecondary:active svg *, +.icon.secondaryLightSecondary:focus svg *, +.icon.secondaryLightSecondary:hover svg * { + fill: var(--Secondary-Light-Button-Secondary-On-Fill-Hover); +} + +.icon.secondaryLightSecondary:disabled svg, +.icon.secondaryLightSecondary:disabled svg * { + fill: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled); +} + +.tertiaryDarkPrimary { + background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal); + color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal); +} + +.tertiaryDarkPrimary:active, +.tertiaryDarkPrimary:focus, +.tertiaryDarkPrimary:hover { + background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover); + color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover); +} + +.tertiaryDarkPrimary:disabled { + background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled); + color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled); +} + +.icon.tertiaryDarkPrimary svg, +.icon.tertiaryDarkPrimary svg * { + fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal); +} + +.icon.tertiaryDarkPrimary:active svg, +.icon.tertiaryDarkPrimary:focus svg, +.icon.tertiaryDarkPrimary:hover svg, +.icon.tertiaryDarkPrimary:active svg *, +.icon.tertiaryDarkPrimary:focus svg *, +.icon.tertiaryDarkPrimary:hover svg * { + fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover); +} + +.icon.tertiaryDarkPrimary:disabled svg, +.icon.tertiaryDarkPrimary:disabled svg * { + fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled); +} + +.tertiaryDarkSecondary { + background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal); + border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal); + color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal); +} + +.tertiaryDarkSecondary:active, +.tertiaryDarkSecondary:focus, +.tertiaryDarkSecondary:hover { + background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover); + border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover); + color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover); +} + +.tertiaryDarkSecondary:disabled { + background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled); + border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled); + color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled); +} + +.icon.tertiaryDarkSecondary svg, +.icon.tertiaryDarkSecondary svg * { + fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal); +} + +.icon.tertiaryDarkSecondary:active svg, +.icon.tertiaryDarkSecondary:focus svg, +.icon.tertiaryDarkSecondary:hover svg, +.icon.tertiaryDarkSecondary:active svg *, +.icon.tertiaryDarkSecondary:focus svg *, +.icon.tertiaryDarkSecondary:hover svg * { + fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover); +} + +.icon.tertiaryDarkSecondary:disabled svg, +.icon.tertiaryDarkSecondary:disabled svg * { + fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled); +} + +.tertiaryLightPrimary { + background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal); + color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal); +} + +.tertiaryLightPrimary:active, +.tertiaryLightPrimary:focus, +.tertiaryLightPrimary:hover { + background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover); + color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover); +} + +.tertiaryLightPrimary:disabled { + background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled); + color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled); +} + +.icon.tertiaryLightPrimary svg, +.icon.tertiaryLightPrimary svg * { + fill: var(--Tertiary-Light-Button-Primary-On-Fill-Normal); +} + +.icon.tertiaryLightPrimary:active svg, +.icon.tertiaryLightPrimary:focus svg, +.icon.tertiaryLightPrimary:hover svg, +.icon.tertiaryLightPrimary:active svg *, +.icon.tertiaryLightPrimary:focus svg *, +.icon.tertiaryLightPrimary:hover svg * { + fill: var(--Tertiary-Light-Button-Primary-On-Fill-Hover); +} + +.icon.tertiaryLightPrimary:disabled svg, +.icon.tertiaryLightPrimary:disabled svg * { + fill: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled); +} + +.tertiaryLightSecondary { + background-color: var(--Tertiary-Light-Button-Secondary-Fill-Normal); + border-color: var(--Tertiary-Light-Button-Secondary-Border-Normal); + color: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal); +} + +.tertiaryLightSecondary:active, +.tertiaryLightSecondary:focus, +.tertiaryLightSecondary:hover { + background-color: var(--Tertiary-Light-Button-Secondary-Fill-Hover); + border-color: var(--Tertiary-Light-Button-Secondary-Border-Hover); + color: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover); +} + +.tertiaryLightSecondary:disabled { + background-color: var(--Tertiary-Light-Button-Secondary-Fill-Disabled); + border-color: var(--Tertiary-Light-Button-Secondary-Border-Disabled); + color: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled); +} + +.icon.tertiaryLightSecondary svg, +.icon.tertiaryLightSecondary svg * { + fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal); +} + +.icon.tertiaryLightSecondary:active svg, +.icon.tertiaryLightSecondary:focus svg, +.icon.tertiaryLightSecondary:hover svg, +.icon.tertiaryLightSecondary:active svg *, +.icon.tertiaryLightSecondary:focus svg *, +.icon.tertiaryLightSecondary:hover svg * { + fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover); +} + +.icon.tertiaryLightSecondary:disabled svg, +.icon.tertiaryLightSecondary:disabled svg * { + fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled); +} + +button.btn.clean { + background: none; + background-color: unset; + border: none; + border-color: unset; + border-radius: unset; + color: unset; + gap: unset; + margin: 0; + padding: 0; +} diff --git a/packages/design-system/lib/components/OldDSButton/button.ts b/packages/design-system/lib/components/OldDSButton/button.ts new file mode 100644 index 000000000..6d0fa0ab8 --- /dev/null +++ b/packages/design-system/lib/components/OldDSButton/button.ts @@ -0,0 +1,20 @@ +import type { VariantProps } from 'class-variance-authority' +import type { ButtonProps as ReactAriaButtonProps } from 'react-aria-components' + +import type { buttonVariants } from './variants' + +export interface ButtonPropsRAC + extends Omit, + VariantProps { + asChild?: false | undefined | never + disabled?: ReactAriaButtonProps['isDisabled'] + onClick?: ReactAriaButtonProps['onPress'] +} + +export interface ButtonPropsSlot + extends React.ButtonHTMLAttributes, + VariantProps { + asChild: true +} + +export type ButtonProps = ButtonPropsSlot | ButtonPropsRAC diff --git a/packages/design-system/lib/components/OldDSButton/index.tsx b/packages/design-system/lib/components/OldDSButton/index.tsx new file mode 100644 index 000000000..8be105250 --- /dev/null +++ b/packages/design-system/lib/components/OldDSButton/index.tsx @@ -0,0 +1,53 @@ +'use client' + +import { Slot } from '@radix-ui/react-slot' +import { Button as ButtonRAC } from 'react-aria-components' + +import { buttonVariants } from './variants' + +import type { ButtonProps } from './button' + +/** + * @deprecated Use `@scandic-hotels/design-system/Button` instead. + */ +export function OldDSButton(props: ButtonProps) { + const { + className, + clean, + intent, + size, + theme, + fullWidth, + wrapping, + variant, + ...restProps + } = props + + const classNames = buttonVariants({ + className, + clean, + intent, + size, + theme, + fullWidth, + wrapping, + variant, + }) + + if (restProps.asChild) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { asChild, ...slotProps } = restProps + return + } + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { asChild, onClick, disabled, ...racProps } = restProps + return ( + + ) +} diff --git a/packages/design-system/lib/components/OldDSButton/variants.ts b/packages/design-system/lib/components/OldDSButton/variants.ts new file mode 100644 index 000000000..a09bd6a3e --- /dev/null +++ b/packages/design-system/lib/components/OldDSButton/variants.ts @@ -0,0 +1,154 @@ +import { cva } from 'class-variance-authority' + +import styles from './button.module.css' + +export const buttonVariants = cva(styles.btn, { + variants: { + intent: { + inverted: styles.inverted, + primary: styles.primary, + secondary: styles.secondary, + tertiary: styles.tertiary, + text: styles.text, + textInverted: styles.text, + }, + size: { + small: styles.small, + medium: styles.medium, + large: styles.large, + }, + theme: { + base: '', + primaryDark: '', + primaryStrong: '', + primaryLight: '', + secondaryLight: '', + secondaryDark: '', + tertiaryLight: '', + tertiaryDark: '', + }, + variant: { + clean: styles.clean, + default: styles.default, + icon: styles.icon, + }, + wrapping: { + true: styles.wrapping, + }, + clean: { + true: styles.clean, + }, + fullWidth: { + true: styles.fullWidth, + }, + }, + defaultVariants: { + intent: 'primary', + size: 'medium', + theme: 'primaryLight', + variant: 'default', + }, + + compoundVariants: [ + { + className: styles.basePrimary, + intent: 'primary', + theme: 'base', + }, + { + className: styles.baseSecondary, + intent: 'secondary', + theme: 'base', + }, + { + className: styles.baseTertiary, + intent: 'tertiary', + theme: 'base', + }, + { + className: styles.baseInverted, + intent: 'inverted', + theme: 'base', + }, + { + className: styles.primaryDarkPrimary, + intent: 'primary', + theme: 'primaryDark', + }, + { + className: styles.primaryDarkSecondary, + intent: 'secondary', + theme: 'primaryDark', + }, + { + className: styles.primaryLightPrimary, + intent: 'primary', + theme: 'primaryLight', + }, + { + className: styles.primaryLightSecondary, + intent: 'secondary', + theme: 'primaryLight', + }, + { + className: styles.primaryStrongPrimary, + intent: 'primary', + theme: 'primaryStrong', + }, + { + className: styles.primaryStrongSecondary, + intent: 'secondary', + theme: 'primaryStrong', + }, + { + className: styles.secondaryDarkPrimary, + intent: 'primary', + theme: 'secondaryDark', + }, + { + className: styles.secondaryDarkSecondary, + intent: 'secondary', + theme: 'secondaryDark', + }, + { + className: styles.secondaryLightPrimary, + intent: 'primary', + theme: 'secondaryLight', + }, + { + className: styles.secondaryLightSecondary, + intent: 'secondary', + theme: 'secondaryLight', + }, + { + className: styles.tertiaryDarkPrimary, + intent: 'primary', + theme: 'tertiaryDark', + }, + { + className: styles.tertiaryDarkSecondary, + intent: 'secondary', + theme: 'tertiaryDark', + }, + { + className: styles.tertiaryLightPrimary, + intent: 'primary', + theme: 'tertiaryLight', + }, + { + className: styles.tertiaryLightSecondary, + intent: 'secondary', + theme: 'tertiaryLight', + }, + { + className: styles.baseText, + intent: 'text', + theme: 'base', + }, + { + className: styles.baseTextInverted, + intent: 'textInverted', + theme: 'base', + }, + ], +}) diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 15d5e9843..a82b83a22 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -17,6 +17,7 @@ "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js", "./Input": "./dist/components/Input/index.js", "./Label": "./dist/components/Label/index.js", + "./OldDSButton": "./dist/components/OldDSButton/index.js", "./Select": "./dist/components/Select/index.js", "./SkeletonShimmer": "./dist/components/SkeletonShimmer/index.js", "./Subtitle": "./dist/components/Subtitle/index.js",