Skip to content

Commit 6fa8ee9

Browse files
author
Hadas Farhi
authored
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
1 parent 1164272 commit 6fa8ee9

File tree

36 files changed

+441
-509
lines changed

36 files changed

+441
-509
lines changed

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

-121
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Accordion renders correctly with accordion items 1`] = `
4-
<div
5-
className="accordion"
6-
>
7-
<div
8-
className="accordion-item"
9-
>
10-
<div
11-
className="expand-collapse--wrapper"
12-
id=""
13-
>
14-
<div
15-
className="expand-collapse"
16-
>
17-
<button
18-
aria-controls="-controls"
19-
aria-expanded={false}
20-
className="expand-collapse__header expand-collapse__section"
21-
onClickCapture={[Function]}
22-
type="button"
23-
>
24-
<svg
25-
aria-hidden={true}
26-
className="icon_component animate-icon-close"
27-
fill="currentColor"
28-
height="24"
29-
onClick={[Function]}
30-
tabIndex="-1"
31-
viewBox="0 0 20 20"
32-
width="24"
33-
>
34-
<path
35-
clipRule="evenodd"
36-
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"
37-
fill="currentColor"
38-
fillRule="evenodd"
39-
/>
40-
</svg>
41-
</button>
42-
</div>
43-
</div>
44-
</div>
45-
<div
46-
className="accordion-item"
47-
>
48-
<div
49-
className="expand-collapse--wrapper"
50-
id=""
51-
>
52-
<div
53-
className="expand-collapse"
54-
>
55-
<button
56-
aria-controls="-controls"
57-
aria-expanded={false}
58-
className="expand-collapse__header expand-collapse__section"
59-
onClickCapture={[Function]}
60-
type="button"
61-
>
62-
<svg
63-
aria-hidden={true}
64-
className="icon_component animate-icon-close"
65-
fill="currentColor"
66-
height="24"
67-
onClick={[Function]}
68-
tabIndex="-1"
69-
viewBox="0 0 20 20"
70-
width="24"
71-
>
72-
<path
73-
clipRule="evenodd"
74-
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"
75-
fill="currentColor"
76-
fillRule="evenodd"
77-
/>
78-
</svg>
79-
</button>
80-
</div>
81-
</div>
82-
</div>
83-
<div
84-
className="accordion-item"
85-
>
86-
<div
87-
className="expand-collapse--wrapper"
88-
id=""
89-
>
90-
<div
91-
className="expand-collapse"
92-
>
93-
<button
94-
aria-controls="-controls"
95-
aria-expanded={false}
96-
className="expand-collapse__header expand-collapse__section"
97-
onClickCapture={[Function]}
98-
type="button"
99-
>
100-
<svg
101-
aria-hidden={true}
102-
className="icon_component animate-icon-close"
103-
fill="currentColor"
104-
height="24"
105-
onClick={[Function]}
106-
tabIndex="-1"
107-
viewBox="0 0 20 20"
108-
width="24"
109-
>
110-
<path
111-
clipRule="evenodd"
112-
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"
113-
fill="currentColor"
114-
fillRule="evenodd"
115-
/>
116-
</svg>
117-
</button>
118-
</div>
119-
</div>
120-
</div>
121-
</div>
122-
`;
123-
1243
exports[`Accordion renders correctly with allowMultiple 1`] = `
1254
<div
1265
className="accordion"

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
.monday-style-story-avatar {
2+
&_multiplue {
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
padding: 10px 20px 10px 20px;
7+
.monday-style-avatar {
8+
margin: -8px;
9+
}
10+
}
11+
212
&_multiplue-reverse {
313
display: flex;
414
align-items: flex-start;
@@ -13,14 +23,4 @@
1323
}
1424
}
1525
}
16-
17-
&_multiplue {
18-
display: flex;
19-
align-items: center;
20-
justify-content: center;
21-
padding: 10px 20px 10px 20px;
22-
.monday-style-avatar {
23-
margin: -8px;
24-
}
25-
}
2626
}

‎src/components/Banner/Banner.scss

-6
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,6 @@
9595
border-radius: $border-radius-medium;
9696
object-fit: contain;
9797
}
98-
99-
.banner--close {
100-
align-self: start;
101-
grid-area: close;
102-
border-radius: $border-radius-small;
103-
}
10498
}
10599

106100
&.rtl {

‎src/components/Button/Button.scss

+1-3
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178
@include theme-prop(border-color, ui-border-color);
179179
@include theme-prop(color, primary-text-color);
180180
background-color: transparent;
181+
181182
&.monday-style-button {
182183
&--size {
183184
&-small {
@@ -192,9 +193,6 @@
192193
line-height: 22px;
193194
}
194195
}
195-
}
196-
197-
&.monday-style-button {
198196
&--color {
199197
&-primary {
200198
&-active,

‎src/components/Checkbox/Checkbox.scss

+29-28
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@ $checkbox-size: 16px;
2121
width: fit-content;
2222
height: min-content;
2323

24+
&__label {
25+
@include font-input();
26+
cursor: pointer;
27+
user-select: none;
28+
margin-inline-start: $spacing-small;
29+
@include theme-prop(color, primary-text-color);
30+
}
31+
2432
&__checkbox {
2533
cursor: pointer;
2634
visibility: visible;
@@ -64,14 +72,6 @@ $checkbox-size: 16px;
6472
}
6573
}
6674

67-
&__label {
68-
@include font-input();
69-
cursor: pointer;
70-
user-select: none;
71-
margin-inline-start: $spacing-small;
72-
@include theme-prop(color, primary-text-color);
73-
}
74-
7575
// Since it is not possible to change the design of the checkbox according to the requirements using css,
7676
// we hide the checkbox and draw a new one instead.
7777
// In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected
@@ -81,13 +81,13 @@ $checkbox-size: 16px;
8181

8282
// For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place.
8383
&:focus {
84-
& + .monday-style-checkbox__checkbox {
85-
@include hover-unselected;
86-
}
87-
8884
&:checked + .monday-style-checkbox__checkbox {
8985
@include hover-selected;
9086
}
87+
88+
& + .monday-style-checkbox__checkbox {
89+
@include hover-unselected;
90+
}
9191
}
9292
&:focus-visible {
9393
& + .monday-style-checkbox__checkbox {
@@ -99,11 +99,21 @@ $checkbox-size: 16px;
9999
}
100100
}
101101

102-
&:checked, &:indeterminate {
103-
&:focus + .monday-style-checkbox__checkbox:after {
104-
@include theme-prop(background-color, primary-hover-color);
102+
&:disabled {
103+
& + .monday-style-checkbox {
104+
&__checkbox,
105+
&__checkbox:hover {
106+
@include theme-prop(background-color, disabled-background-color);
107+
@include theme-prop(border-color, ui-border-color);
108+
109+
.monday-style-checkbox__icon {
110+
@include theme-prop(color, disabled-text-color);
111+
}
112+
}
105113
}
114+
}
106115

116+
&:checked, &:indeterminate {
107117
& + .monday-style-checkbox {
108118
&__checkbox {
109119
animation: checkbox-grow-animation 50ms;
@@ -137,25 +147,16 @@ $checkbox-size: 16px;
137147
}
138148
}
139149

150+
&:focus + .monday-style-checkbox__checkbox:after {
151+
@include theme-prop(background-color, primary-hover-color);
152+
}
153+
140154
&:disabled + .monday-style-checkbox {
141155
&__checkbox:after {
142156
@include theme-prop(background-color, disabled-background-color);
143157
}
144158
}
145159
}
146-
&:disabled {
147-
& + .monday-style-checkbox {
148-
&__checkbox,
149-
&__checkbox:hover {
150-
@include theme-prop(background-color, disabled-background-color);
151-
@include theme-prop(border-color, ui-border-color);
152-
153-
.monday-style-checkbox__icon {
154-
@include theme-prop(color, disabled-text-color);
155-
}
156-
}
157-
}
158-
}
159160
}
160161
}
161162

‎src/components/Chips/Chips.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ $icon-margin: 4px;
1616
animation: chips-enter 100ms;
1717
animation-timing-function: cubic-bezier(0, 0, 0.35, 1);
1818

19+
.label {
20+
@include font-general-text();
21+
@include ellipsis();
22+
}
23+
1924
&.no-animation {
2025
animation: none;
2126
}
@@ -52,11 +57,6 @@ $icon-margin: 4px;
5257
@include theme-prop(color, disabled-text-color);
5358
}
5459
}
55-
56-
.label {
57-
@include font-general-text();
58-
@include ellipsis();
59-
}
6060
}
6161

6262
@keyframes chips-enter {

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

+8-7
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@
33
display: flex;
44
border-radius: 4px;
55

6-
&.selected-color {
7-
.color-item {
8-
border: 2px solid var(--primary-color);
9-
}
10-
}
116
.color-item {
127
display: flex;
138
justify-content: center;
@@ -24,18 +19,24 @@
2419
width: 24px;
2520
height: 24px;
2621
}
27-
22+
2823
&.color-item-size-medium {
2924
width: 32px;
3025
height: 32px;
3126
}
32-
27+
3328
&.color-item-size-large {
3429
width: 40px;
3530
height: 40px;
3631
}
3732
}
3833

34+
&.selected-color {
35+
.color-item {
36+
border: 2px solid var(--primary-color);
37+
}
38+
}
39+
3940
.color-item-text-mode:hover {
4041
background-color: var(--primary-background-hover-color) !important;
4142
}

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

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
0% {
1010
opacity: 0;
1111
z-index: -10000;
12-
transform: translateY(-75px);
1312
transform: translateY(var(--dropdown-menu-fadinY, -75px));
1413
}
1514
100% {

‎src/components/ExpandCollapse/ExpandCollapse.scss

-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@
6969
@keyframes expandContentAnimation {
7070
0% {
7171
opacity: 0;
72-
transform: translateY(-75px);
7372
transform: translateY(var(--dropdown-menu-fadinY, -75px));
7473
}
7574
100% {

‎src/components/Icon/CustomSvgIcon.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React, { useCallback } from "react";
33
import PropTypes from "prop-types";
44
import cx from "classnames";
55
import SVG from "react-inlinesvg";
6-
import "./CustomSvgIcon.scss";
76
import useIconScreenReaderAccessProps from "../../hooks/useIconScreenReaderAccessProps";
87

98
function modifySvgCode(svg, color = "currentColor") {

‎src/components/Icon/CustomSvgIcon.scss

Whitespace-only changes.

‎src/components/IconButton/IconButton.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import Icon from "../Icon/Icon";
99
import AddSmall from "../Icon/Icons/components/AddSmall";
1010
import { getWidthHeight } from "./services/IconButton-helpers";
1111
import { SIZES } from "../../constants/sizes";
12-
import "./IconButton.scss";
1312

1413
const IconButton = forwardRef(
1514
({ className, id, icon, size, tooltipContent, ariaLabel, kind, active, disabled, disabledReason, onClick }, ref) => {

‎src/components/IconButton/IconButton.scss

Whitespace-only changes.

0 commit comments

Comments
 (0)