@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

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

@@ -0,0 +1,444 @@
+html::view-transition-group(dashboard-widget) {
+  @apply [animation-duration:500ms] [animation-timing-function:cubic-bezier(0.9,0,0.1,1)];
+}
+
+html::view-transition-old(dashboard-widget) {
+  @apply opacity-0;
+}
+
+html::view-transition-new(dashboard-widget) {
+  @apply animate-widget-maximize-fade-in;
+}
+
+.DashboardWidget {
+  --margin: theme(padding.4);
+
+  @media (min-width: theme(screens.sm)) {
+    --margin: theme(padding.6);
+  }
+
+  @apply relative grid items-center overflow-clip rounded-2xl border border-gray-300 bg-white [grid-template-columns:[fullbleed-start]_var(--margin)_[main-start]_1fr_[inner-buffer]_auto_[main-end]_var(--margin)_[fullbleed-end]] before:h-[1px] before:bg-gray-200 before:[grid-column:fullbleed-start/fullbleed-end];
+
+  th.hasComboInput {
+    @apply flex;
+
+    .ComboInput {
+      @apply ms-2 grow;
+    }
+  }
+
+  .LinkList-wrapper,
+  .DT-wrapper {
+    @apply h-full overflow-y-auto border-t border-t-gray-200 [grid-column:fullbleed-start/fullbleed-end] last:mb-4;
+  }
+
+  > table {
+    @apply col-span-full border-t border-t-gray-200 last:mb-4;
+  }
+
+  > .table {
+    @apply contents;
+  }
+
+  .DT-wrapper table tbody tr th:first-child {
+    @apply bg-transparent text-sm;
+  }
+
+  .PR {
+    @apply contents;
+
+    > form {
+      @apply grid [grid-column:fullbleed-start/fullbleed-end] [grid-template-columns:subgrid] [grid-template-rows:1fr_auto_auto];
+    }
+  }
+
+  .DashboardWidget-pagination {
+    @apply ms-auto [grid-column:main-start/main-end] empty:hidden;
+  }
+
+  .ActionBar {
+    @apply border-b-0 [grid-column:fullbleed-start/fullbleed-end];
+  }
+
+  .Message {
+    @apply rounded-lg border [grid-column:main-start/main-end] last:mb-[--margin] [&:has(+_.DashboardWidget-controls)]:mb-[--margin];
+  }
+
+  .DashboardWidget-title + .Message,
+  .DashboardWidget-maximize + .Message {
+    @apply mt-[var(--margin,theme(spacing.6))];
+  }
+
+  ul.LinkTable {
+    @apply [grid-column:fullbleed-start/fullbleed-end];
+
+    > li {
+      @apply rounded-none border-b border-gray-200 last:border-b-0;
+
+      &:has(> a:focus-visible) {
+        @apply ring-inset;
+      }
+    }
+
+    > li > a {
+      @apply my-4 px-[--margin];
+    }
+
+    &:last-child > li:last-child:has(> a:focus-visible) {
+      @apply rounded-b-2xl;
+    }
+  }
+
+  .LinkList-wrapper,
+  .LinkTable.is-scrollable {
+    @apply btu-scrollshadow-25 pb-6 before:absolute before:row-start-2 before:content-[--whitespace] after:absolute after:row-start-2 after:content-[--whitespace];
+
+    &:has(
+        + :where(
+            .DashboardWidget-pagination:not(:empty),
+            + .Actionbar:not(:empty)
+          )
+      ) {
+      @apply pb-0; /* remove the bottom padding since the pagination or action bar will handle it */
+    }
+  }
+
+  > form {
+    @apply my-4;
+  }
+
+  > .frame {
+    @apply grid grid-cols-subgrid [grid-column:fullbleed-start/fullbleed-end];
+  }
+
+  > * {
+    @apply [grid-column:main-start/main-end];
+  }
+}
+
+.DashboardRow-cell.is-maximized {
+  @apply grid;
+}
+
+/* Add a backdrop behind the maximized widget */
+.transition-backdrop {
+  @apply before:absolute before:inset-0 before:z-20 before:backdrop-blur before:transition-all before:duration-300 before:ease-out before:[background-color:theme(backdropColor.dialog)];
+}
+
+@starting-style {
+  .transition-backdrop {
+    @apply before:opacity-0 before:[backdrop-filter:blur(0px)];
+  }
+}
+
+.DashboardRow-cell.is-maximized .DashboardWidget {
+  @apply max-h-[calc(100dvh_-_theme(spacing.8))] w-[calc(100vw_-_theme(spacing.8))] place-self-center overflow-auto shadow-lg;
+}
+
+button.DashboardWidget-maximize {
+  @apply btu-button btu-button-gray row-start-1 justify-self-end bg-white btu-button-container-none [grid-column:inner-buffer/main-end] before:btu-icon before:btu-icon-maximize-2;
+}
+
+/* Toggle the icon button to show minimized state */
+.DashboardRow-cell.is-maximized button.DashboardWidget-maximize {
+  @apply btu-button-pressed before:btu-icon-minimize-2;
+}
+
+.DashboardRow-cell.transition-dashboard-widget {
+  @apply [view-transition-name:dashboard-widget];
+}
+
+/* "Quick Start" Widget styles */
+.CreateNewWidget {
+  @apply overflow-visible rounded-none border-none bg-transparent p-0 before:content-none;
+
+  /* Configuration UI of Quick Start */
+  &:has(> form) {
+    @apply m-[--margin] overflow-clip rounded-2xl border border-solid border-gray-300 bg-white;
+  }
+
+  .DashboardWidget-controls a {
+    @apply before:btu-icon-settings;
+  }
+
+  .CIG-row {
+    @apply block;
+  }
+
+  .CIG-title {
+    @apply hidden;
+  }
+
+  .LinkCarousel {
+    @apply m-0 mb-1 pb-5;
+  }
+
+  .LinkCarousel-item {
+    @apply aspect-[16_/_4] overflow-visible;
+  }
+
+  form:has(.CIG) {
+    @apply m-0 grid grid-cols-subgrid [grid-column:fullbleed-start/fullbleed-end];
+
+    .CIG {
+      @apply px-0 [grid-column:main-start/main-end];
+    }
+  }
+}
+
+.DashboardWidget-title {
+  @apply btu-heading-5 row-start-1 flex w-auto items-center justify-between whitespace-normal text-balance py-4 text-gray-900 [grid-column:main-start/inner-buffer] [&:has(a)]:py-2.5;
+
+  /* Slightly larger padding on wider screens; reduce when title contains a control button */
+  @media (min-width: theme(screens.sm)) {
+    @apply py-5 [&:has(a)]:py-3.5;
+  }
+
+  a {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon;
+  }
+}
+
+.DashboardWidget-controls {
+  @apply row-start-1 flex w-auto items-center gap-2 [grid-column:inner-buffer/main-end];
+
+  a {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
+  }
+
+  > form button {
+    @apply btu-button btu-button-fill-none btu-button-gray btu-button-sm btu-button-container-none before:btu-icon before:btu-icon-file-input;
+  }
+
+  &:has(.DashboardWidget-maximize) form button {
+    @apply me-3;
+  }
+
+  > form {
+    @apply contents;
+  }
+
+  .icon-action-create {
+    @apply before:btu-icon-plus;
+  }
+
+  .icon-action-search {
+    @apply before:btu-icon-search;
+  }
+}
+
+.DashboardWidget-filters {
+  --Input-focusBackground: var(--color-gray2);
+
+  @apply relative flex w-full items-center gap-2 overflow-auto overscroll-x-contain px-[--margin] py-4 transition-opacity [grid-column:fullbleed-start/fullbleed-end];
+
+  form {
+    @apply flex w-full min-w-max items-center justify-end gap-2 transition-opacity;
+  }
+}
+
+/* Guard against the one-frame flash when Bridge.js renames .widget-filters →
+   .DashboardWidget-filters in a requestAnimationFrame callback after AJAX injection. */
+@starting-style {
+  .DashboardWidget-filters,
+  .DashboardWidget-filters form {
+    @apply opacity-0;
+  }
+}
+
+.SemRushDashboardWidget .pagination {
+  @apply mb-4 mt-0 [grid-column:inner-buffer/main-end];
+}
+
+/* Hide empty filters */
+.DashboardWidget-filters:not(:has(* + input)) {
+  @apply hidden;
+
+  /* Hidden filters won't include the spacing which separates the Message,
+  so we need to add it. */
+  ~ .Message {
+    @apply mt-4;
+  }
+
+  /* Hidden filters cause the Widget title border to stack on the LinkList
+  border which visually doubles its height. So, we remove the border-top. */
+  + .LinkList-wrapper {
+    @apply border-t-0;
+  }
+}
+
+.DashboardPage-heading {
+  @apply absolute [font-size:0];
+}
+
+/* Calendar Dashboard Widget styles*/
+/** There are three calendar dashboard widgets currently with varying design & underlying DOM structure
+  * Scheduled Events widget (legacy)
+  * Editorial Calendar widget - old editorial calendar (legacy)
+  * Calendar widget - new editorial calendar
+**/
+/* Filters & pagination styling */
+.DashboardWidget.widget-scheduledEvents {
+  @apply @container/calendar;
+
+  .scheduledEvents-date {
+    @apply col-span-full grid py-4 @calendar-lg/calendar:grid-flow-col @calendar-lg/calendar:py-2;
+  }
+
+  .scheduledEvents-dateRange {
+    @apply btu-heading-5 text-black;
+  }
+
+  .DashboardWidget-filters {
+    @apply col-span-full row-start-2 ms-0 flex-col items-start justify-end px-[--margin] pb-0 pt-2 @calendar-sm/calendar:flex-row @calendar-sm/calendar:items-center @calendar-lg/calendar:col-start-1 @calendar-lg/calendar:col-end-2 @calendar-lg/calendar:row-start-1 @calendar-lg/calendar:mt-0 @calendar-lg/calendar:justify-start @calendar-lg/calendar:pt-0;
+  }
+
+  /* Scheduled events widget specific styles */
+  .scheduledEvents-date:has(
+      .DashboardWidget-filters .scheduledEvents-dateRange
+    ) {
+    @apply grid-cols-[1fr_auto];
+
+    .DashboardWidget-pagination {
+      @apply my-0 me-[--margin] ms-2 self-end;
+    }
+
+    .DashboardWidget-filters {
+      @apply col-auto row-start-1 pe-0 pt-0;
+    }
+
+    .DashboardWidget-filters > .scheduledEvents-dateRange {
+      @apply -order-1 grow;
+    }
+  }
+
+  /* Pagination styles for new and old editorial calendar dashboard widgets */
+  .DashboardWidget-pagination.scheduledEvents-datePagination:has(
+      li > .scheduledEvents-dateRange,
+      li > form
+    ) {
+    @apply col-span-full my-0 ms-0 flex-wrap items-center justify-start border-none px-[--margin] @calendar-sm/calendar:flex-nowrap @calendar-sm/calendar:justify-end @calendar-lg/calendar:col-start-2 @calendar-lg/calendar:col-end-3 @calendar-lg/calendar:pb-0;
+
+    .ComboInput {
+      @apply border-gray-300;
+    }
+
+    li:has(.ComboInput) {
+      @apply me-2;
+    }
+
+    li:has(.scheduledEvents-dateRange) {
+      @apply -order-1 mb-2 w-full grow border-none p-0 @calendar-sm/calendar:mb-0 @calendar-sm/calendar:w-auto @calendar-lg/calendar:absolute @calendar-lg/calendar:left-1/2 @calendar-lg/calendar:-translate-x-1/2;
+    }
+
+    li.previous {
+      @apply rounded-s-lg border-y border-gray-300;
+    }
+
+    li.currentDate {
+      @apply border-y border-gray-300;
+    }
+
+    li.next {
+      @apply rounded-e-lg border-y border-e border-gray-300;
+    }
+  }
+}
+
+/* Calendar view & events styles for scheduled events & old editorial calendar widgets */
+.DashboardWidget.widget-scheduledEvents:not(.Calendar) {
+  > .Month {
+    @apply mb-6;
+  }
+
+  > .Week {
+    @apply mb-6 overflow-clip rounded-lg border;
+  }
+
+  /* Calendar events styles */
+  .LinkTable {
+    tr {
+      @apply flex flex-wrap items-center p-4 hover:bg-transparent;
+    }
+    td {
+      @apply p-0;
+    }
+
+    td:not(.LinkTable-main, .LinkTable-label) {
+      @apply text-xs text-gray-500;
+    }
+
+    td.LinkTable-main {
+      @apply w-full max-w-none gap-2 text-sm font-medium text-gray-700;
+    }
+
+    td.LinkTable-main .Label {
+      @apply me-1;
+    }
+
+    tbody > tr:last-child {
+      @apply border-b-0;
+    }
+
+    td:not(.LinkTable-main, .LinkTable-label, :last-child) {
+      @apply after:btu-icon after:btu-icon-dot;
+    }
+
+    .LinkTable-main > a[target='scheduleEventsList'] {
+      @apply text-xs font-semibold;
+    }
+
+    tr:has(a[target='scheduleEventsList']) {
+      @apply border-t border-t-gray-200 py-2;
+    }
+  }
+}
+
+/* New Editorial Calendar Widget specific styles */
+.DashboardWidget.Calendar > .Month,
+.DashboardWidget.Calendar > .Week {
+  @apply col-span-full rounded-none border-none;
+}
+
+/*
+  Content Reporting Widget specific styles
+  TODO: possibly remove these styles when ticket is completed: https://perfectsense.atlassian.net/browse/BSP-17271
+*/
+.DashboardWidget.Widget-reports {
+  > .Message {
+    @apply row-[4/4] mb-[--margin] mt-0;
+  }
+
+  > .LinkTable {
+    @apply row-[4/4] pb-[--margin];
+  }
+}
+
+/* Report Widget (Values) specific styles */
+.DashboardWidget:has(> .NB) {
+  @apply @container/NB;
+}
+.DashboardWidget .NB {
+  @apply grid grid-cols-[repeat(auto-fit,minmax(var(--cell-min-w),1fr))] gap-4 overflow-clip [--cell-min-w:120px] @lg:[--cell-min-w:150px] @2xl:[--cell-min-w:180px] @4xl:[--cell-min-w:200px];
+
+  &:last-child {
+    @apply pb-[--margin];
+  }
+
+  > .NB-item {
+    @apply flex max-w-full flex-col gap-1 overflow-clip rounded-lg border border-gray-300 p-3 align-baseline;
+  }
+
+  .NB-number {
+    @apply btu-heading-3 truncate text-gray-900;
+  }
+
+  .NB-label {
+    @apply truncate text-xs text-gray-500;
+  }
+}
+.DashboardWidget
+  > :where(.DashboardWidget-title, .DashboardWidget-controls)
+  + .NB {
+  @apply pt-[--margin];
+}

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

@@ -0,0 +1,78 @@
+.DateStringCalendar {
+  .Month {
+    @apply gap-1 border-none bg-transparent;
+  }
+
+  .DateStringCalendarForm {
+    @apply flex flex-nowrap items-center justify-between py-4 pb-3;
+  }
+
+  .DateStringCalendarForm-previous,
+  .DateStringCalendarForm-next {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-md before:btu-icon;
+  }
+
+  .DateStringCalendarForm-previous {
+    @apply -order-1 before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
+  }
+
+  .DateStringCalendarForm-next {
+    @apply before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left;
+  }
+
+  .DateStringCalendarForm-month + .ComboInput {
+    @apply w-auto;
+  }
+
+  .DateStringCalendarForm-year {
+    @apply w-[4.375rem] px-2 text-sm;
+  }
+
+  .DateStringCalendarDate {
+    @apply flex justify-center pb-4;
+
+    .Month-day {
+      @apply size-9 rounded-full p-4 text-sm;
+    }
+
+    .Month-dowLabel {
+      @apply size-9 bg-inherit px-3;
+    }
+  }
+
+  .DateStringCalendarTime {
+    @apply relative py-4 before:absolute before:-left-[var(--space,_0px)] before:-right-[var(--space,_0px)] before:top-0 before:h-[1px] before:bg-gray-200;
+
+    .DateStringCalendarTime-custom {
+      @apply grid grid-cols-3 gap-2;
+    }
+  }
+
+  .DateStringCalendarAction {
+    @apply relative flex items-center gap-3 py-4 before:absolute before:-left-[var(--space,_0px)] before:-right-[var(--space,_0px)] before:top-0 before:h-[1px] before:bg-gray-200;
+
+    &-set {
+      @apply btu-button btu-button-primary;
+    }
+
+    &-now {
+      @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray;
+    }
+
+    &-clear {
+      @apply btu-button btu-button-gray ms-auto;
+    }
+  }
+
+  .is-hidden {
+    @apply hidden;
+  }
+}
+
+.Popup:has(.DateStringCalendar) .Popup-close {
+  @apply hidden;
+}
+
+.DateStringCalendarEmbedded-widget {
+  @apply Widget w-max rounded-lg border;
+}

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

@@ -0,0 +1,11 @@
+.DateTimeInput {
+  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray flex-row-reverse gap-4 px-4 font-normal before:btu-icon before:btu-icon-calendar empty:btu-button-text-hidden;
+
+  &.is-empty {
+    @apply text-gray-500 before:text-gray-700;
+  }
+
+  &:not(.is-empty) {
+    @apply min-w-max;
+  }
+}