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

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

@@ -0,0 +1,258 @@
+@import (reference) url('./Dropdown.less');
+
+.TabBar {
+  background: var(--color-white);
+  min-height: calc(var(--gap-m) * 2 + var(--Text-height));
+  position: relative;
+  white-space: nowrap;
+
+  &::before {
+    background: var(--color-gray3);
+    bottom: 0;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  &:not(.is-menuOnly) {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  &.is-menuOnly:not(.is-menuSelected) {
+    background: transparent;
+    margin-bottom: calc(0px - var(--Text-height));
+
+    &::before {
+      display: none;
+    }
+
+    &:not(.is-open) {
+      z-index: 1;
+    }
+  }
+
+  & + .CIG-row:not(:has(.CIG-note)) .CIG-label:first-child {
+    margin-bottom: var(--gap-s);
+  }
+}
+
+.TabBar-item,
+.TabBar-menuToggle {
+  color: var(--color-gray6);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  padding: calc(var(--gap-m) - 1px) var(--gap-l) calc(var(--gap-m) + 1px)
+    var(--gap-l);
+  position: relative;
+  text-transform: uppercase;
+
+  &::before {
+    background-color: var(--color-dominant3);
+    bottom: 0;
+    content: '';
+    height: 4px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    transform: scaleX(0);
+    transition: transform var(--time-xs) var(--ease-out);
+  }
+
+  a {
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+}
+
+.TabBar-itemHover() {
+  &::before {
+    transform: scaleX(1);
+  }
+}
+
+.TabBar-itemSelected() {
+  color: var(--color-black);
+
+  &::before {
+    background-color: var(--color-dominant6);
+    transform: none;
+  }
+}
+
+.TabBar-item {
+  border: none;
+
+  &::after {
+    background: var(--color-gray3);
+    bottom: 0;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  &:hover,
+  &:focus {
+    .TabBar-itemHover();
+  }
+
+  &:focus-visible {
+    box-shadow: none !important;
+    outline: solid 2px var(--color-dominant6);
+    outline-offset: calc(-1 * var(--gap-s));
+  }
+
+  &.is-selected,
+  &.selected,
+  &.state-selected {
+    .TabBar-itemSelected();
+  }
+}
+
+.TabBar-menu:hover > .TabBar-menuToggle,
+.TabBar.is-open .TabBar-menuToggle {
+  .TabBar-itemHover();
+}
+
+.TabBar.is-menuSelected .TabBar-menuToggle {
+  .TabBar-itemSelected();
+}
+
+.TabBar-menu {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.TabBar-menuToggle {
+  border: none;
+  height: calc(var(--gap-m) * 2 + var(--Text-height));
+  padding-right: calc(var(--gap-s) * 3 + var(--Icon-size));
+  text-decoration: none;
+
+  &:empty {
+    padding-left: var(--gap-s);
+  }
+
+  &::after {
+    .Icon;
+
+    content: 'more_horiz';
+    position: absolute;
+    right: calc(var(--gap-s) * 2);
+    top: calc(
+      var(--gap-m) + var(--Text-height) / 2 - var(--Icon-size) / 2 - 1px
+    );
+  }
+}
+
+.TabBar-menuList {
+  .Dropdown;
+}
+
+.TabBar-menuItem {
+  .Dropdown-item;
+
+  border: none;
+  cursor: pointer;
+  font-weight: inherit;
+  padding-left: calc(var(--gap-s) * 2 + var(--Icon-size));
+  position: relative;
+  text-transform: none;
+
+  &.is-selected::before {
+    .Icon;
+
+    content: 'check';
+    left: var(--gap-s);
+    margin-right: var(--gap-s);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.TabBar.is-open {
+  .TabBar-menuList {
+    .Dropdown.is-open;
+  }
+}
+
+.TabBar.is-menuSelected {
+  .TabBar-menuToggle {
+    color: var(--color-black);
+
+    &::before {
+      background-color: var(--color-dominant6);
+      bottom: 0;
+      content: '';
+      height: 4px;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+
+    &:hover {
+      color: var(--Link-hoverColor);
+    }
+  }
+}
+
+.TabBar.is-menuError {
+  .TabBar-menuToggle::after {
+    color: var(--color-red6);
+    content: 'error';
+  }
+
+  .TabBar-menuItem {
+    padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));
+  }
+}
+
+.TabBar-item,
+.TabBar-menuItem {
+  &.is-error {
+    color: var(--color-red6);
+    padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));
+
+    &::after {
+      .Icon;
+
+      background: transparent;
+      content: 'error';
+      height: auto;
+      left: auto;
+      position: absolute;
+      right: var(--gap-l);
+      top: 50%;
+      transform: translateY(calc(-50% - 1px));
+    }
+  }
+}
+
+.TabBar-item.is-error::before {
+  background-color: var(--color-red6);
+}
+
+.DashboardTabSelect {
+  .TabBar-item {
+    a {
+      display: block;
+      margin: calc(0px - var(--gap-m) + 1px) calc(0px - var(--gap-l))
+        calc(0px - var(--gap-m) - 1px);
+      padding: calc(var(--gap-m) - 1px) var(--gap-l) calc(var(--gap-m) + 1px);
+    }
+
+    &.is-error a {
+      margin-right: calc(0px - var(--gap-s) - var(--Icon-size) - var(--gap-l));
+      padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));
+      position: relative;
+      z-index: 1;
+    }
+  }
+}

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

@@ -0,0 +1,360 @@
+import $ from 'jquery'
+import create from './dom/create'
+import repaint from './util/repaint'
+import findAll from './dom/findAll'
+import find from './dom/find'
+import { toggleMenu, setupMenuForAria } from '../../../dom/popupMenu'
+
+export default class TabContainer {
+  constructor(container) {
+    this._container = container
+    this._update = repaint(this._update.bind(this))
+    this._update()
+
+    window.addEventListener('brightspot-content-state-change', () => {
+      this._toggle()
+    })
+  }
+
+  _forEachChild(callback) {
+    for (const child of this._container.children) {
+      const tab = child.dataset.tab
+
+      if (tab !== undefined) {
+        callback(tab, child)
+      }
+    }
+  }
+
+  _toArray(value) {
+    if (value) {
+      try {
+        const array = JSON.parse(value)
+        return Array.isArray(array) ? array : []
+      } catch {}
+    }
+    return []
+  }
+
+  _update() {
+    if (this._observer) {
+      this._observer.disconnect()
+      this._observer = null
+    }
+
+    const bar = create('div', {
+      className: 'TabBar',
+      role: 'tablist',
+    })
+    const menuToggle = create('button', {
+      className: 'TabBar-menuToggle',
+      title: window.BRIGHTSPOT?.ui.tooltips.tabs,
+      type: 'button',
+      'aria-haspopup': 'menu',
+      'aria-expanded': 'false',
+      'aria-label': window.BRIGHTSPOT?.ui.tooltips.tabs,
+    })
+    const menuList = create('div', {
+      className: 'TabBar-menuList',
+      role: 'menu',
+      'aria-label': window.BRIGHTSPOT?.ui.tooltips.tabs,
+    })
+    const menu = create(
+      'div',
+      { className: 'TabBar-menu' },
+      menuToggle,
+      menuList,
+    )
+
+    menuToggle.onclick = () => {
+      toggleMenu(menuList, menuToggle, bar)
+    }
+
+    // Find tabs that should really be displayed as tabs rather than in a menu.
+    const menuMode = this._container.dataset.tcMode === 'MENU'
+    const main = this._container.dataset.tcMain
+    const exceptions = this._toArray(this._container.dataset.tcExceptions)
+
+    // Sort the tabs.
+    const tabSet = new Set()
+    this._defaultTab = null
+
+    for (const child of this._container.children) {
+      const tab = child.dataset.tab
+
+      if (tab !== undefined) {
+        if (!tabSet.has(tab)) {
+          if (!this._defaultTab) {
+            this._defaultTab = tab
+          }
+
+          tabSet.add(tab)
+        }
+      }
+    }
+
+    const start = this._toArray(this._container.dataset.tcStart)
+    const end = this._toArray(this._container.dataset.tcEnd)
+    const tabs = []
+
+    for (const tab of start) {
+      if (tabSet.has(tab)) {
+        tabs.push(tab)
+      }
+    }
+
+    for (const tab of tabSet) {
+      if (!start.includes(tab) && !end.includes(tab)) {
+        tabs.push(tab)
+      }
+    }
+
+    for (const tab of end) {
+      if (tabSet.has(tab)) {
+        tabs.push(tab)
+      }
+    }
+
+    // Create the tabs.
+    for (const tab of tabs) {
+      const list =
+        exceptions.indexOf(tab) > -1
+          ? menuMode
+            ? bar
+            : menuList
+          : menuMode
+            ? menuList
+            : bar
+
+      list.insertBefore(
+        create(
+          'button',
+          {
+            className: 'TabBar-item',
+            dataset: { tab },
+            role: 'tab',
+            onclick: (event) => {
+              event.preventDefault()
+              this.select(tab, event)
+            },
+            onkeydown: (e) => {
+              var tab = e.currentTarget
+              var tabs = tab.closest('.TabBar')
+
+              switch (e.key) {
+                case 'ArrowRight':
+                  if (tab.nextSibling) {
+                    tab.nextSibling.focus()
+                  } else {
+                    tabs.firstChild.focus()
+                  }
+                  return
+
+                case 'ArrowLeft':
+                  if (tab.previousSibling) {
+                    tab.previousSibling.focus()
+                  } else {
+                    tabs.lastChild.focus()
+                  }
+                  return
+              }
+            },
+          },
+          tab,
+        ),
+        tab === main ? list.firstChild : null,
+      )
+    }
+
+    if (tabs.includes(main)) {
+      this._defaultTab = main
+    }
+
+    // If there's only 1 tab, only display the menu.
+    if (bar.children.length === 1) {
+      menuList.insertBefore(bar.children[0], menuList.firstChild)
+    }
+
+    for (const c of menuList.children) {
+      c.className = 'TabBar-menuItem'
+      c.setAttribute('role', 'menuitem')
+    }
+
+    setupMenuForAria(menuList, menuToggle)
+
+    // Reset in case this is being recreated.
+    if (this._bar) {
+      this._bar.remove()
+      this._bar = null
+      this._menu = null
+      this._menuToggle = null
+      this._menuList = null
+    }
+
+    // No tabs found, so stop.
+    if (
+      tabs.length === 0 ||
+      (tabs.length < 2 && !this._container.getAttribute('data-show-tabs'))
+    ) {
+      this._container.dataset.tabless = 'true'
+      // Ensure there aren't any children that are hidden
+      const hiddenChildren = this._container.querySelectorAll(
+        ':scope > .TC-unselected',
+      )
+      Array.from(hiddenChildren).forEach((child) => {
+        child.classList.remove('TC-unselected')
+      })
+      return
+    }
+
+    this._bar = bar
+    this._container.insertBefore(bar, this._container.firstChild)
+
+    if (menuList.children.length > 0) {
+      if (bar.children.length === 0) {
+        bar.classList.add('is-menuOnly')
+        bar.removeAttribute('role')
+      }
+
+      this._menu = menu
+      this._menuToggle = menuToggle
+      this._menuList = menuList
+      this._bar.appendChild(menu)
+    }
+
+    const visibleTabs = this._toggle()
+
+    if (!visibleTabs.includes(this._defaultTab)) {
+      this._defaultTab = visibleTabs[0]
+    }
+
+    //Hide the tab selector if all other tabs are hidden
+    bar.hidden =
+      Array.from(menuList.children).filter((c) => !c.hidden).length === 1
+
+    // Any field errors within the panels?
+    let menuError = false
+
+    for (const error of findAll(
+      this._container,
+      '.CIG-row > .Message.is-error',
+    )) {
+      let parent = error
+      let row
+
+      do {
+        row = parent
+        parent = row.parentNode
+      } while (parent !== this._container)
+
+      const item = find(this._bar, `[data-tab="${row.dataset.tab}"]`)
+
+      if (item && !item.classList.contains('is-error')) {
+        item.classList.add('is-error')
+
+        if (item.classList.contains('TabBar-menuItem')) {
+          menuError = true
+        }
+      }
+    }
+
+    if (menuError) {
+      bar.classList.add('is-menuError')
+    }
+
+    this.select()
+
+    /* this._observer = new MutationObserver(this._update).observe(
+      this._container,
+      { childList: true }
+    ) */
+  }
+
+  _toggle() {
+    const visibleTabs = []
+
+    this._forEachChild((tab, child) => {
+      if (!(child.hidden || child instanceof HTMLHeadingElement)) {
+        visibleTabs.push(tab)
+      }
+    })
+
+    for (const container of [this._bar, this._menuList]) {
+      if (container) {
+        for (const c of container.children) {
+          if (c !== this._menu) {
+            c.hidden = !visibleTabs.includes(c.dataset.tab)
+          }
+        }
+      }
+    }
+
+    return visibleTabs
+  }
+
+  select(selectedTab, event) {
+    const focus =
+      selectedTab &&
+      this._container.closest('.ContentEdit.is-new, .StandardForm.is-new')
+
+    if (!selectedTab) {
+      selectedTab = this._defaultTab
+    }
+
+    // Try to select the tab in the bar first.
+    if (this._bar && !this._bar.classList.contains('is-menuOnly')) {
+      for (const c of this._bar.children) {
+        const isSelected = c.dataset.tab === selectedTab
+
+        c.classList.toggle('is-selected', isSelected)
+        c.setAttribute('aria-selected', isSelected)
+
+        if (isSelected) {
+          c.removeAttribute('tabindex')
+        } else {
+          c.setAttribute('tabindex', '-1')
+        }
+      }
+    }
+
+    // Then try the ones in the menu.
+    if (this._menuList) {
+      let menuSelected = false
+
+      for (const c of this._menuList.children) {
+        if (c.classList.toggle('is-selected', c.dataset.tab === selectedTab)) {
+          menuSelected = selectedTab !== this._defaultTab
+        }
+      }
+
+      this._bar.classList.toggle('is-menuSelected', menuSelected)
+      this._menuToggle.innerText = menuSelected ? selectedTab : ''
+    }
+
+    // Toggle the panel visibilities.
+    this._forEachChild((tab, child) => {
+      child.classList.toggle('TC-unselected', tab !== selectedTab)
+    })
+
+    window.dispatchEvent(new Event('resize'))
+
+    // Legacy events.
+    $(this._container).find('> [data-tab]').trigger('tabbedShow')
+
+    $(this._bar).trigger('tabbed-select')
+
+    // Focus on the first input when changing tab.
+    if (focus) {
+      const id = this._container.querySelector(
+        `:scope > .CIG-row:not(.inputContainer-readOnly)[data-tab="${selectedTab}"] > .CIG-label > label`,
+      )?.htmlFor
+
+      if (id) {
+        document.getElementById(id)?.focus()
+      }
+    } else if (event) {
+      // Restore scroll position where user clicked the tab.
+      event.target.scrollIntoView({ block: 'nearest' })
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+.TC > .TC-unselected {
+  display: none;
+}
+
+.TC[data-tabless='true'] > .TC-unselected {
+  display: block;
+}
+
+.TC-panel {
+  padding: var(--Widget-padding);
+}
+
+// CIG should be full bleed when directly inside TC-panel.
+.TC-panel,
+.TC-panel > form,
+.TC-panel > form > .fixedScrollable {
+  > .CIG {
+    margin: calc(0px - var(--Widget-padding));
+    margin-bottom: 0;
+  }
+
+  > .ActionBar {
+    margin: 0 calc(0px - var(--Widget-padding));
+    padding: var(--Widget-padding);
+  }
+}

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

@@ -0,0 +1,27 @@
+// Highlight the item that's expanded.
+window.addEventListener(
+  'click',
+  (e) => {
+    const link = e.target
+
+    if (link.classList.contains('Taxonomy-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 },
+)
+
+// Automatically scroll to the right when the children are loaded.
+window.addEventListener('brightspot-frame-load', (e) => {
+  const frame = e.target
+
+  if (frame.classList.contains('Taxonomy-children')) {
+    window.requestAnimationFrame(() => {
+      frame.closest('.Taxonomy').scrollTo({ left: 30000 })
+    })
+  }
+})