@useinsider/guido 3.12.0-beta.840207a → 3.12.0-beta.86e34da

package/dist/extensions/Blocks/Recommendation/extension.js

@@ -1,4 +1,4 @@
-import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExtensionBuilder as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as m } from "./block.js";
 import n from "./canvasPreview.css.js";
 import { RecommendationBlockControl as i } from "./controls/main/index.js";
@@ -6,42 +6,44 @@ import "./constants/selectors.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import { NameControls as e } from "./controls/name/index.js";
-import { PriceControls as s } from "./controls/price/index.js";
-import { OldPriceControls as l } from "./controls/oldPrice/index.js";
+import { PriceControls as l } from "./controls/price/index.js";
+import { OldPriceControls as s } from "./controls/oldPrice/index.js";
 import { OmnibusPriceControls as p } from "./controls/omnibusPrice/index.js";
 import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
 import { ButtonControls as c } from "./controls/button/index.js";
-import { ImageControls as f } from "./controls/image/index.js";
-import { CustomAttributeControls as C } from "./controls/customAttribute/index.js";
+import { ImageControls as C } from "./controls/image/index.js";
+import { CustomAttributeControls as f } from "./controls/customAttribute/index.js";
 import { SpacingControl as d } from "./controls/spacing/index.js";
-import { CardBackgroundColorControl as u } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as y } from "./controls/syncInfoMessage.js";
+import { BlockBackgroundColorControl as u } from "./controls/blockBackground/index.js";
+import { CardBackgroundColorControl as g } from "./controls/cardBackground/index.js";
+import { RecommendationCardCompositionControl as y } from "./controls/cardComposition/index.js";
+import { SyncInfoMessageControl as B } from "./controls/syncInfoMessage.js";
 import { RecommendationIconsRegistry as P } from "./iconsRegistry.js";
 import R from "./recommendation.css.js";
 import { SettingsPanel as S } from "./settingsPanel.js";
-const w = [
+const k = [
   e,
-  s,
   l,
+  s,
   p,
   a,
   c,
-  f,
-  C
-], B = [
+  C,
+  f
+], w = [
   i,
   u,
-  d,
   g,
-  y
+  d,
+  y,
+  B
 ], b = [
-  ...B,
-  ...w.flatMap((o) => Object.values(o))
-], U = b.reduce(
-  (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(S)
+  ...w,
+  ...k.flatMap((o) => Object.values(o))
+], W = b.reduce(
+  (o, r) => o.addControl(r),
+  new t().addBlock(m).withSettingsPanelRegistry(S)
 ).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
 export {
-  U as default
+  W as default
 };

package/dist/extensions/Blocks/Recommendation/iconsRegistry.js

@@ -1,6 +1,6 @@
 import r from "../../../static/assets/info.svg.js";
 import { IconsRegistry as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class h extends C {
+class l extends C {
   registerIconsSvg(t) {
     t["recommendation-icon"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -74,9 +74,23 @@ class h extends C {
                 <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
             </svg>
-        `, t["migration-info-icon"] = r, t["strategy-details-icon"] = r;
+        `, t["strategy-settings-icon"] = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                fill="currentColor">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M14 4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757c0
+                    .891-1.077 1.337-1.707.708l-.536-.536a1 1 0 0 0-1.414 0L4.93 6.343a1 1 0 0 0 0
+                    1.414l.535.536c.63.63.184 1.707-.707 1.707H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757c.891 0
+                    1.337 1.077.708 1.707l-.536.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414
+                    0l.536-.535c.63-.63 1.707-.184 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0
+                    1-1v-.757c0-.891 1.077-1.337 1.707-.707l.536.535a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0
+                    0-1.414l-.536-.536c-.63-.63-.183-1.707.708-1.707H20a1 1 0 0 0 1-1v-2a1 1 0 0
+                    0-1-1h-.757c-.891 0-1.337-1.077-.707-1.707l.535-.536a1 1 0 0 0
+                    0-1.414L17.657 4.93a1 1 0 0 0-1.414 0l-.536.536c-.63.63-1.707.183-1.707-.708V4zm3 8a5 5 0
+                    1 1-10 0 5 5 0 0 1 10 0zm-5 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
+            </svg>
+        `, t["migration-info-icon"] = r;
   }
 }
 export {
-  h as RecommendationIconsRegistry
+  l as RecommendationIconsRegistry
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -289,6 +289,263 @@ ue-orderable.orderable-disabled .droppable-icon {
     font-weight: 400;
     line-height: 16px;
 }
+
+/*
+ * Recommendation Strategy picker (controls/main/strategy.ts).
+ *
+ * Lives inside the settings panel, so it scrolls with it and needs no positioning
+ * code. Only the hover card escapes the panel, via \`position: fixed\`.
+ *
+ * The values below are the design system's own, read from its stylesheets
+ * (\`combobox.css\` for the trigger, \`InInfoBox\`'s CSS for the card). The \`In*\`
+ * components themselves cannot render in this shadow root — they are styled from
+ * the host document, and copying their stylesheets across drags normalize.css and
+ * a global \`*\`/\`svg\` reset into Stripo's panel.
+ */
+
+/*
+ * Anchors the dropdown. Without a positioned wrapper the menu is a grid item of
+ * the column container, and its absolute static position resolves to that
+ * container's top — so it opens over the label instead of under the trigger.
+ */
+.strategy-control__field {
+    position: relative;
+}
+
+.strategy-control__row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/*
+ * Same tokens as \`ue-select .button\` in components/combobox.css, so the strategy
+ * trigger is indistinguishable from Recommendation Locale / Currency beside it.
+ * It cannot simply reuse that rule: the selector is scoped to \`ue-select\`, and a
+ * Stripo select cannot render this control's per-option hover card.
+ */
+.strategy-select {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+    min-height: 40px;
+    padding: 8px;
+    overflow: hidden;
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    box-shadow: none;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+    text-align: left;
+}
+
+.strategy-select:hover {
+    border-color: var(--guido-color-primary-500);
+}
+
+/* Matches the focus ring Stripo paints on an open select. */
+.strategy-select--open {
+    border-color: var(--guido-color-primary-500);
+    box-shadow: 0 0 0 3px var(--guido-color-primary-200);
+}
+
+.strategy-select__value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.strategy-select__value--placeholder {
+    color: var(--guido-color-gray-700);
+}
+
+.strategy-select__value--missing {
+    color: var(--guido-color-danger-500);
+}
+
+.strategy-select__caret {
+    display: flex;
+    flex: none;
+    color: var(--guido-color-gray-800);
+}
+
+/* The gear button sits beside the trigger and must not stretch with it. */
+.strategy-control__details {
+    flex: none;
+}
+
+.strategy-menu {
+    position: absolute;
+    z-index: 5;
+    top: 100%;
+    right: 0;
+    left: 0;
+    margin-top: 4px;
+    overflow: hidden;
+    background: var(--guido-color-white);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    box-shadow: var(--guido-box-shadow);
+}
+
+.strategy-menu[hidden] {
+    display: none;
+}
+
+.strategy-menu__search {
+    padding: 8px;
+    border-bottom: 1px solid var(--guido-color-gray-300);
+}
+
+.strategy-menu__search-input {
+    box-sizing: border-box;
+    width: 100%;
+    height: 32px;
+    padding: 4px 8px;
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    font: inherit;
+}
+
+.strategy-menu__list {
+    max-height: 240px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style: none;
+}
+
+.strategy-menu__option {
+    overflow: hidden;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.strategy-menu__option:hover {
+    background: var(--guido-color-gray-100);
+}
+
+.strategy-menu__option--selected {
+    color: var(--guido-color-primary-500);
+    background: var(--guido-color-primary-0);
+}
+
+.strategy-menu__empty {
+    padding: 12px;
+    color: var(--guido-color-gray-600);
+    font-size: 13px;
+    text-align: center;
+}
+
+.strategy-control__create-row {
+    margin-top: 8px;
+}
+
+/*
+ * \`_GuButton\` renders <ue-button> > .control-shadow-wrapper > button.button, and
+ * every level is shrink-to-fit. Stretching only the innermost one leaves the
+ * button its intrinsic width, which is why the design's full-width row needs all
+ * three.
+ */
+.strategy-control__create-row ue-button,
+.strategy-control__create-row .control-shadow-wrapper,
+.strategy-control__create-row .button {
+    display: block;
+    width: 100%;
+}
+
+/*
+ * Hover card. Reproduces the design system's \`InInfoBox\` — same 240px medium
+ * width, 4px information-blue top rule, 16px body, and a divided footer for the
+ * View More button.
+ *
+ * \`position: fixed\` so the card sits beside the narrow panel instead of being
+ * clipped by it.
+ */
+.strategy-card {
+    position: fixed;
+    z-index: 10;
+    width: 240px;
+    background: var(--guido-color-white);
+    border-top: 4px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(57, 57, 57, 0.15);
+}
+
+.strategy-card[hidden] {
+    display: none;
+}
+
+.strategy-card__body {
+    padding: 16px;
+}
+
+.strategy-card__title {
+    margin: 0;
+    color: var(--guido-color-gray-800);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    word-break: break-word;
+}
+
+.strategy-card__updated {
+    margin: 4px 0 0;
+    color: var(--guido-color-gray-600);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.strategy-card__rows {
+    margin-top: 16px;
+}
+
+.strategy-card__row + .strategy-card__row {
+    margin-top: 12px;
+}
+
+.strategy-card__row-title {
+    margin: 0;
+    color: var(--guido-color-gray-600);
+    font-size: 12px;
+    line-height: 16px;
+}
+
+.strategy-card__row-value {
+    margin: 0;
+    color: var(--guido-color-gray-800);
+    font-size: 13px;
+    line-height: 18px;
+    word-break: break-word;
+}
+
+.strategy-card__footer {
+    padding: 8px 16px;
+    border-top: 1px solid var(--guido-color-gray-300);
+}
+
+.strategy-card__more {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    color: var(--guido-color-primary-500);
+    background: none;
+    border: 0;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 16px;
+}
 `;
 export {
   n as default

package/dist/extensions/Blocks/Recommendation/settingsPanel.js

@@ -1,9 +1,9 @@
-import { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as O, ContainerControls as C, TextControls as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { BLOCK_ID as U } from "./block.js";
+import { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as I, ContainerControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { BLOCK_ID as R } from "./block.js";
 import { RecommendationBlockId as S } from "./constants/blockIds.js";
 import { RecommendationControlId as T } from "./constants/controlIds.js";
 import "./constants/selectors.js";
-import { CONTROL_BLOCK_ID as A } from "./controls/main/index.js";
+import { CONTROL_BLOCK_ID as U } from "./controls/main/index.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import "./controls/name/index.js";
@@ -13,37 +13,38 @@ import "./controls/omnibusPrice/index.js";
 import "./controls/omnibusDiscount/index.js";
 import "./controls/button/index.js";
 import "./controls/image/index.js";
-import { SPACING_CONTROL_ID as L } from "./controls/spacing/index.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as D } from "./controls/cardBackground/index.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as B } from "./controls/cardComposition/index.js";
+import { SPACING_CONTROL_ID as A } from "./controls/spacing/index.js";
+import "./controls/blockBackground/index.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as L } from "./controls/cardBackground/index.js";
+import { COMPOSITION_CONTROL_BLOCK_ID as D } from "./controls/cardComposition/index.js";
 import { SYNC_INFO_MESSAGE_CONTROL_ID as N } from "./controls/syncInfoMessage.js";
-class d extends E {
-  registerBlockControls(I) {
-    I[U] = [
+class s extends E {
+  registerBlockControls(O) {
+    O[R] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
-          A,
+          U,
           C.EXTERNAL_INDENTS
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
-          R.TEXT_BLOCK_BACKGROUND_COLOR,
-          D,
-          L
+          T.BLOCK_BACKGROUND,
+          L,
+          A
         ]
       ),
       new _(
         "Card Composition",
         [
-          B
+          D
         ]
       ).withLabel(this.api.translate("Card Composition"))
-    ], I[S.NAME] = [
+    ], O[S.NAME] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.NAME_STYLE,
@@ -53,7 +54,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.NAME_BACKGROUND,
           T.NAME_FONT_FAMILY,
@@ -61,9 +62,9 @@ class d extends E {
           T.NAME_COLOR
         ]
       )
-    ], I[S.PRICE] = [
+    ], O[S.PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.PRICE_STYLE,
@@ -72,7 +73,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.PRICE_BACKGROUND,
           T.PRICE_FONT_FAMILY,
@@ -80,9 +81,9 @@ class d extends E {
           T.PRICE_COLOR
         ]
       )
-    ], I[S.OLD_PRICE] = [
+    ], O[S.OLD_PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OLD_PRICE_STYLE,
@@ -91,7 +92,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OLD_PRICE_BACKGROUND,
           T.OLD_PRICE_FONT_FAMILY,
@@ -99,9 +100,9 @@ class d extends E {
           T.OLD_PRICE_COLOR
         ]
       )
-    ], I[S.OMNIBUS_PRICE] = [
+    ], O[S.OMNIBUS_PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OMNIBUS_PRICE_TEXT_BEFORE,
@@ -112,7 +113,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OMNIBUS_PRICE_BACKGROUND,
           T.OMNIBUS_PRICE_FONT_FAMILY,
@@ -120,9 +121,9 @@ class d extends E {
           T.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], I[S.OMNIBUS_DISCOUNT] = [
+    ], O[S.OMNIBUS_DISCOUNT] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OMNIBUS_DISCOUNT_TEXT_BEFORE,
@@ -133,7 +134,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OMNIBUS_DISCOUNT_BACKGROUND,
           T.OMNIBUS_DISCOUNT_FONT_FAMILY,
@@ -141,9 +142,9 @@ class d extends E {
           T.OMNIBUS_DISCOUNT_COLOR
         ]
       )
-    ], I[S.BUTTON] = [
+    ], O[S.BUTTON] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.BUTTON_TEXT,
@@ -153,7 +154,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.BUTTON_COLOR,
           T.BUTTON_FONT_FAMILY,
@@ -164,9 +165,9 @@ class d extends E {
           T.BUTTON_BORDER
         ]
       )
-    ], I[S.CUSTOM_ATTRIBUTE] = [
+    ], O[S.CUSTOM_ATTRIBUTE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           T.CUSTOM_ATTR_STYLE,
           T.CUSTOM_ATTR_ALIGN,
@@ -175,7 +176,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.CUSTOM_ATTR_BACKGROUND,
           T.CUSTOM_ATTR_FONT_FAMILY,
@@ -183,9 +184,9 @@ class d extends E {
           T.CUSTOM_ATTR_COLOR
         ]
       )
-    ], I[S.IMAGE] = [
+    ], O[S.IMAGE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.IMAGE_SIZE,
@@ -196,5 +197,5 @@ class d extends E {
   }
 }
 export {
-  d as SettingsPanel
+  s as SettingsPanel
 };