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

apps/scandic-web/components/MyPages/CopyMembershipIdButton/index.tsx

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

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

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

apps/scandic-web/components/MyPages/Profile/index.tsx

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

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

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

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

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

apps/scandic-web/components/MyPages/Surprises/Initial.tsx

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

apps/scandic-web/components/MyPages/Surprises/Navigation.tsx

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