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

Merged in feat/sw-3226-move-buttonlink-to-design-system (pull request #2613)

Browse Source 
feat(SW-3226): Move ButtonLink to design-system

* Move ButtonLink to design-system

* Fix Button import


Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
2025-08-11 10:53:00 +00:00
parent 3cca4ff394
commit 00b124d15a
37 changed files with 89 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx
View File

@@ -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"

2
apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx
View File

@@ -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"

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

@@ -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"

2
apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
View File

@@ -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"

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

@@ -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"

57
apps/scandic-web/components/ButtonLink/index.tsx
View File

@@ -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<ComponentProps<typeof Link>, "color">,
VariantProps<typeof variants> {
trackingId?: string
trackingParams?: Record<string, string>
}
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 (
<Link
className={classNames}
href={href}
target={target}
onClick={(e) => {
onClick(e)
if (trackingId) {
trackClick(trackingId, trackingParams)
}
}}
{...props}
/>
)
}

7
apps/scandic-web/components/ButtonLink/variants.ts
View File

@@ -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({}))

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

@@ -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"

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

@@ -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"

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

@@ -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"

3
apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx
View File

@@ -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"

3
apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx
View File

@@ -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 {

2
apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx
View File

@@ -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"

8
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx
View File

@@ -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({

2
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/ContentType/HotelSubpage/RestaurantSubpage/index.tsx
View File

@@ -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"

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

@@ -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"

2
apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx
View File

@@ -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"

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

@@ -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"

3
apps/scandic-web/components/ParkingInformation/index.tsx
View File

@@ -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"

2
apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx
View File

@@ -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"

2
apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx
View File

@@ -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"

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

@@ -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"

2
apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
View File

@@ -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"

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

@@ -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"

0
apps/scandic-web/components/ButtonLink/buttonLink.module.css → packages/design-system/lib/components/ButtonLink/buttonLink.module.css
View File

45
packages/design-system/lib/components/ButtonLink/index.tsx Normal file
View File

@@ -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<ComponentProps<typeof Link>, 'color'>,
VariantProps<typeof variants> {}
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 (
<Link
className={classNames}
href={href}
target={target}
onClick={onClick}
{...props}
/>
)
}

7
packages/design-system/lib/components/ButtonLink/variants.ts Normal file
View File

@@ -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({}))

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

@@ -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",

1
yarn.lock
View File

@@ -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