@brightspot/ui 3.0.1 → 5.0.0

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

@@ -0,0 +1,152 @@
+.ProseMirror-fullscreen-container {
+  @apply absolute inset-0 z-40 grid h-screen w-dvw grid-rows-[auto_1fr] p-0 transition;
+
+  &.hide {
+    @apply !block scale-0 opacity-0;
+  }
+
+  .ProseMirror-fullscreen-container-header {
+    @apply flex items-center gap-x-4 px-4 py-3;
+
+    .InputWrapper {
+      @apply basis-full;
+    }
+
+    .ProseMirror-fullscreen-container-header-aside .WorkInProgressSaveStatus {
+      &:not(:empty) {
+        @apply btu-badge-gray btu-badge-sm text-nowrap text-xs font-medium text-gray-700 no-underline opacity-100 before:btu-icon before:btu-icon-cloud before:me-1 before:text-gray-500 max-md:max-w-[calc(20px_+_1rem)] max-md:overflow-clip;
+      }
+
+      &[data-status='deleted'] {
+        @apply pointer-events-none;
+      }
+    }
+  }
+
+  .ProseMirrorContainer {
+    @apply row-[2/3] grid grid-rows-[min-content_auto] gap-y-4 overflow-hidden rounded-none border-x-0 border-b-0 bg-gray-100 pb-4 [grid-template-areas:'toolbar'_'main'];
+  }
+
+  &.is-comments:not(.is-htmlMode) {
+    .ProseMirrorContainer {
+      @apply lg:grid-cols-[70%_30%] lg:[grid-template-areas:'toolbar_toolbar'_'main_aside'];
+    }
+
+    .ProseMirror-comments {
+      @apply mr-4 lg:block;
+    }
+  }
+
+  .ProseMirror-comments {
+    @apply hidden overflow-y-auto rounded-lg bg-white [grid-area:aside];
+  }
+
+  .ProseMirrorToolbar {
+    @apply rounded-t-none bg-white [grid-area:toolbar];
+
+    .rte2-toolbar-fullscreen {
+      @apply before:btu-icon-minimize-2;
+    }
+
+    &:has(+ .ProseMirror:focus) {
+      @apply border-gray-200;
+    }
+  }
+
+  .ProseMirror,
+  &.is-htmlMode .CodeMirror {
+    @apply size-full max-w-[682px] justify-self-center [grid-area:main] max-md:w-[calc(100%-32px)] 2xl:max-w-5xl;
+  }
+
+  .ProseMirror {
+    @apply overflow-y-auto rounded-t-lg border border-transparent bg-white p-5 text-lg focus:ring-primary-100 focus:border-primary-600 focus:ring-4 lg:p-10;
+
+    .Enhancement-label {
+      @apply items-center py-0;
+    }
+
+    .rte2-style-comment {
+      @apply before:pt-[3px];
+    }
+  }
+
+  /* Hides move enhancement button */
+  a[data-icon='open_with'] {
+    @apply !hidden;
+  }
+}
+
+/* * * * * * * * * * * * * */
+/* * * COMMENTS COLUMN * * */
+/* * * * * * * * * * * * * */
+
+:is(.ProseMirror-comment, .ProseMirror-reply) {
+  @apply grid cursor-pointer grid-cols-[1fr_auto] [grid-template-areas:'user_action'_'time_action'_'text_text'];
+}
+
+.ProseMirror-reply {
+  @apply pl-4 pt-4;
+}
+
+.ProseMirror-comment {
+  @apply border-b border-l-2 border-l-transparent p-4;
+}
+
+.ProseMirror-comment.is-active {
+  @apply border-l-primary-500 data-[type=del]:border-l-error-500 data-[type=ins]:border-l-success-500;
+}
+
+.ProseMirror-commentUser {
+  @apply text-sm font-medium text-gray-900;
+}
+
+.ProseMirror-commentTime {
+  @apply flex items-center text-xs text-gray-500 [grid-area:time];
+
+  /* marker dot */
+  @apply before:mx-[5px] before:size-2 before:rounded-full before:bg-primary-500;
+
+  .ProseMirror-comment.is-del & {
+    @apply before:bg-error-500;
+  }
+
+  .ProseMirror-comment.is-ins & {
+    @apply before:bg-success-500;
+  }
+}
+
+.ProseMirror-commentText {
+  @apply pt-2 text-sm text-gray-900 [grid-area:text];
+}
+
+.ProseMirror-commentActions {
+  @apply [grid-area:action];
+}
+
+.ProseMirror-commentReply,
+.ProseMirror-commentRemove,
+.ProseMirror-commentAccept,
+.ProseMirror-commentReject {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs before:btu-icon touch-device:btu-button-sm;
+
+  .ProseMirror-comment:not(.is-active) & {
+    @apply btu-button-disabled;
+  }
+}
+
+.ProseMirror-commentRemove {
+  @apply before:btu-icon-trash;
+}
+
+.ProseMirror-commentReply {
+  @apply before:btu-icon-reply;
+}
+
+/* track changes "comments" */
+.ProseMirror-commentAccept {
+  @apply before:btu-icon-circle-check-big;
+}
+
+.ProseMirror-commentReject {
+  @apply before:btu-icon-circle-x;
+}

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

@@ -0,0 +1,9 @@
+[data-type='com.psddev.graphql.gca.editorial.EditorialGCASchemaSettings'] {
+  .CIG-noteItem code {
+    @apply bg-gray-100;
+  }
+
+  .CIG-noteItem ul {
+    @apply list-disc ps-4;
+  }
+}

package/src/legacy/tool-ui/src/Global.d.ts

@@ -0,0 +1,219 @@
+export {}
+
+declare global {
+  interface Window {
+    BRIGHTSPOT: {
+      ai: {
+        AI_CHAT_ENABLED: boolean
+        submitSuggestion: string
+        showPromptSuggestions: string
+      }
+      ariaDebug: boolean
+      focusRegions: Record<string, number>
+      icons: {
+        materialToLucide: Record<string, string>
+      }
+      js: {
+        onFind: function
+        onRemove: function
+      }
+      ui: {
+        cms: {
+          enableAutomaticUpdates: boolean
+          enableV5UI: boolean
+        }
+        input: {
+          secretHide: string
+          secretShow: string
+        }
+        rte: {
+          buttonOk: string
+          buttonCancel: string
+          buttonMoreMenu: string
+          olWidgetTitle: string
+        }
+        sortable: {
+          genericList: string
+          namedList: string
+          contains: string
+          canContain: string
+          listGainedFocus: string
+          itemChangedPosition: string
+          itemDragCancelled: string
+          itemDragStarted: string
+          itemDropped: string
+        }
+        tooltips: {
+          add: string
+          action: {
+            favorite: string
+            unfavorite: string
+          }
+          actions: {
+            actions: string
+            contentEdit: string
+            contentSelector: string
+            searchResult: string
+            widget: string
+          }
+          aspectRatio: string
+          calendar: {
+            next: string
+            previous: string
+            schedule: string
+          }
+          charCountCharacterPlural: string
+          charCountCharacterSingular: string
+          charCountMaximum: string
+          charCountMinimum: string
+          charCountWordPlural: string
+          charCountWordSingular: string
+          chatWithOpenAI: string
+          close: string
+          collapse: string
+          collapseAll: string
+          confirmDeleteParentComment: string
+          confirmPopupUnsaved: string
+          combo: {
+            empty: string
+            multi: string
+          }
+          createNew: string
+          multiSort: string
+          edit: string
+          editTheme: string
+          expand: string
+          expandAll: string
+          imageHeight: string
+          imageHeightOpen: string
+          imageHeightClose: string
+          fieldSelect: string
+          fieldHide: string
+          filtersHide: string
+          filtersShow: string
+          focusTrapHint: string
+          fullScreen: string
+          fullScreenSearch: string
+          imageEditor: {
+            actions: string
+            flipH: string
+            flipV: string
+            focus: string
+            open: string
+            rotateLeft: string
+            rotateRight: string
+          }
+          itemHide: string
+          itemShow: string
+          listOpen: string
+          menu: {
+            open: string
+            close: string
+          }
+          navigation: {
+            nextItem: string
+            prevItem: string
+          }
+          new: string
+          newNotifications: string
+          notifications: string
+          open: string
+          preview: {
+            open: string
+            close: string
+            iframeTitle: string
+            opened: string
+            closed: string
+          }
+          size: string
+          skipLinks: {
+            heading: string
+            pageHeader: string
+            mainContent: string
+            navigation: string
+            note: string
+            pageNavigation: string
+          }
+          skipToContent: string
+          remove: string
+          reset: string
+          resetWeights: string
+          restore: string
+          search: {
+            label: string
+          }
+          tabs: string
+          toggleOff: string
+          toggleOn: strings
+          view: string
+        }
+        workflow: {
+          add: string
+          published: string
+          placeholder: string
+          remove: string
+          stateLegend: string
+          transitions: string
+          state: string
+          transitionLegend: string
+        }
+      }
+      web: {
+        pathPrefix: string
+        path: string
+        pagePaths: { [key: string]: string }
+      }
+    }
+    btuCelebrate: HTMLElement | null
+    jQuery: any
+    CONTEXT_PATH: string
+    DISABLE_RTC: boolean
+    PubSub: {
+      subscribe: (
+        event: string,
+        handler: (rte: any) => void,
+      ) => { remove: () => void }
+    }
+    RICH_TEXT_ELEMENTS: unknown
+    RTE_PROMPT_PLACEHOLDER: string
+    RTE_PROMPT_PREFIX: string
+    RTE_PROMPT_RETRY: string
+    RTE_WORKING_ON_IT: string
+    RTE_ACCEPT: string
+    RTE_DISCARD: string
+    RTE_TRY_AGAIN: string
+    RTE_REPLACE: string
+    RTE_REPLACE_ALL: string
+    RTE_FIND_IN_ARTICLE: string
+    RTE_REPLACE_WITH: string
+    RTE_MATCH_CASE: string
+    RTE_MATCH_WHOLE_WORD: string
+    ROOT_PATH: string
+  }
+
+  type Class<T> = new (...args: any[]) => T
+  type Constructor<T = object> = new (...args: any[]) => T
+  type UnpackCustomEvent<T> = T extends CustomEvent<infer U> ? U : never
+
+  // All global custom event types:
+  interface CustomEventMap {
+    'btu-announce': CustomEvent<string>
+    'btu-resolve-icon': CustomEvent<{ name: string; element: HTMLElement }>
+    'page-nav-rail-toggled': CustomEvent<{ toggleState: PageNavToggleState }>
+  }
+
+  interface CombinedEventMap extends HTMLElementEventMap, CustomEventMap {}
+
+  interface CustomEventElement {
+    addEventListener<K extends keyof CombinedEventMap>(
+      type: K,
+      listener: (this: CustomEventElement, ev: CombinedEventMap[K]) => void,
+      options?: boolean | AddEventListenerOptions,
+    ): void
+    removeEventListener<K extends keyof CombinedEventMap>(
+      type: K,
+      listener: (this: CustomEventElement, ev: CombinedEventMap[K]) => void,
+      options?: boolean | EventListenerOptions,
+    ): void
+  }
+}

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

@@ -0,0 +1,74 @@
+.GraphQL {
+  @apply flex flex-col;
+}
+
+.GraphQL-widget {
+  @apply h-full;
+}
+
+.GraphQL-controls {
+  @apply flex items-center gap-2 p-4;
+}
+
+.GraphQL-form {
+  @apply w-[25dvw];
+}
+
+.GraphQL-options {
+  @apply text-sm;
+}
+
+.GraphQL-controls-menu {
+  @apply ms-auto;
+}
+
+.GraphQL-controls-toggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-settings;
+}
+
+.GraphQL-controls-list {
+  @apply Dropdown;
+}
+
+.GraphQL-controls-menu.is-open .GraphQL-controls-list {
+  @apply Dropdown-is-open;
+}
+
+.GraphQL-controls-list li {
+  @apply Dropdown-item;
+}
+
+.GraphQL-frame {
+  @apply size-full;
+}
+
+/* View Schema Popup */
+.GraphQL-printed-schema {
+  @apply my-4 whitespace-pre-wrap break-words text-sm;
+}
+
+/* Share Query Popup */
+.GraphQL-copy-container {
+  @apply me-2 inline-flex items-center;
+}
+
+.GraphQL-copy-confirmation {
+  @apply font-bold text-gray-700;
+}
+
+.GraphQL-copy {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-copy;
+
+  &[data-copied] {
+    @apply before:btu-icon-check;
+  }
+}
+
+.GraphQL-open {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-external-link;
+}
+
+/* Hidden fields */
+.GraphQL-hidden {
+  @apply hidden;
+}

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

@@ -0,0 +1,4 @@
+.GraphQLApis-buttonOnly.CIG-row.inputContainer .CIG-label.inputLabel,
+.GraphQLApis-buttonOnly.CIG-row.inputContainer .CIG-small.inputSmall-text {
+  @apply hidden;
+}

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

@@ -0,0 +1,193 @@
+.Guide {
+  /* Note: First variable factors in height of breadcrumbs icon (not yet implemented). */
+  --guide-tab-cluster-h: calc(theme(padding.6) + theme(iconSize.md));
+  --guide-edit-icon-size: calc(theme(padding.4) + theme(iconSize.md));
+
+  @apply grid h-full grid-rows-[auto_1fr] border-r border-r-gray-200;
+
+  > .Guide-content {
+    @apply overflow-auto;
+
+    > .Guide-description {
+      @apply first:mt-2;
+    }
+  }
+}
+
+.Guide-title {
+  --guide-title-h: calc(var(--guide-edit-icon-size) + theme(padding.6));
+  --guide-controls-w: calc(2 * var(--guide-edit-icon-size) + theme(padding.8));
+
+  @apply btu-heading-4 relative h-[var(--guide-title-h)] truncate border-b border-b-gray-200 bg-gray-50 py-3.5 pl-4 pr-[var(--guide-controls-w)] text-gray-900;
+}
+
+.Guide-controls {
+  @apply absolute right-4 top-3 flex items-center gap-2;
+}
+
+.Guide-edit {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-pen before:btu-icon-md;
+}
+
+.Guide-close {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-x before:btu-icon-md;
+}
+
+.Guide-description,
+.Guide-fieldDescription {
+  @apply text-sm text-gray-500;
+
+  b {
+    @apply font-[700];
+  }
+
+  i {
+    @apply italic;
+  }
+
+  img {
+    @apply max-w-full;
+  }
+
+  ol,
+  ul {
+    @apply pl-5 pt-2 [list-style-type:revert];
+  }
+
+  u {
+    @apply underline;
+  }
+
+  .cms-textAlign-center {
+    @apply text-center;
+  }
+
+  .cms-textAlign-right {
+    @apply text-right;
+  }
+}
+
+.Guide-description {
+  @apply px-4 py-2 text-sm font-normal text-gray-500;
+}
+
+.Guide-tabCluster {
+  @apply sticky -top-[1px] z-[1] mt-2 flex h-[var(--guide-tab-cluster-h)] items-center justify-between gap-2 border-y border-gray-200 bg-gray-50 px-4 py-2 text-xs font-medium text-gray-900;
+
+  .Guide-content > &:first-child {
+    @apply -mt-[1px];
+  }
+}
+
+.Guide-image {
+  @apply my-4 block;
+
+  > img {
+    @apply block;
+  }
+}
+
+.Guide-field {
+  @apply mx-4 mt-4 flex scroll-mt-[calc(var(--guide-tab-cluster-h)-1px)] flex-col gap-1.5 rounded-lg px-4 py-2;
+
+  form {
+    @apply w-[calc(100%-var(--guide-edit-icon-size)-0.5rem)];
+  }
+
+  &.is-focus {
+    @apply bg-primary-50;
+  }
+}
+
+.Guide-fieldName {
+  @apply text-sm font-semibold text-gray-700;
+}
+
+.Guide-embedded {
+  @apply relative ml-2.5 pl-2.5 shadow-[-1px_0_0_theme(colors.gray.300)];
+
+  > .Guide-edit {
+    @apply absolute right-0 top-[calc(0px-var(--guide-edit-icon-size)-0.5rem-1px)];
+  }
+
+  .Guide-field,
+  .Guide-description {
+    @apply pl-1 pr-0;
+  }
+
+  .Guide-tabCluster {
+    @apply hidden;
+  }
+}
+
+.Popup[name='edit-guide'] {
+  /* Production Guide edit page does not need "Delete Permanently" button*/
+  .ActionBar > button[name='action-delete'] {
+    @apply hidden;
+  }
+
+  /* Hide the "remove" button  */
+  .RCIG-item {
+    @apply grid-cols-[1fr_repeat(2,auto)];
+
+    > .RCIG-remove {
+      @apply hidden;
+    }
+
+    &:not(.has-dropdown-actions) {
+      @apply grid-cols-[1fr];
+
+      > btu-dropdown {
+        @apply hidden;
+      }
+
+      /* Hide the vertical line when both remove button and dropdown are hidden */
+      > .RCIG-title {
+        @apply [background-image:none];
+      }
+    }
+  }
+}
+
+.frame[name='guideField'] {
+  .Guide {
+    @apply border-l-0;
+  }
+
+  .Guide-field {
+    @apply px-0 py-4;
+  }
+
+  .Guide-fieldDescription {
+    @apply text-gray-700;
+  }
+}
+
+/* Make guide icon appear only on applicable popups */
+.Popup {
+  &[data-subject-type='true'] a.CIG-guide {
+    @apply block;
+  }
+
+  a.CIG-guide {
+    @apply hidden;
+  }
+}
+
+.Popup[name='helpField'] > .Popup-content {
+  @apply pb-6;
+}
+
+.Popup[name='guideField'] {
+  .Popup-content {
+    @apply pb-8;
+  }
+
+  .Guide {
+    @apply border-r-0;
+  }
+
+  .Guide-title {
+    @apply bg-white;
+  }
+}

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

@@ -0,0 +1,25 @@
+.GuideField {
+  .DT {
+    @apply __static-table mb-4 mt-2 first:mx-auto first:my-6 first:w-[calc(100%-1rem)];
+  }
+
+  .TC-panel-heading {
+    @apply mb-4 mt-6;
+  }
+
+  code {
+    @apply font-sans;
+  }
+
+  ul {
+    @apply mx-2;
+
+    > li {
+      @apply mt-4;
+
+      > a {
+        @apply text-sm;
+      }
+    }
+  }
+}