WIP: Coming soon & fix tests errors (css and js)

src/components/Accordion/Accordion/__tests__/__snapshots__/accordion-snapshot-tests.jest.js.snap

@@ -1,126 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Accordion renders correctly with accordion items 1`] = `
-<div
-  className="accordion"
->
-  <div
-    className="accordion-item"
-  >
-    <div
-      className="expand-collapse--wrapper"
-      id=""
-    >
-      <div
-        className="expand-collapse"
-      >
-        <button
-          aria-controls="-controls"
-          aria-expanded={false}
-          className="expand-collapse__header expand-collapse__section"
-          onClickCapture={[Function]}
-          type="button"
-        >
-          <svg
-            aria-hidden={true}
-            className="icon_component animate-icon-close"
-            fill="currentColor"
-            height="24"
-            onClick={[Function]}
-            tabIndex="-1"
-            viewBox="0 0 20 20"
-            width="24"
-          >
-            <path
-              clipRule="evenodd"
-              d="M10.5303 12.5303L10 12L9.46967 12.5303C9.76256 12.8232 10.2374 12.8232 10.5303 12.5303ZM10 10.9393L6.53033 7.46967C6.23744 7.17678 5.76256 7.17678 5.46967 7.46967C5.17678 7.76256 5.17678 8.23744 5.46967 8.53033L9.46967 12.5303L10 12L10.5303 12.5303L14.5303 8.53033C14.8232 8.23744 14.8232 7.76256 14.5303 7.46967C14.2374 7.17678 13.7626 7.17678 13.4697 7.46967L10 10.9393Z"
-              fill="currentColor"
-              fillRule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    className="accordion-item"
-  >
-    <div
-      className="expand-collapse--wrapper"
-      id=""
-    >
-      <div
-        className="expand-collapse"
-      >
-        <button
-          aria-controls="-controls"
-          aria-expanded={false}
-          className="expand-collapse__header expand-collapse__section"
-          onClickCapture={[Function]}
-          type="button"
-        >
-          <svg
-            aria-hidden={true}
-            className="icon_component animate-icon-close"
-            fill="currentColor"
-            height="24"
-            onClick={[Function]}
-            tabIndex="-1"
-            viewBox="0 0 20 20"
-            width="24"
-          >
-            <path
-              clipRule="evenodd"
-              d="M10.5303 12.5303L10 12L9.46967 12.5303C9.76256 12.8232 10.2374 12.8232 10.5303 12.5303ZM10 10.9393L6.53033 7.46967C6.23744 7.17678 5.76256 7.17678 5.46967 7.46967C5.17678 7.76256 5.17678 8.23744 5.46967 8.53033L9.46967 12.5303L10 12L10.5303 12.5303L14.5303 8.53033C14.8232 8.23744 14.8232 7.76256 14.5303 7.46967C14.2374 7.17678 13.7626 7.17678 13.4697 7.46967L10 10.9393Z"
-              fill="currentColor"
-              fillRule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    className="accordion-item"
-  >
-    <div
-      className="expand-collapse--wrapper"
-      id=""
-    >
-      <div
-        className="expand-collapse"
-      >
-        <button
-          aria-controls="-controls"
-          aria-expanded={false}
-          className="expand-collapse__header expand-collapse__section"
-          onClickCapture={[Function]}
-          type="button"
-        >
-          <svg
-            aria-hidden={true}
-            className="icon_component animate-icon-close"
-            fill="currentColor"
-            height="24"
-            onClick={[Function]}
-            tabIndex="-1"
-            viewBox="0 0 20 20"
-            width="24"
-          >
-            <path
-              clipRule="evenodd"
-              d="M10.5303 12.5303L10 12L9.46967 12.5303C9.76256 12.8232 10.2374 12.8232 10.5303 12.5303ZM10 10.9393L6.53033 7.46967C6.23744 7.17678 5.76256 7.17678 5.46967 7.46967C5.17678 7.76256 5.17678 8.23744 5.46967 8.53033L9.46967 12.5303L10 12L10.5303 12.5303L14.5303 8.53033C14.8232 8.23744 14.8232 7.76256 14.5303 7.46967C14.2374 7.17678 13.7626 7.17678 13.4697 7.46967L10 10.9393Z"
-              fill="currentColor"
-              fillRule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Accordion renders correctly with allowMultiple 1`] = `
 <div
   className="accordion"

src/components/Avatar/__stories__/avatar.stories.scss

@@ -1,4 +1,14 @@
 .monday-style-story-avatar {
+  &_multiplue {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 20px 10px 20px;
+    .monday-style-avatar {
+      margin: -8px;
+    }
+  }
+
   &_multiplue-reverse {
     display: flex;
     align-items: flex-start;
@@ -13,14 +23,4 @@
       }
     }
   }
-
-  &_multiplue {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 20px 10px 20px;
-    .monday-style-avatar {
-      margin: -8px;
-    }
-  }
 }

src/components/Banner/Banner.scss

@@ -95,12 +95,6 @@
       border-radius: $border-radius-medium;
       object-fit: contain;
     }
-
-    .banner--close {
-      align-self: start;
-      grid-area: close;
-      border-radius: $border-radius-small;
-    }
   }
 
   &.rtl {

src/components/Button/Button.scss

@@ -178,6 +178,7 @@
       @include theme-prop(border-color, ui-border-color);
       @include theme-prop(color, primary-text-color);
       background-color: transparent;
+
       &.monday-style-button {
         &--size {
           &-small {
@@ -192,9 +193,6 @@
             line-height: 22px;
           }
         }
-      }
-
-      &.monday-style-button {
         &--color {
           &-primary {
             &-active,

src/components/Checkbox/Checkbox.scss

@@ -21,6 +21,14 @@ $checkbox-size: 16px;
   width: fit-content;
   height: min-content;
 
+  &__label {
+    @include font-input();
+    cursor: pointer;
+    user-select: none;
+    margin-inline-start: $spacing-small;
+    @include theme-prop(color, primary-text-color);
+  }
+
   &__checkbox {
     cursor: pointer;
     visibility: visible;
@@ -64,14 +72,6 @@ $checkbox-size: 16px;
     }
   }
 
-  &__label {
-    @include font-input();
-    cursor: pointer;
-    user-select: none;
-    margin-inline-start: $spacing-small;
-    @include theme-prop(color, primary-text-color);
-  }
-
   // Since it is not possible to change the design of the checkbox according to the requirements using css,
   // we hide the checkbox and draw a new one instead.
   // In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected
@@ -81,13 +81,13 @@ $checkbox-size: 16px;
 
     // For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place.
     &:focus {
-      & + .monday-style-checkbox__checkbox {
-        @include hover-unselected;
-      }
-
       &:checked + .monday-style-checkbox__checkbox {
         @include hover-selected;
       }
+
+      & + .monday-style-checkbox__checkbox {
+        @include hover-unselected;
+      }
     }
     &:focus-visible {
       & + .monday-style-checkbox__checkbox {
@@ -99,11 +99,21 @@ $checkbox-size: 16px;
       }
     }
 
-    &:checked, &:indeterminate {
-      &:focus + .monday-style-checkbox__checkbox:after {
-        @include theme-prop(background-color, primary-hover-color);
+    &:disabled {
+      & + .monday-style-checkbox {
+        &__checkbox,
+        &__checkbox:hover {
+          @include theme-prop(background-color, disabled-background-color);
+          @include theme-prop(border-color, ui-border-color);
+
+          .monday-style-checkbox__icon {
+            @include theme-prop(color, disabled-text-color);
+          }
+        }
       }
+    }
 
+    &:checked, &:indeterminate {
       & + .monday-style-checkbox {
         &__checkbox {
           animation: checkbox-grow-animation 50ms;
@@ -137,25 +147,16 @@ $checkbox-size: 16px;
         }
       }
 
+      &:focus + .monday-style-checkbox__checkbox:after {
+        @include theme-prop(background-color, primary-hover-color);
+      }
+
       &:disabled + .monday-style-checkbox {
         &__checkbox:after {
           @include theme-prop(background-color, disabled-background-color);
         }
       }
     }
-    &:disabled {
-      & + .monday-style-checkbox {
-        &__checkbox,
-        &__checkbox:hover {
-          @include theme-prop(background-color, disabled-background-color);
-          @include theme-prop(border-color, ui-border-color);
-
-          .monday-style-checkbox__icon {
-            @include theme-prop(color, disabled-text-color);
-          }
-        }
-      }
-    }
   }
 }
 

src/components/Chips/Chips.scss

@@ -16,6 +16,11 @@ $icon-margin: 4px;
   animation: chips-enter 100ms;
   animation-timing-function: cubic-bezier(0, 0, 0.35, 1);
 
+  .label {
+    @include font-general-text();
+    @include ellipsis();
+  }
+
   &.no-animation {
     animation: none;
   }
@@ -52,11 +57,6 @@ $icon-margin: 4px;
       @include theme-prop(color, disabled-text-color);
     }
   }
-
-  .label {
-    @include font-general-text();
-    @include ellipsis();
-  }
 }
 
 @keyframes chips-enter {

src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.scss

@@ -3,11 +3,6 @@
   display: flex;
   border-radius: 4px;
 
-  &.selected-color {
-    .color-item {
-      border: 2px solid var(--primary-color);
-    }
-  }
   .color-item {
     display: flex;
     justify-content: center;
@@ -24,18 +19,24 @@
       width: 24px;
       height: 24px;
     }
-  
+
     &.color-item-size-medium {
       width: 32px;
       height: 32px;
     }
-  
+
     &.color-item-size-large {
       width: 40px;
       height: 40px;
     }
   }
 
+  &.selected-color {
+    .color-item {
+      border: 2px solid var(--primary-color);
+    }
+  }
+
   .color-item-text-mode:hover {
     background-color: var(--primary-background-hover-color) !important;
   }

src/components/Dropdown/components/menu/menu.scss

@@ -9,7 +9,6 @@
   0% {
     opacity: 0;
     z-index: -10000;
-    transform: translateY(-75px);
     transform: translateY(var(--dropdown-menu-fadinY, -75px));
   }
   100% {

src/components/ExpandCollapse/ExpandCollapse.scss

@@ -69,7 +69,6 @@
   @keyframes expandContentAnimation {
     0% {
       opacity: 0;
-      transform: translateY(-75px);
       transform: translateY(var(--dropdown-menu-fadinY, -75px));
     }
     100% {

src/components/Icon/CustomSvgIcon.jsx

@@ -3,7 +3,6 @@ import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import SVG from "react-inlinesvg";
-import "./CustomSvgIcon.scss";
 import useIconScreenReaderAccessProps from "../../hooks/useIconScreenReaderAccessProps";
 
 function modifySvgCode(svg, color = "currentColor") {

src/components/IconButton/IconButton.jsx

@@ -9,7 +9,6 @@ import Icon from "../Icon/Icon";
 import AddSmall from "../Icon/Icons/components/AddSmall";
 import { getWidthHeight } from "./services/IconButton-helpers";
 import { SIZES } from "../../constants/sizes";
-import "./IconButton.scss";
 
 const IconButton = forwardRef(
   ({ className, id, icon, size, tooltipContent, ariaLabel, kind, active, disabled, disabledReason, onClick }, ref) => {