@brightspot/ui 3.0.1-cms-ui-migration.4 → 3.0.1

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

@@ -1,413 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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;
-    }
-  }
-}