@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/Popup.css

@@ -0,0 +1,413 @@
+.Popup {
+  --Page-headerBottom: var(--page-header-h);
+  --Popup-gap: 0px;
+
+  @apply h-auto bg-white shadow-lg;
+}
+
+.Popup-content {
+  @apply size-full;
+}
+
+.Popup-content > .frame {
+  > .Widget {
+    @apply border-none;
+
+    > .TC > .TabBar {
+      @apply -mx-4;
+    }
+  }
+
+  > .Widget-controls:empty {
+    @apply hidden;
+  }
+}
+
+.Popup:not(.is-visible) {
+  @apply z-[-1];
+}
+
+.Popup-close {
+  @apply btu-button btu-button-text-hidden btu-button-gray bg-white before:btu-icon before:btu-icon-x hover:bg-gray-100;
+}
+
+/* Hide full-width "Back" bar in favor of the close popup "X" icon */
+.Popup-heading {
+  @apply hidden;
+}
+
+.Popup.is-local {
+  @apply fixed h-auto scale-y-0 overflow-auto rounded-lg border border-gray-200;
+
+  &[data-tether-rx='l'] {
+    @apply left-[--Tether-rl] right-auto;
+
+    > .Popup-content {
+      @apply max-w-[calc(100vw-var(--Tether-rl)-var(--Popup-gap))];
+    }
+  }
+
+  &[data-tether-rx='r'] {
+    @apply left-auto right-[calc(100vw-var(--Tether-rl)-var(--Tether-rw))];
+
+    > .Popup-content {
+      @apply max-w-[calc(var(--Tether-rl)+var(--Tether-rw)-var(--Popup-gap))];
+    }
+  }
+
+  &[data-tether-ry='t'] {
+    @apply bottom-auto top-[calc(var(--Tether-rt)+var(--Tether-rh))] max-h-[calc(100dvh-var(--Tether-rt)-var(--Tether-rh)-var(--Popup-gap))] origin-top;
+
+    > .Popup-content {
+      @apply max-h-[calc(100dvh-var(--Tether-rt)-var(--Tether-rh)-var(--Popup-gap))];
+    }
+  }
+
+  &[data-tether-ry='b'] {
+    @apply bottom-[calc(100dvh-var(--Tether-rt))] top-auto max-h-[calc(100dvh-var(--Page-headerBottom)-var(--Popup-gap))] origin-bottom;
+
+    > .Popup-content {
+      @apply max-h-[calc(var(--Tether-rt)-var(--Page-headerBottom)-var(--Popup-gap))];
+    }
+  }
+}
+
+/* ----------
+   Context-specific styles for framed-in UIs in popups... where should these go?
+  ------------------------------------------------------------------------------ */
+
+.Popup[name='siteSwitch'] > .Popup-content {
+  @apply w-[22.3rem];
+}
+
+.frame[name='siteSwitch'] {
+  form {
+    @apply flex flex-col gap-2 pt-2;
+  }
+
+  .SearchInput {
+    @apply -order-1 mx-4 w-auto;
+  }
+
+  .ComboInput {
+    @apply mx-4 w-auto;
+  }
+
+  [name='siteSwitchResults'] {
+    @apply flex flex-col border-t border-t-gray-200;
+
+    &:has(.Pagination) .LinkTable {
+      @apply border-b;
+    }
+  }
+
+  .LinkTable {
+    @apply py-2;
+
+    > li {
+      @apply rounded-none;
+
+      > a {
+        @apply px-4;
+      }
+    }
+  }
+
+  .Pagination {
+    @apply order-1 my-3 me-4 ms-auto;
+  }
+}
+
+/* Source Data Popup styles */
+.Popup[name='contentMetadata'] {
+  .Widget > .RCIG {
+    @apply pb-6 pt-[58px];
+
+    > .RCIG-expandAll {
+      @apply top-2;
+    }
+  }
+
+  /* If item has no inner content, hide the expand/collapse button */
+  .RCIG-title:not(:has(~ .objectInputs:not(:empty))) {
+    @apply after:hidden;
+  }
+
+  .RCIG-list {
+    @apply mb-0;
+  }
+
+  .RCIG-item > .CIG {
+    @apply pt-6;
+  }
+
+  .RCIG-item {
+    @apply bg-gray-50;
+
+    /* Grid accounts for 3 RCIG actions to right of divider by default: multisort, remove, more menu */
+    @apply grid grid-cols-[auto]; /* minmax used to set the initial height of the RCIG-item to reduce shift while loading. */
+
+    .repeatableForm {
+      @apply -ml-2 flex flex-col gap-[15px];
+    }
+
+    .repeatableForm .metadataEntryWrapper span.displayKey {
+      @apply block text-[0.75rem] text-[var(--color-gray5)];
+    }
+
+    .repeatableForm .metadataEntryWrapper span.displayValue {
+      @apply text-[var(--color-black)];
+    }
+
+    &.toggleVisible:not(.is-collapsed.collapsed) .objectInputs {
+      display: flex;
+      @apply ps-6;
+    }
+  }
+
+  /* ::before - item number | ::after - expand/collapse "button" */
+  .RCIG-title {
+    @apply ps-4;
+
+    &::before {
+      content: unset !important;
+      @apply -ml-6 mr-2;
+    }
+
+    .RCIG-item.is-collapsed > & {
+      @apply ps-1;
+      &::before {
+        @apply hidden;
+      }
+    }
+    .RCIG-item.is-collapsed > &,
+    .RCIG-item.is-gridItem > & {
+      @apply ps-4;
+    }
+  }
+}
+
+/* Query Field Popup styles */
+.Popup[name='queryField'] {
+  .Popup-content {
+    @apply grid [grid-template-areas:'title'_'form'_'actions'] ![grid-template-rows:auto_1fr_auto];
+  }
+
+  .SearchWidget-form {
+    @apply [grid-area:form];
+  }
+
+  .ActionBar {
+    @apply [grid-area:actions];
+  }
+}
+
+.Popup-marker {
+  @apply hidden;
+}
+
+/* Popovers have light-dismissal behavior, so we don't need a close button. */
+.Popup[popover] {
+  @apply p-0 [transition:transform_0.6s_cubic-bezier(0.9,0,0.1,1)_allow-discrete];
+  .Popup-close {
+    @apply hidden;
+  }
+}
+
+.Popup[popover].is-ready {
+  @apply scale-0;
+
+  &.is-visible {
+    @apply scale-100;
+  }
+}
+
+/* Guide Field Popup styles */
+.Popup-content .Guide-controls {
+  @apply relative right-[unset] top-[unset] ms-auto;
+
+  .Guide-close {
+    @apply hidden;
+  }
+}
+
+/* ToolUserWorksInProgress & ToolUserSharedPreviews popups */
+/* TODO: add WIPs selector here */
+.frame[name='sharedPreview'],
+.frame[name='wip'] {
+  @apply h-full;
+}
+
+.Popup.is-local[data-popup-source-class='rte2-toolbar-add-table']
+  .Popup-content {
+  @apply max-w-[unset];
+
+  .plugin-popup {
+    @apply col-span-full;
+  }
+}
+
+.Popup[name='lookingGlass'] ul:has(.LookingGlass-actions) {
+  @apply justify-center;
+}
+
+.Popup[data-popup-source-class~='CollectionList-item-edit']
+  .icon-action-delete {
+  @apply -ms-4;
+}
+
+/* Hide the original title in popups because we're cloning it into a new location.
+  [data-tab](which are btu-cig-cluster titles), ContentEdit-title, and more
+  are exempt from being hidden because those exist in the right location. */
+.plugin-popup:not(
+    :has(.Page-loginDialog),
+    .SearchWidget,
+    .Widget[name='Contextual-comments'],
+    .Widget[name^='objectId-' i]:has(.Admin > :where(.Admin-nav, .Admin-main)),
+    [name='notifications']
+  ) {
+  :where(h1, h2, h3, .Widget-title, .Guide-title):not(
+      [data-tab],
+      .ContentEdit-title,
+      .ContentEdit-revisionInfo,
+      .ContentEditDrawer-header .Widget-title,
+      .Diff-message,
+      .SearchFields-heading,
+      .SearchFields-subheading,
+      .StyleEmbeddedContent-heading,
+      .AuthorPersona-title,
+      .ContentEdit-workflowTitle,
+      .PrePublishPopup .Widget-title,
+      .Widget.is-collapsible .Widget-title
+    ) {
+    @apply !hidden;
+  }
+  /* Show headings inside certain frames or forms */
+  :is(.PostPublish-form)
+    :where(h1, h2, h3, .Widget-title, .Guide-title):not(
+      [data-tab],
+      .ContentEdit-title,
+      .Diff-message,
+      .SearchFields-heading,
+      .SearchFields-subheading
+    ) {
+    @apply ![display:unset];
+  }
+}
+
+.plugin-popup :where(.SearchWidget-title) {
+  @apply !hidden;
+}
+
+/* Reset the position of the popover so it can be repositioned properly with Tether coordinates.
+  Without these resets, setting 'bottom' or 'right' won't actually work. */
+[popover] {
+  &[data-tether-ry='t'] {
+    bottom: unset;
+  }
+  &[data-tether-rx='r'] {
+    left: unset;
+  }
+  &[data-tether-ry='b'] {
+    top: unset;
+  }
+  &[data-tether-rx='l'] {
+    right: unset;
+  }
+}
+
+.Popup[name='contentImages'] {
+  .frame[name='contentImages'] {
+    @apply py-6;
+
+    .Widget > btu-toggleable {
+      @apply pb-6;
+    }
+  }
+}
+
+.Popup[name^='conversation-'],
+.Popup[name='toolUserSaveSearch'] {
+  @apply [--popup-h:auto];
+}
+
+/* Available schedules popup */
+.frame[name='scheduleList'] {
+  ul {
+    @apply col-span-full px-2 py-4;
+  }
+
+  li {
+    @apply flex rounded-lg;
+
+    &:has(> a:hover) {
+      @apply bg-gray-100;
+    }
+
+    > a {
+      @apply my-2 !block w-full truncate px-2 text-sm text-gray-700 no-underline;
+    }
+  }
+}
+
+/* Authorship widget popup */
+.Popup[name='queryGroupingDataSupplierOverlayToolPage']:not([popover])
+  > .Popup-content {
+  @apply grid-rows-[max-content_1fr_auto];
+
+  .Widget-title {
+    @apply col-[1/2] row-[1/2];
+  }
+
+  .Popup-close {
+    @apply z-[9] col-[2/3] row-[1/2];
+  }
+}
+
+.frame[name='queryGroupingDataSupplierOverlayToolPage'] {
+  @apply contents;
+
+  .Widget {
+    @apply col-span-full row-span-full grid-rows-subgrid;
+
+    /* Prevents elements from taking up space in first row */
+    :is(form, .Widget-controls) {
+      @apply contents;
+    }
+
+    .Link {
+      @apply btu-button btu-button-fill-none btu-button-gray btu-button-sm absolute right-[4.25rem] top-[1.38rem] z-10 w-max btu-button-container-none before:btu-icon before:btu-icon-file-input;
+    }
+
+    .pagination {
+      @apply my-[22px] justify-self-end [grid-row:3/4];
+
+      .ComboInput:not([aria-expanded='true']) {
+        @apply border-transparent;
+      }
+
+      &:has(.next) .ComboInput {
+        @apply rounded-e-none;
+      }
+
+      &:has(.previous) .ComboInput {
+        @apply rounded-s-none;
+      }
+    }
+
+    .DT-wrapper {
+      @apply col-[fullbleed-start/fullbleed-end] overflow-y-auto border-t [grid-row:2/3];
+
+      table tbody th:first-child {
+        @apply bg-transparent text-sm;
+      }
+    }
+  }
+}
+
+/* Author persona preview sample popup */
+.Popup[name='previewSample'] .Widget {
+  --space: 1rem;
+
+  @apply h-full overflow-y-auto bg-gray-100;
+}

package/src/legacy/tool-ui/src/PostPublish.ts

@@ -0,0 +1,12 @@
+import onFind from './dom/onFind'
+
+onFind(
+  '.Popup.loaded[name=PostPublishActionsPage] .PostPublish-form',
+  (popup: HTMLElement) => {
+    const postPublishMessage = popup.querySelector('.Message')
+    postPublishMessage?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'end',
+    })
+  },
+)

package/src/legacy/tool-ui/src/PrePublish.ts

@@ -0,0 +1,63 @@
+import onFind from './dom/onFind'
+
+onFind('.PrePublish', (popup: HTMLElement) => {
+  const close = popup.querySelector<HTMLElement>('.PrePublish-cancel')
+  const id = popup.dataset.prepublish
+  const form = document.querySelector<HTMLFormElement>(
+    `form[data-content-id="${id}"]`,
+  )
+  const submitButton = popup.querySelector<HTMLButtonElement>(
+    'button[type="submit"]',
+  )
+
+  // Trigger legacy jQuery event for hooks like navigate away.
+  if (submitButton) {
+    submitButton.addEventListener('click', () => {
+      $(form as any).trigger('submit')
+    })
+  }
+
+  close?.addEventListener('click', () => {
+    // User closed the popup and chose to continue then submit without interferrence.
+    if (form) {
+      const input = form.querySelector<HTMLInputElement>(
+        'input[name="prePublish"]',
+      )
+      const button = form.querySelector<HTMLButtonElement>(
+        'button[name="prePublishDisplay"]',
+      )
+
+      input?.remove()
+
+      if (button) {
+        button.addEventListener(
+          'click',
+          () => {
+            if (input) {
+              form.appendChild(input)
+            }
+          },
+          { once: true },
+        )
+      }
+    }
+
+    popup.classList.remove('is-visible')
+
+    if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+      popup.dispatchEvent(
+        new CustomEvent('legacy.popup.close', {
+          bubbles: true,
+        }),
+      )
+    }
+  })
+
+  const hiddenChildren = popup.querySelectorAll(
+    '.CIG:not(.TC) > [data-tab].TC-unselected',
+  )
+
+  Array.from(hiddenChildren).forEach((child) => {
+    child.classList.remove('TC-unselected')
+  })
+})

package/src/legacy/tool-ui/src/Preview.css

@@ -0,0 +1,134 @@
+html.should-upscale div.Preview-overlayLabel {
+  @apply !translate-x-0 !translate-y-0 !scale-[calc(1_+_(1_-_var(--PreviewScale,1)))];
+}
+
+body.overlay-hidden .Preview-overlay {
+  @apply invisible;
+}
+
+.is-previewToEditDisabled .Preview-overlayFrame {
+  @apply hidden;
+}
+
+.Preview-overlayFrame {
+  @apply [color-scheme:light];
+}
+
+.Page.is-inIframe {
+  @apply h-auto *:bg-transparent;
+}
+
+/*
+  All colors used are light-mode only colors since the Preview is always shown in light mode.
+*/
+
+.Preview-overlay {
+  @apply absolute flex cursor-pointer flex-col bg-transparent opacity-0 [background-image:theme(backgroundImage.rect-outline-default)];
+
+  &.is-visible,
+  &.is-selected,
+  &.is-hover {
+    @apply opacity-100;
+  }
+
+  &.is-locked {
+    @apply pointer-events-none bg-[color:oklch(theme(colors.gray.light.100))] opacity-70;
+  }
+
+  &:not(.is-locked).is-hover {
+    @apply [background-image:theme(backgroundImage.rect-outline-hover)];
+
+    > .Preview-overlayLabel {
+      @apply bg-[color:oklch(theme(colors.gray.light.50))] text-[color:oklch(theme(colors.gray.light.700))];
+    }
+  }
+
+  &:not(.is-locked).is-selected {
+    @apply [background-image:theme(backgroundImage.rect-outline-active)];
+
+    > .Preview-overlayLabel {
+      @apply bg-[color:oklch(theme(colors.primary.light.50))] text-[color:oklch(theme(colors.primary.light.700))];
+    }
+  }
+
+  &:not(.is-locked).is-shared {
+    @apply [background-image:theme(backgroundImage.rect-outline-primary)];
+
+    > .Preview-overlayLabel {
+      @apply bg-[color:oklch(theme(colors.primary.light.600))] text-[color:theme(colors.white.light)];
+    }
+  }
+
+  &.is-removed {
+    @apply pointer-events-none invisible;
+  }
+
+  &.is-shared {
+    @apply bg-transparent;
+  }
+}
+
+.Preview-overlayLabel {
+  @apply absolute z-[1] inline-flex w-max origin-top-left translate-x-0 translate-y-0 scale-[--PreviewScale] flex-row items-center bg-[color:theme(colors.white.light)] px-2 py-0.5 text-xs font-medium capitalize text-[color:oklch(theme(colors.gray.light.500))];
+}
+
+.Preview-overlayTooltip {
+  --tooltip-scale: 1;
+  --tooltip-tail-size: calc(7px * var(--tooltip-scale));
+  --tooltip-tail-bottom: conic-gradient(
+      from -30deg at bottom,
+      #0000,
+      #000 1deg 60deg,
+      #0000 61deg
+    )
+    bottom / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
+  --tooltip-tail-top: conic-gradient(
+      from 150deg at top,
+      #0000,
+      #000 1deg 60deg,
+      #0000 61deg
+    )
+    top / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
+  --tooltip-bg: oklch(theme(colors.gray.light.900));
+  --tooltip-shape: var(--tooltip-tail-top);
+  --tooltip-y: calc(3px * var(--tooltip-scale));
+
+  @apply pointer-events-none absolute z-10 m-0 grid min-w-fit origin-left translate-x-[calc(-1px_*_var(--tooltip-scale))] translate-y-[var(--tooltip-y,0)] scale-[--tooltip-scale] select-none gap-2 rounded-lg bg-[--tooltip-bg] p-3 text-start text-md opacity-0 shadow-2xl drop-shadow-md transition-[opacity_0.15s_ease_transform_0.15s_ease] [inline-size:max-content] [inset-block-end:calc(100%_+_calc(0.75ch_*_var(--tooltip-scale)))] [inset-inline-start:0%] [line-height:initial] [max-inline-size:25ch];
+
+  &::after {
+    /* inset moves the tail to the right */
+    @apply absolute z-[-1] bg-[--tooltip-bg] content-[''] [-webkit-mask:--tooltip-shape] [border-block-end:var(--tooltip-tail-size)_solid_transparent] [inset:0_0_0_calc(-100%_+_calc(var(--tooltip-tail-size)_*_4))] [mask:--tooltip-shape];
+  }
+
+  &:is([position='top']) {
+    --tooltip-shape: var(--tooltip-tail-bottom);
+    @apply after:[border-block-end:--tooltip-tail-size_solid_transparent] after:[inset-block-end:calc(var(--tooltip-tail-size)_*_-1)];
+  }
+
+  &:is([position='bottom']) {
+    --tooltip-shape: var(--tooltip-tail-top);
+    @apply [inset-block-end:auto] [inset-block-start:calc(100%_+_var(--tooltip-tail-size))] after:[border-block-start:--tooltip-tail-size_solid_transparent] after:[inset-block-start:calc(var(--tooltip-tail-size)_*_-1)];
+  }
+
+  &.is-grid {
+    @apply grid grid-cols-[1fr_1fr] justify-items-end gap-[3px] text-nowrap text-xs text-[color:theme(colors.white.light)];
+
+    /* first column */
+    :nth-child(odd) {
+      @apply justify-self-start font-medium capitalize;
+    }
+
+    /* second column */
+    :nth-child(even) {
+      @apply justify-self-end font-normal;
+    }
+  }
+}
+
+.Preview-imageOverlay {
+  @apply bg-transparent;
+
+  &:is(.is-visible, :hover, :focus-visible, :active) > .Preview-overlayTooltip {
+    @apply opacity-100 delay-150 [--tooltip-y:calc(-1px)];
+  }
+}

package/src/legacy/tool-ui/src/PrivilegeAccessWidget.css

@@ -0,0 +1,27 @@
+.Widget[data-internal-name='com.psddev.cms.privilege.PrivilegeAccessWidget'] {
+  > .CIG {
+    @apply pb-0 before:content-none;
+  }
+
+  > .CIG > .CIG-row {
+    @apply mt-0 py-4;
+  }
+
+  > .CIG > .CIG-row > .CIG-small {
+    @apply mt-1.5;
+  }
+
+  > .CIG > .CIG-row > .CIG-large {
+    @apply mt-0;
+
+    /* nested CIGs */
+    > .toggleable-form > .CIG {
+      @apply mt-4 before:content-none;
+    }
+
+    > .toggleable-form
+      > .CIG:not(:has(> .CIG-row > .CIG-large.is-previewable)) {
+      @apply border-0;
+    }
+  }
+}