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 030199fcf..c30a7c95e 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx @@ -18,12 +18,11 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Image from "@scandic-hotels/design-system/Image" import { Input } from "@scandic-hotels/design-system/Input" +import Modal from "@scandic-hotels/design-system/Modal" 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 Modal from "@/components/Modal" - import styles from "./transferPoints.module.css" import type { Lang } from "@scandic-hotels/common/constants/language" diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx index 41a2c839e..68d2493cf 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx @@ -7,6 +7,7 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { Button } from "@scandic-hotels/design-system/Button" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Modal from "@scandic-hotels/design-system/Modal" import { Typography } from "@scandic-hotels/design-system/Typography" import { ChildBedTypeEnum } from "@scandic-hotels/trpc/enums/childBedTypeEnum" @@ -14,7 +15,6 @@ import { CancellationRuleEnum } from "@/constants/booking" import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription" -import Modal from "@/components/Modal" import Breakfast from "./Breakfast" import RoomSkeletonLoader from "./RoomSkeletonLoader" 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 238a3da21..00bb86e8e 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx @@ -8,11 +8,11 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import Body from "@scandic-hotels/design-system/Body" import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon" +import Modal from "@scandic-hotels/design-system/Modal" 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 { useRoomContext } from "@/contexts/Details/Room" import styles from "./modal.module.css" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx index bd2e46bc5..a0de474f0 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx @@ -5,11 +5,11 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { Button } from "@scandic-hotels/design-system/Button" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Modal from "@scandic-hotels/design-system/Modal" import { Typography } from "@scandic-hotels/design-system/Typography" import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum" import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription" -import Modal from "@/components/Modal" import { getMemberPrice, getPublicPrice } from "../utils" import Breakfast from "./Breakfast" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx index 1a758c6d1..43c28f083 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx @@ -11,6 +11,7 @@ import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotel import { dt } from "@scandic-hotels/common/dt" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { Divider } from "@scandic-hotels/design-system/Divider" +import Modal from "@scandic-hotels/design-system/Modal" import { Typography } from "@scandic-hotels/design-system/Typography" import { trpc } from "@scandic-hotels/trpc/client" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" @@ -30,7 +31,6 @@ import { setAncillarySessionData, } from "@/components/HotelReservation/MyStay/utils/ancillaries" import LoadingSpinner from "@/components/LoadingSpinner" -import Modal from "@/components/Modal" import { toast } from "@/components/TempDesignSystem/Toasts" import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx index 3814acf35..8b41e4701 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx @@ -8,6 +8,8 @@ import { useIntl } from "react-intl" import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Modal from "@scandic-hotels/design-system/Modal" +import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions" 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" @@ -15,8 +17,6 @@ import { trpc } from "@scandic-hotels/trpc/client" import { isWebview } from "@/constants/routes/webviews" import MembershipLevelIcon from "@/components/Levels/Icon" -import Modal from "@/components/Modal" -import { ModalContentWithActions } from "@/components/Modal/ModalContentWithActions" import { toast } from "@/components/TempDesignSystem/Toasts" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx index 234374aee..211372e94 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx @@ -9,6 +9,7 @@ import { IconButton } from "@scandic-hotels/design-system/IconButton" import IconChip from "@scandic-hotels/design-system/IconChip" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Image from "@scandic-hotels/design-system/Image" +import Modal from "@scandic-hotels/design-system/Modal" import { Typography } from "@scandic-hotels/design-system/Typography" import { RateEnum } from "@scandic-hotels/trpc/enums/rate" import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter" @@ -16,7 +17,6 @@ import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter" import { CancellationRuleEnum } from "@/constants/booking" import { IconForFeatureCode } from "@/components/HotelReservation/utils" -import Modal from "@/components/Modal" import useRateTitles from "@/hooks/booking/useRateTitles" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx index 1d4864cc2..d0017ec43 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx @@ -2,13 +2,13 @@ import { useIntl } from "react-intl" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Modal from "@scandic-hotels/design-system/Modal" import { Typography } from "@scandic-hotels/design-system/Typography" import { RateEnum } from "@scandic-hotels/trpc/enums/rate" import { CancellationRuleEnum } from "@/constants/booking" import { useMyStayStore } from "@/stores/my-stay" -import Modal from "@/components/Modal" import useRateTitles from "@/hooks/booking/useRateTitles" import Row from "../Row" diff --git a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx index 2d029b5d7..8a1e16b25 100644 --- a/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx +++ b/apps/scandic-web/components/HotelReservation/PriceDetailsModal/index.tsx @@ -3,8 +3,7 @@ import { useIntl } from "react-intl" import { Button } from "@scandic-hotels/design-system/Button" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Modal from "@/components/Modal" +import Modal from "@scandic-hotels/design-system/Modal" import PriceDetailsTable, { type PriceDetailsTableProps, diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx index 7287f4fc8..35a609b24 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx @@ -5,11 +5,10 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import { Button } from "@scandic-hotels/design-system/Button" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Modal from "@scandic-hotels/design-system/Modal" import { Typography } from "@scandic-hotels/design-system/Typography" import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum" -import Modal from "@/components/Modal" - import { isBookingCodeRate } from "../../utils" import { getMemberPrice } from "../utils" diff --git a/apps/scandic-web/components/Modal/modal.ts b/apps/scandic-web/components/Modal/modal.ts deleted file mode 100644 index 6de0813ad..000000000 --- a/apps/scandic-web/components/Modal/modal.ts +++ /dev/null @@ -1,36 +0,0 @@ -import type { Dispatch, JSX, SetStateAction } from "react" - -export enum AnimationStateEnum { - unmounted = "unmounted", - hidden = "hidden", - visible = "visible", -} - -export type AnimationState = keyof typeof AnimationStateEnum - -export type ModalProps = { - onAnimationComplete?: () => void - title?: string - subtitle?: string - withActions?: boolean - hideHeader?: boolean - className?: string -} & ( - | { - trigger: JSX.Element - isOpen?: never - onToggle?: never - onOpenChange?: (open: boolean) => void - } - | { - trigger?: never - isOpen: boolean - onToggle: (open: boolean) => void - onOpenChange?: never - } -) - -export type InnerModalProps = Omit & { - animation: AnimationState - setAnimation: Dispatch> -} diff --git a/apps/scandic-web/components/Modal/motionVariants.ts b/apps/scandic-web/components/Modal/motionVariants.ts deleted file mode 100644 index e24932152..000000000 --- a/apps/scandic-web/components/Modal/motionVariants.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const fade = { - hidden: { - opacity: 0, - transition: { duration: 0.4, ease: "easeInOut" }, - }, - visible: { - opacity: 1, - transition: { duration: 0.4, ease: "easeInOut" }, - }, -} - -export const slideInOut = { - hidden: { - opacity: 0, - y: 32, - transition: { duration: 0.4, ease: "easeInOut" }, - }, - visible: { - opacity: 1, - y: 0, - transition: { duration: 0.4, ease: "easeInOut" }, - }, -} diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx index 9914a6169..49fa2f0cb 100644 --- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx +++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx @@ -4,9 +4,9 @@ import { useIntl } from "react-intl" import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import Modal from "@scandic-hotels/design-system/Modal" import { Typography } from "@scandic-hotels/design-system/Typography" -import Modal from "@/components/Modal" import useWakeLock from "@/hooks/useWakeLock" import DigitalTeamMemberCardContent from "./Content" diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx index 1a4c3a91a..e463cefba 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx @@ -8,6 +8,7 @@ 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 Modal from "@scandic-hotels/design-system/Modal" import { type ButtonProps, OldDSButton as Button, @@ -18,7 +19,6 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import BookingFlowInput from "../../../../BookingFlowInput" import { getErrorMessage } from "../../../../BookingFlowInput/errors" -import Modal from "../../../../TEMP/Modal" import { Input as BookingWidgetInput } from "../Input" import { isMultiRoomError } from "../utils" diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx index 2a7258d15..41f6d6add 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx @@ -8,12 +8,12 @@ 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 Modal from "@scandic-hotels/design-system/Modal" 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 { getErrorMessage } from "../../../../BookingFlowInput/errors" -import Modal from "../../../../TEMP/Modal" import { RemoveExtraRooms } from "../BookingCode" import { isMultiRoomError } from "../utils" diff --git a/packages/booking-flow/lib/components/TEMP/Modal/ModalContentWithActions/index.tsx b/packages/booking-flow/lib/components/TEMP/Modal/ModalContentWithActions/index.tsx deleted file mode 100644 index db9f33339..000000000 --- a/packages/booking-flow/lib/components/TEMP/Modal/ModalContentWithActions/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -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 styles from "./modalContent.module.css" - -import type { ReactNode } from "react" - -interface ModalContentProps { - title?: string - content: ReactNode - primaryAction: { - label: string - onClick: () => void - intent?: "primary" | "secondary" | "text" - isLoading?: boolean - disabled?: boolean - } | null - secondaryAction: { - label: string - onClick: () => void - intent?: "primary" | "secondary" | "text" - } | null - onClose?: () => void -} - -export function ModalContentWithActions({ - title, - content, - primaryAction, - secondaryAction, - onClose, -}: ModalContentProps) { - return ( - <> - {title && ( -
- {title} - -
- )} -
{content}
-
- {secondaryAction && ( - - )} - {primaryAction && ( - - )} -
- - ) -} diff --git a/packages/booking-flow/lib/components/TEMP/Modal/ModalContentWithActions/modalContent.module.css b/packages/booking-flow/lib/components/TEMP/Modal/ModalContentWithActions/modalContent.module.css deleted file mode 100644 index 3b972257e..000000000 --- a/packages/booking-flow/lib/components/TEMP/Modal/ModalContentWithActions/modalContent.module.css +++ /dev/null @@ -1,45 +0,0 @@ -.content { - display: flex; - flex-direction: column; - gap: var(--Spacing-x3); - padding: var(--Spacing-x1) var(--Spacing-x3) var(--Spacing-x4); - max-height: 70vh; - overflow-y: auto; - width: 100%; -} - -.header { - display: flex; - justify-content: space-between; - width: 100%; - padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x1) - var(--Spacing-x3); -} - -.footer { - display: flex; - justify-content: space-between; - width: 100%; - border-top: 1px solid var(--Base-Border-Subtle); - padding: var(--Spacing-x3); -} - -.close { - background: none; - border: none; - cursor: pointer; - position: absolute; - display: flex; - align-items: center; - padding: 0; - justify-content: center; - top: 20px; - right: 20px; -} - -@media screen and (min-width: 768px) { - .content { - width: 640px; - max-width: 100%; - } -} diff --git a/packages/booking-flow/lib/components/TEMP/Modal/index.tsx b/packages/booking-flow/lib/components/TEMP/Modal/index.tsx deleted file mode 100644 index b525770b7..000000000 --- a/packages/booking-flow/lib/components/TEMP/Modal/index.tsx +++ /dev/null @@ -1,215 +0,0 @@ -"use client" - -// TODO this is duplicated from scandic-web - -import { cx } from "class-variance-authority" -import { AnimatePresence, motion } from "motion/react" -import { type PropsWithChildren, useEffect, useState } from "react" -import { - Dialog, - DialogTrigger, - Modal as AriaModal, - ModalOverlay, -} from "react-aria-components" -import { useIntl } from "react-intl" - -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import Preamble from "@scandic-hotels/design-system/Preamble" -import Subtitle from "@scandic-hotels/design-system/Subtitle" - -import { - type AnimationState, - AnimationStateEnum, - type InnerModalProps, - type ModalProps, -} from "./modal" -import { fade, slideInOut } from "./motionVariants" -import { modalContentVariants } from "./variants" - -import styles from "./modal.module.css" - -const MotionOverlay = motion.create(ModalOverlay) -const MotionModal = motion.create(AriaModal) - -function InnerModal({ - animation, - onAnimationComplete = () => undefined, - setAnimation, - onToggle, - isOpen, - children, - title, - subtitle, - withActions, - hideHeader, - className, -}: PropsWithChildren) { - const intl = useIntl() - - const contentClassNames = modalContentVariants({ - withActions: withActions, - }) - - function modalStateHandler(newAnimationState: AnimationState) { - setAnimation((currentAnimationState) => - newAnimationState === AnimationStateEnum.hidden && - currentAnimationState === AnimationStateEnum.hidden - ? AnimationStateEnum.unmounted - : currentAnimationState - ) - if (newAnimationState === AnimationStateEnum.visible) { - onAnimationComplete() - } - } - - function onOpenChange(state: boolean) { - onToggle!(state) - } - - return ( - - - - {({ close }) => ( - <> - {!hideHeader && ( -
-
- {title && ( - - {title} - - )} - {subtitle && ( - - {subtitle} - - )} -
- - -
- )} - -
{children}
- - )} - - - - ) -} - -export default function Modal({ - onAnimationComplete = () => undefined, - trigger, - isOpen, - onToggle, - onOpenChange, - title, - subtitle, - children, - withActions = false, - hideHeader = false, - className = "", -}: PropsWithChildren) { - const [animation, setAnimation] = useState( - AnimationStateEnum.visible - ) - - useEffect(() => { - if (typeof isOpen === "boolean") { - setAnimation( - isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden - ) - } - if (isOpen === undefined) { - setAnimation(AnimationStateEnum.unmounted) - } - }, [isOpen]) - - const shouldRender = isOpen || animation !== AnimationStateEnum.unmounted - - if (!trigger) { - return ( - - {shouldRender && ( - - {children} - - )} - - ) - } - - return ( - { - setAnimation( - isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden - ) - onOpenChange?.(isOpen) - }} - > - {trigger} - - {shouldRender && ( - - {children} - - )} - - - ) -} diff --git a/packages/booking-flow/lib/components/TEMP/Modal/modal.module.css b/packages/booking-flow/lib/components/TEMP/Modal/modal.module.css deleted file mode 100644 index 1fba2dd3d..000000000 --- a/packages/booking-flow/lib/components/TEMP/Modal/modal.module.css +++ /dev/null @@ -1,95 +0,0 @@ -.overlay { - background: rgba(0, 0, 0, 0.5); - height: var(--visual-viewport-height); - position: fixed; - top: 0; - left: 0; - width: 100vw; - z-index: var(--default-modal-overlay-z-index); -} - -.modal { - background-color: var(--Base-Surface-Primary-light-Normal); - border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0; - box-shadow: var(--modal-box-shadow); - width: 100%; - position: absolute; - left: 0; - bottom: 0; - z-index: var(--default-modal-z-index); -} - -.dialog { - display: flex; - flex-direction: column; - - /* For removing focus outline when modal opens first time */ - outline: 0 none; - - max-height: 100dvh; -} - -.header { - --button-dimension: 32px; - - box-sizing: content-box; - display: flex; - align-items: flex-start; - min-height: var(--button-dimension); - position: relative; - padding: var(--Spacing-x3) var(--Spacing-x3) 0; -} - -.content { - display: flex; - flex-direction: column; - align-items: center; - gap: var(--Spacing-x2); - overflow: auto; -} - -.contentWithActions { - padding: 0; -} - -.contentWithoutActions { - padding: 0 var(--Spacing-x3) var(--Spacing-x4); -} - -.close { - background: none; - border: none; - cursor: pointer; - position: absolute; - right: var(--Spacing-x2); - width: var(--button-dimension); - height: var(--button-dimension); - display: flex; - align-items: center; - padding: 0; - justify-content: center; -} - -.verticalCenter { - align-items: center; -} - -@media screen and (min-width: 768px) { - .overlay { - display: flex; - justify-content: center; - align-items: center; - } - - .modal { - left: auto; - bottom: auto; - width: auto; - border-radius: var(--Corner-radius-md); - max-width: var(--max-width-page); - } - - .dialog { - max-height: 90dvh; - } -} diff --git a/packages/booking-flow/lib/components/TEMP/Modal/motionVariants.ts b/packages/booking-flow/lib/components/TEMP/Modal/motionVariants.ts deleted file mode 100644 index e24932152..000000000 --- a/packages/booking-flow/lib/components/TEMP/Modal/motionVariants.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const fade = { - hidden: { - opacity: 0, - transition: { duration: 0.4, ease: "easeInOut" }, - }, - visible: { - opacity: 1, - transition: { duration: 0.4, ease: "easeInOut" }, - }, -} - -export const slideInOut = { - hidden: { - opacity: 0, - y: 32, - transition: { duration: 0.4, ease: "easeInOut" }, - }, - visible: { - opacity: 1, - y: 0, - transition: { duration: 0.4, ease: "easeInOut" }, - }, -} diff --git a/packages/booking-flow/lib/components/TEMP/Modal/variants.ts b/packages/booking-flow/lib/components/TEMP/Modal/variants.ts deleted file mode 100644 index fd2b3ac8b..000000000 --- a/packages/booking-flow/lib/components/TEMP/Modal/variants.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { cva } from "class-variance-authority" - -import styles from "./modal.module.css" - -const config = { - variants: { - withActions: { - true: styles.contentWithActions, - false: styles.contentWithoutActions, - }, - }, - defaultVariants: { - withActions: false, - }, -} as const - -export const modalContentVariants = cva(styles.content, config) diff --git a/apps/scandic-web/components/Modal/ModalContentWithActions/index.tsx b/packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx similarity index 72% rename from apps/scandic-web/components/Modal/ModalContentWithActions/index.tsx rename to packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx index db9f33339..076381ee1 100644 --- a/apps/scandic-web/components/Modal/ModalContentWithActions/index.tsx +++ b/packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx @@ -1,10 +1,10 @@ -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 { MaterialIcon } from '../../Icons/MaterialIcon' +import { OldDSButton as Button } from '../../OldDSButton' +import Subtitle from '../../Subtitle' -import styles from "./modalContent.module.css" +import styles from './modalContent.module.css' -import type { ReactNode } from "react" +import type { ReactNode } from 'react' interface ModalContentProps { title?: string @@ -12,14 +12,14 @@ interface ModalContentProps { primaryAction: { label: string onClick: () => void - intent?: "primary" | "secondary" | "text" + intent?: 'primary' | 'secondary' | 'text' isLoading?: boolean disabled?: boolean } | null secondaryAction: { label: string onClick: () => void - intent?: "primary" | "secondary" | "text" + intent?: 'primary' | 'secondary' | 'text' } | null onClose?: () => void } @@ -46,7 +46,7 @@ export function ModalContentWithActions({ {secondaryAction && (