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

package/src/legacy/tool-ui/src/main/webapp/v4/FormFilter.less

@@ -0,0 +1,189 @@
+@import (reference) url('./Icon.less');
+@import (reference) url('./Reset.less');
+@import (reference) url('./SearchInput.less');
+
+btu-form-filter {
+  align-items: center;
+  display: flex;
+  justify-content: end;
+  width: 100%;
+
+  .FormFilter-icon {
+    .Link;
+
+    border: none;
+    color: var(--color-black);
+    margin-left: var(--gap-l);
+  }
+}
+
+.FormFilter {
+  &-container {
+    .SearchInput;
+    .SearchInput.is-filter;
+
+    display: flex;
+    flex-direction: row;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0 var(--gap-m);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition-duration: var(--time-xs);
+    transition-property: opacity, transform;
+    transition-timing-function: var(--ease-out);
+    width: 40%;
+
+    &.is-open {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+
+    > btu-input {
+      width: 100%;
+    }
+  }
+
+  &-icon {
+    --Link-color: var(--color-black);
+
+    height: calc(var(--gap-s) * 2 + var(--Icon-size));
+    overflow: hidden;
+    top: 0;
+    width: calc(var(--gap-s) * 2 + var(--Icon-size));
+
+    &::after {
+      &:extend(.Icon);
+
+      content: 'search';
+      margin-top: calc(0px - var(--Icon-size) / 2);
+      position: absolute;
+      right: var(--gap-s);
+      top: 50%;
+    }
+
+    &::before {
+      border-radius: 50%;
+      content: '';
+      display: block;
+      height: 100%;
+      opacity: 0;
+      transition: opacity var(--time-m) var(--ease-in);
+      width: 100%;
+      z-index: -1;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:hover::before {
+      background-color: var(--color-gray2);
+      opacity: 0.8;
+    }
+
+    &.is-open {
+      &::after {
+        content: 'close';
+      }
+
+      &::before {
+        background-color: var(--color-gray3);
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.CIG {
+  &.is-filtering {
+    > *,
+    > .Tab > *,
+    .PluginItem:not(.is-filterResult) {
+      display: none;
+    }
+
+    > .Tab {
+      display: block;
+    }
+
+    .is-filterResult,
+    > *:has(.is-filterResult):not([hidden]) {
+      display: block !important;
+
+      &.CIG-row[data-tab]:not(.has-title),
+      &.Tab[data-tab],
+      &.CIG-title[data-tab] {
+        margin-top: calc(var(--gap-xl) * 1.6);
+        position: relative;
+      }
+
+      &.CIG-row[data-tab]:not(.has-title)::before,
+      &.Tab[data-tab]::after,
+      &.CIG-title[data-tab]::after {
+        border-bottom: 1px solid var(--color-gray3);
+        content: attr(data-tab);
+        font-size: var(--fontSize-xs);
+        font-weight: 100;
+        line-height: var(--lineHeight-l);
+        position: absolute;
+        text-transform: uppercase;
+        top: calc(var(--gap-l) * -1.6);
+        width: 100%;
+      }
+
+      &.CIG-title[data-tab]::after {
+        left: 0;
+      }
+
+      &.Tab[data-tab]::after,
+      &.CIG-row[data-tab]:not(.has-title)::before {
+        left: calc(var(--gap-m) * -1);
+      }
+
+      &.CIG-title {
+        pointer-events: none;
+      }
+
+      .CIG-titleToggle {
+        display: none;
+      }
+    }
+
+    .FormFilter-message {
+      display: block;
+      margin: var(--gap-m) 0;
+    }
+  }
+
+  &.is-loading {
+    display: block;
+    min-height: 80vh;
+    visibility: visible;
+
+    &::before {
+      .Icon;
+
+      animation: spin var(--time-xl) infinite ease-in-out;
+      color: var(--color-black);
+      content: 'autorenew';
+      height: var(--Icon-size-l);
+      left: 50%;
+      margin-right: var(--gap-m);
+      position: absolute;
+      top: 50%;
+      width: var(--Icon-size-l);
+      z-index: 10;
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Frame.less

@@ -0,0 +1,26 @@
+.Frame {
+  &-relative {
+    --ContentEdit-barTop: 0;
+
+    position: relative;
+
+    .ContentEdit-bar {
+      position: absolute;
+    }
+
+    .ContentEdit-title {
+      position: absolute;
+    }
+
+    .ContentEdit-main {
+      overflow: auto;
+    }
+
+    @media (@mq-m) {
+      --ContentEdit-barTop: calc(
+        var(--Page-headerBottom) + var(--ContentEdit-workstreamHeight) +
+          var(--gap-m) * 2 + var(--lineHeight-m)
+      );
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/GraphQLApis.less

@@ -0,0 +1,4 @@
+.GraphQLApis-buttonOnly.CIG-row.inputContainer .CIG-label.inputLabel,
+.GraphQLApis-buttonOnly.CIG-row.inputContainer .CIG-small.inputSmall-text {
+  display: none;
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Grid.less

@@ -0,0 +1,48 @@
+.Grid {
+  display: flex;
+  flex-wrap: wrap;
+
+  > li {
+    width: 100%;
+  }
+}
+
+.Grid.is-withNav {
+  overflow-x: hidden;
+
+  > li {
+    flex: 1 0 auto;
+  }
+}
+
+@media (@mq-m) {
+  .Grid {
+    height: calc(
+      100vh - var(--Page-headerHeight) - var(--Icon-size) - (2 * var(--gap-m))
+    );
+    overflow: hidden;
+  }
+
+  .Grid.is-withNav {
+    .Grid-nav {
+      max-width: 305px;
+
+      table {
+        height: 100%;
+        max-height: none;
+      }
+    }
+
+    .Grid-main {
+      border-left: solid 1px var(--color-gray3);
+      width: 37.5%;
+
+      .ContentEdit {
+        height: calc(
+          100vh - var(--Page-headerHeight) - var(--Icon-size) -
+            (2 * var(--gap-m))
+        );
+      }
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Guide.less

@@ -0,0 +1,209 @@
+.Guide {
+  display: grid;
+  grid-template:
+    'title' calc(var(--gap-m) * 2 + var(--Text-height))
+    'guide' auto ~'/'
+    1fr;
+  height: 100%;
+  padding: 0;
+
+  > .Guide-content {
+    grid-area: guide;
+    overflow: auto;
+  }
+}
+
+.Guide-title {
+  .Widget-title;
+
+  grid-area: title;
+  padding-right: calc(var(--gap-s) * 4 + var(--Icon-size) * 2 + var(--gap-l));
+}
+
+.Guide-controls {
+  align-items: center;
+  display: flex;
+  height: calc(var(--gap-m) * 2 + var(--Text-height));
+  position: absolute;
+  right: calc(var(--gap-l) - var(--gap-s));
+  top: 0;
+}
+
+.Guide-edit {
+  .IconButton;
+
+  --IconButton-name: 'edit';
+}
+
+.Guide-close {
+  .IconButton;
+
+  --IconButton-name: 'close';
+}
+
+.Guide-content {
+  padding: 0 var(--gap-l) calc(var(--gap-xl) + var(--gap-l)) var(--gap-l);
+}
+
+.Guide-description,
+.Guide-fieldDescription {
+  b {
+    font-weight: bold;
+  }
+
+  i {
+    font-style: italic;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  ol,
+  ul {
+    list-style-type: revert;
+    margin: var(--Text-height) 0 var(--Text-height) var(--Text-height);
+  }
+
+  u {
+    text-decoration: underline;
+  }
+
+  .cms-textAlign-center {
+    text-align: center;
+  }
+
+  .cms-textAlign-right {
+    text-align: right;
+  }
+}
+
+.Guide-description {
+  padding-top: var(--gap-xl);
+}
+
+.Guide-tabCluster {
+  .Text.is-s;
+
+  background: var(--color-gray1);
+  font-weight: bold;
+  margin: var(--gap-xl) calc(0px - var(--gap-l)) 0 calc(0px - var(--gap-l));
+  padding: var(--gap-s) var(--gap-l);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  &.is-widget {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .Guide-content > &:first-child {
+    margin-top: 0;
+  }
+}
+
+.Guide-image {
+  display: block;
+  margin: var(--Text-height) 0;
+
+  > img {
+    display: block;
+  }
+}
+
+.Guide-field {
+  padding-top: var(--gap-xl);
+  position: relative;
+  z-index: 0;
+
+  > form {
+    width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
+  }
+
+  &.is-focus::before {
+    background: var(--color-dominant1);
+    bottom: calc(0px - var(--gap-xl) / 2);
+    content: '';
+    left: calc(0px - var(--gap-l) / 2);
+    position: absolute;
+    right: calc(0px - var(--gap-l) / 2);
+    top: calc(var(--gap-xl) / 2);
+    z-index: -1;
+  }
+}
+
+.Guide-fieldName {
+  .Text.is-s;
+
+  font-weight: bold;
+  margin-bottom: var(--gap-s);
+}
+
+.Guide-embedded {
+  padding-left: var(--gap-l);
+  position: relative;
+
+  &:not(:empty)::before {
+    border-color: var(--Input-borderColor);
+    border-style: solid;
+    border-width: 0 0 1px 1px;
+    bottom: calc(var(--gap-l) / 2);
+    content: '';
+    left: 0;
+    position: absolute;
+    top: calc(var(--gap-l) / 2);
+    width: calc(var(--gap-l) / 2);
+  }
+
+  > .Guide-edit {
+    position: absolute;
+    right: 0;
+    top: calc(0px - var(--gap-s) * 2 - var(--Icon-size));
+  }
+
+  > .Guide-content {
+    padding: 0;
+  }
+
+  .Guide-tabCluster {
+    display: none;
+  }
+}
+
+// Production Guide edit page does not need "Delete Permanently" button
+.Popup[name='edit-guide'] .ActionBar > button[name='action-delete'] {
+  display: none;
+}
+
+.frame[name='guideField'] {
+  padding: 0;
+
+  .Guide-field {
+    padding: var(--gap-l);
+  }
+
+  a.Guide-editField {
+    position: absolute;
+    right: calc(var(--gap-s) * 4 + var(--Icon-size));
+    top: var(--gap-xs);
+  }
+}
+
+div.Popup {
+  &[data-subject-type='true'] a.CIG-guide {
+    display: block;
+  }
+
+  a.CIG-guide {
+    display: none;
+  }
+}
+
+div[name='edit-guide'] {
+  ~ div.Popup a.CIG-guide,
+  a.CIG-guide {
+    display: none;
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/GuideField.less

@@ -0,0 +1,108 @@
+.GuideField {
+  th {
+    width: 25%;
+  }
+
+  .CIG-label {
+    margin-bottom: var(--gap-l);
+  }
+
+  &-editorialNote {
+    margin: 8px 16px 32px;
+    overflow: auto;
+
+    &.is-empty {
+      margin: 12px 0 32px;
+    }
+
+    b {
+      font-weight: bold;
+    }
+
+    i {
+      font-style: italic;
+    }
+
+    u {
+      text-decoration: underline;
+    }
+
+    s {
+      text-decoration: line-through;
+    }
+
+    ul {
+      list-style-type: disc;
+      padding: 0 0 0 30px;
+    }
+
+    ul ul {
+      list-style-type: circle;
+    }
+
+    ul ul ul {
+      list-style-type: square;
+    }
+
+    ol {
+      list-style-type: decimal;
+      padding: 0 0 0 30px;
+    }
+
+    ol ol {
+      list-style-type: lower-alpha;
+    }
+
+    .cms-textAlign-left {
+      text-align: left;
+    }
+
+    .cms-textAlign-center {
+      text-align: center;
+    }
+
+    .cms-textAlign-right {
+      text-align: right;
+    }
+
+    img {
+      display: block;
+      float: left;
+      margin: 16px 16px 16px 0;
+      width: 50%;
+    }
+
+    img[data-align-center] {
+      float: none;
+      margin: 16px auto;
+    }
+
+    img[data-align-right] {
+      float: right;
+      margin: 16px 0 16px 16px;
+    }
+  }
+}
+
+.ProseMirror {
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  bsp-guide-field-link {
+    color: var(--Link-color);
+  }
+
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  bsp-guide-field-link:hover {
+    color: var(--Link-hoverColor);
+    text-decoration: var(--Link-hoverDecoration, underline);
+  }
+}
+
+/* Hides GuideField links and the "New", "Copy", and "Edit In Full" gear menu options in GuideFieldEditorialNote edit page */
+[data-type='com.psddev.cms.tool.GuideFieldEditorialNote']
+  a[target='guideField'],
+[data-popup-source-class~='GuideFieldEditorialNote-edit'] a.action-create,
+[data-popup-source-class~='GuideFieldEditorialNote-edit'] a.action-copy,
+[data-popup-source-class~='GuideFieldEditorialNote-edit']
+  a.widgetControlsEditInFull {
+  display: none;
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Hierarchy.js

@@ -0,0 +1,100 @@
+import onFind from './dom/onFind'
+// Highlight the item that's expanded.
+window.addEventListener(
+  'click',
+  (e) => {
+    const link = e.target
+
+    if (link.classList.contains('Hierarchy-expand')) {
+      for (const s of link.closest('ul').querySelectorAll('.is-selected')) {
+        s.classList.remove('is-selected')
+      }
+
+      link.closest('li').classList.add('is-selected')
+    }
+  },
+  { capture: true },
+)
+
+// Add elements to correct parent frame
+window.addEventListener('brightspot-frame-load', (e) => {
+  const frame = e.target
+
+  if (frame.classList.contains('HierarchyResults')) {
+    const lis = [...frame.querySelectorAll('li')]
+    const container = frame.closest('.Hierarchy-column')
+    const ul = container.querySelector('ul')
+
+    lis.forEach((li) => {
+      ul.appendChild(li)
+    })
+  }
+
+  // On scroll, load more elements after hitting the last element of the previous set
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      const intersecting = entry.isIntersecting
+      if (intersecting) {
+        document.querySelector('.Hierarchy-moreElements')?.click()
+      }
+    })
+  })
+
+  let lastHierarchyElement = document.getElementsByClassName(
+    'lastHierarchyElement',
+  )
+  if (lastHierarchyElement.item(0)) {
+    observer.observe(lastHierarchyElement.item(0))
+    lastHierarchyElement.item(0).classList.remove('lastHierarchyElement')
+  }
+})
+
+onFind(
+  "div[data-popup-source-class*='Page-search'] div.Hierarchy-column a[data-hierarchy-item]",
+  (a) => {
+    const typeId = a.getAttribute('data-type-id')
+    const parentTypeId = a.getAttribute('data-parent-type-ids')
+    const searchWidgetForm = a.closest('div.SearchWidget-form')
+    if (!searchWidgetForm || !typeId) {
+      return
+    }
+    const selectedTypeId = searchWidgetForm.querySelector(
+      "select[name='st'] option[selected]",
+    ).value
+    if (
+      typeId === selectedTypeId ||
+      (parentTypeId && parentTypeId.includes(selectedTypeId))
+    ) {
+      return
+    }
+    a.setAttribute('data-mismatch-hierarchy-type', 'true')
+  },
+)
+
+onFind(
+  "div[data-popup-source-class*='objectId-select'] div.Hierarchy-column a[data-hierarchy-item]",
+  (a) => {
+    const typeId = a.getAttribute('data-type-id')
+    const searchWidgetForm = a.closest('div.SearchWidget-form')
+    if (!searchWidgetForm || !typeId) {
+      return
+    }
+    const createTypeForm = searchWidgetForm.querySelector(
+      'div.searchCreate form.objectId-create',
+    )
+    const singleTypeId = createTypeForm.querySelector(
+      "input[name='typeId']",
+    )?.value
+    const multiTypeId = createTypeForm
+      .querySelector("select[name='typeId']")
+      ?.getAttribute('data-typeids')
+    if (
+      (singleTypeId && typeId === singleTypeId) ||
+      (multiTypeId && multiTypeId.includes(typeId))
+    ) {
+      return
+    }
+
+    a.setAttribute('data-mismatch-hierarchy-type', 'true')
+  },
+)