@brightspot/ui 3.0.1 → 5.0.1

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

@@ -0,0 +1,523 @@
+/*
+  SearchResult handles the search results themselves, along with controls
+  such as pagination, sorting, and image size controls.
+*/
+.SearchResult {
+  --search-controls-h: 68px;
+  --pagination-h: 80px;
+  --actions-button-w: 0px;
+
+  @apply relative grid h-full w-full grid-cols-[auto_auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_12px] grid-rows-[var(--search-controls-h)_minmax(0px,1fr)_var(--pagination-h)] items-center overflow-hidden bg-gray-50 [grid-area:results] [grid-template-areas:'toggle_sorts_fields_watching_._size-toggle_views_actions_.''results_results_results_results_results_results_results_results_results''limit_limit_limit_limit_pagination_pagination_pagination_pagination_pagination'];
+
+  &:has(.SearchResult-pagination) {
+    @apply after:absolute after:z-0 after:col-span-full after:row-[3/4] after:h-full after:w-full after:bg-white;
+  }
+
+  &:has(.SearchResult-actions-toggle) {
+    --actions-button-w: calc(36px + (2 * 4px));
+  }
+
+  /*
+    Keeps the controls buttons from jumping around while the ComboInput
+    renders.
+  */
+  &:has(.SearchResult-sorts) {
+    --controls-opacity: 0;
+
+    &:has(.SearchResult-sorts .ComboInput-selected) {
+      --controls-opacity: 1;
+    }
+  }
+
+  .SearchWidget-controlsToggle {
+    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray me-1 ms-4 bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:toggle] before:btu-icon before:btu-icon-list-filter hover:bg-gray-200 hover:outline-gray-500;
+
+    &[aria-expanded='true'] {
+      @apply btu-button-pressed bg-primary-50 outline-primary-600 hover:bg-gray-200 hover:text-gray-700 hover:outline-gray-500;
+    }
+  }
+}
+
+/* Global search has a few extra buttons to account for */
+.SearchWidget.is-global {
+  .SearchResult {
+    --fullscreen-button-w: calc(36px + 4px + 12px);
+
+    @apply grid-cols-[auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_var(--fullscreen-button-w)_var(--popup-close-w)] [grid-template-areas:'toggle_sorts_fields_._size-toggle_views_actions_fullscreen_close''results_results_results_results_results_results_results_results_results''limit_limit_limit_pagination_pagination_pagination_pagination_pagination_pagination'];
+  }
+}
+
+.SearchResult-items {
+  @apply contents;
+}
+
+/* Ellipsis menu at top right of search widget */
+.SearchResult-actions {
+  .SearchResult-selection {
+    @apply relative mb-1 inline-flex w-full items-center justify-between gap-2 px-4 pb-4 pt-2 text-sm font-semibold text-gray-900 after:absolute after:-left-4 after:-right-4 after:top-[60px] after:h-px after:bg-gray-200;
+  }
+
+  & > .SearchResult-selectionCount {
+    @apply relative mb-1 px-4 pb-6 pt-[14px] text-sm font-semibold text-gray-900 after:absolute after:left-0 after:right-0 after:top-[60px] after:h-px after:bg-gray-200;
+  }
+
+  & > .SearchResult-action {
+    @apply absolute right-4 top-4 z-10;
+  }
+}
+
+.SearchResult-selectionReset {
+  @apply btu-button btu-button-fill-none btu-button-error;
+}
+
+.SearchResult-actions-body {
+  .SearchResult-action-link {
+    @apply Dropdown-item;
+
+    &[href*='/searchAdvancedFull'] {
+      @apply hidden;
+    }
+  }
+
+  > h2 {
+    @apply ComboInput-heading;
+  }
+}
+
+.SearchResult-actions-toggle + .frame {
+  @apply Dropdown;
+}
+
+.SearchResult-actions-toggle[aria-expanded='true'] + .frame {
+  @apply Dropdown-is-open;
+}
+
+.SearchResult-view {
+  @apply contents;
+
+  > .Message {
+    @apply mx-4 self-start [grid-area:results];
+  }
+}
+
+.SearchResult-views {
+  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:views];
+}
+
+.SearchResult-views > ul {
+  @apply inline-flex items-stretch rounded-lg border border-gray-300 bg-white;
+
+  > li {
+    @apply [&:not(:first-child)]:border-l [&:not(:first-child)]:border-solid [&:not(:first-child)]:border-l-gray-300 [&:not(:first-child)_>_a]:rounded-l-none [&:not(:last-child)_>_a]:rounded-r-none;
+
+    > a {
+      @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray bg-white before:btu-icon before:btu-icon-circle-dashed hover:bg-gray-200 focus:z-[1];
+
+      &[data-label='list'] {
+        @apply before:btu-icon-list;
+      }
+
+      &[data-label='mixed'] {
+        @apply before:btu-icon-layout-list;
+      }
+
+      &[data-label='grid'] {
+        @apply before:btu-icon-layout-grid;
+      }
+
+      &[data-label='board'] {
+        @apply before:btu-icon-kanban;
+      }
+
+      &[data-label='taxonomy'],
+      &[data-label='hierarchy'] {
+        @apply before:btu-icon-network;
+      }
+    }
+  }
+
+  > li.selected > a {
+    @apply btu-button-pressed bg-primary-50;
+  }
+}
+
+.SearchResult-pagination {
+  @apply z-[1] me-6 ms-4 justify-self-end [grid-area:pagination];
+
+  /* Hide page result count on smaller viewports */
+  ul.pagination {
+    /* Prevents border from appearing around empty element
+      Cases:
+        1. results fit on single page on a small viewport
+        2. 0 results on any viewport */
+    @apply hidden [&:has(.next,.previous)]:inline-flex;
+
+    li {
+      @apply first:hidden first:truncate [&:nth-child(2)]:border-s-0;
+    }
+
+    /* Hides extraneous button border when only next and last buttons are displayed */
+    li.next {
+      @apply border-s-0;
+    }
+
+    li.previous ~ li.next {
+      @apply border-s;
+    }
+  }
+}
+
+/* Buttons to select specific result page. Hidden on small/medium viewports. */
+.SearchResult-pages {
+  @apply hidden xl:contents;
+
+  > ol {
+    @apply h-full xl:flex [&_>li>a]:flex [&_>li>a]:h-full [&_>li>a]:items-center [&_>li>a]:justify-center;
+  }
+
+  /* Normally the surrounding pagination controls, like previous and next, create nice round corners on either side.
+    But when the controls aren't needed, at the ends of the list, the rounded corners need to
+    be applied to the container of the page buttons. */
+  &:last-child:has(> ol > li a.is-active:last-child) > ol {
+    @apply rounded-br-lg rounded-tr-lg [clip-path:border-box];
+
+    /* Prevents extraneous border when on final results page */
+    li:last-child > a {
+      @apply border-e-0;
+    }
+  }
+
+  /* Active page buttons get left borders. Surrounding buttons usually provide the other borders. */
+  li a.is-active {
+    @apply border border-b-0 border-t-0 border-solid border-s-gray-300 bg-gray-100;
+  }
+
+  /* Applies border between previous and page 1 buttons */
+  li:first-child:has(a:not(.is-active)) {
+    @apply border-s border-s-gray-300;
+  }
+
+  /* When an active page button is somewhere at the start, or middle of the pagination,
+    it only needs a right border */
+  li:not(:last-child) a.is-active {
+    @apply border-e-gray-300;
+  }
+}
+
+.SearchResult-page {
+  @apply btu-button btu-button-fill-none [--button-border-radius:0];
+}
+
+.SearchResult-sorts {
+  @apply mx-1 min-w-[100px] max-w-max opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:sorts];
+}
+
+/* Special button style for collapsed sorts */
+.__sorts-collapsed {
+  @apply w-[36px] min-w-[unset];
+
+  .ComboInput {
+    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray border-none bg-white hover:bg-gray-200 hover:outline-gray-500;
+
+    .ComboInput-icon {
+      @apply before:btu-icon-arrow-down-a-z;
+    }
+
+    &[aria-expanded='true'] {
+      .ComboInput-icon {
+        @apply before:btu-icon-x;
+      }
+    }
+  }
+}
+
+/* "Select Fields" button at top left of SearchResult */
+.SearchResult-fields {
+  /* Disappears on small viewports (per Product discussion) - see responsive styles below */
+  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:fields];
+
+  a {
+    @apply btu-button btu-button-gray text-nowrap text-sm font-semibold text-gray-700 no-underline;
+  }
+}
+
+.SearchResult-limit {
+  /* Needs to stretch a little farther than grid area 'limit' to avoid awkward stretching */
+  @apply z-[1] me-4 ms-6 w-fit [grid-area:limit] [grid-column:1/5];
+}
+
+/* Contains actual search result items */
+.SearchResult-list {
+  @apply __table-wrapper relative h-full w-full border-b border-b-gray-200 [grid-area:results] empty:hidden;
+
+  &.is-processing {
+    @apply pointer-events-none opacity-30;
+  }
+
+  tbody > tr {
+    @apply last:border-b-0;
+  }
+
+  > .Message {
+    @apply mx-4;
+  }
+}
+
+/* Appears when the user selects "Print Search" from the more actions menu */
+.searchResult-print {
+  > h1 {
+    @apply p-4 text-sm font-medium text-gray-900;
+  }
+}
+
+.SearchResult-images figure {
+  @apply relative h-[238px] w-auto min-w-[200px] overflow-clip rounded-lg border border-gray-300 bg-gray-50 shadow-sm;
+
+  &:has(input[type='checkbox']:checked) {
+    @apply border-primary-500;
+  }
+
+  > input[type='checkbox'] {
+    @apply absolute right-4 top-4 z-10 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:block before:rounded-[1px] before:bg-white after:inset-1.5 checked:border-primary-50 checked:bg-primary-800 checked:before:hidden hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;
+
+    ~ a {
+      @apply absolute inset-0 flex items-end justify-between gap-2 bg-transparent;
+    }
+  }
+
+  a {
+    @apply no-underline;
+
+    &:hover figcaption {
+      @apply bg-gray-100;
+    }
+  }
+
+  /* Images do not occupy full height of figure to make room for caption */
+  img {
+    @apply h-[168px] w-full object-contain;
+  }
+
+  &.is-missing {
+    @apply after:btu-icon after:btu-icon-image-off before:absolute before:left-0 before:top-0 before:flex before:h-[168px] before:w-full before:items-center before:justify-center before:bg-gray-50 after:absolute after:left-1/2 after:top-[84px] after:-translate-x-1/2 after:-translate-y-1/2 after:text-gray-400 after:btu-icon-xl;
+
+    > img {
+      @apply hidden;
+    }
+  }
+
+  figcaption {
+    @apply flex h-[71px] w-full flex-col items-start justify-center overflow-hidden border-t border-t-gray-200 bg-white py-4 pe-10 ps-4 text-sm;
+
+    .contentTitle--v5 {
+      @apply w-full truncate text-sm font-medium text-gray-900;
+    }
+
+    .contentType--v5 {
+      @apply w-full truncate text-xs text-gray-500;
+    }
+
+    .contentStatus--v5 {
+      @apply absolute left-4 top-4 shadow-sm;
+    }
+  }
+
+  .ContentSummary-info {
+    @apply btu-button-gray btu-button-xs absolute bottom-5 right-2 m-0 shrink-0 touch-device:btu-button-sm;
+  }
+}
+
+/* Image height controls. Hidden on small viewports. Images instead default to 12dvh + 50px */
+.SearchResult-imageHeightContainer {
+  @apply relative opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:size-toggle];
+}
+
+.SearchResult-imageHeightToggle {
+  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray mx-1 shrink-0 bg-white before:btu-icon before:btu-icon-zoom-in hover:bg-gray-200 hover:outline-gray-500;
+
+  &[aria-expanded='true'] {
+    @apply btu-button-pressed bg-primary-50 outline-primary-600 before:btu-icon-x;
+  }
+}
+
+.SearchResult-imageHeightInput {
+  @apply hidden;
+
+  &.is-open {
+    @apply absolute -top-px right-12 mb-4 inline-flex w-[240px] items-center justify-center gap-2 justify-self-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-700 before:btu-icon before:btu-icon-minus after:btu-icon after:btu-icon-plus;
+  }
+
+  > input[type] {
+    @apply w-full;
+  }
+}
+
+/* "Watching?" checkbox appears on some Search Widgets */
+.SearchResult-query {
+  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:watching];
+}
+
+/* Allows image height controls */
+.SearchResult-images {
+  &[data-height] {
+    --image-height-adjusted: calc(var(--image-height) * 0.25);
+    --figure-height: calc(var(--image-height-adjusted) + 125px);
+
+    figure {
+      @apply @md/searchResult:h-[var(--figure-height)];
+
+      img {
+        @apply @md/searchResult:h-[calc(var(--image-height-adjusted)+55px)];
+      }
+
+      &.is-missing {
+        @apply @md/searchResult:before:h-[calc(var(--image-height-adjusted)+55px)] @md/searchResult:after:top-[calc((var(--image-height-adjusted)+55px)/2)];
+      }
+    }
+  }
+}
+
+.SearchResult-list,
+.SearchResult-mixed,
+.SearchWidget-result {
+  > .LinkList-wrapper {
+    @apply mx-4 mb-4 rounded-lg shadow-md;
+  }
+
+  > .LinkList-wrapper,
+  > .SearchResult-mixed .SearchResult-images {
+    @apply btu-scrollshadow-50 before:absolute before:left-4 before:content-[--whitespace] after:absolute after:right-4 after:content-[--whitespace];
+  }
+}
+
+/* Grid view -> available on Images or Videos content type, among others */
+.SearchResult-list {
+  > .SearchResult-images {
+    --min-figure-width: max(200px, calc(var(--figure-height) * 248 / 238));
+    @apply grid gap-4 px-4 pb-4 [grid-template-columns:1fr_1fr] @md/searchResult:grid-cols-[repeat(auto-fill,minmax(var(--min-figure-width),1fr))];
+
+    figure {
+      @apply w-full max-md:min-w-0;
+    }
+  }
+}
+
+.SearchResult-mixed {
+  @apply relative grid w-full overflow-x-auto [grid-area:results];
+
+  > .LinkList-wrapper {
+    @apply before:row-[2/2] after:row-[2/2];
+  }
+
+  /* Row of images that appear at top of mixed view */
+  > .SearchResult-images {
+    /* Differentiates padding & margin to keep drop shadow visible */
+    @apply mx-4 mb-4 flex gap-4 pb-2 before:row-[1/1] after:row-[1/1];
+
+    figure {
+      @apply aspect-[248/238] w-fit shrink-0;
+    }
+  }
+}
+
+.SearchResult-actions-wrapper {
+  @apply contents;
+
+  .SearchResult-actions-toggle {
+    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray mx-1 bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:actions] before:btu-icon before:btu-icon-ellipsis hover:bg-gray-200 hover:outline-gray-500;
+
+    &[aria-expanded='true'] {
+      @apply btu-button-pressed bg-primary-50 outline-primary-600 before:btu-icon-x;
+    }
+  }
+
+  .SearchResult-fullscreen {
+    @apply btu-button btu-button-text-hidden btu-button-gray me-1 ms-3 overflow-visible bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:fullscreen] before:btu-icon before:btu-icon-maximize after:absolute after:right-[43px] after:h-full after:w-px after:bg-gray-200 hover:bg-gray-100;
+  }
+}
+
+/* Shown when user toggles Summary fiels in "Select Fields" menu */
+.SearchResult-summaryField {
+  @apply inline text-xs text-gray-500;
+
+  &:not(:first-child) {
+    @apply before:mx-2 before:my-1 before:inline-block before:h-[2px] before:w-[2px] before:rounded-full before:bg-gray-500;
+  }
+}
+
+/* * * * * * * * * * * * * */
+/* * RESPONSIVE STYLES * * */
+/* * * * * * * * * * * * * */
+
+/* We use container queries to dynamically resize/hide certain search controls. */
+.Popup .SearchResult,
+.Page-main .SearchResult {
+  @apply @container/searchResult;
+
+  @container searchResult (max-width: 610px) {
+    .SearchResult-sorts {
+      @apply __sorts-collapsed;
+    }
+  }
+
+  @container searchResult (max-width: 540px) {
+    .SearchResult-fields {
+      @apply hidden;
+    }
+
+    .SearchResult-imageHeightContainer {
+      @apply hidden;
+    }
+
+    .SearchResult-images[data-height] figure {
+      @apply h-[calc(12dvh+50px)];
+
+      img {
+        @apply h-[calc(12dvh)];
+      }
+
+      &.is-missing {
+        @apply before:h-[calc(12dvh)] after:top-[calc(6dvh)];
+      }
+    }
+  }
+
+  @container searchResult (min-width: 550px) {
+    .SearchResult-pagination ul.pagination {
+      /* Displays pagination if there's at least 1 page of results */
+      @apply [&:has(>li>ol>li)]:inline-flex;
+
+      li {
+        @apply first:list-item;
+      }
+
+      > li {
+        @apply [&:nth-child(2)]:border-s;
+      }
+
+      li.next {
+        @apply border-s;
+      }
+    }
+  }
+}
+
+/* SlackAuth Search Result View styling */
+.SearchResult:has(.SlackAuthContainer) {
+  .SlackAuthContainer {
+    @apply ms-1;
+  }
+}
+
+.SearchResult-items a.icon-null[data-label^='slack'] {
+  @apply before:btu-icon-slack;
+}
+
+/* Loader overlay for search results (covers the page, dimmed background, centered spinner) */
+.searchResult-loader-overlay {
+  @apply pointer-events-none fixed inset-0 flex items-center justify-center !bg-gray-900 bg-opacity-30 text-gray-800;
+}
+
+.searchResult-loader-spinner {
+  @apply btu-loader size-20;
+}