@brightspot/ui 3.0.1 → 5.0.0

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

@@ -0,0 +1,42 @@
+/* ---------------------------------------------------------------------- */
+/* --- This file should host styles which visually indicate           --- */
+/* --- incompatibilities between the markup and classes in v4         --- */
+/* --- as they appear in v5 mode. Use hotpink whenever possible to    --- */
+/* --- draw attention to the element which is incompatible.           --- */
+/* --- Try to keep this file brief and only use as a last resort.     --- */
+/* --- Where possible, extensions to the CMS should be remediated     --- */
+/* --- by updating their code to display properly in v5.              --- */
+/* ---------------------------------------------------------------------- */
+
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
+
+.Icon {
+  --icon-fill: 'FILL' 1;
+
+  direction: ltr;
+  display: inline-block;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: 'Material Symbols Outlined';
+  font-feature-settings: 'liga';
+  font-size: 20px;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-variation-settings: var(--icon-fill);
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  position: relative;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  vertical-align: top;
+  white-space: nowrap;
+  word-wrap: normal;
+
+  &::before {
+    color: hotpink;
+    content: attr(data-icon-name);
+    padding: 6px 100px 100px 6px;
+    position: absolute;
+  }
+}

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

@@ -0,0 +1,26 @@
+.InputRow,
+.InputRow > fieldset {
+  @apply mt-4 flex flex-wrap;
+
+  fieldset {
+    @apply mt-0;
+  }
+
+  > * {
+    @apply min-w-0 flex-auto;
+  }
+
+  > label {
+    @apply mb-2 w-full text-sm font-semibold text-gray-700;
+  }
+
+  > .ComboInput + ul {
+    > li {
+      @apply mt-3 flex;
+    }
+
+    > li input[type='checkbox'] {
+      @apply mr-2;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+.Label {
+  @apply btu-badge-gray btu-badge-sm text-nowrap font-medium;
+
+  &.is-archived {
+    @apply btu-badge-error me-2;
+  }
+
+  &.is-draft {
+    @apply btu-badge-primary me-2;
+  }
+
+  &.is-revision {
+    @apply btu-badge-purple me-2;
+  }
+
+  &.is-scheduled {
+    @apply btu-badge-warning me-2;
+  }
+
+  &.is-workflow {
+    @apply btu-badge-gray me-2;
+  }
+
+  &[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
+    );
+    @apply me-2 btu-badge-foreground-[--foreground] btu-badge-background-[--background];
+  }
+}

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

@@ -0,0 +1,13 @@
+.LabeledCheckbox {
+  @apply inline-flex cursor-pointer items-center gap-2 text-sm font-medium leading-4 text-gray-700 [&:has(input:disabled)]:cursor-default [&:has(input:disabled)]:text-gray-300;
+}
+
+.DashboardWidget-filters {
+  .LabeledCheckbox {
+    @apply relative p-[0_var(--gap-s)];
+  }
+}
+
+label:has(input[type='checkbox']) {
+  @apply LabeledCheckbox;
+}

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

@@ -0,0 +1,4 @@
+a,
+button:where(.Link) {
+  @apply inline cursor-pointer border-none bg-transparent p-0 align-baseline font-medium text-primary-600 underline focus:ring-primary-100 focus:ring-offset-1 hover:text-primary-800 focus:rounded-[7px] focus:text-primary-600 focus:ring-offset-primary-600 disabled:pointer-events-none disabled:text-gray-700;
+}

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

@@ -0,0 +1,77 @@
+.LinkCarousel {
+  /* Magic margin to horizontally align the first group if items with the same gap
+    other dashboard widgets have from the edge of the container.
+    The 'ch' value should be equal to the amount of whitespace chars used in the
+    btu-scrollshadow. */
+  --offset-inline: 0px;
+  @apply btu-scrollshadow-50 relative -me-6 flex w-full gap-3 @container/LinkCarousel supports-[animation-timeline:--scroll-timeline]:[--offset-inline:calc((0.5rem_+_3ch)_*_-1)];
+}
+
+.LinkCarousel-title {
+  @apply text-sm;
+}
+
+.LinkCarousel-group {
+  @apply first:ms-[--offset-inline];
+
+  > h3 {
+    @apply hidden;
+  }
+
+  > ul {
+    @apply flex h-full gap-3;
+  }
+}
+
+/* Empty groups are rendered, so we must hide them. */
+.LinkCarousel-group:has(> ul:empty) {
+  @apply hidden;
+}
+
+.LinkCarousel:has(.p-commonContent-favorites .pageThumbnails:empty)
+  .p-commonContent-new {
+  @apply ms-[--offset-inline];
+}
+
+.LinkCarousel-item {
+  --content-icon-size: 3rem;
+  @apply relative flex w-[29cqi] min-w-[9rem] cursor-pointer flex-col gap-2 overflow-hidden rounded-lg border border-gray-300 bg-white p-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-100 [@container_LinkCarousel_(width_>_650px)]:w-[14rem];
+
+  > a {
+    @apply line-clamp-3 pe-6 font-semibold text-gray-900 no-underline hover:text-gray-900;
+  }
+}
+
+.LinkCarousel-item-favorite {
+  @apply absolute right-2 top-2 flex size-7 items-center justify-center before:size-5 touch-device:p-2;
+
+  &:not(.is-unstarred) {
+    @apply before:block before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:[clip-path:theme(shape.starFilled)];
+  }
+
+  &.is-unstarred {
+    @apply opacity-0 before:btu-icon before:btu-icon-star before:[--icon-size:theme(size.5)] touch-device:opacity-100;
+  }
+}
+
+.LinkCarousel-item:focus-within .LinkCarousel-item-favorite.is-unstarred,
+.LinkCarousel-item:hover .LinkCarousel-item-favorite.is-unstarred {
+  @apply opacity-100;
+}
+
+.LinkCarousel-item.is-image {
+  @apply after:btu-icon-via-mask before:size-[--content-icon-size] before:justify-start before:rounded-lg before:bg-primary-50 before:p-3 before:align-top before:[--tw-content:""] after:absolute after:btu-icon-gradient-primary after:btu-icon-lg after:[transform:translate(theme(size.3),theme(size.3))] hover:before:bg-gray-50 dark:before:!bg-gray-100 dark:hover:before:!bg-gray-50;
+
+  > a {
+    @apply line-clamp-1 pe-0;
+  }
+}
+
+.LinkCarousel-item.is-image:not([data-icon-name]) {
+  @apply after:btu-icon-via-mask-zap;
+}
+
+/* Legacy. */
+.p-commonContent-new > form {
+  @apply hidden;
+}

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

@@ -0,0 +1,53 @@
+.LinkList {
+  tr.contentIcon {
+    @apply flex items-center;
+
+    .LinkList-main {
+      @apply max-w-none flex-1 items-center py-4 before:btu-icon [&:not([data-icon-name])]:before:btu-icon-circle-dashed before:max-w-min before:justify-start before:rounded-[0.25rem] before:bg-gray-100 before:p-2 before:align-top before:text-gray-700 before:btu-icon-md hover:before:mix-blend-multiply;
+    }
+  }
+
+  td {
+    @apply align-top;
+  }
+
+  td.LinkList-main {
+    @apply inline-flex items-center gap-3;
+
+    .ContentSummary-info {
+      @apply top-0 m-0;
+    }
+
+    .Label {
+      @apply me-2;
+    }
+  }
+
+  .LinkList-image {
+    @apply order-first !ms-0;
+  }
+
+  .LinkList-image.is-icon {
+    @apply grid place-content-center items-center justify-items-center pe-3 before:btu-icon before:z-10 before:btu-icon-md before:[grid-area:1/1] after:size-[36px] after:rounded-full after:border-[6px] after:p-[14px] after:[grid-area:1/1];
+  }
+
+  .LinkList-image.is-icon[data-icon-name] {
+    @apply !text-gray-700 after:border-gray-50 after:bg-gray-100 dark:!text-black-dark dark:after:bg-gray-300;
+  }
+
+  .LinkList-image.is-icon[data-icon-name='success'] {
+    @apply !text-success-700 after:border-success-50 after:bg-success-100 dark:after:bg-success-200;
+  }
+
+  .LinkList-image.is-icon[data-icon-name='warning'] {
+    @apply !text-warning-700 after:border-warning-50 after:bg-warning-100 dark:after:bg-warning-200;
+  }
+
+  .LinkList-image.is-icon[data-icon-name='error'] {
+    @apply !text-error-600 after:border-error-50 after:bg-error-100 dark:after:bg-error-200;
+  }
+}
+
+.LinkList-wrapper {
+  @apply __table-wrapper overscroll-x-contain;
+}

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

@@ -0,0 +1,105 @@
+.LinkTable {
+  /* Table layout specific customization */
+  td {
+    @apply align-top;
+  }
+
+  td.LinkTable-main {
+    @apply inline-flex items-center gap-2;
+  }
+
+  &.SearchResult-table th {
+    @apply bg-gray-100 text-gray-900;
+  }
+
+  /* Search Result summary styling */
+  td.LinkTable-main:has(.SearchResult-summary:not(:empty)) {
+    @apply grid grid-cols-[minmax(auto,_max-content)_theme(size.7)] [row-gap:0];
+  }
+
+  td.LinkTable-main .SearchResult-summary:not(:empty) {
+    @apply col-span-full;
+  }
+
+  /* List items */
+  > li {
+    --link-h-max: calc(theme(lineHeight.4) * 2 + theme(spacing.4));
+    --link-h-min: calc(theme(lineHeight.4) + theme(spacing.2));
+
+    @apply flex max-h-[--link-h-max] min-h-[--link-h-min] items-center rounded-lg;
+  }
+
+  > li.Message {
+    @apply max-h-none;
+  }
+
+  > li:has(> *:hover) {
+    @apply bg-gray-100;
+  }
+
+  &:not(.CollectionList) {
+    > li:has(> a:focus-visible) {
+      @apply ring-primary-100 ring-offset-1 z-[1] ring-4 ring-offset-primary-600 [&_a]:ring-offset-0 [&_a]:ring-0;
+    }
+
+    > li:has(> a.is-focusRegionTarget) {
+      @apply ring-offset-1 ring-4 ring-primary-300 ring-offset-primary-700 transition-[box-shadow] duration-500 [&_a]:!ring-offset-0 [&_a]:!ring-0;
+    }
+
+    > li:has(> a.was-focusRegionTarget) {
+      @apply transition-[box-shadow] duration-500 ease-out;
+    }
+  }
+
+  > li > .LinkTable-noLinkText,
+  > li > a {
+    @apply my-2 line-clamp-2 w-full overflow-hidden text-ellipsis text-wrap break-words px-2 text-sm text-gray-700 no-underline;
+
+    /* Prevents italic glyphs from being clipped by overflow:hidden + line-clamp */
+    > em {
+      @apply me-[0.25em];
+    }
+  }
+
+  li.selected > a {
+    @apply text-primary-800 more-contrast:text-white;
+  }
+}
+
+/* Compact mode for narrow containers (element width < 500px, toggled via
+   ResizeObserver in v4/LinkTable.js). Converts table rows into stacked card
+   layout: label reordered to top, title full-width, metadata below. */
+.LinkTable.is-compact {
+  > thead {
+    @apply hidden;
+  }
+
+  > tbody > tr {
+    @apply flex flex-wrap px-6 py-4;
+
+    > .LinkTable-label {
+      @apply -order-1 p-0;
+    }
+
+    > .LinkTable-main {
+      @apply w-full p-0 [overflow-wrap:anywhere];
+    }
+
+    > td:not(.LinkTable-main, .LinkTable-label) {
+      @apply flex items-center p-0 text-xs text-gray-500;
+
+      &:empty {
+        @apply hidden;
+      }
+    }
+
+    > td:not(.LinkTable-main, .LinkTable-label)
+      ~ td:not(.LinkTable-main, .LinkTable-label)::before {
+      @apply mx-1 inline-block size-0.5 rounded-full bg-gray-500 content-[''];
+    }
+  }
+}
+
+.LinkTable.is-scrollable {
+  @apply __table-wrapper overscroll-x-contain;
+}

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

@@ -0,0 +1,27 @@
+.ListManager-edit {
+  @apply inline-block;
+}
+
+.ListManager-widget {
+  @apply absolute -top-10 left-16 z-10 flex flex-col overflow-clip rounded-2xl border border-gray-100 bg-white shadow-lg;
+
+  .Widget-title {
+    @apply static !pe-[60px] text-sm;
+  }
+
+  .Widget-close {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm absolute right-4 top-1.5 z-10 before:btu-icon before:btu-icon-x;
+  }
+
+  .Widget-container {
+    @apply flex flex-col gap-4 px-4 pb-3 pt-4;
+  }
+
+  .Widget-controls {
+    @apply relative flex-row-reverse gap-3 border-0 !pe-1 pt-3 before:absolute before:-left-4 before:-right-4 before:top-0 before:h-px before:bg-gray-200;
+
+    button {
+      @apply btu-button btu-button-gray btu-button-md whitespace-nowrap first:btu-button-primary;
+    }
+  }
+}

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

@@ -0,0 +1,290 @@
+.objectId-edit-heading {
+  @apply btu-button btu-button-fill-none btu-button-primary block truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
+}
+
+.Grid:has(.LiveBlogGrid),
+.Grid:has(.LiveBlogGrid) .Grid-nav,
+.LiveBlogPostListNav,
+.LiveBlogGrid,
+.LiveBlogGrid .Frame-relative {
+  @apply contents;
+}
+
+.LiveBlogPostList {
+  @apply overflow-auto border-r bg-white [grid-area:list];
+}
+
+.LiveBlogPostList-open {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute top-[calc(var(--page-broadcast-h)+var(--page-broadcastAlert-h)_+_52px_+_theme(spacing.2))] z-[1] before:btu-icon before:btu-icon-chevron-left md:hidden;
+}
+
+.LiveBlogGrid:not(.is-visible) .LiveBlogPostList-open {
+  @apply max-md:hidden;
+}
+
+.LiveBlogPostList-button {
+  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray my-4;
+}
+
+.LiveBlogPostList-titleBar {
+  @apply sticky top-0 z-[1] flex items-center gap-2 border-b bg-white px-4 py-2;
+}
+
+.LiveBlogPostList-title {
+  @apply btu-heading-5 grow;
+}
+
+.LiveBlogPostList-controls {
+  @apply contents;
+}
+
+.LiveBlogPostList-controls
+  :where(li:first-child > a:not(.LiveBlogPostListNav-refresh)) {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-plus;
+}
+
+.LiveBlogPostList-controls > li > a.is-selected {
+  @apply md:btu-button-pressed;
+}
+
+.LiveBlogPostListNav-refresh {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-rotate-ccw;
+}
+
+/* filters widget */
+.LiveBlogPostList-filters.Widget {
+  --top: calc(
+    theme(spacing.8) + theme(iconSize.md) + theme(borderWidth.DEFAULT)
+  );
+  @apply sticky top-[--top] z-[1] bg-white;
+}
+
+.LiveBlogPostList-filters.Widget.is-collapsible {
+  @apply border-b py-2;
+
+  .Widget-title {
+    @apply border-b-0 py-1 text-sm;
+  }
+
+  .Widget-controls {
+    @apply bg-transparent;
+  }
+
+  .Widget-controls > .Widget-collapse {
+    @apply btu-button-xs touch-device:btu-button-sm;
+  }
+
+  > form.LiveBlogPostList-filters-search {
+    @apply py-4 [row-gap:0];
+  }
+
+  > form:not(.LiveBlogPostList-filters-search) {
+    @apply flex flex-col gap-4 pb-2;
+  }
+}
+
+.LiveBlogPostList-filters.Widget:not(.is-collapsed) {
+  .Widget-title {
+    @apply bg-primary-50 text-primary-800;
+  }
+
+  .Widget-controls > .Widget-collapse {
+    @apply btu-button-primary;
+  }
+}
+
+/* list of existing live blog posts
+   Customizes table & LinkList default styles for this specific use case */
+.LiveBlogPostList > table.LinkList {
+  tr.is-buttoned {
+    --bg-color: light-dark(theme(colors.white.light), theme(colors.white.dark));
+    @apply grid grid-cols-[theme(avatar.size.sm)_min-content_auto_theme(size.9)] px-4 py-3 @container/item;
+  }
+
+  tr > *:not(:first-child) {
+    @apply ms-0;
+  }
+
+  td {
+    @apply p-0;
+  }
+
+  .LinkList-main {
+    @apply col-span-3 col-start-1 row-start-1 mb-[5px] me-2;
+  }
+
+  .LinkList-main > a {
+    @apply line-clamp-2 overflow-hidden [word-break:break-word];
+  }
+
+  /* Live Blog posts is the only the use case that uses this class in LinkList */
+  .LinkList-button {
+    @apply col-start-4 row-start-1;
+  }
+
+  .LinkList-button > a {
+    @apply btu-button-fill-none btu-button-gray bg-white no-underline before:btu-icon before:btu-icon-pin hover:bg-gray-200 focus:bg-white;
+  }
+
+  .LinkList-image {
+    --avatar-size: theme(avatar.size.sm);
+    @apply col-start-1 row-span-2 row-start-2;
+  }
+
+  td.date-time {
+    @apply col-span-2 row-start-2 ms-[8px] text-xs;
+  }
+
+  td:has(.LinkList-icon) {
+    @apply overflow-hidden overflow-ellipsis text-nowrap text-xs;
+  }
+
+  td:nth-child(5) {
+    @apply col-start-2 row-start-3 ms-2 max-w-[calc(100cqw-104px)];
+  }
+
+  td:nth-child(5):has(+ td) {
+    @apply after:btu-icon after:btu-icon-dot;
+  }
+
+  td:nth-child(6) {
+    @apply col-start-3 row-start-3 me-2;
+  }
+
+  td:nth-child(n + 7) {
+    @apply hidden;
+  }
+
+  /* pinned posts */
+  tr.is-pin:not(.is-selected) {
+    @apply border-b-warning-500 bg-warning-50;
+  }
+
+  tr.is-pin:not(.is-selected) .LinkList-button > a {
+    @apply btu-button-pressed bg-primary-50 hover:bg-primary-50;
+  }
+
+  /* new blog post */
+  tr.is-new-content {
+    --bg-from: theme(colors.success.50);
+    --border-from: theme(colors.success.500);
+    --bg-to: var(--bg-color);
+    --border-to: theme(colors.gray.200);
+
+    @apply animate-list-item-added border-success-500 bg-success-50 hover:[--bg-to:theme(colors.gray.100)];
+  }
+
+  /* selected item in live blog post list */
+  tr.is-selected {
+    --bg-color: theme(colors.primary.50);
+    @apply bg-primary-50;
+  }
+
+  tr.is-selected .LinkList-main > a {
+    @apply text-primary-800;
+  }
+}
+
+.LiveBlogGrid .ContentEdit-main > .TC .TabBar > .TabBar-item {
+  @apply __tab-item-sm;
+}
+
+/* hides auto expand textarea that shows up outside of content edit form when a post is published */
+.LiveBlogGrid > .frame.is-asideHidden > .AutoExpand {
+  @apply hidden;
+}
+
+.Page.has-liveBlog-postList {
+  @container (min-width: 900px) {
+    :is(.Page-content, .Popup-content):has(.ContentEdit) {
+      /* LiveBlog Post grid doesn't allow resizing since the post list column is present. */
+      .ContentEdit-resizeWrapper {
+        @apply pointer-events-none;
+      }
+
+      /* Base calculation for content form width */
+      --contentForm-w-base: calc(100cqw - var(--right-toolbar-w));
+
+      /* States */
+      &:is(
+          .is-previewing,
+          :has(
+              .ContentEdit-toolbar
+                button:not([data-right-tab='manage_search']).is-active
+            )
+        ),
+      &.is-previewing:has(
+          .ContentEdit-toolbar
+            button:not([data-right-tab='manage_search']).is-active
+        ),
+      &.is-previewing:not(
+          :has(
+              .ContentEdit-toolbar
+                button:not([data-right-tab='manage_search']).is-active
+            )
+        ) {
+        --contentForm-w: 1fr;
+        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
+      }
+
+      /* Neither preview nor widget - disable resize and reset form width */
+      &:not(.is-previewing):not(
+          :has(
+              .ContentEdit-toolbar
+                button:not([data-right-tab='manage_search']).is-active
+            )
+        ) {
+        --contentForm-resized-w: unset;
+        .ContentEdit-resizeWrapper {
+          @apply pointer-events-none;
+        }
+      }
+
+      /* Widget only */
+      &:not(.is-previewing):has(
+          .ContentEdit-toolbar
+            button:not([data-right-tab='manage_search']).is-active
+        ) {
+        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_0px_var(--right-toolbar-w)];
+      }
+    }
+  }
+}
+
+.Page.has-liveBlog-postList {
+  .Page-main {
+    --postlist-w: clamp(300px, 360px, 35cqw);
+
+    :is(.Page-content, .Popup-content) {
+      /* Preview column only */
+      &.is-previewing {
+        --contentForm-resized-w: unset; /* override user's resized width at this container size */
+        @apply md:!grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
+      }
+
+      /* Neither preview or widget columns are displayed */
+      &:not(.is-previewing):not(
+          :has(
+              .ContentEdit-toolbar
+                button:not([data-right-tab='manage_search']).is-active
+            )
+        ),
+      &:not(.is-previewing):has(
+          .ContentEdit-toolbar
+            button:not([data-right-tab='manage_search']).is-active
+        ) {
+        --contentForm-resized-w: unset; /* override user's resized width at this container size */
+        @apply md:!grid-cols-[var(--postlist-w)_var(--contentForm-w)_0px_var(--right-toolbar-w)];
+      }
+
+      /* Both preview and widget columns */
+      &.is-previewing:has(
+          .ContentEdit-toolbar
+            button:not([data-right-tab='manage_search']).is-active
+        ) {
+        --contentForm-resized-w: unset; /* override user's resized width at this container size */
+        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
+      }
+    }
+  }
+}