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

Merged in fix/BOOK-293-button-variants (pull request #3371)

Browse Source 
fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-12-19 12:32:52 +00:00
committed by Bianca Widstam
parent 2197ab2137
commit 3f632e6031
169 changed files with 665 additions and 944 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/partner-sas/components/LanguageSwitcher/index.tsx
View File

@@ -61,7 +61,7 @@ export function LanguageSwitcher({
return (
<div className={classNames}>
<DialogTrigger>
<Button className={styles.triggerButton} variant="Text" wrapping>
<Button className={styles.triggerButton} variant="Text">
{isMobile && !isFooter ? null : (
<MaterialIcon
icon="globe"
@@ -159,7 +159,7 @@ function LanguageSwitcherContent({
<div className={styles.closeModalWrapper}>
<Button
variant="Text"
size="Medium"
size="md"
onPress={closeModal}
className={styles.closeModal}
>

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

@@ -45,7 +45,7 @@ export function AlreadyLinkedError() {
href={partnerSas[lang]}
variant="Tertiary"
color="Primary"
size="Large"
size="lg"
>
{intl.formatMessage({
id: "linkEuroBonusAccount.viewLinkedAccountsButton",

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

@@ -148,8 +148,7 @@ export default function CampaignHotelListingClient({
<Button
variant="Text"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
onPress={handleButtonClick}
>
<MaterialIcon icon={iconDirection} color="CurrentColor" />

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

@@ -115,13 +115,7 @@ export default function HotelListingItem({
</div>
{url ? (
<div className={styles.ctaWrapper}>
<ButtonLink
href={url}
variant="Tertiary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
>
<ButtonLink href={url} variant="Tertiary" color="Primary" size="sm">
{intl.formatMessage({
id: "destination.seeHotelDetails",
defaultMessage: "See hotel details",

3
apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton/index.tsx
View File

@@ -21,8 +21,7 @@ export function CookieConsentButton() {
return (
<Button
variant="Text"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
wrapping={false}
onPress={handleClick}
className={styles.cookieConsentButton}

3
apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsButton.tsx
View File

@@ -21,10 +21,9 @@ export function UsePointsButton({ variant, onPress }: ButtonProps) {
return (
<Button
size="Medium"
size="md"
className={buttonClassName}
variant={buttonVariant}
typography="Body/Paragraph/mdBold"
onPress={onPress}
>
{intl.formatMessage({

1
apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx
View File

@@ -43,7 +43,6 @@ export default async function Overview({
className={styles.teamMemberCardButton}
variant="Tertiary"
color="Primary"
typography="Body/Paragraph/mdBold"
>
<>
<MaterialIcon icon="id_card" size={24} color="CurrentColor" />

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

@@ -30,8 +30,7 @@ export default function ClaimPoints() {
href={missingPoints[lang]}
variant="Text"
target="_blank"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
>
{intl.formatMessage({
id: "points.claimPoints.cta",

7
apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/ExpiringPointsSeeAllButton.tsx
View File

@@ -26,12 +26,7 @@ export default function ExpiringPointsSeeAllButton({
return (
<>
<Button
variant="Text"
size="Medium"
typography="Body/Paragraph/mdBold"
onPress={() => setIsOpen(true)}
>
<Button variant="Text" size="md" onPress={() => setIsOpen(true)}>
{intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
<MaterialIcon icon="chevron_right" color="CurrentColor" />
</Button>

9
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
View File

@@ -18,9 +18,9 @@ import { trpc } from "@scandic-hotels/trpc/client"
import useLang from "@/hooks/useLang"
import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
import { ConfirmClose } from "./ConfirmClose"
import RedeemCampaign from "./Flows/Campaign"
import RedeemTier from "./Flows/Tier"
import { ConfirmClose } from "./ConfirmClose"
import { RedeemContext } from "./useRedeemFlow"
import styles from "./redeem.module.css"
@@ -70,12 +70,7 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
<DialogTrigger
onOpenChange={(isOpen) => setAnimation(isOpen ? "visible" : "hidden")}
>
<Button
variant="Tertiary"
size="Large"
typography="Body/Paragraph/mdBold"
className={styles.redeemButton}
>
<Button variant="Tertiary" size="lg" className={styles.redeemButton}>
{reward.redeemLocation === "Non-redeemable"
? intl.formatMessage({
id: "rewards.howToUse",

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

@@ -112,7 +112,7 @@ export default async function SASLinkAccountBanner(
href={props.link.href}
variant="Primary"
color="Inverted"
size="Medium"
size="md"
>
{buttonText}
</ButtonLink>

2
apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/NextStayContent.tsx
View File

@@ -137,7 +137,7 @@ export default async function NextStayContent({
<ButtonLink
variant="Tertiary"
color="Inverted"
size="Medium"
size="md"
href={bookingUrl}
className={styles.cta}
>

7
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/SeeAllCard/index.tsx
View File

@@ -16,12 +16,7 @@ export function SeeAllCard({ onPress }: SeeAllCardProps) {
return (
<div className={styles.card}>
<Button
variant="Secondary"
size="Medium"
typography="Body/Paragraph/mdBold"
onPress={onPress}
>
<Button variant="Secondary" size="md" onPress={onPress}>
{intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
<MaterialIcon icon="chevron_right" color="CurrentColor" />
</Button>

2
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/index.tsx
View File

@@ -107,7 +107,7 @@ export default function CarouselCard({ stay }: CarouselCardProps) {
<ButtonLink
variant="Text"
color="Primary"
size="Small"
size="sm"
href={bookingUrl}
>
{intl.formatMessage({

7
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/SeeAllCard/index.tsx
View File

@@ -16,12 +16,7 @@ export function SeeAllCard({ onPress }: SeeAllCardProps) {
return (
<div className={styles.card}>
<Button
variant="Secondary"
size="Medium"
typography="Body/Paragraph/mdBold"
onPress={onPress}
>
<Button variant="Secondary" size="md" onPress={onPress}>
{intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
<MaterialIcon icon="chevron_right" color="CurrentColor" />
</Button>

2
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -65,7 +65,7 @@ export default async function EmptyUpcomingStays() {
})}
</p>
</Typography>
<ButtonLink href={href} variant="Tertiary" color="Primary" size="Small">
<ButtonLink href={href} variant="Tertiary" color="Primary" size="sm">
{intl.formatMessage({
id: "stays.findDestinationOrHotel",
defaultMessage: "Find hotel or destination",

6
apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx
View File

@@ -52,8 +52,7 @@ export default function FullWidthCampaign({
target={primary_button.openInNewTab ? "_blank" : undefined}
variant="Primary"
color="Inverted"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
className={styles.button}
>
{primary_button.title}
@@ -64,10 +63,9 @@ export default function FullWidthCampaign({
href={secondary_button.href}
target={secondary_button.openInNewTab ? "_blank" : undefined}
variant="Secondary"
size="Small"
size="sm"
color="Inverted"
className={styles.button}
typography="Body/Supporting text (caption)/smBold"
>
{secondary_button.title}
</ButtonLink>

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

@@ -93,7 +93,7 @@ export default async function HotelListingItem({
/>
<ButtonLink
variant="Primary"
size="Small"
size="sm"
href={cta.url}
target={cta.openInNewTab ? "_blank" : undefined}
className={styles.button}

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

@@ -74,10 +74,9 @@ export default async function JoinScandicFriends({
{content.has_primary_button ? (
<ButtonLink
variant="Primary"
size="Small"
size="sm"
href={primary_button.href}
target={primary_button.openInNewTab ? "_blank" : undefined}
typography="Body/Supporting text (caption)/smBold"
className={styles.primaryButton}
>
{primary_button.title}

6
apps/scandic-web/components/CampaignBanner/index.tsx
View File

@@ -8,7 +8,6 @@ import { useMediaQuery } from "usehooks-ts"
import { debounce } from "@scandic-hotels/common/utils/debounce"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { trackClick } from "@scandic-hotels/tracking/base"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -125,9 +124,8 @@ export default function CampaignBanner() {
id: "campaignBanner.dismissBanner",
defaultMessage: "Dismiss banner",
})}
>
<MaterialIcon color="CurrentColor" icon="close" />
</IconButton>
iconName="close"
/>
</div>
</div>
)

11
apps/scandic-web/components/Carousel/CarouselNavigation.tsx
View File

@@ -4,7 +4,6 @@ import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { useCarousel } from "./CarouselContext"
@@ -28,9 +27,8 @@ export function CarouselPrevious({ className }: CarouselButtonProps) {
id: "carousel.previousSlide",
defaultMessage: "Previous slide",
})}
>
<MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
</IconButton>
iconName="arrow_back"
/>
</span>
)
}
@@ -51,9 +49,8 @@ export function CarouselNext({ className }: CarouselButtonProps) {
id: "carousel.nextSlide",
defaultMessage: "Next slide",
})}
>
<MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
</IconButton>
iconName="arrow_forward"
/>
</span>
)
}

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

@@ -125,8 +125,7 @@ export default async function CampaignHero({
variant="Secondary"
color={buttonColor}
href={button.url}
typography="Body/Paragraph/mdBold"
size="Medium"
size="md"
>
{button.cta}
</ButtonLink>

4
apps/scandic-web/components/ContentType/CollectionPage/index.tsx
View File

@@ -63,7 +63,7 @@ export async function CollectionPage() {
{header.top_primary_button?.url ? (
<ButtonLink
href={header.top_primary_button.url}
size="Medium"
size="md"
variant="Primary"
color="Inverted"
>
@@ -96,7 +96,7 @@ export async function CollectionPage() {
{header.top_primary_button?.url ? (
<ButtonLink
href={header.top_primary_button.url}
size="Medium"
size="md"
variant="Tertiary"
>
{header.top_primary_button.title}

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

@@ -62,7 +62,7 @@ export async function ContentPage() {
{header.top_primary_button?.url ? (
<ButtonLink
href={header.top_primary_button.url}
size="Medium"
size="md"
variant="Tertiary"
>
{header.top_primary_button.title}

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

@@ -143,13 +143,7 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
</Typography>
{url && (
<div className={styles.ctaWrapper}>
<ButtonLink
href={url}
variant="Tertiary"
color="Primary"
size="Small"
typography="Body/Paragraph/mdBold"
>
<ButtonLink href={url} variant="Tertiary" color="Primary" size="sm">
{intl.formatMessage({
id: "destination.seeHotelDetails",
defaultMessage: "See hotel details",

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

@@ -60,12 +60,7 @@ export default function CityMap({
>
<div className={styles.topSection}>
{fromCountryPage ? (
<Button
typography="Body/Paragraph/mdBold"
variant="Text"
color="Primary"
onClick={handleGoBack}
>
<Button variant="Text" color="Primary" onPress={handleGoBack}>
<MaterialIcon icon="arrow_back" color="CurrentColor" size={24} />
<span>
{intl.formatMessage({

14
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx
View File

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
import { setMapUrlFromCountryPage } from "@scandic-hotels/common/hooks/map/useSetMapUrlFromCountryPage"
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 ImageFallback from "@scandic-hotels/design-system/ImageFallback"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -48,20 +47,15 @@ export default function CityMapCard({
<IconButton
variant="Muted"
emphasis
size="sm"
className={styles.closeButton}
onPress={handleClose}
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
>
<MaterialIcon
icon="close"
size={16}
className={styles.closeIcon}
color="CurrentColor"
/>
</IconButton>
iconName="close"
/>
{image ? (
<DialogImage
image={image.src}
@@ -85,7 +79,7 @@ export default function CityMapCard({
href={cityMapUrl}
variant="Secondary"
color="Primary"
size="Small"
size="sm"
onClick={() => setActiveCityMarker(null)}
>
<Typography variant="Body/Supporting text (caption)/smBold">

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

@@ -131,9 +131,8 @@ export default function HotelListingItem({
scroll={true}
variant="Text"
color="Primary"
size="Medium"
size="md"
wrapping={false}
typography="Body/Paragraph/mdBold"
onClick={() => setActiveMarker(hotel.id)}
>
{intl.formatMessage({
@@ -152,8 +151,7 @@ export default function HotelListingItem({
href={url}
variant="Tertiary"
color="Primary"
size="Small"
typography="Body/Paragraph/mdBold"
size="sm"
>
{intl.formatMessage({
id: "destination.seeHotelDetails",

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

@@ -57,13 +57,12 @@ export function DestinationSearch() {
variant="Muted"
emphasis
className={styles.close}
>
<MaterialIcon
color="CurrentColor"
icon="close"
size={24}
/>
</IconButton>
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
iconName="close"
/>
<DestinationSearchForm isMobile={true} />
</>
)}

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

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
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"
@@ -51,20 +50,15 @@ export default function HotelMapCard({
<IconButton
variant="Muted"
emphasis
size="sm"
className={styles.closeButton}
onPress={handleClose}
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
>
<MaterialIcon
icon="close"
size={16}
className={styles.closeIcon}
color="CurrentColor"
/>
</IconButton>
iconName="close"
/>
{image ? (
<DialogImage
image={image.src}
@@ -113,12 +107,7 @@ export default function HotelMapCard({
</div>
{url && (
<ButtonLink
href={url}
variant="Tertiary"
color="Primary"
size="Small"
>
<ButtonLink href={url} variant="Tertiary" color="Primary" size="sm">
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
{intl.formatMessage({

15
apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
View File

@@ -130,10 +130,9 @@ export default function DynamicMap({
<Button
color="Inverted"
variant="Primary"
size="Small"
size="sm"
className={styles.seeAsListButton}
onClick={onClose}
typography="Body/Supporting text (caption)/smBold"
onPress={onClose}
>
<MaterialIcon icon="format_list_bulleted" color="CurrentColor" />
<span>
@@ -154,9 +153,8 @@ export default function DynamicMap({
defaultMessage: "Zoom in",
})}
isDisabled={isMaxZoom}
>
<MaterialIcon icon="add" color="CurrentColor" size={24} />
</IconButton>
iconName="add"
/>
<IconButton
variant="Elevated"
className={styles.zoomButton}
@@ -166,9 +164,8 @@ export default function DynamicMap({
defaultMessage: "Zoom out",
})}
isDisabled={isMinZoom}
>
<MaterialIcon icon="remove" color="CurrentColor" size={24} />
</IconButton>
iconName="remove"
/>
</div>
</div>
</div>

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

@@ -170,9 +170,8 @@ export default function Map({
<div className={styles.mobileNavigation}>
<Button
variant="Text"
size="Small"
size="sm"
color="Primary"
typography="Body/Supporting text (caption)/smBold"
onClick={handleClose}
>
<MaterialIcon

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

@@ -23,9 +23,8 @@ export function SeeOnMapFilterWrapper({
{mapUrl ? (
<ButtonLink
className={styles.mapButton}
typography="Body/Paragraph/mdBold"
variant="Secondary"
size="Small"
size="sm"
color="Primary"
wrapping
href={mapUrl}

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

@@ -63,9 +63,8 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
<Button
variant="Primary"
color="Inverted"
size="Small"
size="sm"
onPress={() => setLightboxState({ open: true, activeIndex: 0 })}
typography="Body/Supporting text (caption)/smBold"
className={styles.seeAllButton}
>
{intl.formatMessage({

3
apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx
View File

@@ -103,10 +103,9 @@ export default function HotelMapPageClient({
<Button
variant="Primary"
color="Inverted"
size="Small"
size="sm"
className={styles.closeButton}
onPress={handleClose}
typography="Body/Supporting text (caption)/smBold"
>
<MaterialIcon icon="close" size={20} color="CurrentColor" />
<span>

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

@@ -51,7 +51,6 @@ export default async function AmenitiesList({
<ButtonLink
href={`?s=${SidepeekSlugs.amenities}`}
variant="Text"
typography="Body/Paragraph/mdBold"
scroll={false}
>
{intl.formatMessage({

3
apps/scandic-web/components/ContentType/HotelPage/Hero/index.tsx
View File

@@ -82,14 +82,13 @@ export function HotelPageHero({
<Button
variant="Primary"
color="Inverted"
size="Small"
size="sm"
onPress={() =>
setLightboxState({
activeIndex: 0,
isOpen: true,
})
}
typography="Body/Supporting text (caption)/smBold"
className={styles.seeAllButton}
>
{seeAllPhotosText}

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

@@ -59,8 +59,7 @@ export default async function TripAdvisorSection({
href={tripAdvisorHref}
variant="Text"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
wrapping={false}
>
{formattedTripAdvisorText}

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

@@ -124,7 +124,6 @@ export default async function IntroSection({
<ButtonLink
href={`?s=${SidepeekSlugs.about}`}
variant="Text"
typography="Body/Paragraph/mdBold"
scroll={false}
>
{intl.formatMessage({

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

@@ -63,7 +63,7 @@ export default function MapCard({ hotelName, pois }: MapCardProps) {
<ButtonLink
variant="Secondary"
color="Primary"
size="Small"
size="sm"
href={mapUrl}
scroll={true}
onClick={trackHotelMapClick}

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

@@ -68,8 +68,7 @@ export function RoomCard({ room }: RoomCardProps) {
<ButtonLink
href={`?s=room-${getRoomNameAsParam(name)}`}
variant="Text"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
scroll={false}
className={styles.buttonLink}
>

3
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx
View File

@@ -35,8 +35,7 @@ export default async function ActivitiesSidePeek({
href={href}
variant="Secondary"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
fullWidth
>
{sidepeekCTA}

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

@@ -69,9 +69,8 @@ export default async function MeetingsAndConferencesSidePeek({
<ButtonLink
variant="Secondary"
color="Primary"
size="Medium"
size="md"
href={meetingPageHref}
typography="Body/Paragraph/mdBold"
fullWidth
>
{intl.formatMessage({

6
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/RestaurantBarItemLinks.tsx
View File

@@ -28,8 +28,7 @@ export function RestaurantBarItemLinks({
<ButtonLink
variant="Primary"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
href={bookTableUrl}
target="_blank"
onClick={() => trackClick("book a table", { restaurantName })}
@@ -50,8 +49,7 @@ export function RestaurantBarItemLinks({
<ButtonLink
variant="Secondary"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
href={restaurantPageHref}
fullWidth
>

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

@@ -50,7 +50,6 @@ export default async function WellnessAndExerciseSidePeek({
href={spaPage.url}
variant="Tertiary"
color="Primary"
typography="Body/Paragraph/mdBold"
fullWidth
>
{spaPage.buttonCTA}
@@ -61,7 +60,6 @@ export default async function WellnessAndExerciseSidePeek({
href={wellnessExercisePageHref}
color="Primary"
variant="Secondary"
typography="Body/Paragraph/mdBold"
fullWidth
>
{intl.formatMessage({

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

@@ -56,12 +56,7 @@ export default async function RestaurantSubpage({
</div>
{bookTableUrl ? (
<div className={styles.buttonContainer}>
<ButtonLink
href={bookTableUrl}
variant="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
>
<ButtonLink href={bookTableUrl} variant="Primary" size="md">
{intl.formatMessage({
id: "restaurantBar.bookATable",
defaultMessage: "Book a table",

7
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx
View File

@@ -47,12 +47,7 @@ export default async function RestaurantSidebar({
) : null}
{bookTableUrl && (
<div className={styles.buttonContainer}>
<ButtonLink
href={bookTableUrl}
variant="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
>
<ButtonLink href={bookTableUrl} variant="Primary" size="md">
{intl.formatMessage({
id: "restaurantBar.bookATable",
defaultMessage: "Book a table",

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

@@ -41,7 +41,7 @@ export default async function ExpiredPromoCampaign() {
</Typography>
</div>
<ButtonLink href={offers[lang]} variant="Tertiary" size="Large">
<ButtonLink href={offers[lang]} variant="Tertiary" size="lg">
{intl.formatMessage({
id: "promoCampaign.seeAllOffers",
defaultMessage: "See all offers",

5
apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/ActivateOffer/index.tsx
View File

@@ -47,10 +47,9 @@ export default function ActivateOffer({
function ActivateButton() {
return (
<Button
onClick={handleActivateFlow}
onPress={handleActivateFlow}
variant="Tertiary"
size="Medium"
typography="Body/Paragraph/mdRegular"
size="md"
className={styles.activateButton}
isDisabled={activateCampaign.isPending}
isPending={activateCampaign.isPending}

2
apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/PromoLoginButton.tsx
View File

@@ -30,7 +30,7 @@ export default function PromoLoginButton() {
}
variant="Primary"
color="Inverted"
size="Medium"
size="md"
>
{intl.formatMessage({
id: "promoCampaign.logIn",

2
apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/PromoSignUpButton.tsx
View File

@@ -27,7 +27,7 @@ export default function PromoSignUpButton() {
href={signup[lang]}
variant="Secondary"
color="Inverted"
size="Medium"
size="md"
prefetch={false}
>
{intl.formatMessage({

7
apps/scandic-web/components/DestinationFilterAndSort/FilterAndSortButton/index.tsx
View File

@@ -36,17 +36,17 @@ export function FilterAndSortButton({
const buttonProps: {
variant: "Text" | "Secondary"
size: "Small" | "Medium"
size: "sm" | "md"
} = isDesktop
? {
//Desktop
variant: "Text",
size: "Medium",
size: "md",
}
: {
//Mobile
variant: isMapView ? "Text" : "Secondary",
size: "Small",
size: "sm",
}
return (
@@ -54,7 +54,6 @@ export function FilterAndSortButton({
<Button
{...buttonProps}
color="Primary"
typography="Body/Paragraph/mdBold"
wrapping
className={styles.button}
>

8
apps/scandic-web/components/DestinationFilterAndSort/index.tsx
View File

@@ -182,9 +182,9 @@ export default function DestinationFilterAndSort({
)}
<footer className={styles.footer}>
<Button
onClick={clearPendingFilters}
onPress={clearPendingFilters}
variant="Text"
size="Small"
size="sm"
color="Primary"
>
{intl.formatMessage({
@@ -194,10 +194,10 @@ export default function DestinationFilterAndSort({
</Button>
<Button
variant="Primary"
size="Medium"
size="md"
color="Primary"
isDisabled={pendingCount === 0}
onClick={() => submitAndClose(close)}
onPress={() => submitAndClose(close)}
>
{intl.formatMessage(
{

6
apps/scandic-web/components/Dialog/index.tsx
View File

@@ -48,7 +48,7 @@ export default function Dialog({
<Button
variant="Secondary"
onPress={close}
size="Medium"
size="md"
color="Primary"
>
{cancelButtonText}
@@ -57,7 +57,7 @@ export default function Dialog({
<ButtonLink
variant="Primary"
color="Primary"
size="Medium"
size="md"
href={proceedHref}
>
{proceedText}
@@ -69,7 +69,7 @@ export default function Dialog({
onPress={() => {
proceedOnClick(close)
}}
size="Medium"
size="md"
>
{proceedText}
</Button>

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

@@ -33,7 +33,7 @@ export default async function EmployeeBenefitsCallToActions() {
})}
</p>
</Typography>
<ButtonLink href={loginAndLinkURL} size="Medium" variant="Tertiary">
<ButtonLink href={loginAndLinkURL} size="md" variant="Tertiary">
{intl.formatMessage({
id: "dtmc.logInAndLinkEmployment",
defaultMessage: "Log in and link employment",
@@ -50,7 +50,7 @@ export default async function EmployeeBenefitsCallToActions() {
})}
</p>
</Typography>
<ButtonLink href={signup[lang]} size="Medium" variant="Secondary">
<ButtonLink href={signup[lang]} size="md" variant="Secondary">
{intl.formatMessage({
id: "dtmc.signUpAndLinkEmployment",
defaultMessage: "Sign up and link employment",
@@ -65,12 +65,7 @@ export default async function EmployeeBenefitsCallToActions() {
return (
<div className={styles.container}>
<DigitalTeamMemberCard user={user}>
<TeamMemberCardTrigger
size="Medium"
variant="Tertiary"
color="Primary"
typography="Body/Paragraph/mdBold"
>
<TeamMemberCardTrigger size="md" variant="Tertiary" color="Primary">
{intl.formatMessage({
id: "dtmc.showTeamMemberCard",
defaultMessage: "Show Team Member Card",
@@ -86,7 +81,7 @@ export default async function EmployeeBenefitsCallToActions() {
<ButtonLink
href={dtmcLogin[lang]}
prefetch={false}
size="Medium"
size="md"
variant="Tertiary"
color="Primary"
>

4
apps/scandic-web/components/Forms/Edit/Profile/index.tsx
View File

@@ -159,7 +159,7 @@ export default function Form({ user }: EditFormProps) {
defaultMessage: "Discard unsaved changes?",
})}
trigger={
<Button variant="Secondary" size="Small" color="Primary">
<Button variant="Secondary" size="sm" color="Primary">
{intl.formatMessage({
id: "editProfile.discardChanges",
defaultMessage: "Discard changes",
@@ -171,7 +171,7 @@ export default function Form({ user }: EditFormProps) {
isDisabled={!isValid || methods.formState.isSubmitting}
form={formId}
variant="Primary"
size="Small"
size="sm"
color="Primary"
type="submit"
>

8
apps/scandic-web/components/Forms/ProfilingConsent/index.tsx
View File

@@ -166,10 +166,9 @@ export function ProfilingConsent({
>
<Button
type="submit"
typography="Body/Paragraph/mdBold"
variant="Primary"
color="Primary"
size="Medium"
size="md"
isDisabled={!isDirty}
isPending={isLoading}
>
@@ -181,11 +180,10 @@ export function ProfilingConsent({
</Tooltip>
<Button
type="button"
typography="Body/Paragraph/mdBold"
variant="Secondary"
color="Primary"
size="Medium"
onClick={() => {
size="md"
onPress={() => {
backToProfile()
trackConsentAction({
position: "profile",

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

@@ -405,7 +405,6 @@ export default function SignupForm({
type="submit"
variant="Primary"
onPress={() => methods.trigger()}
typography="Body/Paragraph/mdBold"
data-testid="trigger-validation"
>
{signupButtonText}
@@ -416,7 +415,6 @@ export default function SignupForm({
type="submit"
variant="Primary"
isDisabled={methods.formState.isSubmitting || signup.isPending}
typography="Body/Paragraph/mdBold"
data-testid="submit"
>
{signupButtonText}

1
apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
View File

@@ -90,7 +90,6 @@ export default function MyPagesMenuWrapper() {
redirectTo={loginPathname}
loginPosition="top-menu"
variant="Text"
typography="Body/Paragraph/mdBold"
wrapping={false}
>
<Avatar />

1
apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
View File

@@ -63,7 +63,6 @@ export default function MegaMenu({
<ButtonLink
href={seeAllLink.url}
variant="Text"
typography="Body/Paragraph/mdBold"
onClick={handleNavigate}
wrapping={false}
>

24
apps/scandic-web/components/HotelFilterAndSort/index.tsx
View File

@@ -92,11 +92,7 @@ export default function HotelFilterAndSort() {
return (
<DialogTrigger onOpenChange={handleClose}>
<div className={styles.buttonWrapper}>
<Button
variant="Text"
wrapping={false}
typography="Body/Paragraph/mdBold"
>
<Button variant="Text" wrapping={false}>
<MaterialIcon icon="filter_alt" color="CurrentColor" />
{intl.formatMessage({
id: "filter.filterAndSort",
@@ -129,9 +125,12 @@ export default function HotelFilterAndSort() {
})}
</h3>
</Typography>
<IconButton onPress={close} variant="Muted" emphasis>
<MaterialIcon icon="close" color="CurrentColor" />
</IconButton>
<IconButton
onPress={close}
variant="Muted"
emphasis
iconName="close"
/>
</header>
<div className={styles.content}>
<Sort sortItems={sortItems} />
@@ -149,11 +148,7 @@ export default function HotelFilterAndSort() {
</div>
)}
<footer className={styles.footer}>
<Button
onClick={clearPendingFilters}
variant="Text"
typography="Body/Paragraph/mdBold"
>
<Button onPress={clearPendingFilters} variant="Text">
{intl.formatMessage({
id: "filter.clearAllFilters",
defaultMessage: "Clear all filters",
@@ -161,10 +156,9 @@ export default function HotelFilterAndSort() {
</Button>
<Button
variant="Tertiary"
size="Large"
size="lg"
isDisabled={pendingCount === 0}
onPress={() => submitAndClose(close)}
typography="Body/Paragraph/mdBold"
>
{intl.formatMessage(
{

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

@@ -78,7 +78,7 @@ export default function AdditionalInfoForm({
<Button
type="submit"
variant="Primary"
size="Medium"
size="md"
isDisabled={form.formState.isSubmitting}
>
{intl.formatMessage({

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

@@ -171,7 +171,7 @@ export default function FindMyBooking({
<Button
type="submit"
variant="Primary"
size="Large"
size="lg"
isDisabled={form.formState.isSubmitting || update.isPending}
>
{intl.formatMessage({

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/SelectDeliveryTime/index.tsx
View File

@@ -64,7 +64,7 @@ export default function SelectDeliveryTime() {
<Button
wrapping={false}
variant="Text"
size="Small"
size="sm"
color="Primary"
className={styles.changeButton}
onPress={() => setShowChangeTime(true)}

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx
View File

@@ -73,7 +73,7 @@ export default function DeliveryMethodStep() {
<Button
wrapping={false}
variant="Text"
size="Small"
size="sm"
color="Primary"
className={styles.requestButton}
onPress={() => setShowSpecialRequests(true)}

13
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Summary/index.tsx
View File

@@ -185,8 +185,7 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
{isConfirmation && (
<Button
type="button"
typography="Body/Supporting text (caption)/smBold"
size="Small"
size="sm"
variant="Text"
onPress={togglePriceDetails}
className={styles.priceButton}
@@ -209,10 +208,9 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
<div className={styles.buttons}>
<Button
typography="Body/Supporting text (caption)/smBold"
type="button"
variant="Text"
size="Medium"
size="sm"
color="Primary"
wrapping={false}
onPress={prevStep}
@@ -220,11 +218,8 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
{secondaryButtonLabel}
</Button>
<Button
typography="Body/Supporting text (caption)/smBold"
size="Medium"
isDisabled={
isSubmitting || (isConfirmation && !!Object.keys(errors).length)
}
size="sm"
isDisabled={isSubmitting}
isPending={isSubmitting}
onPress={handleNextStep}
variant={isSingleItem || isConfirmation ? "Primary" : "Secondary"}

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/index.tsx
View File

@@ -24,7 +24,7 @@ export default function AllAncillariesModal() {
<div>
<Button
variant="Text"
size="Small"
size="sm"
color="Primary"
onPress={() => setIsOpen(true)}
>

6
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotUpcoming/CustomerSupport.tsx
View File

@@ -11,11 +11,7 @@ export default function CustomerSupport() {
return (
<DialogTrigger>
<Button
variant="Secondary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
>
<Button variant="Secondary" size="sm">
{intl.formatMessage({
id: "common.customerSupport",
defaultMessage: "Customer support",

7
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotUpcoming/index.tsx
View File

@@ -46,12 +46,7 @@ export default function NotUpcoming() {
return (
<>
{!isWebview(pathname) && (
<ButtonLink
variant="Tertiary"
size="Medium"
href={url}
typography="Body/Supporting text (caption)/smBold"
>
<ButtonLink variant="Tertiary" size="md" href={url}>
{intl.formatMessage({
defaultMessage: "Rebook",
id: "myStay.referenceCard.actions.rebook",

1
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ActionsButton/index.tsx
View File

@@ -24,7 +24,6 @@ export default function ActionsButton({
wrapping={false}
onPress={onPress}
isDisabled={isDisabled}
typography="Body/Paragraph/mdBold"
>
<MaterialIcon color="CurrentColor" icon={icon} className={styles.icon} />
<span>{text}</span>

7
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx
View File

@@ -25,12 +25,7 @@ export default function ManageStay() {
}
return (
<>
<Button
size="Medium"
variant="Tertiary"
typography="Body/Supporting text (caption)/smBold"
onPress={() => setIsOpen(true)}
>
<Button size="md" variant="Tertiary" onPress={() => setIsOpen(true)}>
<span>{manageStay}</span>
<MaterialIcon color="CurrentColor" icon="keyboard_arrow_down" />
</Button>

3
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/index.tsx
View File

@@ -20,10 +20,9 @@ export default function Upcoming() {
<ManageStay />
<ButtonLink
variant="Secondary"
size="Medium"
size="md"
target="_blank"
href={directionsUrl}
typography="Body/Supporting text (caption)/smBold"
>
<span>
{intl.formatMessage({

3
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/index.tsx
View File

@@ -59,8 +59,7 @@ export function GuaranteeInfoModal() {
className={styles.closeButton}
variant="Secondary"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
onPress={() => setIsOpen(false)}
>
{intl.formatMessage({

10
apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
View File

@@ -268,13 +268,9 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
variant="Muted"
emphasis
className={styles.termsInfoIcon}
>
<MaterialIcon
icon="info"
color="Icon/Default"
size={20}
/>
</IconButton>
iconName="info"
size="md"
/>
}
>
<div className={styles.terms}>

5
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx
View File

@@ -55,9 +55,8 @@ export default function Terms() {
emphasis
size="sm"
className={styles.button}
>
<MaterialIcon icon="info" color="Icon/Default" size={20} />
</IconButton>
iconName="info"
/>
}
>
<div className={styles.terms}>

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

@@ -34,7 +34,7 @@ export default function RoomDetailsSidePeek({
<>
<Button
variant="Text"
size="Small"
size="sm"
color="Primary"
wrapping
onPress={() => {

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

@@ -14,8 +14,7 @@ export function MapWithButtonWrapper({ children }: React.PropsWithChildren) {
<FakeButton
variant="Primary"
color="Inverted"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
className={styles.button}
>
<MaterialIcon icon="map" color="CurrentColor" size={20} />

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

@@ -62,12 +62,7 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
</span>
</Typography>
</span>
<FakeButton
variant="Primary"
size="Medium"
typography="Body/Supporting text (caption)/smBold"
isHovered={isHovered}
>
<FakeButton variant="Primary" size="md" isHovered={isHovered}>
<MaterialIcon icon="search" color="CurrentColor" />
{intl.formatMessage({
id: "bookingWidget.button.search",
@@ -97,9 +92,8 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
id: "common.close",
defaultMessage: "Close",
})}
>
<MaterialIcon icon="close" />
</IconButton>
iconName="close"
/>
</div>
<MeetingPackageWidgetContent {...props} />
</>

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

@@ -48,7 +48,7 @@ export default function CopyMembershipIdButton({
onClick={handleCopy}
className={styles.copyButton}
variant="Text"
size="Small"
size="sm"
>
<MaterialIcon icon="content_copy" color="CurrentColor" />
</Button>

18
apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx
View File

@@ -4,7 +4,7 @@
import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import { IconButton } from "@scandic-hotels/design-system/IconButton" // client only
import { IconButton } from "@scandic-hotels/design-system/IconButton"; // client only
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@scandic-hotels/design-system/Modal"
import Link from "@scandic-hotels/design-system/OldDSLink"
@@ -35,17 +35,11 @@ export default function LevelProgressModal({
<Modal
className={styles.dialog}
trigger={
<IconButton variant="Muted" emphasis>
<MaterialIcon
className={styles.infoButton}
icon="info"
color={
color === "Surface/Brand/Primary 1/OnSurface/Default"
? "Icon/Inverted"
: "Icon/Interactive/Default"
}
/>
</IconButton>
<IconButton
variant="Muted"
emphasis={color !== "Surface/Brand/Primary 1/OnSurface/Default"}
iconName="info"
/>
}
>
<div className={styles.levelProgressModal}>

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

@@ -140,12 +140,7 @@ export default async function Profile() {
</span>
</h2>
</Typography>
<ButtonLink
size="Small"
prefetch={false}
href={profileEdit[lang]}
typography="Body/Supporting text (caption)/smBold"
>
<ButtonLink size="sm" prefetch={false} href={profileEdit[lang]}>
{intl.formatMessage({
id: "myPages.editProfile",
defaultMessage: "Edit profile",

5
apps/scandic-web/components/MyPages/ProfilingConsent/Banner/Button.tsx
View File

@@ -18,9 +18,8 @@ export function BannerButton({ cta }: BannerButtonProps) {
<Button
variant="Secondary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
onClick={handleOpenModal}
size="sm"
onPress={handleOpenModal}
>
{cta}
</Button>

16
apps/scandic-web/components/MyPages/ProfilingConsent/Modal/index.tsx
View File

@@ -13,9 +13,9 @@ import { trpc } from "@scandic-hotels/trpc/client"
import { useUpdateProfilingConsent } from "@/hooks/useUpdateProfilingConsent"
import {
setDismissed as persistDismissed,
profilingConsentOpenEvent,
readDismissed,
setDismissed as persistDismissed,
} from "@/utils/profilingConsent"
import { trackConsentAction } from "@/utils/tracking/profilingConsent"
@@ -159,10 +159,10 @@ export default function ProfilingConsentModal({
<Button
type="button"
variant="Text"
size="Large"
size="lg"
color="Primary"
className={styles.closeBtn}
onClick={() => {
onPress={() => {
trackConsentAction({ position: "modal", name: "close" })
onClose()
}}
@@ -216,12 +216,11 @@ export default function ProfilingConsentModal({
<Button
variant="Primary"
color="Primary"
size="Large"
typography="Body/Supporting text (caption)/smRegular"
size="lg"
type="button"
isDisabled={isLoading}
isPending={isLoading && activeChoice === true}
onClick={() => {
onPress={() => {
trackConsentAction({
position: "modal",
name: "accept personalization",
@@ -236,13 +235,12 @@ export default function ProfilingConsentModal({
</Button>
<Button
variant="Secondary"
size="Large"
size="lg"
color="Primary"
typography="Body/Supporting text (caption)/smRegular"
type="button"
isDisabled={isLoading}
isPending={isLoading && activeChoice === false}
onClick={() => {
onPress={() => {
trackConsentAction({ position: "modal", name: "decline" })
handleConsentClick(false)
}}

3
apps/scandic-web/components/MyPages/Surprises/Initial.tsx
View File

@@ -60,9 +60,8 @@ export default function Initial({ totalSurprises, onOpen }: InitialProps) {
<Button
variant="Primary"
onPress={onOpen}
size="Medium"
size="md"
autoFocus
typography="Body/Paragraph/mdBold"
className={styles.widthFull}
>
{intl.formatMessage(

6
apps/scandic-web/components/MyPages/Surprises/Navigation.tsx
View File

@@ -20,8 +20,7 @@ export default function Navigation({
variant="Text"
isDisabled={selectedSurprise === 0}
onPress={() => showSurprise(-1)}
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
>
<MaterialIcon
icon="chevron_right"
@@ -38,8 +37,7 @@ export default function Navigation({
variant="Text"
isDisabled={selectedSurprise === totalSurprises - 1}
onPress={() => showSurprise(1)}
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
>
{intl.formatMessage({
id: "common.next",

5
apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx
View File

@@ -100,9 +100,8 @@ export default function AddCreditCardButton() {
className={styles.addCreditCardButton}
variant="Text"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
onClick={() =>
size="md"
onPress={() =>
initiateAddCard.mutate({
language: lang,
})

6
apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx
View File

@@ -2,7 +2,6 @@
import { useIntl } from "react-intl"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { toast } from "@scandic-hotels/design-system/Toast"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -77,9 +76,8 @@ export default function DeleteCreditCardConfirmation({
id: "profile.creditCard.deleteCard",
defaultMessage: "Delete card",
})}
>
<MaterialIcon icon="delete" color="Icon/Interactive/Default" />
</IconButton>
iconName="delete"
/>
}
/>
)

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

@@ -43,8 +43,7 @@ export default function AccessibilityAccordionItem({
href={accessibilityPageHref}
variant="Secondary"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
size="md"
>
{intl.formatMessage({
id: "accessibility.aboutAccessibility",

1
apps/scandic-web/components/Sidebar/JoinLoyalty/LoyaltyLoginButton.tsx
View File

@@ -23,7 +23,6 @@ export function LoyaltyLoginButton() {
redirectTo={loginPathname}
loginPosition="scandic-friends-sidebar"
variant="Text"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
>
<MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />

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

@@ -40,7 +40,7 @@ export default async function JoinLoyaltyContact({
<Typography variant="Body/Paragraph/mdBold">
<ButtonLink
className={styles.button}
size="Small"
size="sm"
wrapping
href={block.button.href}
target={block.button.openInNewTab ? "_blank" : "_self"}

8
apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
View File

@@ -113,12 +113,8 @@ export default function PasswordInput({
}
aria-controls={field.name}
className={styles.toggleButton}
>
<MaterialIcon
icon={isPasswordVisible ? "visibility_off" : "visibility"}
size={24}
/>
</IconButton>
iconName={isPasswordVisible ? "visibility_off" : "visibility"}
/>
) : null}
</div>

4
apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx
View File

@@ -17,8 +17,7 @@ interface ShowMoreButtonProps extends ComponentProps<typeof Button> {
export default function ShowMoreButton({
variant = "Text",
color = "Primary",
size = "Medium",
typography = "Body/Paragraph/mdBold",
size = "md",
showLess,
textShowMore,
textShowLess,
@@ -47,7 +46,6 @@ export default function ShowMoreButton({
color={color}
size={size}
onPress={loadMoreData}
typography={typography}
{...props}
>
{showLess ? (

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

@@ -27,8 +27,7 @@ export default function TeaserCardSidepeek({
onPress={() => setSidePeekIsOpen(true)}
variant="Secondary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
>
{button.call_to_action_text}
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
@@ -54,8 +53,7 @@ export default function TeaserCardSidepeek({
<ButtonLink
variant="Primary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
href={primary_button.href}
target={primary_button.openInNewTab ? "_blank" : undefined}
>
@@ -66,8 +64,7 @@ export default function TeaserCardSidepeek({
<ButtonLink
variant="Secondary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
href={secondary_button.href}
target={secondary_button.openInNewTab ? "_blank" : undefined}
>

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

@@ -57,8 +57,7 @@ export default function TeaserCard({
<ButtonLink
variant="Tertiary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
className={styles.ctaButton}
href={primaryButton.href}
target={primaryButton.openInNewTab ? "_blank" : undefined}
@@ -70,8 +69,7 @@ export default function TeaserCard({
<ButtonLink
variant="Secondary"
color="Primary"
size="Small"
typography="Body/Supporting text (caption)/smBold"
size="sm"
className={styles.ctaButton}
href={secondaryButton.href}
target={secondaryButton.openInNewTab ? "_blank" : undefined}

17
packages/booking-flow/lib/components/BookingCodeFilter/index.tsx
View File

@@ -134,13 +134,16 @@ export default function BookingCodeFilter() {
})}
</h3>
</Typography>
<IconButton variant="Muted" emphasis onPress={close}>
<MaterialIcon
icon="close"
size={24}
color="CurrentColor"
/>
</IconButton>
<IconButton
variant="Muted"
emphasis
onPress={close}
iconName="close"
aria-label={intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
/>
</div>
<Typography variant="Body/Paragraph/mdRegular">
<RadioGroup

9
packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx
View File

@@ -8,14 +8,7 @@ export function AddToCalendarButton({ onPress }: { onPress: () => void }) {
const intl = useIntl()
return (
<Button
variant="Text"
size="Small"
color="Primary"
wrapping
typography="Body/Supporting text (caption)/smBold"
onPress={onPress}
>
<Button variant="Text" size="sm" color="Primary" onPress={onPress}>
<MaterialIcon size={20} icon="calendar_add_on" color="CurrentColor" />
{intl.formatMessage({

3
packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/ManageBooking.tsx
View File

@@ -39,9 +39,8 @@ export default function ManageBooking({ booking }: ManageBookingProps) {
<ButtonLink
href={myStayURL}
variant="Text"
size="Small"
size="sm"
color="Primary"
typography="Body/Supporting text (caption)/smBold"
wrapping
>
<MaterialIcon size={20} icon="edit_square" color="CurrentColor" />

2
packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/index.tsx
View File

@@ -26,7 +26,7 @@ export function Promo({ buttonText, href, text, title }: PromoProps) {
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.text}>{text}</p>
</Typography>
<Button size="Small" variant="Secondary" color="Inverted" wrapping>
<Button size="sm" variant="Secondary" color="Inverted" wrapping>
<div>{buttonText}</div>
</Button>
</article>

1
packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx
View File

@@ -137,7 +137,6 @@ export function ReceiptRoom({
<Button
className={styles.termsButton}
variant="Text"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
>
{intl.formatMessage({

2
packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx
View File

@@ -24,7 +24,7 @@ export default function Retry({ handleRefetch }: RetryProps) {
</p>
</Typography>
<Button size="Small" onPress={handleRefetch}>
<Button size="sm" onPress={handleRefetch}>
{intl.formatMessage({
id: "bookingConfirmation.linkedReservation.tryAgain",
defaultMessage: "Try again",

Some files were not shown because too many files have changed in this diff Show More