iguazio.dashboard-react-controls 1.3.0 → 1.3.2

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.
@@ -123,5 +123,9 @@
123
123
  &-s3 {
124
124
  color: $sorbus;
125
125
  }
126
+
127
+ &-dbfs {
128
+ color: $chateauGreen;
129
+ }
126
130
  }
127
131
  }
@@ -11,10 +11,11 @@
11
11
  overflow-y: auto;
12
12
  height: 100%;
13
13
  width: 100%;
14
- padding: 1.5rem 1.5rem 1.5rem 1rem;
14
+ padding: 1.5rem 2rem 1.5rem 1rem;
15
15
  }
16
16
 
17
17
  .wizard-form__content {
18
18
  min-width: 350px;
19
+ height: 100%;
19
20
  }
20
21
  }
@@ -25,50 +25,52 @@
25
25
  margin-bottom: 10px;
26
26
  }
27
27
 
28
- &__item {
29
- justify-content: flex-start;
30
- background-color: inherit;
31
- border: 0;
32
- border-radius: 8px;
33
- font-size: 1em;
34
- padding: 8px;
35
- min-height: 52px;
36
- width: 100%;
28
+ .wizard-steps {
29
+ &__item {
30
+ justify-content: flex-start;
31
+ background-color: inherit;
32
+ border: 0;
33
+ border-radius: 8px;
34
+ font-size: 1em;
35
+ padding: 8px;
36
+ min-height: 52px;
37
+ width: 100%;
37
38
 
38
- & > * {
39
- text-align: left;
40
- white-space: normal;
41
- }
39
+ & > * {
40
+ text-align: left;
41
+ white-space: normal;
42
+ }
42
43
 
43
- &.active {
44
- background-color: $malibuTwo;
45
- color: $cornflowerBlue;
44
+ &.active {
45
+ background-color: $malibuTwo;
46
+ color: $cornflowerBlue;
46
47
 
47
- .wizard-steps__indicator {
48
- border-color: transparent;
49
- color: $white;
50
- background-color: $malibu;
48
+ .wizard-steps__indicator {
49
+ border-color: transparent;
50
+ color: $white;
51
+ background-color: $malibu;
52
+ }
51
53
  }
52
- }
53
54
 
54
- &.valid {
55
- color: $primary;
55
+ &.valid {
56
+ color: $primary;
56
57
 
57
- .wizard-steps__indicator {
58
- border-color: $malibu;
59
- color: $malibu;
60
- background-color: inherit;
58
+ .wizard-steps__indicator {
59
+ border-color: $malibu;
60
+ color: $malibu;
61
+ background-color: inherit;
62
+ }
61
63
  }
62
- }
63
-
64
- &:disabled {
65
- border: 0;
66
- color: $spunPearl;
67
64
 
68
- .wizard-steps__indicator {
69
- border-color: $spunPearl;
65
+ &:disabled {
66
+ border: 0;
70
67
  color: $spunPearl;
71
- background-color: inherit;
68
+
69
+ .wizard-steps__indicator {
70
+ border-color: $spunPearl;
71
+ color: $spunPearl;
72
+ background-color: inherit;
73
+ }
72
74
  }
73
75
  }
74
76
  }
@@ -52,40 +52,43 @@ var SelectOption = function SelectOption(_ref) {
52
52
  })
53
53
  });
54
54
  }
55
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
55
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
56
56
  "data-testid": "select-option",
57
57
  className: selectClassName,
58
58
  onClick: function onClick() {
59
59
  !item.disabled && _onClick(item.id);
60
60
  },
61
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
61
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
62
62
  className: "label-row",
63
63
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
64
64
  className: "data-ellipsis select__item-label",
65
- children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
66
- "data-testid": "select-icon",
67
- className: "select__item-icon",
68
- children: item.icon
69
- }), item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
70
- className: "state-".concat(item.status, "-job status")
71
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
65
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
66
+ className: " select__item-main-label",
67
+ children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
68
+ "data-testid": "select-icon",
69
+ className: "select__item-icon",
70
+ children: item.icon
71
+ }), item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
72
+ className: "state-".concat(item.status, "-job status")
73
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
74
+ template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
75
+ text: item.label
76
+ }),
77
+ children: item.label
78
+ })]
79
+ }), item.subLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
80
+ className: "select__item-sub-label",
72
81
  template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
73
- text: item.label
82
+ text: item.subLabel
74
83
  }),
75
- children: item.label
84
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
85
+ children: item.subLabel
86
+ })
76
87
  })]
77
88
  }), withSelectedIcon && item.id === selectedId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmark.ReactComponent, {
78
89
  className: "checkmark"
79
90
  })]
80
- }), item.subLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
81
- className: "select__item-sub-label",
82
- template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
83
- text: item.subLabel
84
- }),
85
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
86
- children: item.subLabel
87
- })
88
- })]
91
+ })
89
92
  });
90
93
  };
91
94
  SelectOption.defaultProps = {
@@ -61,14 +61,22 @@
61
61
 
62
62
  &-label {
63
63
  display: flex;
64
- flex-flow: row nowrap;
64
+ flex-flow: row wrap;
65
65
  align-items: center;
66
66
  justify-content: flex-start;
67
67
  flex: 1;
68
68
  }
69
69
 
70
+ &-main-label {
71
+ display: flex;
72
+ flex-flow: row nowrap;
73
+ align-items: center;
74
+ justify-content: flex-start;
75
+ }
76
+
70
77
  &-sub-label {
71
78
  margin-top: 5px;
79
+ font-size: 13px;
72
80
  }
73
81
 
74
82
  &-icon {
@@ -77,6 +85,7 @@
77
85
  }
78
86
 
79
87
  .checkmark {
88
+ align-self: flex-start;
80
89
  margin: 0 0 0 10px;
81
90
 
82
91
  path {
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M2 13.4118H4V18H20V13.4118H22V18.1176C22 19.1624 21.11 20 20 20H4C2.9 20 2 19.1624 2 18.1176V13.4118ZM12 16.2353L17.55 11.0965L16.13 9.76941L13 12.7059V4H11V12.7059L7.88 9.76941L6.46 11.1059L12 16.2353Z" fill="#7F7989"/>
3
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M16.614 6H14V4H20V10H18V7.44238L14.6642 10.7782L13.25 9.36395L16.614 6Z" fill="#7F7989"/>
3
+ <path d="M18.0142 16.614V14H20.0142V20H14.0142V18H16.5718L13.236 14.6642L14.6502 13.25L18.0142 16.614Z" fill="#7F7989"/>
4
+ <path d="M7.38605 18.0141H10V20.0141H4L4 14.0141H6L6 16.5717L9.33579 13.2359L10.75 14.6501L7.38605 18.0141Z" fill="#7F7989"/>
5
+ <path d="M5.98584 7.38605V10H3.98584L3.98584 4L9.98584 4V6L7.42822 6L10.764 9.33579L9.34979 10.75L5.98584 7.38605Z" fill="#7F7989"/>
6
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M4.9 20.5L3.5 19.1L6.6 16H4V14H10V20H8V17.4L4.9 20.5ZM19.1 20.5L16 17.4V20H14V14H20V16H17.4L20.5 19.1L19.1 20.5ZM4 10V8H6.6L3.5 4.9L4.9 3.5L8 6.6V4H10V10H4ZM14 10V4H16V6.6L19.1 3.5L20.5 4.9L17.4 8H20V10H14Z" fill="#7F7989"/>
3
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "iguazio.dashboard-react-controls",
3
- "version": "1.3.0",
3
+ "version": "1.3.2",
4
4
  "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",