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

* coming soon foundation pages * fix imports * fix tests * fix css and js tests error * fix css and js tests error * fix css and js tests error * fix css and js tests error * fix css and js tests error * fix css and js tests error * fix css and js tests error
mondaycom · Dec 21, 2021 · 6fa8ee9 · 6fa8ee9
1 parent 1164272
commit 6fa8ee9
Show file tree

Hide file tree

Showing 36 changed files with 441 additions and 509 deletions.
diff --git a/...ponents/Accordion/Accordion/__tests__/__snapshots__/accordion-snapshot-tests.jest.js.snap b/...ponents/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"

diff --git a/src/components/Avatar/__stories__/avatar.stories.scss b/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;
-    }
-  }
 }
diff --git a/src/components/Banner/Banner.scss b/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 {

diff --git a/src/components/Button/Button.scss b/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,

diff --git a/src/components/Checkbox/Checkbox.scss b/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);
-          }
-        }
-      }
-    }
   }
 }
 

diff --git a/src/components/Chips/Chips.scss b/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 {

diff --git a/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.scss b/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;
   }

diff --git a/src/components/Dropdown/components/menu/menu.scss b/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% {

diff --git a/src/components/ExpandCollapse/ExpandCollapse.scss b/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% {

diff --git a/src/components/Icon/CustomSvgIcon.jsx b/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") {

diff --git a/src/components/Icon/CustomSvgIcon.scss b/src/components/Icon/CustomSvgIcon.scss
diff --git a/src/components/IconButton/IconButton.jsx b/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) => {

diff --git a/src/components/IconButton/IconButton.scss b/src/components/IconButton/IconButton.scss