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

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -76,7 +76,7 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
       <LoginButton
         color="Primary"
         variant="Tertiary"
-        size="Small"
+        size="sm"
         lang={lang}
         className={styles.login}
         loginPosition="enter-details"

packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/index.tsx

@@ -23,9 +23,8 @@ export function GuaranteeInfo({ buttonClassName }: GuaranteeInfoProps) {
       <Button
         variant="Text"
         color="Primary"
-        size="Small"
+        size="sm"
         type="button"
-        typography="Body/Supporting text (caption)/smBold"
         wrapping={false}
         className={buttonClassName}
         onPress={() => setIsOpen(true)}
@@ -59,8 +58,7 @@ export function GuaranteeInfo({ buttonClassName }: GuaranteeInfoProps) {
             className={styles.closeButton}
             variant="Secondary"
             color="Primary"
-            size="Medium"
-            typography="Body/Paragraph/mdBold"
+            size="md"
             onPress={() => setIsOpen(false)}
           >
             {intl.formatMessage({

packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx

@@ -36,7 +36,6 @@ import useLang from "../../../hooks/useLang"
 import { useEnterDetailsStore } from "../../../stores/enter-details"
 import ConfirmBooking from "../Confirm"
 import PriceChangeDialog from "../PriceChangeDialog"
-import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
 import BookingAlert from "./BookingAlert"
 import { GuaranteeInfo } from "./GuaranteeInfo"
 import {
@@ -47,6 +46,7 @@ import {
   mustGuaranteeBooking,
   writePaymentInfoToSessionStorage,
 } from "./helpers"
+import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
 import { type PaymentFormData, paymentSchema } from "./schema"
 import { getPaymentHeadingConfig } from "./utils"
 
@@ -497,8 +497,7 @@ export default function PaymentClient({
             type="submit"
             isDisabled={isSubmitting}
             isPending={isSubmitting}
-            size="Medium"
-            typography="Body/Paragraph/mdBold"
+            size="md"
           >
             {intl.formatMessage({
               id: "enterDetails.completeBooking",

packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx

@@ -82,11 +82,10 @@ export default function SelectedRoom() {
           </Subtitle>
           <Button
             variant="Text"
-            size="Small"
+            size="sm"
             onPress={changeRoom}
             isDisabled={isPending}
             wrapping={false}
-            typography="Body/Supporting text (caption)/smBold"
           >
             <MaterialIcon icon="edit_square" size={20} color="CurrentColor" />
             {intl.formatMessage({

packages/booking-flow/lib/components/EnterDetails/Summary/Mobile/BottomSheet/index.tsx

@@ -131,9 +131,8 @@ export default function SummaryBottomSheet({
         <Button
           variant="Primary"
           color="Primary"
-          size="Large"
+          size="lg"
           type="submit"
-          typography="Body/Paragraph/mdBold"
           isDisabled={isSubmitting}
           isPending={isSubmitting}
           form={formId}

packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/index.tsx

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