ublo-lib 1.31.22 → 1.31.24

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 (8) hide show
  1. package/es/common/components/msem-preset-editor/components/widget-list-item.module.css +14 -14
  2. package/es/common/components/msem-preset-editor/editors/elloha.module.css +1 -1
  3. package/es/common/components/msem-preset-editor/msem-preset-editor.js +14 -3
  4. package/es/common/components/msem-preset-editor/msem-preset-editor.module.css +7 -9
  5. package/es/common/components/msem-preset-linker/components/actions.module.css +11 -12
  6. package/es/common/components/msem-preset-linker/components/overlays.module.css +14 -14
  7. package/es/common/components/msem-preset-linker/msem-preset-linker.module.css +1 -1
  8. package/package.json +1 -1
package/es/common/components/msem-preset-editor/components/widget-list-item.module.css CHANGED
@@ -11,14 +11,14 @@
11
11
  font-weight: 400;
12
12
  text-align: left;
13
13
  padding-right: 100px;
14
- background-color: var(--ublo-grey-100, #f5f5f5);
15
- border-radius: var(--ublo-radius-200, 10px);
14
+ background-color: var(--ds-grey-100, #f8f8f8);
15
+ border-radius: var(--ds-radius-200, 8px);
16
16
  }
17
17
 
18
18
  .selected .button {
19
- color: var(--ublo-primary-color, #073ff8);
19
+ color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
20
20
  font-weight: 700;
21
- background-color: var(--ublo-blue-100, #e8f0fc);
21
+ background-color: var(--ds-grey-300, #d7d7d7);
22
22
  }
23
23
 
24
24
  .opened .button {
@@ -33,7 +33,7 @@
33
33
  align-items: center;
34
34
  justify-content: center;
35
35
  background-color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
36
- border-radius: var(--ublo-radius-200, 10px);
36
+ border-radius: var(--ds-radius-200, 8px);
37
37
  }
38
38
 
39
39
  .logo img {
@@ -43,11 +43,11 @@
43
43
  }
44
44
 
45
45
  .name {
46
- color: var(--ublo-grey-600, #1b1b1b);
46
+ color: var(--ds-grey-600, #484848);
47
47
  }
48
48
 
49
49
  .selected .name {
50
- color: var(--ublo-primary-color, #073ff8);
50
+ color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
51
51
  }
52
52
 
53
53
  .actions {
@@ -59,7 +59,7 @@
59
59
  }
60
60
 
61
61
  .action {
62
- border-radius: var(--ublo-radius-100, 3px);
62
+ border-radius: var(--ds-radius-100, 4px);
63
63
  }
64
64
 
65
65
  .list {
@@ -69,14 +69,14 @@
69
69
  flex-direction: column;
70
70
  margin-left: auto;
71
71
  padding: 6px;
72
- border-radius: 0 0 var(--ublo-radius-200, 10px) var(--ublo-radius-200, 10px);
72
+ border-radius: 0 0 var(--ds-radius-200, 8px) var(--ds-radius-200, 8px);
73
73
  overflow: auto;
74
74
  overscroll-behavior: contain;
75
75
  background: linear-gradient(
76
- var(--ublo-grey-100, #f5f5f5) 30%,
76
+ var(--ds-grey-100, #f8f8f8) 30%,
77
77
  hsla(0, 0%, 100%, 0)
78
78
  ),
79
- linear-gradient(hsla(0, 0%, 100%, 0), var(--ublo-grey-100, #f5f5f5) 70%) 0
79
+ linear-gradient(hsla(0, 0%, 100%, 0), var(--ds-grey-100, #f8f8f8) 70%) 0
80
80
  100%,
81
81
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), transparent),
82
82
  radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), transparent)
@@ -84,7 +84,7 @@
84
84
  background-repeat: no-repeat;
85
85
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
86
86
  background-attachment: local, local, scroll, scroll;
87
- background-color: var(--ublo-grey-100, #f5f5f5);
87
+ background-color: var(--ds-grey-100, #f8f8f8);
88
88
  }
89
89
 
90
90
  .sub {
@@ -100,9 +100,9 @@
100
100
  }
101
101
 
102
102
  .subButtonSelected {
103
- color: var(--ublo-primary-color, #073ff8);
103
+ color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
104
104
  font-weight: 700;
105
- background-color: var(--ublo-blue-100, #e8f0fc);
105
+ background-color: var(--ds-grey-300, #d7d7d7);
106
106
  }
107
107
 
108
108
  .subActions {
package/es/common/components/msem-preset-editor/editors/elloha.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  text-align: center;
5
5
  color: var(--ds-red-500, #990700);
6
6
  background-color: var(--ds-red-200, #fde7e7);
7
- border-radius: var(--ublo-radius-200, 10px);
7
+ border-radius: var(--ds-radius-200, 8px);
8
8
  }
9
9
 
10
10
  .helper {
package/es/common/components/msem-preset-editor/msem-preset-editor.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
2
  import getConfig from "next/config";
3
+ import classNames from "classnames";
3
4
  import Button from "dt-design-system/es/button";
4
5
  import Dialog from "dt-design-system/es/dialog";
5
6
  import Input from "dt-design-system/es/input";
@@ -147,6 +148,10 @@ export default function MseMPresetEditor({
147
148
  }, [removePreset, resort]);
148
149
  if (!resort) return null;
149
150
  const CurrentEditor = preset?.widget && Editors[preset.widget];
151
+ const showPresetUrl = Boolean(preset?.widget && presetUrl !== "");
152
+ const footerClasses = classNames(css.footer, {
153
+ [css.footerButtonOnly]: !showPresetUrl
154
+ });
150
155
  return _jsxs("div", {
151
156
  className: css.editor,
152
157
  children: [children && React.cloneElement(children, {
@@ -191,8 +196,8 @@ export default function MseMPresetEditor({
191
196
  className: css.error,
192
197
  children: error
193
198
  }), _jsxs("div", {
194
- className: css.footer,
195
- children: [_jsx(Tooltip, {
199
+ className: footerClasses,
200
+ children: [showPresetUrl ? _jsx(Tooltip, {
196
201
  content: "Tester dans le widget MseM",
197
202
  children: _jsx(Button, {
198
203
  variant: "secondary",
@@ -201,7 +206,13 @@ export default function MseMPresetEditor({
201
206
  onClick: testPreset,
202
207
  children: _jsx(Icons.OpenInBrowser, {})
203
208
  })
204
- }), Boolean(preset?.widget && presetUrl !== "") && _jsx(Input, {
209
+ }) : _jsxs(Button, {
210
+ variant: "secondary",
211
+ disabled: !preset?.widget,
212
+ className: css.testButton,
213
+ onClick: testPreset,
214
+ children: [_jsx(Icons.OpenInBrowser, {}), "Tester dans le widget MseM"]
215
+ }), showPresetUrl && _jsx(Input, {
205
216
  type: "text",
206
217
  className: css.url,
207
218
  value: presetUrl,
package/es/common/components/msem-preset-editor/msem-preset-editor.module.css CHANGED
@@ -1,11 +1,4 @@
1
1
  .editor {
2
- --ds-sans-serif-font: "Open Sans", sans-serif;
3
-
4
- --ds-radius-100: var(--ublo-radius-100, 3px);
5
- --ds-radius-200: var(--ublo-radius-200, 10px);
6
- --ds-radius-300: var(--ublo-radius-300, 15px);
7
- --ds-radius-400: var(--ublo-radius-400, 20px);
8
-
9
2
  width: 420px;
10
3
  display: flex;
11
4
  flex-direction: column;
@@ -14,7 +7,7 @@
14
7
  }
15
8
 
16
9
  .editor * {
17
- font-family: var(--ds-sans-serif-font, "Open Sans", sans-serif);
10
+ font-family: inherit;
18
11
  }
19
12
 
20
13
  .error {
@@ -23,7 +16,7 @@
23
16
  text-align: center;
24
17
  color: var(--ds-red-500, #990700);
25
18
  background-color: var(--ds-red-200, #fde7e7);
26
- border-radius: var(--ublo-radius-200, 10px);
19
+ border-radius: var(--ds-radius-200, 8px);
27
20
  }
28
21
 
29
22
  .footer {
@@ -31,6 +24,11 @@
31
24
  gap: 6px;
32
25
  }
33
26
 
27
+ .footerButtonOnly {
28
+ justify-content: center;
29
+ white-space: nowrap;
30
+ }
31
+
34
32
  .url {
35
33
  flex: 1 1 100%;
36
34
  }
package/es/common/components/msem-preset-linker/components/actions.module.css CHANGED
@@ -3,16 +3,15 @@
3
3
  display: flex;
4
4
  align-items: center;
5
5
  justify-content: center;
6
- font-family: "Open Sans", sans-serif;
7
6
  background-color: #fff;
8
7
  border-radius: 50%;
9
- box-shadow: var(--ublo-shadow-100, 0 5px 10px rgba(0, 0, 0, 0.12));
8
+ box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
10
9
  cursor: pointer;
11
10
  pointer-events: auto;
12
11
  transition: box-shadow 160ms
13
- var(--ublo-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
12
+ var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
14
13
  animation: action-button-appearance 320ms
15
- var(--ublo-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
14
+ var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
16
15
  }
17
16
 
18
17
  @keyframes action-button-appearance {
@@ -39,11 +38,11 @@
39
38
  .cancel {
40
39
  right: 16px;
41
40
  background: var(
42
- --ublo-red-gradient,
41
+ --ds-red-gradient,
43
42
  linear-gradient(
44
- 175deg,
45
- var(--ublo-red-400, #f26464),
46
- var(--ublo-red-500, #d55858)
43
+ 100deg,
44
+ var(--ds-red-300, #f26464) 0%,
45
+ var(--ds-red-400, #ee3535) 100%
47
46
  )
48
47
  );
49
48
  }
@@ -51,11 +50,11 @@
51
50
  .save {
52
51
  right: 86px;
53
52
  background: var(
54
- --ublo-green-gradient,
53
+ --ds-green-gradient,
55
54
  linear-gradient(
56
- 175deg,
57
- var(--ublo-green-400, #4bde97),
58
- var(--ublo-red-500, #4ab292)
55
+ 100deg,
56
+ var(--ds-green-300, #4bde97) 0%,
57
+ var(--ds-green-400, #24c678) 100%
59
58
  )
60
59
  );
61
60
  }
package/es/common/components/msem-preset-linker/components/overlays.module.css CHANGED
@@ -7,7 +7,7 @@
7
7
  display: flex;
8
8
  align-items: center;
9
9
  justify-content: center;
10
- border-radius: var(--ublo-radius-200, 10px);
10
+ border-radius: var(--ds-radius-200, 8px);
11
11
  z-index: 800;
12
12
  transition: background-color 160ms
13
13
  var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
@@ -24,8 +24,8 @@ body:not(:has(.active)) .overlay:hover,
24
24
  }
25
25
 
26
26
  .active {
27
- outline: 2px solid var(--ublo-blue-500, #4177f6);
28
- outline-offset: 3px;
27
+ outline: var(--ds-focus-ring-width, 2px) solid var(--ds-blue-400, #0038ff);
28
+ outline-offset: var(--ds-focus-ring-offset, 2px);
29
29
  }
30
30
 
31
31
  .presetIndicator {
@@ -35,24 +35,24 @@ body:not(:has(.active)) .overlay:hover,
35
35
  align-items: center;
36
36
  justify-content: center;
37
37
  background: var(
38
- --ublo-blue-gradient,
38
+ --ds-blue-gradient,
39
39
  linear-gradient(
40
- 175deg,
41
- var(--ublo-blue-400, #4177f6),
42
- var(--ublo-blue-500, #004cc2)
40
+ 100deg,
41
+ var(--ds-blue-300, #6688ff) 0%,
42
+ var(--ds-blue-400, #0038ff) 100%
43
43
  )
44
44
  );
45
- border-radius: var(--ublo-radius-200, 10px);
46
- box-shadow: var(--ublo-shadow-100, 0 5px 10px rgba(0, 0, 0, 0.12));
45
+ border-radius: var(--ds-radius-200, 8px);
46
+ box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
47
47
  }
48
48
 
49
49
  .obsolete .presetIndicator {
50
50
  background: var(
51
- --ublo-yellow-gradient,
51
+ --ds-yellow-gradient,
52
52
  linear-gradient(
53
- 175deg,
54
- var(--ublo-yellow-400, #ffb648),
55
- var(--ublo-yellow-500, #e2a445)
53
+ 100deg,
54
+ var(--ds-yellow-300, #ffb648) 0%,
55
+ var(--ds-yellow-400, #ffa114) 100%
56
56
  )
57
57
  );
58
58
  }
@@ -60,5 +60,5 @@ body:not(:has(.active)) .overlay:hover,
60
60
  .presetIndicatorIcon {
61
61
  width: 24px;
62
62
  height: 24px;
63
- fill: var(--ublo-grey-000, #fff);
63
+ fill: var(--ds-grey-000, #fff);
64
64
  }
package/es/common/components/msem-preset-linker/msem-preset-linker.module.css CHANGED
@@ -17,7 +17,7 @@
17
17
  display: flex;
18
18
  align-items: center;
19
19
  justify-content: center;
20
- font-family: "Open Sans", sans-serif;
20
+ font-family: inherit;
21
21
  pointer-events: none;
22
22
  z-index: 811;
23
23
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ublo-lib",
3
- "version": "1.31.22",
3
+ "version": "1.31.24",
4
4
  "peerDependencies": {
5
5
  "dt-design-system": "^3.8.3",
6
6
  "leaflet": "^1.9.1",