Merged in fix/SW-3095-states-booking-widget (pull request #2534)

fix(SW-3095): update design for hover, focus etc for the booking widget

* fix(SW-3095): update design for hover, focus etc for the booking widget


Approved-by: Anton Gunnarsson
Approved-by: Hrishikesh Vaipurkar

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css

@@ -16,7 +16,7 @@
   align-items: center;
   gap: var(--Spacing-x-half);
   position: relative;
-  color: var(--Text-Accent-Primary);
+  color: var(--Text-Secondary);
 }
 
 .errorContainer {
@@ -107,13 +107,17 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .container:hover,
-  .container:focus-within,
-  .container:has([data-focused="true"], [data-pressed="true"]) {
-    background-color: var(--Base-Surface-Primary-light-Hover-alt);
+  .container:hover {
+    background-color: var(--Surface-Primary-Hover);
     border-radius: var(--Corner-radius-md);
   }
-
+  .container:focus-within,
+  .container:has([data-focused="true"]),
+  .container:has([data-pressed="true"]) {
+    background-color: var(--Surface-Primary-Hover);
+    border-radius: var(--Corner-radius-md);
+    border: 1px solid var(--Border-Interactive-Focus);
+  }
   .bookingCodeRememberVisible {
     padding: var(--Spacing-x2);
     position: absolute;

apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/input.module.css

@@ -9,15 +9,15 @@
 
   &:placeholder-shown::-webkit-search-cancel-button {
     display: none;
-    background-image: url("/_static/icons/close.svg");
+    background-image: url("/_static/icons/cancel.svg");
   }
 
   &:not(:placeholder-shown)::-webkit-search-cancel-button {
     -webkit-appearance: none;
     appearance: none;
-    background-image: url("/_static/icons/close.svg");
-    height: 20px;
-    width: 20px;
+    background-image: url("/_static/icons/cancel.svg");
+    height: 24px;
+    width: 24px;
   }
 }
 

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/button.module.css

@@ -15,5 +15,5 @@
 
 .active,
 .button:focus {
-  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+  background-color: var(--Surface-Primary-Hover);
 }

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/listItem.module.css

@@ -9,5 +9,5 @@
 }
 
 .active {
-  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+  background-color: var(--Surface-Primary-Hover);
 }

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -123,9 +123,7 @@ export function Search({
                 htmlFor: SEARCH_TERM_NAME,
                 id: searchLabelId,
               })}
-              className={labelVariants({
-                color: withSearchButton && isOpen ? "default" : "red",
-              })}
+              className={styles.label}
             >
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <span>
@@ -280,15 +278,3 @@ const clearButtonVariants = cva(styles.clearButton, {
     },
   },
 })
-
-const labelVariants = cva(styles.label, {
-  variants: {
-    color: {
-      default: "",
-      red: styles.red,
-    },
-  },
-  defaultVariants: {
-    color: "default",
-  },
-})

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css

@@ -2,7 +2,7 @@
   border-color: transparent;
   border-style: solid;
   border-width: 1px;
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-radius-md);
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   position: relative;
   height: 60px;
@@ -17,27 +17,21 @@
 
   &:hover,
   &:has(input:active, input:focus, input:focus-within) {
-    background-color: var(--Background-Primary);
+    background-color: var(--Surface-Primary-Hover);
   }
 
   &:has(input:active, input:focus, input:focus-within) {
-    border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
+    border-color: 1px solid var(--Border-Interactive-Focus);
   }
 }
 
 .label {
   flex: 1;
-  &:has(
-      ~ .inputContainer input:active,
-      ~ .inputContainer input:focus,
-      ~ .inputContainer input:focus-within
-    )
-    p {
-    color: var(--UI-Text-Active);
-  }
-
-  &.red {
-    color: var(--Scandic-Brand-Scandic-Red);
+  color: var(--Text-Accent-Primary);
+  &:focus-within,
+  &:focus,
+  &:active {
+    color: var(--Text-Interactive-Focus);
   }
 }
 

apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -29,6 +29,10 @@
 .label {
   color: var(--Text-Accent-Primary);
 }
+.when:has([data-isopen="true"]) .label,
+.rooms:has([data-focused="true"], [data-pressed="true"]) .label {
+  color: var(--Text-Interactive-Focus);
+}
 
 @media screen and (max-width: 767px) {
   .voucherContainer {
@@ -102,14 +106,17 @@
   .rooms,
   .when {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
-    border-radius: var(--Corner-radius-sm);
+    border-radius: var(--Corner-radius-md);
   }
 
   .when:hover,
-  .rooms:hover,
+  .rooms:hover {
+    background-color: var(--Surface-Primary-Hover);
+  }
   .when:has([data-isopen="true"]),
   .rooms:has([data-focused="true"], [data-pressed="true"]) {
-    background-color: var(--Base-Surface-Primary-light-Hover-alt);
+    background-color: var(--Surface-Primary-Hover);
+    border: 1px solid var(--Border-Interactive-Focus);
   }
 
   .where {

apps/scandic-web/public/_static/icons/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#57514E"><path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>