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

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

@@ -0,0 +1,21 @@
+.Viewers {
+  @apply relative;
+
+  > .Viewers-some {
+    /* Overlap the list of viewers. */
+    @apply flex -space-x-4;
+  }
+
+  > .Viewers-some > .Viewers-viewer {
+    @apply relative overflow-hidden rounded-full;
+
+    .Avatar {
+      --avatar-size: theme('avatar.size.xs');
+      @apply border-[1.5px] border-white dark:bg-[oklch(from_var(--avatar-bg-color)_calc(l_*_1.6)_c_h)];
+    }
+
+    &:where([data-editing], [data-locked]) .Avatar {
+      @apply border-success-400;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+.Week-row {
+  @apply relative flex min-h-[72px];
+
+  &:not(:last-child) {
+    @apply before:absolute before:bottom-0 before:left-[39px] before:right-0 before:h-px before:bg-gray-200;
+  }
+}
+
+.Week-day {
+  @apply flex items-center border-e text-center [background:linear-gradient(to_right,theme(colors.gray.50)_38px,theme(colors.gray.200)_38px,theme(colors.gray.200)_39px,theme(colors.white.DEFAULT)_39px,theme(colors.white.DEFAULT))];
+}
+
+.Week-dow {
+  @apply w-[38px] px-[7px] text-xs font-semibold text-gray-500;
+}
+
+.Week-dom {
+  @apply w-14 px-4 text-sm text-gray-500;
+}
+
+.Week-content {
+  @apply w-full p-1 text-xs;
+}

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

@@ -0,0 +1,622 @@
+/* The file sets up the basic grid structure for Widgets, establishing uniform horizontal spacing around the content inside it.
+   This spacing can be adjusted for different use cases through a combination of one or more of the following:
+    1) --space css variable for the Widget
+    2) grid-column property and horizontal padding of individual components
+
+   The file also sets the default styles for Widget-title & Widget-controls in both collapsible and noncollapsible widgets.
+
+   Any use cases that need to overwrite these styles should be added to this file.
+*/
+.Widget {
+  --Widget-padding: var(--gap-l);
+  --space: theme(spacing.6); /* keep in sync with Revisions.css */
+
+  @apply relative grid bg-white [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-title {
+  @apply btu-heading-5 sticky top-0 z-10 overflow-x-clip text-ellipsis whitespace-nowrap border-b border-b-gray-200 bg-white py-3.5 text-gray-900;
+
+  .Label {
+    @apply inline-flex;
+  }
+}
+
+.Widget-controls {
+  @apply sticky top-0 z-[11] flex items-center gap-2 border-b border-b-gray-200 bg-inherit empty:hidden;
+}
+
+.Widget-controls.is-locked {
+  @apply !hidden;
+}
+
+/* By default widget titles take up the entire width of widget grid
+ * Note: There are use cases where Widget-title is present outside of Widget (e.g ContentSummary popup)
+*/
+.Widget .Widget-title {
+  @apply px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
+}
+
+.Widget:not(.is-collapsible) {
+  &:has(.Widget-controls:not(:empty)) > .Widget-title {
+    @apply pe-0 [grid-column:fullbleed-start_/_span_2];
+  }
+
+  /* Widget controls appear on the top right corner of the widget on the same row as title */
+  .Widget-controls {
+    @apply pe-[--space] [grid-column:span_2_/_fullbleed-end];
+  }
+
+  .Admin-leftNav-controls {
+    @apply ps-2;
+  }
+
+  .Admin-main & {
+    /* When Widget-controls is moved inside form by JavaScript, make form participate in grid */
+    form:has(> .Widget-controls) {
+      @apply contents;
+    }
+
+    /* For Admin pages pin controls to row 1 so they align with the title */
+    .Widget-controls:has(> button:not(.FormFilter-icon)) {
+      @apply bg-white [grid-row:1];
+    }
+  }
+}
+
+.Widget-actionsToggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
+}
+
+.Widget-actionsList {
+  @apply Dropdown z-[10000];
+
+  [role='menuitem'] {
+    @apply Dropdown-item;
+  }
+}
+
+.Widget-actions.is-open {
+  .Widget-actionsList {
+    @apply Dropdown-is-open;
+  }
+
+  .Widget-actionsToggle {
+    @apply btu-button-pressed;
+  }
+}
+
+.Widget
+  :is(
+    .widget-urls.is-readOnly,
+    .widget-urlsRepeatable.is-readOnly,
+    .ContentEditSites-owner.is-readOnly,
+    .ContentEditSites-access.is-readOnly
+  ) {
+  @apply pointer-events-none select-none opacity-75;
+}
+
+.Widget .is-readOnly .UrlsWidget-itemLabel a,
+.widget .is-readOnly .RCIG-title:after,
+.widget .is-readOnly .ContentSummary-info,
+.widget .is-readOnly .ContentSelector-edit {
+  @apply pointer-events-auto cursor-pointer;
+}
+
+/* Collapsible widgets where widget titles have expand/collapse controls (e.g. Right rail publishing tools)
+** Note: In this use case Widget-controls are children of Widget-title instead of their sibling
+*/
+.Widget.is-collapsible {
+  @apply h-[min-content];
+
+  .Widget-title {
+    @apply cursor-pointer py-2 hover:bg-gray-100 focus-visible:ring-0;
+  }
+
+  .Widget-expand {
+    @apply relative inline-flex w-full items-center gap-2 focus:ring-0;
+  }
+
+  .Widget-title:has(.Widget-expand:focus-visible) {
+    @apply ring-offset-4 ring-1 ring-inset ring-primary-600 ring-offset-primary-100 more-contrast:ring-4;
+  }
+
+  .Widget-controls {
+    @apply order-2 ms-auto border-b-0;
+  }
+
+  .Widget-collapse {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-chevron-up before:transition-transform;
+  }
+}
+
+.Widget.is-collapsed {
+  @apply overflow-clip border-b-0 pb-0;
+
+  .Widget-collapse {
+    @apply before:rotate-180;
+  }
+
+  > div,
+  > table {
+    @apply hidden;
+  }
+}
+
+.Widget.is-error > .Widget-title {
+  @apply text-error-600;
+
+  .Widget-expand {
+    @apply after:btu-icon after:btu-icon-circle-alert after:text-error-600;
+  }
+}
+
+.Widget-heading {
+  @apply py-2 text-sm font-semibold text-gray-900;
+}
+
+.Widget-restoreButton {
+  @apply btu-button btu-button-text-hidden btu-button-gray before:btu-icon before:btu-icon-archive-restore;
+}
+
+/* Customizing spacing and widget styles for different use cases */
+.Widget > form,
+.Widget > form > .fixedScrollable {
+  &:has(> .TC, > .CIG, > .SearchInput, > .ActionBar) {
+    @apply grid grid-cols-subgrid [grid-column:fullbleed-start_/_fullbleed-end];
+
+    & > :not(.ActionBar, .Widget-controls, .Message) {
+      @apply px-0 [grid-column:content-start_/_content-end];
+    }
+  }
+
+  > .ActionBar {
+    @apply mt-6;
+  }
+}
+
+/* Provide a matching gap at the bottom of scrollable widgets with a CIG at the end */
+.Widget > .StandardForm .CIG:not(+ .ActionBar),
+.Widget > form > .fixedScrollable > .CIG:last-child {
+  @apply pb-[--CIG-padding];
+}
+
+/*
+  Occupy more space when a Widget has a message which isn't followed by any other elements.
+  eg: Open the notification popup with no notifications.
+ */
+.Widget .Message:not(:has(+ *)) {
+  @apply my-4 rounded-lg border;
+}
+
+/* Tabs, Messages & ActionBar components inside Widgets should take up the entire width of widget
+   These selectors have been copied down from v4 styles
+*/
+.Widget,
+.Widget > form,
+.Widget > form > .fixedScrollable {
+  > .TabBar,
+  > .Message:has(+ *),
+  > * > .Message:has(+ *) {
+    @apply [grid-column:fullbleed-start_/_fullbleed-end];
+  }
+
+  > .TC,
+  > .CIG,
+  > .SearchInput {
+    @apply px-0 [grid-column:content-start_/_content-end];
+  }
+
+  > .CIG > .TabBar {
+    @apply [--pull-inline:var(--space)];
+  }
+
+  > .ActionBar {
+    @apply border-b-0 px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
+  }
+}
+
+/* Data Tables inside a widget (Eg: Admin > About page) */
+.Widget > table.DT {
+  @apply table-fixed [grid-column:fullbleed-start_/_fullbleed-end];
+  th,
+  td {
+    @apply overflow-hidden text-ellipsis text-nowrap;
+  }
+}
+
+/* Profile Dropdown popup widget */
+.Widget:has(.ProfileDropdown-items) {
+  --space: theme(spacing.4);
+
+  > .ProfileDropdown-items {
+    @apply [grid-column:fullbleed-start_/_fullbleed-end];
+  }
+
+  > .Widget-title {
+    @apply py-3;
+  }
+}
+
+/* Notifications Widget */
+.Widget.ToolUserNotifications {
+  --space: theme(spacing.4);
+  @apply w-[360px];
+}
+
+/* Content edit right rail collapsible widget styles */
+.ContentEdit-right :where(.Widget) {
+  --space: theme(spacing.4);
+
+  .Widget-title {
+    @apply text-sm;
+  }
+
+  &.is-collapsible {
+    .Widget-collapse {
+      @apply size-7 p-1;
+    }
+
+    &:not(.is-collapsed) .Widget-title {
+      @apply bg-primary-50 hover:bg-gray-100;
+    }
+
+    &:not(.is-collapsed):not(.is-error) .Widget-title {
+      @apply text-primary-800 hover:text-gray-900;
+    }
+  }
+}
+
+/* Looking Glass Widget styles */
+.Widget[name='lookingGlass'] {
+  .Widget-title {
+    @apply flex items-center;
+  }
+
+  img {
+    @apply my-6;
+  }
+
+  ul:has(.LookingGlass-actions) {
+    @apply m-0 px-[--space] [grid-column:fullbleed-start_/_fullbleed-end];
+  }
+}
+
+/* Module Picker Widget styles */
+.Widget[name='AddEmbeddedContent'] {
+  > .StyleEmbeddedContent {
+    @apply col-span-full;
+  }
+}
+
+/* Date Widget */
+.Widget > .DateStringCalendar {
+  @apply contents;
+
+  > * {
+    @apply [grid-column:content-start_/_content-end];
+  }
+
+  > .DateStringCalendarDate,
+  > .DateStringCalendarForm {
+    @apply px-4 [grid-column:fullbleed-start_/_fullbleed-end];
+  }
+}
+
+/* Diff Widget */
+.Widget[name='diff'] > * {
+  @apply col-span-full;
+}
+
+/* Conversations Widget */
+.Widget:has(.Conversation-posts) {
+  .Widget-title {
+    @apply px-4;
+  }
+}
+
+/* When a Widget is a child of a Widget it should go full width */
+.Widget > .Widget {
+  @apply col-span-full;
+}
+
+/* Conversation Edit Popup */
+.Widget[name='conversation-edit-post'] {
+  &:has(.Widget-controls) {
+    .Widget-title {
+      @apply pe-16;
+    }
+  }
+
+  .Widget-controls {
+    @apply z-10;
+  }
+
+  .Widget-actions {
+    @apply fixed left-[calc(var(--Tether-rl)+var(--Tether-rw)-(var(--Icon-size)*2)-theme(spacing.7)-theme(spacing.3))];
+  }
+}
+
+.Admin-nav :where(.Widget),
+.ContentEdit-right :where(.Widget) {
+  --space: theme(spacing.4);
+
+  > .Message:has(+ *) {
+    @apply rounded-lg border [grid-column:content-start_/_content-end];
+  }
+}
+
+.Admin-main.is-miller :where(.Widget > .BulletedList) {
+  @apply [grid-column:fullbleed-start_/_fullbleed-end];
+
+  > li {
+    @apply px-[--space];
+  }
+}
+
+.Popup :where(.Widget:has(> .Admin)) {
+  --space: 0rem;
+}
+
+/* Search Widget styles */
+btu-widget.SearchWidget-moreFilters {
+  --space: 0rem;
+}
+
+btu-widget.SearchWidget-recent,
+btu-widget.SearchWidget-saved,
+btu-widget.SearchWidget-create {
+  --space: 1rem;
+}
+
+/* Content Reporting Widget */
+.ContentReportingWidget .Widget {
+  @apply [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_auto_[content-end]_var(--space)_[fullbleed-end]];
+
+  .ContentReporting-runLink {
+    @apply [grid-column:3] [grid-row:1];
+  }
+
+  .Widget-controls {
+    @apply ps-2;
+  }
+}
+
+/* Advanced Query Field Popup widget */
+.Widget.SearchWidgetAdvanced {
+  @apply grid-cols-[[fullbleed-start]_var(--space)_[content-start]_auto_1fr_[content-end]_var(--space)_[fullbleed-end]];
+
+  > form {
+    > .ComboInput {
+      @apply col-span-1 col-start-[content-start];
+    }
+
+    > button.Link {
+      @apply col-span-1 col-end-[content-end];
+    }
+  }
+}
+
+/* Search Select/Hide Fields Popup Widget */
+.Widget.SearchFields .SearchFields-tab-container {
+  @apply [grid-column:fullbleed-start/fullbleed-end];
+}
+
+/* ContentTools Popup widget */
+.Widget.ContentTools {
+  --space: 1rem;
+}
+
+/* WIPs & SharedPreviews popups */
+.ToolUserWorksInProgress.Widget,
+.ToolUserSharedPreviews.Widget {
+  --space: 0.5rem;
+}
+
+/* TwoFactor Auth Popup */
+.Widget[name='toolUserTfa'] {
+  .QRCode {
+    @apply text-md;
+  }
+
+  .QRCode img {
+    @apply my-6 aspect-square place-self-center;
+  }
+}
+
+/* Pre-Publish Popup Widget */
+.Widget.PrePublish {
+  --space: 0;
+
+  :is(.fixedScrollable) {
+    @apply max-h-full overflow-y-auto px-6;
+  }
+
+  > .Popup-content {
+    @apply overflow-y-auto;
+  }
+}
+
+.fixedScrollable .CIG-row {
+  @apply after:left-[calc(1px_-_var(--CIG-padding))];
+}
+
+/* ContentEditDrawer Widget (The Shelf) */
+.Widget .ContentEditDrawer-widget {
+  @apply col-span-full;
+}
+
+/* TableSizer Widget */
+.Widget.TableSizer {
+  --space: 0.75rem; /* 0.25rem already added from border-spacing in TableSizerPopup.css */
+
+  @apply bg-gray-50;
+}
+
+/* Translations Widget */
+.Widget[data-internal-name='com.psddev.translation.page.TranslationTab'] > * {
+  @apply col-span-full;
+}
+
+/* Mail Publishing Widget */
+.Page[data-href*='/cms/admin/mail-publishing'] .Page-content > .Widget {
+  @apply h-full [grid-template-rows:auto_1fr_auto];
+
+  > * {
+    @apply col-span-full;
+  }
+}
+
+/* Simple fullscreen widgets (e.g. Slack Verification) */
+.Page-content > .Widget:not(~ .Widget) {
+  @apply h-full content-start;
+
+  &:has(> .Widget-title + .Message + .ActionBar) {
+    @apply grid-rows-[auto_auto_1fr];
+
+    > .Message {
+      @apply col-[content-start/content-end];
+    }
+
+    > .ActionBar {
+      @apply self-end;
+    }
+  }
+}
+
+/* Calendar Event summary widget */
+.CalendarEventSummary.Widget > .ContentSummary-content {
+  @apply col-span-full;
+}
+
+.Popup[name='CalendarEventSummaryOverlay'] .Widget-title {
+  @apply justify-between;
+}
+
+/* Calendar Color Manage widget */
+.Widget.CalendarColorManagerPage {
+  @apply h-full grid-rows-[1fr_max-content];
+
+  > form:has(.TC) {
+    @apply row-span-full [grid:subgrid/subgrid];
+
+    > .objectInputs.TC {
+      @apply col-span-full content-baseline border-b !px-[--space] pb-6;
+    }
+
+    > button {
+      @apply btu-button btu-button-primary my-4 ms-auto !px-[--space];
+    }
+  }
+}
+
+/* Admin pages with full screen search view */
+.Widget.SearchPage {
+  @apply SearchWidget;
+
+  > .Widget-title {
+    @apply ![grid-area:title];
+  }
+
+  > .SearchWidget-history {
+    @apply [grid-area:history];
+  }
+
+  .SearchResult-fullscreen {
+    @apply hidden;
+  }
+}
+
+/* When the upload widget is processing the upload, prevent user interactions. */
+.Widget[name='uploadFiles'] {
+  &.loading {
+    @apply !overflow-clip;
+    form {
+      @apply pointer-events-none select-none blur-[1px] grayscale-[50%];
+      button[name='action-upload'] {
+        @apply btu-button-disabled;
+      }
+    }
+  }
+}
+
+/* GraphQL Widget */
+.Widget.GraphQL-widget > * {
+  @apply col-span-full;
+}
+
+/* Site Switcher Widget */
+.frame[name='siteSwitch'] .Widget > * {
+  @apply col-span-full;
+}
+
+.Widget[name='conversation-reply'] {
+  @apply grid-rows-[auto_1fr];
+}
+
+/* External Import Widget */
+.ExternalItemImport .Widget > form {
+  > h1 {
+    @apply hidden;
+
+    + .Message ~ .ActionBar {
+      @apply mt-0 border-t-0;
+    }
+  }
+}
+
+/* View scheduled events popup */
+.Widget.ScheduleEventsList {
+  table {
+    @apply col-span-full;
+  }
+
+  /* make pagination here match dashboard widget pagination */
+  .pagination {
+    @apply order-1 my-[22px] ms-auto;
+
+    .ComboInput:not([aria-expanded='true'], :focus-visible) {
+      @apply border-transparent;
+    }
+  }
+}
+
+/* Truncate the dialog heading for the schedule events popup.
+   Override display:flex to block so text-overflow:ellipsis renders. */
+dialog:modal
+  .Popup-content:has(.ScheduleEventsList)
+  > :where(.Widget-title, h1) {
+  @apply block truncate;
+}
+
+.Widget-filters,
+.Widget-filter {
+  @apply flex items-center;
+}
+
+.Widget-filters {
+  @apply border-b border-b-gray-200 bg-gray-50 px-[--space] py-3 ![grid-column:fullbleed-start/fullbleed-end];
+}
+
+.Widget-filter {
+  @apply z-0 flex-row-reverse;
+}
+
+.Widget-filterLabel {
+  @apply text-sm font-medium;
+}
+
+/* Developer Bulk Operations Page */
+.Widget.DeveloperBulkOperations {
+  > ul li {
+    @apply py-1;
+  }
+
+  > ul a {
+    @apply text-sm;
+  }
+}