ublo-lib 1.31.21 → 1.31.23

package/es/common/components/msem-preset-editor/components/widget-list-item.module.css

@@ -11,14 +11,14 @@
   font-weight: 400;
   text-align: left;
   padding-right: 100px;
-  background-color: var(--ublo-grey-100, #f5f5f5);
-  border-radius: var(--ublo-radius-200, 10px);
+  background-color: var(--ds-grey-100, #f8f8f8);
+  border-radius: var(--ds-radius-200, 8px);
 }
 
 .selected .button {
-  color: var(--ublo-primary-color, #073ff8);
+  color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
   font-weight: 700;
-  background-color: var(--ublo-blue-100, #e8f0fc);
+  background-color: var(--ds-grey-300, #d7d7d7);
 }
 
 .opened .button {
@@ -32,8 +32,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--ublo-secondary-color, #4177f6);
-  border-radius: var(--ublo-radius-200, 10px);
+  background-color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
+  border-radius: var(--ds-radius-200, 8px);
 }
 
 .logo img {
@@ -43,11 +43,11 @@
 }
 
 .name {
-  color: var(--ublo-grey-600, #1b1b1b);
+  color: var(--ds-grey-600, #484848);
 }
 
 .selected .name {
-  color: var(--ublo-primary-color, #073ff8);
+  color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
 }
 
 .actions {
@@ -59,7 +59,7 @@
 }
 
 .action {
-  border-radius: var(--ublo-radius-100, 3px);
+  border-radius: var(--ds-radius-100, 4px);
 }
 
 .list {
@@ -69,14 +69,14 @@
   flex-direction: column;
   margin-left: auto;
   padding: 6px;
-  border-radius: 0 0 var(--ublo-radius-200, 10px) var(--ublo-radius-200, 10px);
+  border-radius: 0 0 var(--ds-radius-200, 8px) var(--ds-radius-200, 8px);
   overflow: auto;
   overscroll-behavior: contain;
   background: linear-gradient(
-      var(--ublo-grey-100, #f5f5f5) 30%,
+      var(--ds-grey-100, #f8f8f8) 30%,
       hsla(0, 0%, 100%, 0)
     ),
-    linear-gradient(hsla(0, 0%, 100%, 0), var(--ublo-grey-100, #f5f5f5) 70%) 0
+    linear-gradient(hsla(0, 0%, 100%, 0), var(--ds-grey-100, #f8f8f8) 70%) 0
       100%,
     radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), transparent),
     radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), transparent)
@@ -84,7 +84,7 @@
   background-repeat: no-repeat;
   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
   background-attachment: local, local, scroll, scroll;
-  background-color: var(--ublo-grey-100, #f5f5f5);
+  background-color: var(--ds-grey-100, #f8f8f8);
 }
 
 .sub {
@@ -100,9 +100,9 @@
 }
 
 .subButtonSelected {
-  color: var(--ublo-primary-color, #073ff8);
+  color: var(--ds-secondary, var(--ds-blue-400, #0038ff));
   font-weight: 700;
-  background-color: var(--ublo-blue-100, #e8f0fc);
+  background-color: var(--ds-grey-300, #d7d7d7);
 }
 
 .subActions {

package/es/common/components/msem-preset-editor/editors/elloha.module.css

@@ -4,7 +4,7 @@
   text-align: center;
   color: var(--ds-red-500, #990700);
   background-color: var(--ds-red-200, #fde7e7);
-  border-radius: var(--ublo-radius-200, 10px);
+  border-radius: var(--ds-radius-200, 8px);
 }
 
 .helper {

package/es/common/components/msem-preset-editor/msem-preset-editor.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import getConfig from "next/config";
+import classNames from "classnames";
 import Button from "dt-design-system/es/button";
 import Dialog from "dt-design-system/es/dialog";
 import Input from "dt-design-system/es/input";
@@ -147,6 +148,10 @@ export default function MseMPresetEditor({
   }, [removePreset, resort]);
   if (!resort) return null;
   const CurrentEditor = preset?.widget && Editors[preset.widget];
+  const showPresetUrl = Boolean(preset?.widget && presetUrl !== "");
+  const footerClasses = classNames(css.footer, {
+    [css.footerButtonOnly]: !showPresetUrl
+  });
   return _jsxs("div", {
     className: css.editor,
     children: [children && React.cloneElement(children, {
@@ -191,8 +196,8 @@ export default function MseMPresetEditor({
       className: css.error,
       children: error
     }), _jsxs("div", {
-      className: css.footer,
-      children: [_jsx(Tooltip, {
+      className: footerClasses,
+      children: [showPresetUrl ? _jsx(Tooltip, {
         content: "Tester dans le widget MseM",
         children: _jsx(Button, {
           variant: "secondary",
@@ -201,7 +206,13 @@ export default function MseMPresetEditor({
           onClick: testPreset,
           children: _jsx(Icons.OpenInBrowser, {})
         })
-      }), Boolean(preset?.widget && presetUrl !== "") && _jsx(Input, {
+      }) : _jsxs(Button, {
+        variant: "secondary",
+        disabled: !preset?.widget,
+        className: css.testButton,
+        onClick: testPreset,
+        children: [_jsx(Icons.OpenInBrowser, {}), "Tester dans le widget MseM"]
+      }), showPresetUrl && _jsx(Input, {
         type: "text",
         className: css.url,
         value: presetUrl,

package/es/common/components/msem-preset-editor/msem-preset-editor.module.css

@@ -1,20 +1,4 @@
 .editor {
-  --ds-primary: var(--ublo-secondary-color, #4177f6);
-  --ds-secondary: var(--ublo-primary-color, #073ff8);
-
-  --ds-button-background: var(--ublo-secondary-color, #4177f6);
-  --ds-button-hover-background: var(--ublo-primary-color, #073ff8);
-  --ds-button-radius: var(--ublo-radius-200, 10px);
-
-  --ds-sans-serif-font: "Open Sans", sans-serif;
-
-  --ds-focus-ring-color: var(--ublo-secondary-color, #4177f6);
-
-  --ds-radius-100: var(--ublo-radius-100, 3px);
-  --ds-radius-200: var(--ublo-radius-200, 10px);
-  --ds-radius-300: var(--ublo-radius-300, 15px);
-  --ds-radius-400: var(--ublo-radius-400, 20px);
-
   width: 420px;
   display: flex;
   flex-direction: column;
@@ -23,7 +7,7 @@
 }
 
 .editor * {
-  font-family: var(--ds-sans-serif-font, "Open Sans", sans-serif);
+  font-family: inherit;
 }
 
 .error {
@@ -32,7 +16,7 @@
   text-align: center;
   color: var(--ds-red-500, #990700);
   background-color: var(--ds-red-200, #fde7e7);
-  border-radius: var(--ublo-radius-200, 10px);
+  border-radius: var(--ds-radius-200, 8px);
 }
 
 .footer {
@@ -40,6 +24,10 @@
   gap: 6px;
 }
 
+.footerButtonOnly {
+  justify-content: center;
+}
+
 .url {
   flex: 1 1 100%;
 }

package/es/common/components/msem-preset-linker/components/actions.module.css

@@ -6,13 +6,13 @@
   font-family: "Open Sans", sans-serif;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: var(--ublo-shadow-100, 0 5px 10px rgba(0, 0, 0, 0.12));
+  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
   cursor: pointer;
   pointer-events: auto;
   transition: box-shadow 160ms
-    var(--ublo-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
   animation: action-button-appearance 320ms
-    var(--ublo-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 @keyframes action-button-appearance {
@@ -39,11 +39,11 @@
 .cancel {
   right: 16px;
   background: var(
-    --ublo-red-gradient,
+    --ds-red-gradient,
     linear-gradient(
-      175deg,
-      var(--ublo-red-400, #f26464),
-      var(--ublo-red-500, #d55858)
+      100deg,
+      var(--ds-red-300, #f26464) 0%,
+      var(--ds-red-400, #ee3535) 100%
     )
   );
 }
@@ -51,11 +51,11 @@
 .save {
   right: 86px;
   background: var(
-    --ublo-green-gradient,
+    --ds-green-gradient,
     linear-gradient(
-      175deg,
-      var(--ublo-green-400, #4bde97),
-      var(--ublo-red-500, #4ab292)
+      100deg,
+      var(--ds-green-300, #4bde97) 0%,
+      var(--ds-green-400, #24c678) 100%
     )
   );
 }

package/es/common/components/msem-preset-linker/components/overlays.module.css

@@ -7,7 +7,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--ublo-radius-200, 10px);
+  border-radius: var(--ds-radius-200, 8px);
   z-index: 800;
   transition: background-color 160ms
     var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
@@ -24,8 +24,8 @@ body:not(:has(.active)) .overlay:hover,
 }
 
 .active {
-  outline: 2px solid var(--ublo-blue-500, #4177f6);
-  outline-offset: 3px;
+  outline: var(--ds-focus-ring-width, 2px) solid var(--ds-blue-400, #0038ff);
+  outline-offset: var(--ds-focus-ring-offset, 2px);
 }
 
 .presetIndicator {
@@ -35,24 +35,24 @@ body:not(:has(.active)) .overlay:hover,
   align-items: center;
   justify-content: center;
   background: var(
-    --ublo-blue-gradient,
+    --ds-blue-gradient,
     linear-gradient(
-      175deg,
-      var(--ublo-blue-400, #4177f6),
-      var(--ublo-blue-500, #004cc2)
+      100deg,
+      var(--ds-blue-300, #6688ff) 0%,
+      var(--ds-blue-400, #0038ff) 100%
     )
   );
-  border-radius: var(--ublo-radius-200, 10px);
-  box-shadow: var(--ublo-shadow-100, 0 5px 10px rgba(0, 0, 0, 0.12));
+  border-radius: var(--ds-radius-200, 8px);
+  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
 }
 
 .obsolete .presetIndicator {
   background: var(
-    --ublo-yellow-gradient,
+    --ds-yellow-gradient,
     linear-gradient(
-      175deg,
-      var(--ublo-yellow-400, #ffb648),
-      var(--ublo-yellow-500, #e2a445)
+      100deg,
+      var(--ds-yellow-300, #ffb648) 0%,
+      var(--ds-yellow-400, #ffa114) 100%
     )
   );
 }
@@ -60,5 +60,5 @@ body:not(:has(.active)) .overlay:hover,
 .presetIndicatorIcon {
   width: 24px;
   height: 24px;
-  fill: var(--ublo-grey-000, #fff);
+  fill: var(--ds-grey-000, #fff);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.31.21",
+  "version": "1.31.23",
   "peerDependencies": {
     "dt-design-system": "^3.8.3",
     "leaflet": "^1.9.1",