diff --git a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx index 4571deffb..b016898ed 100644 --- a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx +++ b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx @@ -3,6 +3,7 @@ import { useSearchParams } from "next/navigation" import { type IntlShape, useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -10,7 +11,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import { supportEmail, supportPhone } from "@/constants/contactSupport" import { employeeBenefits } from "@/constants/routes/dtmc" -import ButtonLink from "@/components/ButtonLink" import Image from "@/components/Image" import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx b/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx index f922fca57..4d07b513d 100644 --- a/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx +++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx @@ -1,11 +1,11 @@ import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon" import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" import ImageGallery from "@/components/ImageGallery" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx index 5bc7d4db2..be737211f 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx @@ -2,12 +2,12 @@ import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { missingPoints } from "@/constants/missingPointsHrefs" -import ButtonLink from "@/components/ButtonLink" import useLang from "@/hooks/useLang" import styles from "./claimPoints.module.css" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx index 751580b43..3d35fb200 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx @@ -1,9 +1,9 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers" import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests" -import ButtonLink from "@/components/ButtonLink" import Image from "@/components/Image" import { getIntl } from "@/i18n" import desktopBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-desktop.png" diff --git a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx b/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx index bf75e91a2..a28b1648a 100644 --- a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx +++ b/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx @@ -1,8 +1,8 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import Image from "@/components/Image" import { getIntl } from "@/i18n" import { getSingleDecimal } from "@/utils/numberFormatting" diff --git a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx index e19510ec0..1fddf3c8f 100644 --- a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx +++ b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx @@ -1,7 +1,7 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import SurpriseIcon from "@scandic-hotels/design-system/Icons/SurpriseIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import Image from "@/components/Image" import { isLoggedInUser } from "@/utils/isLoggedInUser" diff --git a/apps/scandic-web/components/ButtonLink/index.tsx b/apps/scandic-web/components/ButtonLink/index.tsx deleted file mode 100644 index 0e5297b9d..000000000 --- a/apps/scandic-web/components/ButtonLink/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -"use client" - -import Link from "next/link" -import { type ComponentProps, type PropsWithChildren } from "react" - -import { trackClick } from "@/utils/tracking" - -import { variants } from "./variants" - -import type { VariantProps } from "class-variance-authority" - -export interface ButtonLinkProps - extends PropsWithChildren, - Omit, "color">, - VariantProps { - trackingId?: string - trackingParams?: Record -} - -export default function ButtonLink({ - variant, - color, - size, - typography, - wrapping, - className, - href, - target, - onClick = () => {}, - trackingId, - trackingParams, - ...props -}: ButtonLinkProps) { - const classNames = variants({ - variant, - color, - size, - wrapping, - typography, - className, - }) - - return ( - { - onClick(e) - if (trackingId) { - trackClick(trackingId, trackingParams) - } - }} - {...props} - /> - ) -} diff --git a/apps/scandic-web/components/ButtonLink/variants.ts b/apps/scandic-web/components/ButtonLink/variants.ts deleted file mode 100644 index 8fd6402b6..000000000 --- a/apps/scandic-web/components/ButtonLink/variants.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { cva } from "class-variance-authority" - -import { withButton } from "@scandic-hotels/design-system/Button" - -import styles from "./buttonLink.module.css" - -export const variants = cva(styles.buttonLink, withButton({})) diff --git a/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx b/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx index 6b22a2cb2..a6007131f 100644 --- a/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx +++ b/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx @@ -1,9 +1,9 @@ /* eslint-disable formatjs/no-literal-string-in-jsx */ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import Image from "@/components/Image" import { variants } from "./variants" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx index 7e70cdede..b7dcdc5f1 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx @@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef } from "react" import { Button as ButtonRAC } from "react-aria-components" import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon" import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon" @@ -11,7 +12,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" -import ButtonLink from "@/components/ButtonLink" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" import ImageGallery from "@/components/ImageGallery" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx index ae26eb2c4..d2ed24dde 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx @@ -5,6 +5,7 @@ import { useParams } from "next/navigation" import { useEffect, useState } from "react" import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" @@ -13,7 +14,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" -import ButtonLink from "@/components/ButtonLink" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" import ImageGallery from "@/components/ImageGallery" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx index 58f9c96c6..13454d0b2 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx @@ -2,14 +2,13 @@ import { useState } from "react" import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" -import ButtonLink from "@/components/ButtonLink" - import { FacilityToIcon } from "../../HotelPage/data" import { usePageType } from "../Map/PageTypeProvider" import DialogImage from "./DialogImage" 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 76405d931..4855ad64b 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx @@ -4,10 +4,9 @@ import { useParams } from "next/navigation" import { useEffect, useState } from "react" import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import ButtonLink from "@/components/ButtonLink" - import styles from "./mapButton.module.css" interface MapButtonProps { diff --git a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx index 2198c8216..eb96107a4 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx @@ -1,7 +1,7 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" import { getIntl } from "@/i18n" diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx index 1f8bb370a..48141da25 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx @@ -1,7 +1,7 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import { getIntl } from "@/i18n" import { getSingleDecimal } from "@/utils/numberFormatting" 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 6cb2e8520..6772ef272 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx @@ -4,9 +4,9 @@ import { useParams } from "next/navigation" import { useEffect, useState } from "react" import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import PoiMarker from "@/components/Maps/Markers/Poi" import { trackHotelMapClick } from "@/utils/tracking" diff --git a/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx index 0d714283c..d558643de 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx @@ -2,10 +2,10 @@ import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import ImageGallery from "@/components/ImageGallery" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx index 8e9bc0b33..05ca7090a 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx @@ -1,7 +1,7 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import SidePeek from "@scandic-hotels/design-system/SidePeek" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import { getIntl } from "@/i18n" import { appendSlugToPathname } from "@/utils/appendSlugToPathname" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx index f6b188c93..39da26dd0 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx @@ -1,11 +1,12 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import OpeningHours from "@/components/OpeningHours" import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" import { appendSlugToPathname } from "@/utils/appendSlugToPathname" +import { trackClick } from "@/utils/tracking" import SidePeekImages from "../../Images" @@ -103,8 +104,9 @@ export default async function RestaurantBarItem({ typography="Body/Paragraph/mdBold" href={bookTableUrl} target="_blank" - trackingId="book a table" - trackingParams={{ restaurantName: name }} + onClick={() => + trackClick("book a table", { restaurantName: name }) + } > {restaurantPageHref && !mainBody?.length ? intl.formatMessage({ diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx index 81bd09a80..83d210465 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx @@ -2,8 +2,8 @@ import { selectRateWithParams } from "@scandic-hotels/common/constants/routes/hotelReservation" import { dt } from "@scandic-hotels/common/dt" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" -import ButtonLink from "@/components/ButtonLink" import useLang from "@/hooks/useLang" import { trackPricesAndAvailabilityClick } from "@/utils/tracking/hotelPage" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx index 1b46511c7..97fb04c9e 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx @@ -1,8 +1,8 @@ import { cx } from "class-variance-authority" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import SidePeek from "@scandic-hotels/design-system/SidePeek" -import ButtonLink from "@/components/ButtonLink" import { getIntl } from "@/i18n" import { appendSlugToPathname } from "@/utils/appendSlugToPathname" diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/RestaurantSubpage/index.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/RestaurantSubpage/index.tsx index 1fa7fe791..602a46b58 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/RestaurantSubpage/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/RestaurantSubpage/index.tsx @@ -1,7 +1,7 @@ +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import { getIntl } from "@/i18n" import HeroHeader from "../HeroHeader" diff --git a/apps/scandic-web/components/ContentType/StaticPages/index.tsx b/apps/scandic-web/components/ContentType/StaticPages/index.tsx index 93ff70685..485f6f560 100644 --- a/apps/scandic-web/components/ContentType/StaticPages/index.tsx +++ b/apps/scandic-web/components/ContentType/StaticPages/index.tsx @@ -1,9 +1,9 @@ import { Suspense } from "react" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Typography } from "@scandic-hotels/design-system/Typography" import Blocks from "@/components/Blocks" -import ButtonLink from "@/components/ButtonLink" import HeaderDynamicContent from "@/components/Headers/DynamicContent" import Hero from "@/components/Hero" import MeetingPackageWidget from "@/components/MeetingPackageWidget" diff --git a/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx b/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx index c5047bf42..aecbf362a 100644 --- a/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx +++ b/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx @@ -1,13 +1,13 @@ import React from "react" import { signup } from "@scandic-hotels/common/constants/routes/signup" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { dtmcLogin } from "@/constants/routes/dtmc" import { login } from "@/constants/routes/handleAuth" import { getProfileSafely } from "@/lib/trpc/memoizedRequests" -import ButtonLink from "@/components/ButtonLink" import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigger" import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard" import { getIntl } from "@/i18n" diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx index f2c7e325f..9914a6169 100644 --- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx +++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx @@ -2,10 +2,10 @@ import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import Modal from "@/components/Modal" import useWakeLock from "@/hooks/useWakeLock" diff --git a/apps/scandic-web/components/MyPages/Profile/index.tsx b/apps/scandic-web/components/MyPages/Profile/index.tsx index bae5bd431..0b451fc8f 100644 --- a/apps/scandic-web/components/MyPages/Profile/index.tsx +++ b/apps/scandic-web/components/MyPages/Profile/index.tsx @@ -1,6 +1,7 @@ import { Lang } from "@scandic-hotels/common/constants/language" import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" import { isValidLang } from "@scandic-hotels/common/utils/languages" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -9,7 +10,6 @@ import { countriesMap } from "@scandic-hotels/trpc/constants/countries" import { languages } from "@/constants/languages" import { getProfile } from "@/lib/trpc/memoizedRequests" -import ButtonLink from "@/components/ButtonLink" import CommunicationSlot from "@/components/MyPages/Profile/Communication" import CreditCardSlot from "@/components/MyPages/Profile/CreditCards" import Header from "@/components/Profile/Header" diff --git a/apps/scandic-web/components/ParkingInformation/index.tsx b/apps/scandic-web/components/ParkingInformation/index.tsx index 694f38c0f..cbbd38bc7 100644 --- a/apps/scandic-web/components/ParkingInformation/index.tsx +++ b/apps/scandic-web/components/ParkingInformation/index.tsx @@ -2,12 +2,11 @@ import { useIntl } from "react-intl" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" - import ParkingList from "./ParkingList" import ParkingPrices from "./ParkingPrices" diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx index 5be4738ae..dba974bbb 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx @@ -3,10 +3,10 @@ import { useIntl } from "react-intl" import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import { trackAccordionClick } from "@/utils/tracking" import styles from "./sidePeekAccordion.module.css" diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx index 9e8a94562..9e1cd6bfc 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx @@ -3,10 +3,10 @@ import { useIntl } from "react-intl" import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import ParkingInformation from "@/components/ParkingInformation" import { trackAccordionClick } from "@/utils/tracking" diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx index 9e1c4a85a..732caee1b 100644 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx +++ b/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx @@ -3,10 +3,10 @@ import { useIntl } from "react-intl" import Accordion from "@scandic-hotels/design-system/Accordion" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import SidePeek from "@scandic-hotels/design-system/SidePeek" import { Typography } from "@scandic-hotels/design-system/Typography" -import ButtonLink from "@/components/ButtonLink" import Contact from "@/components/HotelReservation/Contact" import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities" diff --git a/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx b/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx index 240228416..83b63d9ea 100644 --- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx @@ -4,10 +4,10 @@ import { useState } from "react" import { useIntl } from "react-intl" import { Button } from "@scandic-hotels/design-system/Button" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import SidePeek from "@scandic-hotels/design-system/SidePeek" -import ButtonLink from "@/components/ButtonLink" import JsonToHtml from "@/components/JsonToHtml" import styles from "./sidepeek.module.css" diff --git a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx index c4aef01e5..290b9a521 100644 --- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx @@ -1,7 +1,7 @@ import Body from "@scandic-hotels/design-system/Body" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import ButtonLink from "@/components/ButtonLink" import Image from "@/components/Image" import TeaserCardSidepeek from "./Sidepeek" diff --git a/apps/scandic-web/components/ButtonLink/buttonLink.module.css b/packages/design-system/lib/components/ButtonLink/buttonLink.module.css similarity index 100% rename from apps/scandic-web/components/ButtonLink/buttonLink.module.css rename to packages/design-system/lib/components/ButtonLink/buttonLink.module.css diff --git a/packages/design-system/lib/components/ButtonLink/index.tsx b/packages/design-system/lib/components/ButtonLink/index.tsx new file mode 100644 index 000000000..39de9ac50 --- /dev/null +++ b/packages/design-system/lib/components/ButtonLink/index.tsx @@ -0,0 +1,45 @@ +'use client' + +import Link from 'next/link' +import { type ComponentProps, type PropsWithChildren } from 'react' + +import { variants } from './variants' + +import type { VariantProps } from 'class-variance-authority' + +export interface ButtonLinkProps + extends PropsWithChildren, + Omit, 'color'>, + VariantProps {} + +export default function ButtonLink({ + variant, + color, + size, + typography, + wrapping, + className, + href, + target, + onClick = () => {}, + ...props +}: ButtonLinkProps) { + const classNames = variants({ + variant, + color, + size, + wrapping, + typography, + className, + }) + + return ( + + ) +} diff --git a/packages/design-system/lib/components/ButtonLink/variants.ts b/packages/design-system/lib/components/ButtonLink/variants.ts new file mode 100644 index 000000000..1aeb40209 --- /dev/null +++ b/packages/design-system/lib/components/ButtonLink/variants.ts @@ -0,0 +1,7 @@ +import { cva } from 'class-variance-authority' + +import { withButton } from '../Button' + +import styles from './buttonLink.module.css' + +export const variants = cva(styles.buttonLink, withButton({})) diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 0140c5c91..63d51c975 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -9,6 +9,7 @@ "./BackToTopButton": "./dist/components/BackToTopButton/index.js", "./Body": "./dist/components/Body/index.js", "./Button": "./dist/components/Button/index.js", + "./ButtonLink": "./dist/components/ButtonLink/index.js", "./Caption": "./dist/components/Caption/index.js", "./Card": "./dist/components/Card/index.js", "./ChipButton": "./dist/components/ChipButton/index.js", @@ -162,6 +163,7 @@ "peerDependencies": { "@internationalized/date": "^3.8.0", "@radix-ui/react-slot": "^1.2.2", + "next": "^15", "react": "^19.1.0", "react-aria-components": "^1.8.0", "react-dom": "^19.1.0", diff --git a/yarn.lock b/yarn.lock index 15a6b63f5..796627d11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6745,6 +6745,7 @@ __metadata: peerDependencies: "@internationalized/date": ^3.8.0 "@radix-ui/react-slot": ^1.2.2 + next: ^15 react: ^19.1.0 react-aria-components: ^1.8.0 react-dom: ^19.1.0