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

@@ -0,0 +1,5 @@
+import onFindOnce from './dom/onFindOnce'
+
+onFindOnce('.imageEditor', async () => {
+  await import(/* webpackChunkName: 'ImageEditor' */ './ImageEditor')
+})

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

@@ -0,0 +1,15 @@
+:root {
+  --Input-borderColor: var(--color-gray4);
+  --Input-focusBackground: var(--color-dominant1);
+  --Input-focusColor: var(--color-dominant5);
+  --Input-placeholderColor: var(--color-gray5);
+}
+
+:root.is-highContrast {
+  --Input-borderColor: #000;
+}
+
+::placeholder {
+  color: var(--Input-placeholderColor);
+  font-style: italic;
+}

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

@@ -0,0 +1,35 @@
+.InputRow,
+.InputRow > fieldset {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: var(--gap-l);
+
+  fieldset {
+    margin-top: 0;
+    min-width: 0;
+  }
+
+  > * {
+    flex: auto;
+  }
+
+  > label {
+    .Text.is-s;
+
+    color: var(--color-gray7);
+    font-weight: bold;
+    margin-bottom: var(--gap-s);
+    width: 100%;
+  }
+
+  > .ComboInput + ul {
+    > li {
+      display: flex;
+      margin-top: var(--gap-m);
+    }
+
+    > li input[type='checkbox'] {
+      margin-right: var(--gap-s);
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+.Label {
+  background: var(--color-gray6);
+  border-radius: calc(var(--Text-height) / 8);
+  color: var(--color-white);
+  display: inline-block;
+  font-size: 0.75em;
+  margin-right: var(--gap-xs);
+  padding: 0 calc(var(--Text-height) / 4);
+  position: relative;
+  text-transform: uppercase;
+  vertical-align: top;
+}

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

@@ -0,0 +1,35 @@
+.LabeledCheckbox {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  line-height: calc(var(--gap-s) * 2 + var(--Text-height));
+
+  .Checkbox {
+    margin-left: var(--gap-s);
+    order: 1;
+  }
+}
+
+.DashboardWidget-filters {
+  .LabeledCheckbox {
+    line-height: calc(var(--gap-l) + var(--Text-height));
+    padding: 0 var(--gap-s);
+    position: relative;
+
+    &:hover {
+      background: var(--color-gray2);
+    }
+
+    &:hover::before {
+      border-color: var(--Input-focusColor);
+      border-style: solid;
+      border-width: 0 0 1px;
+      bottom: 0;
+      content: '';
+      left: 0;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+.Link {
+  background: transparent;
+  border: 0;
+  color: var(--Link-color);
+  cursor: pointer;
+  display: inline;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
+  text-decoration: var(--Link-decoration);
+  text-decoration-thickness: 0.05em;
+  text-transform: inherit;
+  text-underline-offset: 0.25em;
+  vertical-align: baseline;
+
+  &:hover {
+    color: var(--Link-hoverColor);
+    text-decoration: var(--Link-hoverDecoration, underline);
+  }
+}
+
+a {
+  &:extend(.Link all);
+}
+
+.Link.is-dominant {
+  --Link-color: var(--color-dominant6);
+  --Link-hoverColor: var(--color-dominant5);
+  --Link-decoration: none;
+}
+
+.Link.is-white {
+  --Link-color: var(--color-white);
+  --Link-hoverColor: var(--color-white);
+  --Link-decoration: none;
+}
+
+.Link.is-black {
+  --Link-color: var(--color-black);
+  --Link-hoverColor: var(--color-black);
+  --Link-decoration: none;
+}
+
+.Link.is-red {
+  --Link-color: var(--color-red6);
+  --Link-hoverColor: var(--color-red5);
+  --Link-decoration: none;
+}
+
+.Link.is-orange {
+  --Link-color: var(--color-orange6);
+  --Link-hoverColor: var(--color-orange5);
+  --Link-decoration: none;
+}
+
+.Link.is-yellow {
+  --Link-color: var(--color-yellow6);
+  --Link-hoverColor: var(--color-yellow6);
+  --Link-decoration: none;
+}
+
+.Link.is-green {
+  --Link-color: var(--color-green6);
+  --Link-hoverColor: var(--color-green6);
+  --Link-decoration: none;
+}
+
+.Link.is-gray {
+  --Link-color: var(--color-gray5);
+  --Link-hoverColor: var(--color-gray6);
+  --Link-decoration: none;
+}
+
+.Link.is-blue {
+  --Link-color: var(--color-blue5);
+  --Link-hoverColor: var(--color-blue6);
+  --Link-decoration: underline;
+}
+
+.Link.is-purple {
+  --Link-color: var(--color-purple6);
+  --Link-hoverColor: var(--color-purple6);
+  --Link-decoration: none;
+}
+
+.Link.is-active {
+  color: var(--Link-hoverColor);
+  text-decoration: var(--Link-hoverDecoration, underline);
+}
+
+:root {
+  .Link.is-blue;
+}

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

@@ -0,0 +1,40 @@
+import Cookies from 'js.cookie'
+import onFind from './dom/onFind'
+
+onFind('.LinkCarousel-item', (item) => {
+  item.addEventListener('click', async (event) => {
+    const target = event.target
+    if (target.classList.contains('LinkCarousel-item-favorite')) {
+      target.classList.toggle('is-unstarred')
+
+      const currentLabel = target.classList.contains('is-unstarred')
+        ? target.getAttribute('data-title-on')
+        : target.getAttribute('data-title-off')
+      target.title = currentLabel
+      target.setAttribute('aria-label', currentLabel)
+
+      let url =
+        CONTEXT_PATH +
+        'update-create-new-favorites?quickStartId=' +
+        item
+          .querySelector('.LinkCarousel-item-favorite')
+          .getAttribute('data-id')
+      const headers = new Headers()
+      headers.append('Brightspot-CSRF', Cookies.get('bsp.csrf'))
+      try {
+        await fetch(url, {
+          method: 'POST',
+          headers: headers,
+        })
+      } catch (error) {
+        console.error(error)
+      }
+    } else {
+      if (item !== target) {
+        return
+      }
+      event.stopPropagation()
+      item.querySelector('a').click()
+    }
+  })
+})

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

@@ -0,0 +1,143 @@
+.LinkCarousel {
+  background: var(--color-gray1);
+  display: flex;
+  margin-left: calc(0px - var(--gap-xl));
+  margin-right: calc(0px - var(--gap-xl));
+  overflow-x: auto;
+  padding: var(--gap-l);
+}
+
+.LinkCarousel-title {
+  background: var(--color-gray1);
+  font-weight: bold;
+  margin-left: calc(0px - var(--gap-xl));
+  margin-right: calc(0px - var(--gap-xl));
+  padding: var(--gap-l) var(--gap-l) var(--gap-xs);
+}
+
+.LinkCarousel-group {
+  padding-right: var(--gap-l);
+
+  &:not(:first-child) {
+    margin-left: calc(var(--gap-m) - var(--gap-l));
+  }
+
+  > h3 {
+    display: none;
+  }
+
+  > ul {
+    display: flex;
+    height: 100%;
+  }
+}
+
+.LinkCarousel-item {
+  --size: calc(
+    var(--gap-l) * 2 + var(--iconSize-xl) + var(--gap-s) * 2 - 2px +
+      var(--lineHeight-s)
+  );
+
+  background: var(--color-white);
+  box-shadow: var(--shadow-1);
+  cursor: pointer;
+  min-height: var(--size);
+  padding: var(--gap-s) var(--gap-m);
+  position: relative;
+  width: var(--size);
+
+  &:not(:first-child) {
+    margin-left: var(--gap-m);
+  }
+
+  &:not(.is-image) {
+    > .Link {
+      padding-right: var(--gap-l);
+    }
+  }
+
+  > .Link {
+    .Text.is-s;
+
+    display: block;
+    height: 100%;
+    overflow: hidden;
+    text-decoration: none;
+  }
+
+  &:hover {
+    box-shadow: var(--shadow-2);
+  }
+}
+
+.LinkCarousel-item-favorite {
+  .IconButton;
+
+  --IconButton-name: 'star';
+  --Icon-size: var(--iconSize-xs);
+
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  &.is-unstarred {
+    --IconButton-name: 'star_border';
+
+    opacity: 0;
+  }
+
+  &::before {
+    transform: unset;
+  }
+}
+
+.LinkCarousel-item:focus-within .LinkCarousel-item-favorite.is-unstarred,
+.LinkCarousel-item:hover .LinkCarousel-item-favorite.is-unstarred {
+  opacity: 1;
+
+  &::before {
+    --Icon-fill: 'FILL' 0;
+  }
+}
+
+.LinkCarousel-item.is-image {
+  display: flex;
+  flex-direction: column;
+  padding-top: 0;
+  position: relative;
+
+  &::before {
+    .Icon;
+
+    align-items: center;
+    color: var(--Link-color);
+    content: 'add_circle_outline';
+    display: flex;
+    flex: 1;
+    font-size: var(--iconSize-xl);
+    justify-content: center;
+    padding: var(--gap-s) 0 calc(var(--gap-s) - 2px) 0;
+    top: 0;
+  }
+
+  &:hover::before {
+    color: var(--Link-hoverColor);
+  }
+
+  &[data-icon-name]::before {
+    content: attr(data-icon-name);
+  }
+
+  > .Link {
+    border-top: 2px solid var(--color-dominant6);
+    height: auto;
+    padding-top: calc(var(--gap-s) - 2px);
+    text-align: center;
+    width: 100%;
+  }
+}
+
+// Legacy.
+.p-commonContent-new > form {
+  display: none;
+}

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

@@ -0,0 +1,14 @@
+import create from './dom/create'
+import onFind from './dom/onFind'
+
+onFind(
+  '.LinkList td:not(.LinkList-image, .LinkList-main, .LinkList-viewers, .LinkList-button, .LinkList-type, .LinkList-description, .date-time)',
+  (cell) => {
+    const icon = create('span', {
+      className: 'LinkList-icon',
+      'aria-hidden': 'true',
+    })
+
+    cell.prepend(icon)
+  },
+)

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

@@ -0,0 +1,150 @@
+.LinkList {
+  --LinkList-imageSize: var(--gap-xl);
+
+  display: block;
+
+  > thead {
+    display: none;
+  }
+
+  > tbody {
+    display: block;
+  }
+
+  tr {
+    border-top: var(--borderWidth-thin) solid var(--color-gray3);
+    display: flex;
+    flex-wrap: wrap;
+    min-height: calc(var(--gap-m) * 2 + var(--LinkList-imageSize));
+    padding: var(--gap-m) 0;
+    padding-left: calc(var(--LinkList-imageSize) + var(--gap-m));
+    position: relative;
+
+    &:first-child {
+      border-color: transparent;
+    }
+  }
+
+  tr.no-icon {
+    padding-left: 0;
+  }
+
+  tr.is-buttoned {
+    width: calc(100% - (var(--gap-s) * 2 + var(--Icon-size)));
+  }
+
+  tr.contentIcon {
+    min-height: 0;
+    padding-left: calc(var(--iconSize-m) + var(--gap-m));
+    padding-right: calc(var(--iconSize-m) + var(--gap-m));
+
+    .LinkList-main {
+      &[data-icon-name] {
+        &::before {
+          content: attr(data-icon-name);
+        }
+      }
+    }
+
+    .LinkList-main::before {
+      .Icon;
+
+      content: 'circle';
+      font-size: var(--iconSize-m);
+      left: 0;
+      padding-right: var(--gap-m);
+      position: absolute;
+      top: var(--gap-m);
+    }
+  }
+}
+
+.LinkList.is-scrollable {
+  max-height: 40vh;
+  overflow: auto;
+
+  @media (@mq-m) {
+    max-height: 75vh;
+  }
+}
+
+.LinkList-image {
+  --Avatar-size: var(--LinkList-imageSize);
+
+  align-items: center;
+  display: flex !important;
+  height: 100%;
+  left: 0;
+  order: -3;
+  position: absolute;
+  top: 0;
+  width: var(--LinkList-imageSize);
+}
+
+.LinkList-image.is-icon {
+  .Icon;
+  .Icon.is-l;
+
+  position: absolute;
+
+  &[data-icon-name]::before {
+    content: attr(data-icon-name);
+  }
+}
+
+.LinkList-main {
+  order: -2;
+  width: 100%;
+}
+
+.LinkList-type {
+  order: -1;
+}
+
+.LinkList
+  td:not(.LinkList-image, .LinkList-main, .LinkList-viewers, .LinkList-button) {
+  .Text.is-s;
+
+  align-items: center;
+  color: var(--color-gray5);
+  display: flex;
+
+  &:empty {
+    display: none;
+  }
+
+  &.date,
+  &.time {
+    width: auto;
+  }
+
+  &.LinkList-description {
+    color: var(--color-gray7);
+    width: 100%;
+  }
+
+  .LinkList-icon {
+    display: flex;
+
+    &::before {
+      background: var(--color-gray6);
+      border-radius: 50%;
+      content: '';
+      display: inline-block;
+      height: 2px;
+      margin: 0 var(--gap-s);
+      width: 2px;
+    }
+  }
+}
+
+.LinkList-viewers {
+  bottom: var(--gap-m);
+  position: absolute;
+  right: 0;
+}
+
+.LinkList-button {
+  position: absolute;
+  right: calc((-1 * var(--Icon-size)) + (-2 * var(--gap-s)));
+}

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

@@ -0,0 +1,123 @@
+import create from './dom/create'
+import find from './dom/find'
+import findAll from './dom/findAll'
+import onFind from './dom/onFind'
+
+// Move labels out so that they're in their own cells.
+onFind('.LinkTable .Label', (label) => {
+  const cell = label.closest('th, td')
+
+  if (
+    !cell ||
+    cell.classList.contains('LinkTable-label') ||
+    label.closest('.CommunityWidget')
+  ) {
+    return
+  }
+
+  const labelCell = cell.previousElementSibling
+
+  if (labelCell && labelCell.classList.contains('LinkTable-label')) {
+    labelCell.appendChild(label)
+    return
+  }
+
+  const row = label.closest('tr')
+  const index = Array.from(row.querySelectorAll('th, td')).indexOf(cell)
+
+  let columnHeader
+  const headerRow = row
+    .closest('table')
+    .querySelector('tr')
+    .querySelectorAll('th, td')
+
+  // Find the column header to serve as data storage from this operation
+  // thIndex is the index of the current cell in the header row
+  // thColSpan is the number of columns spanning to the current cell
+  for (let thIndex = 0, thColSpan = 0; thColSpan - 1 < index; thIndex++) {
+    columnHeader = headerRow[thIndex]
+    thColSpan += columnHeader.colSpan
+  }
+
+  if (columnHeader.hasAttribute('data-skip-labels-move')) {
+    return
+  }
+
+  // Avoid formatting of labels when more than one data-value is found
+  for (const r of row.closest('table').querySelectorAll('tr')) {
+    let column = r.querySelectorAll('th, td')[index]
+
+    if (column.getAttribute('data-value-count') > 1) {
+      // Cache result on column header so other labels don't also
+      // need to loop through all rows.
+      columnHeader.setAttribute('data-skip-labels-move', '')
+      return
+    }
+  }
+
+  for (const r of row
+    .closest('table')
+    .querySelectorAll('tr:not(thead.screen-reader-only tr')) {
+    let i = index
+
+    for (const c of r.querySelectorAll('th, td')) {
+      i = i - c.colSpan
+
+      if (i < 0) {
+        r.insertBefore(
+          create(
+            c.tagName,
+            { className: 'LinkTable-label' },
+            c.tagName === 'TH' &&
+              r.closest('table').classList.contains('searchResultTable')
+              ? window.BRIGHTSPOT.ui?.searchContentStatus
+              : '',
+          ),
+          c,
+        )
+        break
+      }
+    }
+  }
+
+  row.querySelectorAll('th, td')[index].appendChild(label)
+})
+
+// Compact mode?
+const tableResizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    entry.target.classList.toggle(
+      'is-compact',
+      (entry.borderBoxSize?.inlineSize || entry.contentRect.width) < 500,
+    )
+  }
+})
+
+onFind('.LinkTable', (table) => {
+  if (!table.classList.contains('is-compact')) {
+    tableResizeObserver.observe(table)
+  }
+
+  for (const row of findAll(table, ':scope > tbody > tr')) {
+    const cells = findAll(row, ':scope > td')
+
+    // Main cell has a link and is displayed first.
+    for (const cell of cells) {
+      if (find(cell, ':scope > a')) {
+        cell.classList.add('LinkTable-main')
+        break
+      }
+    }
+
+    // First aux cell has to be identified for styling.
+    const first = cells[0].classList
+
+    if (first.contains('LinkTable-main')) {
+      if (cells.length > 1) {
+        cells[1].classList.add('LinkTable-first')
+      }
+    } else {
+      first.add('LinkTable-first')
+    }
+  }
+})