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

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

@@ -1,223 +0,0 @@
-import Cookies from 'js-cookie'
-import create from './dom/create'
-import onFind from './dom/onFind'
-import Preview from './main/webapp/v4/ViewPreview'
-
-onFind('.ContentSummary-info', (info: HTMLElement) => {
-  contentSummaryEvent(info)
-})
-
-onFind('input[data-summary-url]', (element: HTMLElement) => {
-  const updateButton = () => {
-    const containerElement = element.parentElement
-    if (containerElement) {
-      let contentSummaryButton: HTMLButtonElement | null
-      if (
-        containerElement.tagName.includes('-') &&
-        containerElement.parentElement
-      ) {
-        contentSummaryButton =
-          containerElement.parentElement.querySelector<HTMLButtonElement>(
-            '.ContentSummary-info',
-          )
-      } else {
-        contentSummaryButton =
-          containerElement.querySelector<HTMLButtonElement>(
-            '.ContentSummary-info',
-          )
-      }
-      const summaryUrl = element.dataset.summaryUrl
-      if (summaryUrl) {
-        if (contentSummaryButton) {
-          contentSummaryButton.setAttribute('data-summary-url', summaryUrl)
-        } else {
-          contentSummaryButton = create('button', {
-            class: 'ContentSummary-info',
-            'aria-haspopup': true,
-            'data-summary-url': summaryUrl,
-          })
-
-          const objectIdEdit =
-            containerElement.querySelector<HTMLElement>('.objectId-edit')
-          if (objectIdEdit) {
-            objectIdEdit.insertAdjacentElement('afterend', contentSummaryButton)
-          }
-        }
-      }
-      if (contentSummaryButton) {
-        updateDataSummaryUrl(element, contentSummaryButton)
-      }
-    }
-  }
-  updateButton()
-  const observer = new MutationObserver(updateButton)
-
-  observer.observe(element, {
-    attributes: true,
-    attributeFilter: ['data-summary-url'],
-  })
-})
-
-function updateDataSummaryUrl(
-  element: HTMLElement,
-  contentSummaryButton: HTMLButtonElement,
-) {
-  const dataSummaryUrl = element.dataset.summaryUrl
-  if (dataSummaryUrl) {
-    contentSummaryButton.setAttribute('data-summary-url', dataSummaryUrl)
-  } else {
-    if (contentSummaryButton) {
-      contentSummaryButton.remove()
-    }
-  }
-}
-
-export const contentSummaryEvent = (info: HTMLElement) => {
-  let summary: HTMLElement | null = null
-
-  info.addEventListener('click', handler)
-  info.addEventListener('keydown', (event) => {
-    if (
-      event.key === 'Tab' &&
-      summary &&
-      summary.classList.contains('is-open')
-    ) {
-      handler(event)
-    }
-  })
-
-  async function handler(event: Event) {
-    event.preventDefault()
-    event.stopImmediatePropagation()
-    event.stopPropagation()
-
-    document
-      .querySelectorAll('.ContentSummary-popup')
-      .forEach((popup: Element) => {
-        $(popup).popup('close')
-      })
-
-    const target = event.target
-
-    if (!(target instanceof HTMLElement)) {
-      return
-    }
-
-    const url = target.getAttribute('data-summary-url')
-    const error = target.querySelector('.error-message')
-
-    if (info.hasAttribute('aria-expanded')) {
-      info.removeAttribute('aria-expanded')
-    } else {
-      info.setAttribute('aria-expanded', 'true')
-
-      // Trigger live region if already displayed prior.
-      if (summary) {
-        const content = summary.innerHTML
-        summary.innerHTML = ''
-        summary.innerHTML = content
-      }
-    }
-
-    if (!url && !error) {
-      return
-    }
-
-    if (!summary) {
-      if (error) {
-        summary = create('div', {
-          className: 'ContentSummary error-summary',
-          innerHTML: error.innerHTML,
-        })
-      } else if (url) {
-        const csrf = Cookies.get('bsp.csrf')
-
-        if (csrf) {
-          const response = await fetch(url, {
-            headers: {
-              'Brightspot-CSRF': csrf,
-            },
-          })
-
-          summary = create('div', {
-            className: 'ContentSummary',
-            innerHTML: await response.text(),
-          })
-
-          summary.focus()
-        }
-      }
-
-      if (summary) {
-        document.body.appendChild(summary)
-      }
-    }
-
-    info.classList.toggle('is-active')
-    target.previousElementSibling?.classList.toggle('is-active')
-
-    if (summary) {
-      summary.classList.toggle('is-open')
-
-      const $popup = $(summary).popup()
-      $popup
-        .popup('container')
-        .addClass('ContentSummary-popup')
-        .toggleClass(
-          'is-preview',
-          summary?.querySelector('.Widget-title.is-preview') !== null,
-        )
-      $popup.popup('source', $(info))
-      $popup.popup('open')
-
-      $popup.closest('.Popup').on('close.popup', () => {
-        info.classList.toggle('is-active')
-        target.previousElementSibling?.classList.toggle('is-active')
-        summary = null
-      })
-
-      const previewFrame = summary.querySelector('.PreviewFrame')
-      if (previewFrame) {
-        const preview = new Preview(previewFrame)
-        preview.isVisible = true
-        preview.reloadPreview()
-
-        // When iframe has loaded post message to disable pointer events so contents
-        // can not be clicked.
-        const observer = new MutationObserver((mutationList) => {
-          mutationList.forEach((mutation) => {
-            mutation.addedNodes.forEach((node) => {
-              if (node instanceof HTMLIFrameElement) {
-                iframePostMessage(node)
-              }
-            })
-            if (
-              mutation.previousSibling &&
-              mutation.previousSibling instanceof HTMLIFrameElement
-            ) {
-              iframePostMessage(mutation.previousSibling)
-            }
-          })
-        })
-
-        observer.observe(previewFrame, {
-          attributes: false,
-          childList: true,
-          subtree: true,
-        })
-      }
-    }
-  }
-}
-
-function iframePostMessage(node: HTMLIFrameElement) {
-  if (node.contentWindow) {
-    node.contentWindow.postMessage(
-      {
-        type: 'BSP.Preview.PointerEvents',
-        value: 'none',
-      },
-      '*',
-    )
-  }
-}

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

@@ -1,54 +0,0 @@
-.DashboardWidget.ContentTemplate.is-expanded {
-  > div:not([class]) {
-    @apply grid grid-cols-subgrid [grid-column:fullbleed-start/fullbleed-end];
-  }
-}
-
-.ContentTemplate .LinkCarousel-item {
-  @apply min-h-[330px] w-[180px] p-0 shadow-md;
-}
-
-.ContentTemplate .LinkCarousel-item > a {
-  @apply flex h-full w-full flex-wrap justify-between bg-white pe-0 hover:bg-gray-100 focus:bg-gray-100;
-}
-
-.ContentTemplate .LinkCarousel-item > a > img {
-  @apply relative h-[240px] w-full bg-white object-cover before:block after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-200;
-}
-
-.ContentTemplate-name {
-  @apply min-h-[88px] w-[142px] p-4 pe-0 text-sm font-medium text-gray-900;
-}
-
-.ContentTemplate-icon {
-  @apply relative flex h-[240px] w-full items-center justify-center bg-white before:btu-icon [&:not([data-icon-name])]:before:btu-icon-circle-dashed before:items-center before:rounded-full before:bg-gray-100 before:p-[14px] before:text-gray-700 before:mix-blend-multiply before:btu-icon-xl after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray-200;
-}
-
-.ContentTemplate .ContentSummary-info {
-  @apply btu-button-gray btu-button-xs mb-0 me-2 ms-0 mt-4 touch-device:btu-button-sm;
-}
-
-/* Styles scrollbar below LinkCarousel */
-.ContentTemplate .LinkCarousel {
-  @apply mb-1 pb-[calc(var(--margin)_-4px)] [grid-column:fullbleed-start/fullbleed-end];
-}
-
-.ContentTemplate .LinkCarousel-group {
-  @apply px-[--margin];
-}
-
-.ContentTemplate.is-expanded .LinkCarousel {
-  @apply mt-2 [&:not(:last-child)]:pb-3;
-}
-
-.ContentTemplate-title {
-  @apply relative flex items-center justify-between py-1.5 [grid-column:main-start/main-end] after:absolute after:-left-[--margin] after:-right-[--margin] after:top-12 after:h-[1px] after:bg-gray-200;
-
-  h3 {
-    @apply text-sm font-semibold text-gray-900;
-  }
-}
-
-.ContentTemplate-add {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-plus;
-}

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

@@ -1,109 +0,0 @@
-.ContentTools {
-  code {
-    @apply font-sans;
-  }
-
-  .TabBar {
-    @apply px-[--space];
-  }
-
-  .TC-panel {
-    @apply p-0 pb-6;
-
-    > form {
-      @apply px-2;
-    }
-  }
-
-  .TC-panel,
-  .TC-panel > form,
-  .TC-panel > form > .fixedScrollable {
-    /* Metadata table at top of Developer tab */
-    > .DT {
-      @apply __static-table mx-2 mt-6 w-[calc(100%-1rem)];
-    }
-
-    /* "View Raw Data" & "Show Deprecated Fields" buttons at top of Developer tab */
-    > ul:first-child {
-      @apply mt-6 flex gap-2 px-2;
-
-      > li > a {
-        @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray;
-      }
-    }
-
-    .ActionBar {
-      @apply static mx-0 mt-4 border-y-0 p-0 [justify-content:start];
-
-      > button {
-        @apply btu-button-outline btu-button-fill-none btu-button-md;
-      }
-    }
-
-    /* Override specificity in ActionBar.css */
-    .ActionBar:not(.is-top) > button:not(.Link) {
-      @apply btu-button-gray;
-    }
-
-    > .CIG-row {
-      @apply pt-0;
-
-      > .CIG-label {
-        @apply py-1 text-sm font-semibold text-gray-700;
-      }
-    }
-
-    > .CIG {
-      @apply px-4 py-0;
-
-      .CIG-row {
-        @apply pt-4;
-      }
-    }
-  }
-
-  .TC-panel-heading {
-    @apply mb-4 mt-6 rounded-lg bg-primary-50 text-primary-800;
-  }
-
-  /* Annotation fields */
-  ul:not(:first-child) {
-    @apply flex flex-col gap-4 px-2;
-
-    > li {
-      @apply flex flex-col gap-2;
-
-      > a {
-        @apply text-sm text-primary-600;
-      }
-
-      > code {
-        @apply text-sm;
-      }
-
-      > .DT {
-        @apply __static-table;
-      }
-    }
-  }
-
-  .Message {
-    @apply contents;
-
-    > a {
-      @apply ps-2 text-sm text-gray-700 [&:not(:first-child)]:mt-4;
-    }
-
-    > .Message-icon {
-      @apply hidden;
-    }
-  }
-}
-
-.ContentTools-meta {
-  @apply mt-6 px-2;
-
-  span {
-    @apply block border-gray-200 py-4 text-sm text-gray-900 [&:not(:last-child)]:border-b;
-  }
-}

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

@@ -1,27 +0,0 @@
-.is-ectHidden {
-  @apply hidden;
-}
-
-.ContentTypeIcon {
-  @apply flex gap-3;
-}
-
-.ContentTypeIcon btu-icon {
-  @apply scale-100 text-inherit opacity-100 transition-all duration-700 ease-out [@starting-style]:scale-150 [@starting-style]:text-teal-600 [@starting-style]:opacity-15;
-}
-
-.ContentType {
-  @apply mt-6;
-
-  > h2 {
-    @apply px-4 py-2 text-sm font-semibold;
-  }
-
-  > .DT {
-    @apply mt-2;
-  }
-
-  > .Message {
-    @apply mb-6 rounded-lg border;
-  }
-}