Feat/BOOK-293 button adjustments

* feat(BOOK-293): Adjusted padding of the buttons to match Figma design
* feat(BOOK-293): Updated variants for IconButton
* feat(BOOK-113): Updated focus indicators on buttons and added default focus ring color
* feat(BOOK-293): Replaced buttons inside booking widget

Approved-by: Christel Westerberg

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx

@@ -230,7 +230,7 @@ function CodeRulesModal() {
   return (
     <Modal
       trigger={
-        <IconButton theme="Black" wrapping>
+        <IconButton variant="Muted" size="sm" emphasis>
           <MaterialIcon
             icon="info"
             color="Icon/Interactive/Placeholder"

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx

@@ -101,7 +101,7 @@ export default function RewardNight() {
           </Typography>
           <Modal
             trigger={
-              <IconButton theme="Black" wrapping>
+              <IconButton variant="Muted" emphasis size="sm">
                 <MaterialIcon
                   icon="info"
                   size={20}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css

@@ -7,9 +7,6 @@
   width: 24px;
   height: 24px;
 }
-.icon {
-  display: none;
-}
 
 .where,
 .rooms,
@@ -26,6 +23,10 @@
   display: none;
 }
 
+.submitButton {
+  min-width: 118px;
+}
+
 .label {
   color: var(--Text-Accent-Primary);
 }
@@ -58,16 +59,11 @@
     padding: var(--Space-x1) var(--Space-x15);
   }
 
-  .button {
-    align-self: flex-end;
-    justify-content: center;
-    width: 100%;
-  }
-
   .rooms {
     height: 60px;
   }
 }
+
 .voucherContainer {
   height: fit-content;
 }
@@ -125,11 +121,6 @@
     position: relative;
   }
 
-  .button {
-    justify-content: center;
-    width: 118px;
-  }
-
   .showOnMobile {
     display: none;
   }
@@ -160,12 +151,6 @@
     width: 48px;
     height: 48px;
   }
-  .buttonText {
-    display: none;
-  }
-  .icon {
-    display: flex;
-  }
 
   .voucherRow {
     display: flex;

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx

@@ -9,6 +9,7 @@ import { useIntl } from "react-intl"
 import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { dt } from "@scandic-hotels/common/dt"
 import { Button } from "@scandic-hotels/design-system/Button"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -112,11 +113,15 @@ export default function FormContent({
         </div>
       </div>
       <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <Button className={styles.button} form={formId} type="submit">
-          <span className={styles.icon}>
-            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
-          </span>
-        </Button>
+        <IconButton
+          size="xl"
+          variant="Filled"
+          form={formId}
+          type="submit"
+          isDisabled={isSearching}
+        >
+          <MaterialIcon icon="search" color="CurrentColor" size={28} />
+        </IconButton>
       </div>
       <div
         className={cx(
@@ -139,32 +144,23 @@ export default function FormContent({
           </div>
         ) : null}
         <Button
-          className={styles.button}
+          className={styles.submitButton}
           form={formId}
           variant="Primary"
           size="Medium"
           type="submit"
           isDisabled={isSearching}
+          typography="Body/Supporting text (caption)/smBold"
         >
-          <Typography
-            variant="Body/Supporting text (caption)/smBold"
-            className={styles.buttonText}
-          >
-            <span>
-              {isDirty && isBookingFlow
-                ? intl.formatMessage({
-                    id: "bookingWidget.button.update",
-                    defaultMessage: "Update",
-                  })
-                : intl.formatMessage({
-                    id: "bookingWidget.button.search",
-                    defaultMessage: "Search",
-                  })}
-            </span>
-          </Typography>
-          <span className={styles.icon}>
-            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
-          </span>
+          {isDirty && isBookingFlow
+            ? intl.formatMessage({
+                id: "bookingWidget.button.update",
+                defaultMessage: "Update",
+              })
+            : intl.formatMessage({
+                id: "bookingWidget.button.search",
+                defaultMessage: "Search",
+              })}
         </Button>
       </div>
     </div>
@@ -214,38 +210,26 @@ export function BookingWidgetFormContentSkeleton() {
         </div>
       </div>
       <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <Button className={styles.button} type="submit" isDisabled>
-          <span className={styles.icon}>
-            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
-          </span>
-        </Button>
+        <IconButton variant="Filled" size="xl" type="submit" isDisabled>
+          <MaterialIcon icon="search" color="CurrentColor" size={28} />
+        </IconButton>
       </div>
       <div className={cx(styles.voucherContainer, styles.voucherRow)}>
         <VoucherSkeleton />
       </div>
       <div className={cx(styles.buttonContainer, styles.hideOnTablet)}>
         <Button
-          className={styles.button}
+          className={styles.submitButton}
           variant="Primary"
           size="Medium"
           type="submit"
           isDisabled
+          typography="Body/Supporting text (caption)/smBold"
         >
-          <Typography
-            variant="Body/Supporting text (caption)/smBold"
-            className={styles.buttonText}
-          >
-            <span>
-              {intl.formatMessage({
-                id: "bookingWidget.button.search",
-                defaultMessage: "Search",
-              })}
-            </span>
-          </Typography>
-
-          <span className={styles.icon}>
-            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
-          </span>
+          {intl.formatMessage({
+            id: "bookingWidget.button.search",
+            defaultMessage: "Search",
+          })}
         </Button>
       </div>
     </div>