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

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
2025-12-19 12:32:52 +00:00
parent 2197ab2137
commit 3f632e6031
169 changed files with 665 additions and 944 deletions
--- a/apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx
+++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx
@@ -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" />
--- a/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx
+++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx
@@ -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",
--- a/apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton/index.tsx
@@ -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}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsButton.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsButton.tsx
@@ -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({
--- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx
@@ -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" />
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx
@@ -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",
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/ExpiringPointsSeeAllButton.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/ExpiringPointsSeeAllButton.tsx
@@ -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>
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
@@ -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",
--- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx
@@ -112,7 +112,7 @@ export default async function SASLinkAccountBanner(
              href={props.link.href}
              variant="Primary"
              color="Inverted"
-              size="Medium"
+              size="md"
            >
              {buttonText}
            </ButtonLink>
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/NextStayContent.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/NextStayContent.tsx
@@ -137,7 +137,7 @@ export default async function NextStayContent({
            <ButtonLink
              variant="Tertiary"
              color="Inverted"
-              size="Medium"
+              size="md"
              href={bookingUrl}
              className={styles.cta}
            >
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/SeeAllCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/SeeAllCard/index.tsx
@@ -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>
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/index.tsx
@@ -107,7 +107,7 @@ export default function CarouselCard({ stay }: CarouselCardProps) {
            <ButtonLink
              variant="Text"
              color="Primary"
-              size="Small"
+              size="sm"
              href={bookingUrl}
            >
              {intl.formatMessage({
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/SeeAllCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/SeeAllCard/index.tsx
@@ -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>
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
@@ -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",
--- a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx
+++ b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx
@@ -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>
--- a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
+++ b/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
@@ -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}
--- a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx
+++ b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx
@@ -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}