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

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

@@ -1,70 +0,0 @@
-.Revision {
-  --Revision-revisionColor: transparent;
-  --Revision-revisionTextColor: theme(colors.black.DEFAULT);
-  --Revision-revisionEmphasisColor: theme(colors.black.DEFAULT);
-  --Revision-revisionBackgroundColor: transparent;
-
-  &.is-live,
-  .Message.is-live {
-    --Revision-revisionColor: theme(colors.success.200);
-    --Revision-revisionTextColor: theme(colors.success.600);
-    --Revision-revisionEmphasisColor: theme(colors.success.700);
-    --Revision-revisionBackgroundColor: theme(colors.success.25);
-  }
-
-  &.is-archived,
-  .Message.is-archived {
-    --Revision-revisionColor: theme(colors.error.200);
-    --Revision-revisionTextColor: theme(colors.error.600);
-    --Revision-revisionEmphasisColor: theme(colors.error.700);
-    --Revision-revisionBackgroundColor: theme(colors.error.25);
-  }
-
-  &.is-updated,
-  .Message.is-updated {
-    --Revision-revisionColor: theme(colors.success.200);
-    --Revision-revisionTextColor: theme(colors.success.600);
-    --Revision-revisionEmphasisColor: theme(colors.success.700);
-    --Revision-revisionBackgroundColor: theme(colors.success.25);
-  }
-
-  &.is-draft,
-  .Message.is-draft {
-    --Revision-revisionColor: theme(colors.primary.200);
-    --Revision-revisionTextColor: theme(colors.primary.600);
-    --Revision-revisionEmphasisColor: theme(colors.primary.700);
-    --Revision-revisionBackgroundColor: theme(colors.primary.25);
-  }
-
-  &.is-revision,
-  .Message.is-revision {
-    --Revision-revisionColor: theme(colors.purple.200);
-    --Revision-revisionTextColor: theme(colors.purple.600);
-    --Revision-revisionEmphasisColor: theme(colors.purple.700);
-    --Revision-revisionBackgroundColor: theme(colors.purple.25);
-  }
-
-  &.is-scheduled,
-  .Message.is-scheduled {
-    --Revision-revisionColor: theme(colors.warning.200);
-    --Revision-revisionTextColor: theme(colors.warning.600);
-    --Revision-revisionEmphasisColor: theme(colors.warning.700);
-    --Revision-revisionBackgroundColor: theme(colors.warning.25);
-  }
-
-  &.is-workflow,
-  .Message.is-workflow {
-    --Revision-revisionColor: theme(colors.gray.200);
-    --Revision-revisionTextColor: theme(colors.gray.600);
-    --Revision-revisionEmphasisColor: theme(colors.gray.700);
-    --Revision-revisionBackgroundColor: theme(colors.gray.25);
-  }
-
-  &.is-progress,
-  .Message.is-progress {
-    --Revision-revisionColor: theme(colors.purple.200);
-    --Revision-revisionTextColor: theme(colors.purple.600);
-    --Revision-revisionEmphasisColor: theme(colors.purple.700);
-    --Revision-revisionBackgroundColor: theme(colors.purple.25);
-  }
-}

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

@@ -1,292 +0,0 @@
-.Revisions-list {
-  @apply grid auto-rows-max grid-cols-subgrid ![grid-column:fullbleed-start/fullbleed-end];
-}
-
-.Revisions-list > * {
-  @apply [grid-column:fullbleed-start/fullbleed-end];
-}
-
-.Revisions-listItem {
-  /*
-    By default the status colors are gray unless:
-    - the user customizes the status color
-    - a status is set
-  */
-  --background: theme(colors.gray.100);
-  --foreground: theme(colors.gray.700);
-  @apply border-t border-gray-200 p-4 [--branch-size:1.75rem];
-}
-
-.Revisions-listItem.is-archived {
-  --background: theme(colors.error.50);
-  --foreground: theme(colors.error.700);
-}
-
-.Revisions-listItem.is-draft {
-  --background: theme(colors.primary.50);
-  --foreground: theme(colors.primary.700);
-}
-
-.Revisions-listItem.is-revision {
-  --background: theme(colors.purple.50);
-  --foreground: theme(colors.purple.700);
-}
-
-.Revisions-listItem.is-scheduled {
-  --background: theme(colors.warning.50);
-  --foreground: theme(colors.warning.700);
-}
-
-.Revisions-listItem.is-live,
-.Revisions-listItem.is-updated {
-  --background: theme(colors.success.50);
-  --foreground: theme(colors.success.700);
-}
-
-.Revisions-listItem.is-workflow {
-  --background: theme(colors.gray.100);
-  --foreground: theme(colors.gray.700);
-}
-
-.Revisions-listItem.is-active {
-  @apply bg-primary-50;
-}
-
-.Revisions-listItem.is-active > .Revisions-listItem-children,
-.Revisions-listItem-children
-  .Revisions-listItem.is-active
-  > .Revisions-listItemInfo {
-  @apply pt-4;
-}
-
-.is-parentRevision .Revisions-workflowComment {
-  @apply bg-gray-100;
-}
-
-.Revisions-listItem:has(> .Revisions-listItemInfo .Revisions-more.is-active) {
-  @apply z-10;
-}
-
-.Revisions-listItem.is-parentRevision.is-active,
-.Revisions-listItem-children .Revisions-listItem.is-active {
-  @apply before:absolute before:-inset-4 before:bg-primary-50 before:[grid-column:1/-1] before:[grid-row:1/1] before:[inset-inline-start:-100%];
-}
-
-.Revisions-listItem-children .Revisions-listItem.is-active {
-  @apply relative before:top-0;
-}
-
-.Revisions-listItem.is-log {
-  @apply grid grid-cols-[min-content_1fr] gap-x-[0.3rem] ps-2 before:btu-icon before:btu-icon-workflow before:items-start before:px-1 before:[grid-column:1];
-}
-
-.Revisions-listItem.is-log.is-child {
-  @apply z-auto;
-}
-
-.Revisions-listItem.is-log .Revisions-listItemInfo {
-  @apply col-start-2 gap-[0.38rem];
-}
-
-/* The last item in the list should have a border top AND bottom. */
-.Revisions-listItem:not(:has(+ .Revisions-listItem)) {
-  @apply border-b border-gray-200;
-}
-
-.Revisions-listItem-collapseButton {
-  @apply btu-button btu-button-text-hidden btu-button-xs items-center p-0 [--button-size-sm:var(--branch-size)] before:btu-icon before:btu-icon-chevron-right touch-device:btu-button-sm rtl:before:btu-icon-chevron-left before:duration-250 before:ease-linear before:[transition:transform];
-}
-
-.Revisions-listItem-collapseButton.is-active {
-  @apply before:rotate-90;
-}
-
-.Revisions-compare {
-  @apply btu-button-text-hidden before:btu-icon before:btu-icon-arrow-right;
-}
-
-.Revisions-listItem.is-parentRevision {
-  @apply relative grid overflow-clip ps-2 [column-gap:0.3rem] [grid-template-columns:min-content_1fr] after:pointer-events-none after:absolute after:left-[0px] after:top-[--branch-size] after:h-[calc(100%_-_2.75rem)] after:w-[--branch-size] after:bg-no-repeat after:transition-opacity after:duration-300 after:[background-image:linear-gradient(theme(colors.gray.300),theme(colors.gray.300))] after:[background-position:center_0px] after:[background-size:1px_100%] after:[grid-column:1] after:[grid-row-start:1];
-}
-
-/* Expanded state of toggle button */
-.Revisions-listItem:has(.Revisions-listItem-collapseButton.is-active) {
-  @apply pb-0 after:opacity-100;
-}
-
-/* Collapsed state of toggle button */
-.Revisions-listItem:has(.Revisions-listItem-collapseButton:not(.is-active)) {
-  @apply after:opacity-0;
-}
-
-/* Expanded parent */
-.Revisions-listItem:has(.Revisions-listItem-collapseButton.is-active) {
-  @apply bg-gray-50;
-}
-
-/* Children of a collapsed parent */
-.Revisions-listItem:has(.Revisions-listItem-collapseButton:not(.is-active))
-  .Revisions-listItem-children {
-  @apply mt-0 h-0 overflow-hidden pt-0 opacity-0;
-}
-
-/* Children of an expanded parent */
-.Revisions-listItem:has(.Revisions-listItem-collapseButton.is-active)
-  .Revisions-listItem-children {
-  @apply h-auto opacity-100;
-}
-
-.Revisions-listItem-children {
-  @apply relative mt-4 !grid h-0 pt-0 transition-[height,padding] duration-300 [grid-column:1/-1] [grid-template-columns:subgrid] before:absolute before:inset-0 before:-mx-4 before:-mb-4 before:bg-transparent before:[grid-column:1/-1];
-}
-
-.Revisions-listItem-children .Revisions-listItem {
-  @apply z-0 grid border-none bg-inherit p-0 pb-4 [grid-column:2];
-}
-
-.Revisions-more {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs before:btu-icon before:btu-icon-ellipsis touch-device:btu-button-sm before:btu-icon-md;
-}
-
-.Revisions-more.is-active {
-  @apply outline outline-primary-100 before:btu-icon-x;
-}
-
-.Revisions-actions > .Dropdown.is-open {
-  @apply Dropdown-is-open;
-}
-
-.Revisions-links {
-  @apply -mx-4 my-0;
-}
-
-.Revisions-links > .Revisions-listItem {
-  @apply mt-0 border-none;
-}
-
-.Revisions-links > .Revisions-listItem > a {
-  @apply text-sm font-semibold no-underline;
-}
-
-.Revisions-label {
-  @apply text-sm font-medium;
-}
-
-.Revisions-toggle {
-  @apply Checkbox-toggle me-2;
-}
-
-.Revisions-pagination {
-  @apply order-last my-4 flex justify-end;
-}
-
-.Revisions-listItemInfo {
-  @apply z-[1] flex flex-row justify-between text-sm;
-}
-
-.Revisions-listItemInfo:has(.Revisions-workflowTransition) {
-  @apply grid justify-normal text-sm font-medium text-gray-700;
-}
-
-.Revisions-listItemLineOne {
-  @apply text-sm font-medium text-gray-900;
-}
-
-.Revisions-listItemLineTwo {
-  @apply text-sm font-medium text-gray-500;
-}
-
-.Revisions-listItemLineThree {
-  @apply flex w-[calc(100%_+_theme(spacing.6))] flex-wrap gap-2;
-  /*
-    The extra width is to pseudo-expand the label into the far column
-    in an attempt to avoid wrapping text.
-  */
-}
-
-.Revisions-listItemLineThree,
-.Revisions-listItemLineFour {
-  @apply break-all;
-}
-
-.Revisions-userLabel {
-  @apply flex items-center text-xs font-medium text-gray-500;
-}
-
-/*
-  Try to pick colors with sufficient contrast relative to the user's color choice.
-*/
-.Revisions-statusLabel[data-status-color] {
-  --foreground: oklch(
-    from var(--status-color) clamp(0.3, calc(l / 1.2), 0.5) c h
-  );
-  --background: oklch(
-    from var(--foreground) clamp(0.908, calc(l * 1.5), 0.98) c h
-  );
-}
-
-.Revisions-statusLabel {
-  @apply btu-badge-sm items-baseline break-keep bg-[--background] text-[--foreground] before:size-2 before:min-w-2 before:rounded-lg before:bg-[--foreground];
-}
-
-/* margin-top is used here to vertically center the text with the flanking icon controls */
-.Revisions-info {
-  @apply mt-1 flex basis-full flex-col flex-wrap gap-2 text-sm font-medium text-gray-900 no-underline;
-}
-
-.Revisions-workflowTransition {
-  @apply order-1 text-xs font-medium text-gray-500;
-}
-
-.Revisions-workflowTransition .Revisions-userLabel {
-  @apply text-xs font-medium text-gray-500;
-}
-
-.Revisions-workflowTransition .Revisions-userLabel > span {
-  @apply me-0.5 min-w-max;
-}
-
-.Revisions-workflowComment {
-  @apply order-2 grow basis-full rounded-lg bg-gray-50 p-2 text-sm text-gray-500;
-}
-
-.Revisions-workflowState {
-  @apply order-3 flex flex-row items-center gap-2;
-}
-
-.Revisions-workflowStateIcon {
-  @apply grid cursor-auto place-items-center before:btu-icon before:btu-icon-arrow-right before:font-semibold before:text-gray-500 before:btu-icon-xs;
-}
-
-/* Adjustments to Guide styles within a Popup (ie, Sites history) */
-.Popup[name='request'] > .Popup-content > .frame {
-  &:not(.has-ActionBarContent) {
-    @apply mb-6 auto-rows-max;
-  }
-
-  /*
-    jquery.frame.js strips .Widget on endLoad ($frame.removeClass('Widget')).
-    The AJAX payload is the widget's inner HTML with no outer .Widget wrapper,
-    so grid-cols-subgrid on .Revisions-list loses its named-line parent.
-    Re-establish the Widget grid here. If Widget's grid-template-columns or
-    --space default changes, update this block to match (see .Widget rule in Widget.css).
-  */
-  &:not(.Widget) {
-    /*
-      Re-declare --space to match .Widget's default (.Widget --space default in Widget.css).
-      Cannot inherit because .Widget is absent from the DOM at this point.
-    */
-    --space: theme(spacing.6); /* keep in sync with Widget.css */
-    @apply relative grid [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_[content-end]_var(--space)_[fullbleed-end]];
-
-    > *:not(.ContentEdit-preview) {
-      @apply [grid-column:content-start/content-end];
-    }
-  }
-  .Widget-filters {
-    @apply border-0;
-  }
-  .Revisions-listItem {
-    @apply px-[--space];
-  }
-}

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

@@ -1,15 +0,0 @@
-.richtext {
-  @apply invisible;
-}
-
-.ProseMirror-loader {
-  @apply absolute left-0 top-0 z-10 grid size-full place-items-center;
-
-  &::after {
-    @apply btu-loader block size-[--loader-size];
-  }
-
-  &.hide {
-    @apply pointer-events-none h-0 opacity-0 transition-all duration-200 ease-out;
-  }
-}

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

@@ -1,90 +0,0 @@
-import onFind from './dom/onFind'
-import storage from './util/storage'
-
-type SearchControlsToggleState = 'EXPANDED' | 'COLLAPSED' | null
-
-const setToggleState = (
-  widget: HTMLDivElement,
-  val: SearchControlsToggleState,
-) => {
-  const widgetName = widget.getAttribute('name')
-  if (widgetName === null) return
-
-  const storageKey =
-    'BSP.v5.SearchWidget' + '/' + widgetName + '/' + 'controls.toggle'
-
-  if (val !== null) {
-    storage.set(storageKey, val)
-  }
-}
-
-const getToggleState = (widget: HTMLDivElement) => {
-  const widgetName = widget.getAttribute('name')
-  if (widgetName === null) return null
-
-  const storageKey =
-    'BSP.v5.SearchWidget' + '/' + widgetName + '/' + 'controls.toggle'
-
-  return storage.get(storageKey) as SearchControlsToggleState
-}
-
-export const toggle = (
-  widget: HTMLDivElement,
-  forcedVal?: SearchControlsToggleState,
-) => {
-  if (forcedVal !== undefined) {
-    setToggleState(widget, forcedVal)
-  } else {
-    setToggleState(
-      widget,
-      getToggleState(widget) === 'EXPANDED' ? 'COLLAPSED' : 'EXPANDED',
-    )
-  }
-
-  // Broadcast a layout update.
-  // Used primarily by the board results view to reflow the cards/cols.
-  window.dispatchEvent(new Event('resize'))
-  update(widget)
-
-  const toggleButton = widget.querySelector<HTMLButtonElement>(
-    '.SearchWidget-controlsToggle',
-  )
-  if (toggleButton) {
-    toggleButton.ariaExpanded =
-      getToggleState(widget) === 'EXPANDED' ? 'true' : 'false'
-  }
-}
-
-const update = (widget: HTMLDivElement) => {
-  const lastToggleState = getToggleState(widget)
-  // Update with last state if it exists.
-  if (lastToggleState !== null) {
-    if (lastToggleState === 'EXPANDED') {
-      widget.classList.remove('filters-collapsed--v5')
-    } else {
-      widget.classList.add('filters-collapsed--v5')
-    }
-  } else {
-    toggle(widget, 'EXPANDED')
-  }
-}
-
-onFind('.SearchWidget', (widget: HTMLDivElement) => {
-  update(widget)
-})
-
-onFind('.SearchWidget-controlsToggle', (button: HTMLButtonElement) => {
-  const widget = button.closest('.SearchWidget, .SearchPage') as HTMLDivElement
-  if (widget === null) return
-
-  button.ariaExpanded = getToggleState(widget) === 'EXPANDED' ? 'true' : 'false'
-
-  // Collapse the search filters on mobile by default.
-  if (window.matchMedia('(max-width: 768px)').matches) {
-    toggle(widget, 'COLLAPSED')
-  }
-
-  button.addEventListener('click', () => {
-    toggle(widget)
-  })
-})

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

@@ -1,109 +0,0 @@
-.SearchFields {
-  @apply grid-rows-[auto_1fr];
-}
-
-.SearchFields-tab-ul {
-  @apply __horizontal-tabs;
-}
-
-.SearchFields-tab {
-  @apply __tab-item;
-}
-
-.SearchFields-tab.is-selected {
-  @apply __tab-item-selected;
-}
-
-.SearchFields-container.is-hidden,
-.SearchFields-divider,
-.SearchFields-input + span {
-  @apply hidden;
-}
-
-.SearchFields-container {
-  @apply flex h-full w-full flex-col gap-4 overflow-y-auto py-6 md:flex-row;
-}
-
-.SearchFields-hide,
-.SearchFields-displayContainer {
-  @apply w-full rounded-lg border md:w-1/2 md:overflow-y-auto;
-}
-
-/* Full height needed for draggable container */
-.SearchFields-displayTitle {
-  @apply flex h-full flex-col;
-}
-
-.SearchFields-heading {
-  @apply btu-heading-5 border-b p-4 text-gray-900;
-}
-
-.SearchFields-heading + btu-input {
-  @apply block px-4 before:btu-icon before:btu-icon-search before:absolute before:left-8 before:top-2;
-
-  input {
-    @apply ps-11;
-  }
-}
-
-.SearchFields-filter {
-  @apply my-4 border-gray-100 bg-gray-100;
-}
-
-.SearchFields-subheading {
-  @apply border-t px-4 py-[13px] text-xs font-medium text-gray-700;
-}
-
-.SearchFields btu-input + ul {
-  @apply border-t;
-}
-
-.SearchFields .RCIG-list {
-  @apply mb-0 grow rounded-t-none;
-}
-
-.SearchFields .RCIG-item {
-  @apply rounded-none;
-}
-
-.SearchFields .RCIG-item:not(.Sortable-ghost, .Sortable-drag) {
-  @apply flex flex-row-reverse border-none bg-white px-4 hover:bg-gray-100;
-
-  /* Sortable styles */
-  &.is-added {
-    --border-to: transparent;
-
-    @apply border-solid;
-  }
-}
-
-.SearchFields .RCIG-item.is-disabled {
-  @apply pointer-events-none opacity-50;
-}
-
-.SearchFields-sort-item-label {
-  @apply grow py-2;
-}
-
-/* Override input styles so they appear as arrow buttons */
-.SearchFields-sort-item-label input.SearchFields-input {
-  @apply btu-button btu-button-text-hidden !btu-button-fill-none btu-button-gray btu-button-xs shrink-0 border-none before:btu-icon before:btu-icon-circle-arrow-right touch-device:btu-button-sm after:hidden;
-}
-
-.SearchFields-displayContainer
-  .SearchFields-sort-item-label
-  input.SearchFields-input {
-  @apply before:btu-icon-circle-arrow-left;
-}
-
-.SearchFields-sort-item-span {
-  @apply me-auto text-sm font-semibold text-gray-900;
-}
-
-.SearchFields-drag {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs shrink-0 before:btu-icon before:btu-icon-grip-vertical touch-device:btu-button-sm hover:cursor-grab;
-}
-
-.SearchFields-missingValue {
-  @apply italic;
-}

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

@@ -1,27 +0,0 @@
-btu-search-input {
-  @apply inline-block;
-}
-
-.SearchInput {
-  @apply relative w-full;
-}
-
-.SearchInput label {
-  @apply pointer-events-none absolute bottom-0 left-4 top-0 my-auto size-5 overflow-hidden before:btu-icon before:btu-icon-search;
-}
-
-.SearchInput btu-input {
-  @apply [position:initial] before:content-none;
-}
-
-.SearchInput input[type] {
-  @apply w-full border-transparent bg-gray-100 pl-[calc(theme(iconSize.md)+theme(spacing.6))] focus:border-primary-600;
-
-  &:hover:not(:focus-visible) {
-    @apply border-gray-300;
-  }
-}
-
-.SearchInput :is(button, input[type='submit']) {
-  @apply hidden;
-}