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

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

@@ -0,0 +1,70 @@
+.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

@@ -0,0 +1,292 @@
+.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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,109 @@
+.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

@@ -0,0 +1,27 @@
+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;
+}