@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/AutoExpand.js

@@ -0,0 +1,84 @@
+import create from './dom/create'
+import insertBefore from './dom/insertBefore'
+import onVisible from './dom/onVisible'
+
+const supportsFieldSizing = CSS.supports('field-sizing: content')
+
+onVisible('textarea', (textarea) => {
+  const parent = textarea.parentNode
+
+  // Return out if browser supports field-sizing: content.
+  if (supportsFieldSizing) {
+    if (parent.classList.contains('AutoExpand')) {
+      // If the parent already has the AutoExpand class, it is already handled by CSS.
+      parent.classList.add('is-noShim')
+    }
+    return
+  }
+
+  const getValue = () => `${textarea.value || textarea.placeholder} `
+  let setValue
+
+  if (parent.classList.contains('AutoExpand')) {
+    // If marked, use the more efficient CSS based solution.
+    setValue = () => {
+      parent.dataset.value = getValue()
+      // Hack to force redraw of textarea.
+      const opacity = textarea.style.opacity
+      textarea.style.opacity = 0.99999999
+      textarea.style.opacity = opacity
+    }
+  } else {
+    // Backward compatible solution.
+    textarea.rows = 1
+
+    // Create the wrapper and the shim manually.
+    const wrapper = create('div', { className: 'AutoExpand' })
+    const shim = create('div', { className: 'AutoExpand-shim' })
+    setValue = () => (shim.innerText = getValue())
+
+    // Copy the textarea styles to the shim.
+    const textareaStyle = window.getComputedStyle(textarea)
+    const shimStyle = shim.style
+
+    for (const name of textareaStyle) {
+      shimStyle.setProperty(name, textareaStyle.getPropertyValue(name))
+    }
+
+    shimStyle.gridArea = '1 / 1 / 2 / 2'
+    shimStyle.height = 'auto'
+    shimStyle.visibility = 'hidden'
+    shimStyle.width = 'auto'
+
+    insertBefore(wrapper, textarea)
+    wrapper.appendChild(shim)
+    wrapper.appendChild(textarea)
+  }
+
+  // Hide the shim if the textarea ever becomes hidden.
+  const hideShim = () =>
+    textarea.parentNode.classList.toggle(
+      'is-noShim',
+      textarea.getClientRects().length === 0,
+    )
+
+  setValue()
+  hideShim()
+
+  // Update as the placeholder or the value changes.
+  new MutationObserver((mutations) => {
+    for (const { attributeName } of mutations) {
+      if (attributeName === 'class' || attributeName === 'style') {
+        hideShim()
+      } else {
+        setValue()
+      }
+    }
+  }).observe(textarea, {
+    attributes: true,
+    attributeFilter: ['class', 'placeholder', 'style'],
+  })
+
+  textarea.addEventListener('change', setValue)
+  textarea.addEventListener('input', setValue)
+})

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

@@ -0,0 +1,36 @@
+@import url('./TextInput.less');
+
+.AutoExpand {
+  display: grid;
+  grid-template-columns: 100%;
+  width: 100%;
+
+  &::before,
+  > .AutoExpand-shim,
+  > textarea {
+    grid-area: ~'1 / 1 / 2 / 2';
+  }
+
+  &::before,
+  > .AutoExpand-shim {
+    .TextInput;
+
+    content: attr(data-value) ' ';
+    overflow-wrap: break-word;
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+
+  > btu-textarea-input > textarea,
+  > textarea {
+    field-sizing: content; /* stylelint-disable-line property-no-unknown */
+    overflow: hidden;
+  }
+
+  &.is-noShim {
+    &::before,
+    > .AutoExpand-shim {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+import $ from 'jquery'
+import debounce from './util/debounce'
+
+export default class AutoSubmit {
+  constructor(element) {
+    this._form = element.closest('form, .NestedForm')
+    if (!this._form) return
+
+    this.submit = this.submit.bind(this)
+
+    element.addEventListener('change', this.submit)
+    element.addEventListener('input', debounce(500, this.submit))
+
+    // Disable autocomplete. This is for backward compatibility.
+    for (const input of element === this._form
+      ? element.querySelectorAll('input, select, textarea')
+      : [element]) {
+      input.autocomplete = 'off'
+    }
+
+    // Load the frame associated with the form if it hasn't been loaded already.
+    const target = this._form.target
+
+    if (target) {
+      const frame = document.querySelector(
+        `.frame[name="${target}"]:not(.loading):not(.loaded)`,
+      )
+
+      if (frame) {
+        this._form.requestSubmit()
+      }
+    }
+  }
+
+  submit({ target }) {
+    const form = this._form
+
+    if (form && target.name) {
+      if (form instanceof HTMLFormElement) {
+        const data = new FormData(form)
+
+        if (
+          !this._lastData ||
+          JSON.stringify([...this._lastData.entries()]) !==
+            JSON.stringify([...data.entries()])
+        ) {
+          window.BRIGHTSPOT.ajaxInitiator = {
+            action: form.action,
+            id: target.name,
+            nodeName: target.nodeName.toLowerCase(),
+            shadowField: target.shadowField,
+          }
+
+          form.requestSubmit()
+        }
+        this._lastData = data
+      } else {
+        const $form = $(form)
+        const data = $form.find(':input').serialize()
+
+        if (this._lastData !== data) {
+          this._lastData = data
+          $form.trigger('submit')
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+:root {
+  --Avatar-size: var(--gap-xl);
+}
+
+.Avatar {
+  align-items: center;
+  background-color: var(--avatar-bg-color, var(--color-gray2));
+  border-radius: 50%;
+  color: var(--color-black);
+  display: flex;
+  font-size: calc(var(--Avatar-size) / 3);
+  height: var(--Avatar-size);
+  justify-content: center;
+  position: relative;
+  text-transform: uppercase;
+  user-select: none;
+  width: var(--Avatar-size);
+
+  img {
+    border-radius: 50%;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,52 @@
+.BackgroundTasks {
+  .Button {
+    &.is-red {
+      background: var(--color-red6);
+      border-color: var(--color-red6);
+      color: var(--color-white);
+      float: right;
+
+      &:hover,
+      &:focus {
+        background: var(--color-red7);
+        border-color: var(--color-red7);
+        color: var(--color-white);
+      }
+    }
+
+    &.is-taskaction {
+      margin-left: var(--gap-m);
+    }
+  }
+
+  .TaskDisplay {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    form {
+      display: flex;
+    }
+  }
+
+  .visibilityLabel {
+    &.is-green {
+      background: var(--color-green5);
+      border-color: var(--color-green5);
+      color: var(--color-white);
+    }
+
+    &.is-yellow {
+      background: var(--color-yellow3);
+      border-color: var(--color-yellow3);
+      color: var(--color-black);
+    }
+
+    &.is-red {
+      background: var(--color-red6);
+      border-color: var(--color-red6);
+      color: var(--color-white);
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+.Badge {
+  background: var(--color-gray6);
+  border-radius: calc(var(--Text-height) / 2);
+  color: var(--color-white);
+  display: inline-block;
+  margin-left: var(--gap-s);
+  min-width: var(--Text-height);
+  padding: 0 var(--gap-s);
+  text-align: center;
+}

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

@@ -0,0 +1,311 @@
+.SearchResult-dragContainer {
+  left: 0;
+  position: fixed;
+  top: 0;
+  z-index: var(--BoardContainer-zIndex, 10000);
+}
+
+.SearchResult-board {
+  height: 100%;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.SearchResult-board-column {
+  --BoardColumn-minWidth: 276px;
+  --BoardColumn-maxWidth: 400px;
+  --BoardColumn-calcWidth: clamp(
+    var(--BoardColumn-minWidth),
+    calc(100% / var(--columnCount)),
+    var(--BoardColumn-maxWidth)
+  );
+
+  border-right: 1px solid var(--color-gray3);
+  display: flex;
+  left: 0;
+  min-height: 100%;
+  position: absolute;
+  top: 0;
+  width: var(--BoardColumn-calcWidth);
+  z-index: 1;
+
+  &:nth-child(6n + 1) {
+    background-color: var(--color-purple1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-purple4);
+    }
+  }
+
+  &:nth-child(6n + 2) {
+    background-color: var(--color-blue1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-blue4);
+    }
+  }
+
+  &:nth-child(6n + 3) {
+    background-color: var(--color-green1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-green4);
+    }
+  }
+
+  &:nth-child(6n + 4) {
+    background-color: var(--color-yellow1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-yellow4);
+    }
+  }
+
+  &:nth-child(6n + 5) {
+    background-color: var(--color-orange1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-orange4);
+    }
+  }
+
+  &:nth-child(6n + 6) {
+    background-color: var(--color-red1);
+
+    .BoardView-title {
+      border-bottom: solid 2px var(--color-red4);
+    }
+  }
+}
+
+.SearchResult-board-columnContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.BoardView-title {
+  align-items: center;
+  background-color: var(--color-white);
+  color: var(--color-black);
+  display: flex;
+  margin: 0;
+  min-height: var(--gap-xl);
+  overflow: hidden;
+  padding: 0 var(--gap-s);
+  position: relative;
+  text-indent: var(--gap-s);
+  text-transform: capitalize;
+
+  &::after {
+    content: '(' attr(data-count) ')';
+    font-weight: normal;
+  }
+}
+
+.BoardView-listContainer {
+  flex-grow: 1;
+  overflow-y: auto;
+  position: relative;
+}
+
+.BoardView-list {
+  border-bottom: var(--gap-s) solid transparent;
+  list-style-type: none;
+  margin: 0;
+  min-height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.BoardView-card {
+  background: var(--color-white);
+  box-shadow: var(--shadow-1);
+  list-style-type: none;
+  margin: 0 var(--gap-s) var(--gap-s) var(--gap-s);
+  min-width: calc(100% - var(--gap-s) * 2);
+  position: absolute;
+  z-index: 10;
+
+  .ContentSummary-content {
+    .ContentSummary-row {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: unset;
+
+      .ContentSummary-subtitle {
+        margin-bottom: unset;
+        margin-right: var(--gap-xs);
+      }
+
+      .ContentSummary-link {
+        flex: 1;
+      }
+
+      .ContentSummary-subtitle {
+        flex-basis: 100%;
+      }
+    }
+
+    .SearchResult-summary {
+      margin-bottom: var(--gap-l);
+    }
+
+    .Viewers {
+      float: right;
+    }
+  }
+}
+
+.BoardView-card.is-saving {
+  pointer-events: none;
+
+  .ContentSummary-content {
+    opacity: 0.4 !important;
+  }
+
+  &::after {
+    &:extend(.Icon);
+
+    animation: spin var(--time-xl) infinite ease-in-out;
+    content: 'sync';
+    left: calc(50% - var(--Icon-size) / 2);
+    position: absolute;
+    top: calc(50% - var(--Icon-size) / 2);
+  }
+}
+
+.BoardView-card .ContentSummary-content {
+  padding: var(--gap-m) var(--gap-m) var(--gap-l);
+}
+
+.BoardView-card.muuri-item-dragging .ContentSummary-content {
+  transform: rotateZ(0.5deg);
+  transition: transform 0.12s ease;
+}
+
+.BoardView-card.muuri-item-releasing {
+  z-index: 11;
+}
+
+.BoardView-card.muuri-item-dragging {
+  box-shadow: var(--shadow-2);
+  cursor: move;
+  z-index: 12;
+}
+
+.BoardView-card.muuri-item-hidden {
+  z-index: 8;
+}
+
+.BoardView-card.muuri-item-placeholder {
+  filter: blur(1px);
+  margin: 0;
+  opacity: 0.6;
+  z-index: 9;
+}
+
+// Overrides standard search styles, establishes grid layout
+.SearchResult-items.is-muuri {
+  display: grid;
+  grid-auto-rows: auto 1fr;
+  margin-top: unset;
+  padding: unset;
+
+  .SearchResult-views {
+    position: unset;
+  }
+
+  .SearchResult-view {
+    display: grid;
+    grid-template: 'fields fields fields' auto 'sorts sorts actions' auto 'board board board' 1fr ~'/' auto auto 1fr;
+  }
+
+  .SearchResult-actions-wrapper {
+    grid-area: actions;
+    justify-self: end;
+    padding: var(--gap-xs) var(--gap-l) var(--gap-xs) 0;
+  }
+
+  .SearchResult-sorts {
+    align-self: center;
+    grid-area: sorts;
+    padding-left: var(--gap-l);
+  }
+
+  .SearchResult-boardContainer {
+    background-color: var(--color-gray1);
+    border-top: 1px solid var(--color-gray3);
+    grid-area: board;
+    overflow-x: scroll;
+
+    .moreCards-button,
+    .moreColumns-button {
+      display: none;
+    }
+  }
+}
+
+.SearchResult-board-fields {
+  align-self: center;
+  display: flex;
+  grid-area: fields;
+  justify-self: start;
+  margin-right: var(--gap-l);
+  padding-left: var(--gap-l);
+  padding-top: var(--gap-s);
+
+  .ComboInput::before {
+    border-bottom-width: 0;
+  }
+
+  .SearchResult-fields {
+    padding-top: var(--gap-s);
+    white-space: nowrap;
+  }
+}
+
+@media (@mq-m) {
+  .SearchResult-items.is-muuri .SearchResult-view {
+    grid-template: 'fields sorts actions' auto 'board board board' 1fr ~'/' auto auto 1fr;
+
+    .SearchResult-board-fields {
+      padding-top: unset;
+    }
+
+    .SearchResult-sorts {
+      padding-left: unset;
+    }
+  }
+}
+
+.SearchResult-board-errors {
+  bottom: 0;
+  max-height: 50%;
+  max-width: 350px;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  z-index: 100;
+
+  li {
+    margin-bottom: var(--gap-m);
+  }
+}
+
+.SearchResult-board-errors-close {
+  .Text.is-l;
+
+  color: var(--color-white);
+  cursor: pointer;
+  height: var(--gap-l);
+  position: absolute;
+  right: var(--gap-s);
+  text-align: center;
+  top: var(--gap-s);
+  width: var(--gap-l);
+  z-index: 100;
+}