@useinsider/guido 3.18.2-beta.963f84e → 3.18.2-beta.9be830c

package/dist/static/styles/components/accessibility.css.js

@@ -0,0 +1,282 @@
+const e = `/* Stripo Accessibility Checker panel (ue-accessibility-panel).
+   Stripo's defaults derive icon/button/outline colors from --ue-primary-color,
+   whose stock hue is green (129) — Figma DT-33912 wants Insider blue. */
+
+/* Stripo sizes the panel to its content (max-height: 100%), so short tabs (Ignored, empty
+   states) end mid-page; the design keeps it full height in every state. */
+ue-ui-simple-panel.accessibility-panel,
+ue-accessibility-panel {
+    height: 100%;
+}
+
+/* The refresh button only renders once results land; reserve its 50x50 slot so the
+   header keeps the same height and title width while the check is loading. */
+ue-accessibility-panel .header-control-panel-right {
+    min-width: 50px;
+    min-height: 50px;
+}
+
+/* Failed / Passed / Ignored count chips. Stripo paints them as filled
+   red/green/blue pills via .accent.error / .accent.success. */
+ue-accessibility-panel .tabs-header .accent {
+    min-width: 21px;
+    margin-left: 8px;
+    padding: 3px 5px;
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    background-color: var(--guido-color-white);
+    color: var(--guido-color-gray-800);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+ue-accessibility-panel .tabs-header button.checked .accent {
+    border-color: var(--guido-color-primary-500);
+    color: var(--guido-color-primary-500);
+}
+
+/* Issue card */
+ue-accessibility-panel .issue-card-surface {
+    border-radius: 8px;
+    outline: 1px solid var(--guido-color-gray-300);
+    outline-offset: -1px;
+}
+
+ue-accessibility-panel .issue-card-surface--active {
+    outline-color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .issue-card-title {
+    color: var(--guido-color-gray-800);
+}
+
+/* Per-issue help "?" icon: 14x14 glyph centered in a 24x24 hit area. Stripo
+   renders the ue-icon svg at width/height 100%, so it fills the whole box —
+   pin the svg to 14px and center it. */
+ue-accessibility-panel .issue-card-header-row .icon-help {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--guido-color-gray-600);
+}
+
+ue-accessibility-panel .issue-card-header-row .icon-help svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* Severity icons: Critical (cross-circle), Serious (warning), Moderate (info) */
+ue-accessibility-panel .issue-card-header-row ue-icon-component.danger {
+    color: var(--guido-color-danger-500);
+}
+
+ue-accessibility-panel .issue-card-header-row ue-icon-component.warning {
+    color: var(--guido-color-warning-500);
+}
+
+ue-accessibility-panel .issue-card-header-row ue-icon-component.info {
+    color: var(--guido-color-primary-500);
+}
+
+/* Passed tab is read-only. Stripo already blocks pointer events on these controls but only
+   styles the alt-text input as disabled; give the selects and color inputs the same look. */
+ue-accessibility-passed-tab input,
+ue-accessibility-passed-tab ue-select .toggle-select-button {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Contrast card rows (Figma 4522:11243): a 10px section inset holding 50px rows with 16px
+   side padding, so labels and swatches sit 26px in while the action buttons stay at 10px. */
+ue-accessibility-panel .controls-separator-line:has(.fit-to-color) {
+    padding: 10px;
+}
+
+/* Passed cards pin a 24px instance-count badge 8px off the bottom-right corner, where the
+   right-aligned ratio now ends; keep the last row clear of it. */
+ue-accessibility-passed-tab .controls-separator-line:has(.fit-to-color) {
+    padding-bottom: 34px;
+}
+
+ue-accessibility-panel .controls-separator-line:has(.fit-to-color) .sub-container.two-columns {
+    box-sizing: border-box;
+    min-height: 50px;
+    padding: 5px 16px;
+    align-items: center;
+}
+
+/* Ratio value: Stripo left-aligns it in a swatch-wide box; the design ends it at the
+   swatches' right edge, behind a 16px glyph in a 24px icon box. */
+ue-accessibility-panel .controls-list.fit-to-color {
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component {
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin: 0;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component svg {
+    width: 16px;
+    height: 16px;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component.warning {
+    color: var(--guido-color-warning-500);
+}
+
+/* Empty states (Figma 5122:17577, DS InNoData): the DS "no-personalization" art above a
+   title and description, centered in the tab. Failed/Ignored text comes from localePatch as
+   "Title\\nDescription" and ::first-line styles the title; Passed renders nothing when empty,
+   so it gets the same box from generated content. */
+ue-accessibility-panel {
+    --ue-accessibility-image-width: 240px;
+    --ue-accessibility-image-height: 240px;
+}
+
+/* The scroll area only grows to its content (max-height: 100%); stretch it to the panel
+   bottom so the empty state can center in the space below the tabs. */
+ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
+    flex-grow: 1;
+}
+
+ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) .ue-scrollable {
+    height: 100%;
+}
+
+ue-accessibility-panel .ue-scrollable-content:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 100%;
+}
+
+ue-accessibility-panel .accessibility-list-empty.light-theme.failed-list,
+ue-accessibility-panel .accessibility-list-empty.light-theme.ignored-list,
+ue-accessibility-passed-tab:empty::before {
+    display: block;
+    height: auto;
+    margin: 0;
+    padding: 248px 16px 0;
+    background: url("https://image.useinsider.com/insider-design-system/img/speacial/no-personalization.svg") no-repeat center top / 240px 240px;
+    color: var(--guido-color-neutral-500);
+    font-size: 15px;
+    line-height: 24px;
+    text-align: center;
+    white-space: pre-line;
+}
+
+/* Stripo renders nothing at all for an empty Passed tab, so this copy cannot come from the
+   localePatch like its Failed/Ignored siblings in src/config/i18n/en/labels.json — keep the
+   three wordings in step by hand. \`display: block\` makes the host a block container so
+   ::first-line below can reach the title inside the generated content. */
+ue-accessibility-passed-tab:empty {
+    display: block;
+}
+
+ue-accessibility-passed-tab:empty::before {
+    content: "No Passed Items\\A You have no passed items.";
+}
+
+/* Title is 18/24 with InNoData's 8px gap below it; a 40px line box gives both, and its
+   extra 8px on top is why the padding above is 248px, not 240 + 16. */
+ue-accessibility-panel .accessibility-list-empty::first-line,
+ue-accessibility-passed-tab:empty::first-line {
+    color: var(--guido-color-neutral-700);
+    font-size: 18px;
+    line-height: 40px;
+}
+
+/* Card actions: Ignore / Un-ignore / Auto-tune are neutral, Apply is primary */
+ue-accessibility-panel .e2e-ignore-button > .button,
+ue-accessibility-panel .e2e-unignore-button > .button,
+ue-accessibility-panel .e2e-auto-tune-button > .button {
+    border: none;
+    background-color: var(--guido-color-neutral-200);
+    color: var(--guido-color-neutral-800);
+}
+
+ue-accessibility-panel .e2e-ignore-button > .button .icon-button,
+ue-accessibility-panel .e2e-unignore-button > .button .icon-button,
+ue-accessibility-panel .e2e-auto-tune-button > .button .icon-button {
+    color: var(--guido-color-neutral-800);
+}
+
+ue-accessibility-panel .e2e-ignore-button > .button:hover:not(:disabled,.disabled),
+ue-accessibility-panel .e2e-unignore-button > .button:hover:not(:disabled,.disabled),
+ue-accessibility-panel .e2e-auto-tune-button > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-neutral-100);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button {
+    border: none;
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-primary-0);
+}
+
+/* Re-run check button (header control). Stripo tints the rotate icon with
+   --ue-primary-color; Figma DT-33912 wants Insider primary. Not inside
+   ue-accessibility-panel, so scoped by its own e2e class. */
+.e2e-accessibility-refresh .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+/* Help-icon hint. The popover is portalled outside the panel, so it cannot be
+   scoped to ue-accessibility-panel. Stripo tints the link with --ue-primary-color. */
+.ue-popover.dark,
+.ue-popover.dark-tiny {
+    border-radius: 4px;
+    background: var(--guido-color-gray-800);
+    box-shadow: 0 15px 17.5px rgb(0 0 0 / 10%), 0 8px 5px rgb(0 0 0 / 10%);
+    color: var(--guido-color-white);
+    font-size: 13px;
+    line-height: 16px;
+}
+
+.ue-popover.dark .popup-pointer ue-icon-component svg,
+.ue-popover.dark-tiny .popup-pointer ue-icon-component svg {
+    fill: var(--guido-color-gray-800);
+}
+
+/* Any anchor in the hint, not just the ue-description wrapper: the accessibility
+   checker's "Read more … ACT Rules Community Group forum." link renders outside it
+   and would otherwise keep Stripo's primary tint, unreadable on the dark surface.
+   The ue-description forms match Stripo's own \`.ue-popover.dark-tiny ue-description a\`
+   specificity; this file is appended last, so the tie goes to Figma's white link. */
+.ue-popover.dark a,
+.ue-popover.dark-tiny a,
+.ue-popover.dark ue-description a,
+.ue-popover.dark-tiny ue-description a {
+    color: var(--guido-color-white);
+    text-decoration: underline;
+}
+
+/* Stripo ships \`ue-description a { display: none }\`, which hides the per-rule "Read more"
+   link even though it already carries the right ACT/Deque URL. Re-show only those links,
+   keyed by host, so no other editor hint starts showing links Stripo meant to hide. */
+.ue-popover ue-description a[href^="https://act-rules.github.io/"],
+.ue-popover ue-description a[href^="https://dequeuniversity.com/"] {
+    display: inline;
+}
+`;
+export {
+  e as default
+};

package/dist/static/styles/components/recommendation-strategy.css.js

@@ -49,8 +49,11 @@ const n = `.strategy-control-header {
     white-space: nowrap;
 }
 
-.strategy-control-cta.primary > .button {
+.strategy-control-cta.primary > .button:disabled,
+.strategy-control-cta.primary > .button.disabled {
+    opacity: 1;
     color: var(--guido-color-gray-800);
+    cursor: default;
 }
 
 .strategy-control-name-band {
@@ -68,39 +71,6 @@ const n = `.strategy-control-header {
     line-height: 24px;
 }
 
-/* Each skeleton mirrors the footprint of the element it stands in for, so retiring
-   the loading state does not shift the panel. */
-.guido-skeleton--strategy-title {
-    width: 366px;
-    height: 38px;
-}
-
-.guido-skeleton--strategy-description {
-    width: 366px;
-    height: 48px;
-}
-
-.guido-skeleton--strategy-cta {
-    width: 175px;
-    height: 40px;
-}
-
-.guido-skeleton--strategy-name {
-    width: 398px;
-    height: 48px;
-}
-
-.strategy-control-skeleton-row {
-    display: flex;
-    gap: 16px;
-    padding: 0 16px 16px;
-}
-
-[data-strategy-loading-state] .guido-skeleton {
-    display: block;
-}
-
-
 .strategy-control-actions {
     display: flex;
     align-items: center;

package/dist/static/styles/variables.css.js

@@ -14,8 +14,10 @@ const o = `:host {
     --guido-color-gray-0: #F9F9F9;
     --guido-color-neutral-800: #222938;
     --guido-color-neutral-700: #2C3546;
+    --guido-color-neutral-500: #5D6980;
     --guido-color-neutral-200: #DCDFE6;
     --guido-color-neutral-100: #EFF2F4;
+    --guido-color-warning-500: #FFBF00;
     --guido-color-danger-300: #e84342;
     --guido-color-danger-500: #DC2A2A; 
     --guido-box-shadow: 0 4px 12px 0 rgba(44,53,70,0.15);

package/dist/stores/editor.js

@@ -6,6 +6,9 @@ const o = e("guidoEditor", {
     isSaveAsTemplateDrawerOpen: !1,
     isVersionHistoryOpen: !1,
     isPreviewModeOpen: !1,
+    isAccessibilityTestingOpen: !1,
+    imagesHidden: !1,
+    colorVisionDeficiency: "",
     editorVisualMode: "desktop",
     hasChanges: !1,
     isStripoInitialized: !1,
@@ -17,20 +20,26 @@ const o = e("guidoEditor", {
   }),
   getters: {
     // Middle Slot
-    isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen,
+    isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isAccessibilityTestingOpen,
     isUndoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isRedoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isCodeEditorButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isPreviewButtonDisabled: (i) => i.loadingStatus,
     isViewOptionsDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     // Right Slot
+    // Normal editing: neither the version-history nor the accessibility-testing
+    // takeover, both of which swap the right slot — kebab included — for their own
+    // controls, so anything anchored to it has nothing to point at.
+    isNormalMode: (i) => !i.isVersionHistoryOpen && !i.isAccessibilityTestingOpen,
     isVersionHistoryButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isExportButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isSaveAsButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isTestButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
-    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen,
-    // Autosave
-    isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen
+    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen || i.isAccessibilityTestingOpen,
+    // Autosave. Accessibility testing belongs with the other takeovers: the mode drives
+    // Stripo through simulations (hidden images, color-vision filters) that a save
+    // landing mid-simulation would capture.
+    isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen && !i.isAccessibilityTestingOpen
   }
 });
 export {

package/dist/stores/onboarding.js

@@ -1,64 +1,75 @@
-import { useOnboardingApi as e } from "../services/onboardingApi.js";
-import { defineStore as s } from "pinia";
-const t = () => ({
+import { useOnboardingApi as t } from "../services/onboardingApi.js";
+import { defineStore as e } from "pinia";
+const r = () => ({
   cardIndex: 0,
   isActive: !1,
   config: []
 }), a = () => ({
   onboardings: {
-    newVersionPopup: t(),
-    genericOnboarding: t(),
-    textBlockOnboarding: t(),
-    versionHistoryOnboarding: t(),
-    ampOnboarding: t(),
-    itemsOnboarding: t(),
-    recommendationStrategyOnboarding: t()
+    newVersionPopup: r(),
+    genericOnboarding: r(),
+    textBlockOnboarding: r(),
+    versionHistoryOnboarding: r(),
+    ampOnboarding: r(),
+    itemsOnboarding: r(),
+    editorTabBarOnboarding: r()
   },
   userModalState: {},
-  isFetched: !1
-}), c = s("guidoOnboarding", {
+  isFetched: !1,
+  // Onboardings the user closed in this page session. The saved state cannot stand in
+  // for it: close() fills it even when the save fails, and a test stub can keep
+  // reporting "unseen". Being wiped by another onboarding is deliberately not in here,
+  // so an interrupted tour can come back once that other one is done.
+  closedThisSession: []
+}), g = e("guidoOnboarding", {
   state: () => a(),
   getters: {
-    getOnboarding: (n) => (o) => n.onboardings[o],
-    isActive: (n) => (o) => n.onboardings[o].isActive,
-    getCurrentCard: (n) => (o) => {
-      const i = n.onboardings[o];
-      return i.config[i.cardIndex];
+    getOnboarding: (n) => (i) => n.onboardings[i],
+    isActive: (n) => (i) => n.onboardings[i].isActive,
+    getCurrentCard: (n) => (i) => {
+      const o = n.onboardings[i];
+      return o.config[o.cardIndex];
     },
     getGenericCurrentCard: (n) => {
-      const { genericOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { genericOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getTextBlockCurrentCard: (n) => {
-      const { textBlockOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { textBlockOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getVersionHistoryCurrentCard: (n) => {
-      const { versionHistoryOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { versionHistoryOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getAmpCurrentCard: (n) => {
-      const { ampOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { ampOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
     getItemsCurrentCard: (n) => {
-      const { itemsOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+      const { itemsOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
     },
-    getRecommendationStrategyCurrentCard: (n) => {
-      const { recommendationStrategyOnboarding: o } = n.onboardings;
-      return o.config[o.cardIndex];
+    getEditorTabBarCurrentCard: (n) => {
+      const { editorTabBarOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
+    },
+    // Every tab-bar tour card after the first points at a row inside the kebab menu,
+    // so the menu has to stay open under them.
+    isEditorActionsMenuPinned: (n) => {
+      const { editorTabBarOnboarding: i } = n.onboardings;
+      return i.isActive && i.cardIndex > 0;
     },
-    shouldShowOnboarding: (n) => (o) => {
-      const i = n.userModalState.Guido;
-      return o === "newVersionPopup" && (i != null && i.genericOnboarding) ? !1 : i ? !i[o] : !0;
+    shouldShowOnboarding: (n) => (i) => {
+      const o = n.userModalState.Guido;
+      return i === "newVersionPopup" && (o != null && o.genericOnboarding) ? !1 : o ? !o[i] : !0;
     }
   },
   actions: {
     closeOtherOnboardings(n) {
-      Object.keys(this.onboardings).forEach((o) => {
-        const i = o;
-        i !== n && this.onboardings[i].isActive && (this.onboardings[i].isActive = !1, this.onboardings[i].cardIndex = 0, this.onboardings[i].config = []);
+      Object.keys(this.onboardings).forEach((i) => {
+        const o = i;
+        o !== n && this.onboardings[o].isActive && (this.onboardings[o].isActive = !1, this.onboardings[o].cardIndex = 0, this.onboardings[o].config = []);
       });
     },
     start(n) {
@@ -68,7 +79,12 @@ const t = () => ({
       this.shouldShowOnboarding(n) && !this.isActive(n) && this.start(n);
     },
     async close(n) {
-      await this.setUserModalState(n, "true", "Guido"), this.onboardings[n].isActive = !1, this.onboardings[n].cardIndex = 0, this.onboardings[n].config = [];
+      this.closedThisSession.includes(n) || this.closedThisSession.push(n), this.onboardings[n].isActive = !1, this.onboardings[n].cardIndex = 0, this.onboardings[n].config = [];
+      try {
+        await this.setUserModalState(n, "true", "Guido");
+      } catch (i) {
+        console.warn("guido:onboarding:close-not-persisted", n, i);
+      }
     },
     next(n) {
       this.onboardings[n].cardIndex < this.onboardings[n].config.length - 1 && this.onboardings[n].cardIndex++;
@@ -76,15 +92,15 @@ const t = () => ({
     previous(n) {
       this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
     },
-    updateCardPosition(n, o, i) {
-      const r = this.onboardings[n].config[o];
-      r && (r.top = i.top, r.position = i.position);
+    updateCardPosition(n, i, o) {
+      const s = this.onboardings[n].config[i];
+      s && (s.top = o.top, s.position = o.position);
     },
-    setConfig(n, o) {
-      this.onboardings[n].config = o ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
+    setConfig(n, i) {
+      this.onboardings[n].config = i ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
     },
     async onDiscoverNowClicked() {
-      await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido"), this.start("genericOnboarding");
+      this.start("genericOnboarding"), await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido");
     },
     onRemindMeLater() {
       sessionStorage.setItem("newVersionPopupDismissed", "true");
@@ -98,19 +114,19 @@ const t = () => ({
     async fetchUserModalState() {
       if (this.isFetched)
         return;
-      const { fetchUserModalState: n } = e();
+      const { fetchUserModalState: n } = t();
       try {
-        const o = await n();
-        this.userModalState = o, this.isFetched = !0;
+        const i = await n();
+        this.userModalState = i, this.isFetched = !0;
       } catch {
       }
     },
-    async setUserModalState(n, o, i) {
-      const { setUserModalState: r } = e();
-      await r(n, o, i), this.isFetched = !1, await this.fetchUserModalState();
+    async setUserModalState(n, i, o) {
+      const { setUserModalState: s } = t();
+      await s(n, i, o), this.isFetched = !1, await this.fetchUserModalState();
     }
   }
 });
 export {
-  c as useOnboardingStore
+  g as useOnboardingStore
 };