@pareto-engineering/design-system 4.0.0-alpha.75 → 4.0.0-alpha.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/cjs/a/AnimatedGradient/styles.scss +1 -0
  2. package/dist/cjs/a/BlurOverlay/styles.scss +2 -0
  3. package/dist/cjs/a/DatePicker/DatePicker.js +2 -2
  4. package/dist/cjs/f/common/Description/styles.scss +1 -2
  5. package/dist/cjs/f/fields/SelectInput/common/Multiple/Multiple.js +1 -3
  6. package/dist/cjs/f/fields/TextInput/styles.scss +5 -2
  7. package/dist/es/a/AnimatedGradient/styles.scss +1 -0
  8. package/dist/es/a/BlurOverlay/styles.scss +2 -0
  9. package/dist/es/a/DatePicker/DatePicker.js +2 -2
  10. package/dist/es/f/common/Description/styles.scss +1 -2
  11. package/dist/es/f/fields/SelectInput/common/Multiple/Multiple.js +1 -3
  12. package/dist/es/f/fields/TextInput/styles.scss +5 -2
  13. package/package.json +2 -2
  14. package/src/stories/a/DatePicker.stories.jsx +9 -1
  15. package/src/ui/a/AnimatedGradient/styles.scss +1 -0
  16. package/src/ui/a/BlurOverlay/styles.scss +2 -0
  17. package/src/ui/a/DatePicker/DatePicker.jsx +2 -2
  18. package/src/ui/f/common/Description/styles.scss +1 -2
  19. package/src/ui/f/fields/SelectInput/common/Multiple/Multiple.jsx +1 -3
  20. package/src/ui/f/fields/TextInput/styles.scss +5 -2
  21. package/tests/__snapshots__/Storyshots.test.js.snap +1354 -154
package/dist/cjs/a/AnimatedGradient/styles.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  --gradient-color-2: var(--soft-background-mesh);
8
8
  --gradient-color-3: var(--background-mesh);
9
9
  --gradient-color-4: var(--soft-background-mesh);
10
+ background-color: var(--background-mesh);
10
11
  height: 100%;
11
12
  left: 0;
12
13
  top: 0;
package/dist/cjs/a/BlurOverlay/styles.scss CHANGED
@@ -12,7 +12,9 @@
12
12
  &.#{bem.$modifier-active} {
13
13
  animation: blurAnimation .3s ease-in-out;
14
14
  backdrop-filter: blur(5px);
15
+ background: var(--blur-overlay-background, inherit);
15
16
  height: 100%;
17
+ z-index: var(--blur-overlay-z-index, 3);
16
18
  }
17
19
  }
18
20
 
package/dist/cjs/a/DatePicker/DatePicker.js CHANGED
@@ -66,7 +66,7 @@ const DatePickerWrapper = _ref => {
66
66
  showOutsideDays: true,
67
67
  footer: customFooter || /*#__PURE__*/React.createElement("div", {
68
68
  className: "default-footer"
69
- }, timeFrom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
69
+ }, setTimeFrom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
70
70
  className: "time-label s-1"
71
71
  }, /*#__PURE__*/React.createElement("span", {
72
72
  className: "icon"
@@ -77,7 +77,7 @@ const DatePickerWrapper = _ref => {
77
77
  type: "time",
78
78
  value: timeFrom,
79
79
  onChange: e => setTimeFrom(e.target.value)
80
- }), timeTo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
80
+ }), setTimeTo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
81
81
  className: "icon s-2"
82
82
  }, "r"), /*#__PURE__*/React.createElement("input", {
83
83
  className: "s-1",
package/dist/cjs/f/common/Description/styles.scss CHANGED
@@ -5,6 +5,5 @@
5
5
 
6
6
  .#{bem.$base}.description {
7
7
  color: var(--x);
8
+ height: 0;
8
9
  }
9
-
10
-
package/dist/cjs/f/fields/SelectInput/common/Multiple/Multiple.js CHANGED
@@ -147,9 +147,7 @@ const Multiple = _ref => {
147
147
  }
148
148
  });
149
149
  (0, _react.useEffect)(() => {
150
- if (selectedItems?.length > 0) {
151
- setValue(selectedItems);
152
- }
150
+ setValue(selectedItems);
153
151
  }, [selectedItems]);
154
152
  (0, _react.useEffect)(() => {
155
153
  if (value?.length > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {
package/dist/cjs/f/fields/TextInput/styles.scss CHANGED
@@ -26,7 +26,6 @@ $disabled-background: var(--background-inputs-30);
26
26
  margin-bottom: var(--gap);
27
27
  }
28
28
 
29
-
30
29
  &.has-symbol {
31
30
  > .input-wrapper {
32
31
  position: relative;
@@ -43,6 +42,11 @@ $disabled-background: var(--background-inputs-30);
43
42
 
44
43
  input {
45
44
  padding: $default-padding-with-symbol;
45
+
46
+ &::-webkit-outer-spin-button,
47
+ &::-webkit-inner-spin-button {
48
+ margin-right: calc($default-symbol-left / 4);
49
+ }
46
50
  }
47
51
  }
48
52
 
@@ -75,4 +79,3 @@ $disabled-background: var(--background-inputs-30);
75
79
  }
76
80
  }
77
81
  }
78
-
package/dist/es/a/AnimatedGradient/styles.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  --gradient-color-2: var(--soft-background-mesh);
8
8
  --gradient-color-3: var(--background-mesh);
9
9
  --gradient-color-4: var(--soft-background-mesh);
10
+ background-color: var(--background-mesh);
10
11
  height: 100%;
11
12
  left: 0;
12
13
  top: 0;
package/dist/es/a/BlurOverlay/styles.scss CHANGED
@@ -12,7 +12,9 @@
12
12
  &.#{bem.$modifier-active} {
13
13
  animation: blurAnimation .3s ease-in-out;
14
14
  backdrop-filter: blur(5px);
15
+ background: var(--blur-overlay-background, inherit);
15
16
  height: 100%;
17
+ z-index: var(--blur-overlay-z-index, 3);
16
18
  }
17
19
  }
18
20
 
package/dist/es/a/DatePicker/DatePicker.js CHANGED
@@ -58,7 +58,7 @@ const DatePickerWrapper = ({
58
58
  showOutsideDays: true,
59
59
  footer: customFooter || /*#__PURE__*/React.createElement("div", {
60
60
  className: "default-footer"
61
- }, timeFrom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
61
+ }, setTimeFrom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
62
62
  className: "time-label s-1"
63
63
  }, /*#__PURE__*/React.createElement("span", {
64
64
  className: "icon"
@@ -69,7 +69,7 @@ const DatePickerWrapper = ({
69
69
  type: "time",
70
70
  value: timeFrom,
71
71
  onChange: e => setTimeFrom(e.target.value)
72
- }), timeTo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
72
+ }), setTimeTo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
73
73
  className: "icon s-2"
74
74
  }, "r"), /*#__PURE__*/React.createElement("input", {
75
75
  className: "s-1",
package/dist/es/f/common/Description/styles.scss CHANGED
@@ -5,6 +5,5 @@
5
5
 
6
6
  .#{bem.$base}.description {
7
7
  color: var(--x);
8
+ height: 0;
8
9
  }
9
-
10
-
package/dist/es/f/fields/SelectInput/common/Multiple/Multiple.js CHANGED
@@ -138,9 +138,7 @@ const Multiple = ({
138
138
  }
139
139
  });
140
140
  useEffect(() => {
141
- if (selectedItems?.length > 0) {
142
- setValue(selectedItems);
143
- }
141
+ setValue(selectedItems);
144
142
  }, [selectedItems]);
145
143
  useEffect(() => {
146
144
  if (value?.length > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {
package/dist/es/f/fields/TextInput/styles.scss CHANGED
@@ -26,7 +26,6 @@ $disabled-background: var(--background-inputs-30);
26
26
  margin-bottom: var(--gap);
27
27
  }
28
28
 
29
-
30
29
  &.has-symbol {
31
30
  > .input-wrapper {
32
31
  position: relative;
@@ -43,6 +42,11 @@ $disabled-background: var(--background-inputs-30);
43
42
 
44
43
  input {
45
44
  padding: $default-padding-with-symbol;
45
+
46
+ &::-webkit-outer-spin-button,
47
+ &::-webkit-inner-spin-button {
48
+ margin-right: calc($default-symbol-left / 4);
49
+ }
46
50
  }
47
51
  }
48
52
 
@@ -75,4 +79,3 @@ $disabled-background: var(--background-inputs-30);
75
79
  }
76
80
  }
77
81
  }
78
-
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "4.0.0-alpha.75",
3
+ "version": "4.0.0-alpha.77",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -74,5 +74,5 @@
74
74
  "relay-test-utils": "^15.0.0"
75
75
  },
76
76
  "browserslist": "> 2%",
77
- "gitHead": "7a62860757dd5b5253f8881913e18c5ab8aa8687"
77
+ "gitHead": "7bd6859a8caf8862adf262f19b720e2f3774c5c0"
78
78
  }
package/src/stories/a/DatePicker.stories.jsx CHANGED
@@ -31,11 +31,18 @@ export default {
31
31
  },
32
32
  }
33
33
 
34
+ const today = new Date('2024-03-01T12:00:00Z')
35
+
34
36
  const Template = (args) => {
35
37
  const [value, setValue] = useState()
36
38
 
37
39
  return (
38
- <DatePicker selected={value} setSelection={setValue} {...args} />
40
+ <DatePicker
41
+ selected={value}
42
+ setSelection={setValue}
43
+ {...args}
44
+ today={today}
45
+ />
39
46
  )
40
47
  }
41
48
 
@@ -52,6 +59,7 @@ const TimeTemplate = ({ timeMode, ...args }) => {
52
59
  setTimeFrom={setTimeFrom}
53
60
  timeTo={timeMode === 'multiple' ? timeTo : undefined}
54
61
  setTimeTo={timeMode === 'multiple' ? setTimeTo : undefined}
62
+ today={today}
55
63
  {...args}
56
64
  />
57
65
  )
package/src/ui/a/AnimatedGradient/styles.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  --gradient-color-2: var(--soft-background-mesh);
8
8
  --gradient-color-3: var(--background-mesh);
9
9
  --gradient-color-4: var(--soft-background-mesh);
10
+ background-color: var(--background-mesh);
10
11
  height: 100%;
11
12
  left: 0;
12
13
  top: 0;
package/src/ui/a/BlurOverlay/styles.scss CHANGED
@@ -12,7 +12,9 @@
12
12
  &.#{bem.$modifier-active} {
13
13
  animation: blurAnimation .3s ease-in-out;
14
14
  backdrop-filter: blur(5px);
15
+ background: var(--blur-overlay-background, inherit);
15
16
  height: 100%;
17
+ z-index: var(--blur-overlay-z-index, 3);
16
18
  }
17
19
  }
18
20
 
package/src/ui/a/DatePicker/DatePicker.jsx CHANGED
@@ -75,7 +75,7 @@ const DatePickerWrapper = ({
75
75
  footer={customFooter || (
76
76
  <div className="default-footer">
77
77
  {
78
- timeFrom && (
78
+ setTimeFrom && (
79
79
  <>
80
80
  <p className="time-label s-1">
81
81
  <span className="icon">C</span>
@@ -85,7 +85,7 @@ const DatePickerWrapper = ({
85
85
  <div className={`time-inputs${timeTo ? ' multiple' : ''}`}>
86
86
  <input className="s-1" type="time" value={timeFrom} onChange={(e) => setTimeFrom(e.target.value)} />
87
87
  {
88
- timeTo && (
88
+ setTimeTo && (
89
89
  <>
90
90
  <span className="icon s-2">r</span>
91
91
  <input className="s-1" type="time" value={timeTo} onChange={(e) => setTimeTo(e.target.value)} />
package/src/ui/f/common/Description/styles.scss CHANGED
@@ -5,6 +5,5 @@
5
5
 
6
6
  .#{bem.$base}.description {
7
7
  color: var(--x);
8
+ height: 0;
8
9
  }
9
-
10
-
package/src/ui/f/fields/SelectInput/common/Multiple/Multiple.jsx CHANGED
@@ -145,9 +145,7 @@ const Multiple = ({
145
145
  })
146
146
 
147
147
  useEffect(() => {
148
- if (selectedItems?.length > 0) {
149
- setValue(selectedItems)
150
- }
148
+ setValue(selectedItems)
151
149
  }, [selectedItems])
152
150
 
153
151
  useEffect(() => {
package/src/ui/f/fields/TextInput/styles.scss CHANGED
@@ -26,7 +26,6 @@ $disabled-background: var(--background-inputs-30);
26
26
  margin-bottom: var(--gap);
27
27
  }
28
28
 
29
-
30
29
  &.has-symbol {
31
30
  > .input-wrapper {
32
31
  position: relative;
@@ -43,6 +42,11 @@ $disabled-background: var(--background-inputs-30);
43
42
 
44
43
  input {
45
44
  padding: $default-padding-with-symbol;
45
+
46
+ &::-webkit-outer-spin-button,
47
+ &::-webkit-inner-spin-button {
48
+ margin-right: calc($default-symbol-left / 4);
49
+ }
46
50
  }
47
51
  }
48
52
 
@@ -75,4 +79,3 @@ $disabled-background: var(--background-inputs-30);
75
79
  }
76
80
  }
77
81
  }
78
-