@brightspot/ui 3.0.1 → 5.0.1

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

@@ -0,0 +1,174 @@
+/* Tabs organize similar content together into individual sections in the same page.
+  The following component styles (non v4 classes) are specifically for horizontal tab styling
+
+  Custom Props:
+
+    --pull-inline (default is none) - Pull a tab containers' boundaries to the left and right by an amount (to go full width in a grid for example).
+
+  Class Names:
+
+    __horizontal-tabs - Establishes a container for the tabs
+    __tab-item - Styles a tab item in its default, hover and focus states
+    __tab-item-[xxs | xs | sm | md] sizes available for tab items. By default tab-item-sm styling is applied to tab item
+    __tab-item-selected - Styles tab item in selected state
+
+  Example Usages:
+
+    Given <div class="TabBar">
+            <button class="TabBar-item>...</button>
+            <button class="TabBar-item>...</button>
+          </div>
+
+    div.TabBar          -> horizontal-tabs
+    button.TabBar-item  -> tab-item tab-item-xs
+*/
+
+.__horizontal-tabs {
+  @apply relative flex gap-4 overflow-x-auto overflow-y-hidden whitespace-nowrap rounded-t-[--CIG-radius] border-b border-gray-200 bg-white px-6;
+}
+
+.__tab-item {
+  @apply relative inline-block cursor-pointer px-1.5 py-4 text-sm font-medium capitalize text-gray-500 focus-visible:ring-offset-4 focus:[&_a]:ring-offset-0 [&::after:not(:empty)]:btu-badge-sm hover:bg-gray-100 hover:text-gray-700 focus:ring-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-600 focus-visible:ring-offset-primary-100 more-contrast:focus-visible:ring-4 [&::after:not(:empty)]:text-center [&_a]:text-inherit [&_a]:no-underline focus:[&_a]:rounded-none focus:[&_a]:ring-0;
+}
+
+.__tab-item-selected {
+  @apply text-gray-700 before:absolute before:inset-0 before:top-[unset] before:h-[2px] before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900;
+}
+
+.__tab-item-md {
+  @apply py-4 text-md [&::after:not(:empty)]:btu-badge-md;
+}
+
+.__tab-item-sm {
+  @apply py-4 text-sm [&::after:not(:empty)]:btu-badge-sm;
+}
+
+.__tab-item-xs {
+  @apply py-3 text-sm [&::after:not(:empty)]:btu-badge-sm;
+}
+
+.__tab-item-xxs {
+  @apply py-2 text-sm [&::after:not(:empty)]:btu-badge-sm;
+}
+
+/* Boost specificity of TabBar style to override native style of ul/ol elements. */
+:is(div, ol, ul).TabBar {
+  --pull-inline: ;
+  @apply [margin-inline:calc(-1_*_var(--pull-inline,_0px))];
+}
+
+/* Styling v4 horizontal tabs using v5 components */
+.TabBar:not(.is-menuOnly) {
+  @apply __horizontal-tabs;
+}
+
+.TabBar-item {
+  @apply __tab-item;
+
+  &.is-selected,
+  &.selected,
+  &.state-selected {
+    @apply __tab-item-selected;
+  }
+}
+
+.TabBar-item:where(.is-error) {
+  @apply flex items-center gap-2 after:justify-center after:bg-error-600 after:text-white after:[--tw-content:'!'];
+
+  &.is-selected,
+  &.selected,
+  &.state-selected {
+    @apply after:btu-badge-error;
+  }
+}
+
+.tabs-wrapper {
+  @apply contents;
+}
+
+.TabBar-item:has(.Badge) {
+  @apply flex items-center gap-2 hover:mix-blend-multiply;
+
+  .Badge {
+    @apply btu-badge-primary btu-badge-sm;
+  }
+}
+
+/* Menu Tab container styling using v5 components */
+.TabBar.is-menuOnly {
+  --tabbar-height: calc(var(--gap-m) * 2 + var(--Text-height));
+  @apply rounded-t-[--CIG-radius] border-b border-gray-200 bg-white px-4 py-2;
+}
+
+.TabBar-menu {
+  @apply flex items-center gap-2;
+}
+
+.TabBar-selected-text {
+  @apply text-md font-semibold capitalize text-gray-900;
+}
+
+.TabBar-menuToggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray after:btu-icon after:btu-icon-chevron-down;
+
+  &.is-active {
+    @apply btu-button-pressed after:btu-icon-chevron-up;
+  }
+}
+
+.TabBar-menuList {
+  @apply Dropdown;
+}
+
+.TabBar-menuItem {
+  @apply Dropdown-item;
+
+  &.is-selected {
+    @apply Dropdown-item-selected;
+  }
+}
+
+.TabBar.is-open .TabBar-menuList {
+  @apply Dropdown-is-open;
+}
+
+.TabBar.is-menuError {
+  .TabBar-selected-text {
+    @apply flex items-center gap-2 after:min-w-[1.375rem] after:rounded-2xl after:bg-error-600 after:px-2 after:py-0.5 after:text-center after:text-xs after:text-white after:[--tw-content:'!'];
+  }
+
+  .TabBar-menuItem.is-error {
+    @apply flex before:order-2 before:ml-auto before:min-w-[1.375rem] before:rounded-2xl before:bg-error-600 before:px-2 before:py-0.5 before:text-center before:text-xs before:text-white before:[--tw-content:'!'];
+  }
+
+  .TabBar-menuItem.is-selected.is-error {
+    @apply gap-2 after:order-3 after:ml-0;
+  }
+}
+
+/* dashboard tab select tab bar items custom styles */
+.TabBar-item a {
+  @apply -mx-1.5 -mb-4 -mt-1.5 block px-1 pb-4 pt-1.5;
+}
+
+.TabBar-item.is-error a {
+  --tabitem-padding-right: calc(
+    theme(gap.2) + theme(iconSize.md) + theme(padding[1.5])
+  );
+  @apply -mr-[--tabitem-padding-right] pr-[--tabitem-padding-right];
+}
+
+/* Account for different structure of dashboard tabs */
+.DashboardTabSelect {
+  .TabBar-item {
+    @apply -mt-2;
+  }
+
+  .TabBar-item > a {
+    @apply __tab-item;
+  }
+
+  .TabBar-item.selected > a {
+    @apply __tab-item-selected;
+  }
+}

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

@@ -0,0 +1,40 @@
+.TC {
+  @apply __tc-bar-sm;
+}
+
+.__tc-bar-xs {
+  @apply [--tc-bar-h:45px];
+}
+
+.__tc-bar-sm {
+  @apply [--tc-bar-h:53px];
+}
+
+.Tab {
+  @apply w-full;
+}
+
+.TC > .TC-unselected {
+  @apply hidden;
+}
+
+.TC-panel {
+  @apply p-[--Widget-padding];
+}
+
+.TC-panel-heading {
+  @apply flex h-11 items-center gap-2 bg-gray-100 p-2 text-sm font-semibold text-gray-900;
+}
+
+/* CIG should be full bleed when directly inside TC-panel. */
+.TC-panel,
+.TC-panel > form,
+.TC-panel > form > .fixedScrollable {
+  > .CIG {
+    @apply -m-[--Widget-padding] mb-0;
+  }
+
+  > .ActionBar {
+    @apply -mx-[--Widget-padding] my-0 p-[--Widget-padding];
+  }
+}

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

@@ -0,0 +1,107 @@
+/** table & table container styles **/
+table {
+  @apply w-full overflow-x-auto;
+}
+
+/** table header row & table header cells styling **/
+thead > tr {
+  @apply border-b border-b-gray-200;
+}
+
+th:has(input[type='checkbox']:only-child) {
+  @apply w-[68px];
+}
+
+th,
+thead td {
+  @apply text-nowrap bg-gray-50 px-6 py-3 text-start text-xs font-medium text-gray-500 hover:text-gray-700;
+}
+
+/** table data row & data cell styling **/
+tbody > tr {
+  @apply border-b border-b-gray-200 bg-white hover:bg-gray-100;
+
+  &:has(td input[type='checkbox']:checked) {
+    @apply bg-gray-50;
+  }
+}
+
+td {
+  @apply px-6 py-4 text-sm font-normal text-gray-500;
+
+  &.date,
+  &.time {
+    @apply whitespace-nowrap;
+  }
+
+  > a {
+    @apply Link overflow-hidden text-sm text-gray-700 no-underline [word-break:break-word] hover:text-gray-900 hover:underline focus:text-gray-700;
+
+    &.is-active {
+      @apply text-gray-700 underline;
+    }
+
+    /* Prevents italic glyphs from being clipped by overflow:hidden + line-clamp */
+    > em {
+      @apply me-[0.25em];
+    }
+  }
+
+  &.LinkTable-main > a,
+  &.LinkList-main > a {
+    @apply line-clamp-2;
+  }
+
+  button.ContentSummary-info {
+    @apply flex-shrink-0;
+  }
+
+  /* For use cases where info button is a child of the link
+  (ex. unpublished drafts dashboard widget , hierarchy view in search results) */
+  .ContentSummary-link:has(.ContentSummary-info) {
+    @apply inline-flex items-center gap-2;
+  }
+
+  a.ContentSummary-link > button.ContentSummary-info {
+    @apply block;
+  }
+}
+
+/** For tables that need horizontal scrolling (ex: Dashboard widgets) **/
+.__table-wrapper {
+  @apply overflow-x-auto @container;
+
+  table {
+    --col-width-sm: calc(theme(screens.xs) - theme(padding.14));
+    --col-width-md: calc(theme(screens.sm) - theme(padding.12));
+    --col-width-lg: calc(theme(screens.md) - theme(padding.12));
+
+    @apply w-max min-w-full;
+  }
+  td {
+    @apply max-w-[--col-width-sm] @[768px]:max-w-[--col-width-md] @[1200px]:max-w-[--col-width-lg];
+  }
+}
+
+.__static-table {
+  @apply w-full text font-normal text-gray-900;
+
+  > tbody > tr {
+    @apply last:border-b-0 hover:bg-inherit;
+
+    > th,
+    > td {
+      @apply break-words align-text-top text-gray-900;
+    }
+
+    > th {
+      @apply w-40 bg-gray-100 py-4 font-semibold;
+    }
+
+    > td {
+      ol > li {
+        @apply mt-4 first:mt-0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+.TableSizer {
+  @apply border-t py-3;
+
+  table {
+    @apply mx-auto mb-7 w-auto border-separate border-spacing-1 [counter-reset:table-row];
+
+    tr {
+      @apply [counter-increment:table-row];
+
+      &:has(td.active) {
+        &:not(:has(+ tr > td.active)) {
+          td.active:not(:has(+ td.active)) {
+            &::before {
+              @apply absolute bottom-3 left-1/2 right-1/2 flex items-center justify-center text-sm text-gray-500 [content:counter(table-row)_'x'_counter(table-column)];
+            }
+          }
+        }
+      }
+
+      &:first-child {
+        @apply [counter-reset:table-column];
+
+        td.active {
+          @apply [counter-increment:table-column];
+        }
+      }
+    }
+
+    td {
+      @apply size-6 rounded-lg border bg-white p-0;
+
+      /* Mobile viewports only show 10x10 grid */
+      &:nth-child(n + 11) {
+        @apply max-sm:hidden;
+      }
+
+      &.active {
+        @apply bg-primary-600;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+/* Taxonomy search result styles */
+.Taxonomy {
+  @apply col-span-full grid size-full auto-cols-[minmax(auto,2fr)] grid-flow-col grid-cols-[minmax(262px,1fr)_minmax(262px,1fr)] gap-1 overflow-x-auto overflow-y-hidden px-2.5 [grid-row:2/4];
+
+  .watch-button {
+    @apply hidden;
+  }
+}
+
+.Taxonomy-column {
+  @apply max-h-full min-w-[262px] overflow-y-auto;
+
+  /* Hacky way to make sure that a single column will span full width */
+  .Taxonomy > & {
+    &:has(+ .searchResultTaxonomyChildren:empty) {
+      @apply col-span-2;
+    }
+  }
+
+  ul {
+    @apply mx-1.5 mb-4 overflow-hidden rounded-lg shadow-md before:block before:h-[42px] before:w-full before:bg-gray-100;
+  }
+
+  li {
+    @apply flex items-center bg-white px-4 before:me-2 before:ms-4 before:block before:h-7 before:w-px before:bg-gray-200 hover:bg-gray-100 [&:not(:last-child)]:border-b;
+
+    a:not(.Taxonomy-expand) {
+      @apply -order-1 flex-grow truncate py-3.5 text-sm font-medium text-gray-900 no-underline hover:underline;
+    }
+
+    &.is-selected {
+      @apply bg-primary-50;
+
+      .Taxonomy-expand {
+        @apply text-primary-800;
+      }
+    }
+
+    &:has(.Taxonomy-expand:hover) {
+      @apply bg-white;
+    }
+
+    &:not(:has(.Taxonomy-expand)) {
+      @apply after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:block after:p-1 after:text-gray-300;
+    }
+  }
+}
+
+.Taxonomy-children {
+  @apply contents;
+
+  /* Shows the user that the selected item has no loadable children */
+  :has(li.is-selected) + &.loaded:empty {
+    @apply block h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
+  }
+}
+
+.Taxonomy-expand {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-chevron-right touch-device:btu-button-sm rtl:before:btu-icon-chevron-left hover:bg-gray-200;
+}

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

@@ -0,0 +1,40 @@
+.TextInput {
+  @apply flex w-full resize-none items-center rounded-lg border border-solid border-gray-300 bg-white px-4 py-2 text-sm leading-4 text-gray-900 outline-none focus:ring-primary-100 placeholder:text-gray-500 hover:bg-gray-100 focus:border-solid focus:border-primary-600 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-400 disabled:placeholder:text-gray-400 more-contrast:placeholder:text-gray-500;
+}
+
+textarea,
+input:where(
+    [type='email'],
+    [type='number'],
+    [type='password'],
+    [type='search'],
+    [type='tel'],
+    [type='text'],
+    [type='url']
+  ) {
+  @apply TextInput;
+}
+
+btu-input {
+  @apply relative;
+}
+
+btu-input[type='password'] {
+  @apply inline-flex w-full items-center gap-4;
+
+  .ShowPassword-toggle {
+    @apply btu-button btu-button-text-hidden before:btu-icon before:btu-icon-eye;
+
+    &.off {
+      @apply before:btu-icon-eye-off;
+    }
+  }
+
+  input[type='password']::-ms-reveal {
+    @apply hidden;
+  }
+}
+
+#frameBody {
+  @apply pointer-events-none hidden;
+}

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

@@ -0,0 +1,64 @@
+/* Default light theme */
+:root {
+  @apply lightTheme;
+}
+
+/* User override: explicit dark mode via class */
+:root.is-dark {
+  @apply darkTheme;
+}
+
+/* User contrast overrides (highest priority) */
+/* User explicitly wants high contrast */
+:root.is-moreContrast.is-dark {
+  @apply darkTheme-highcontrast;
+}
+
+:root.is-moreContrast:not(.is-dark) {
+  @apply lightTheme-highcontrast;
+}
+
+/* User explicitly wants normal contrast (overrides OS high contrast) */
+:root.is-normalContrast.is-dark {
+  @apply darkTheme;
+}
+
+:root.is-normalContrast:not(.is-dark) {
+  @apply lightTheme;
+}
+
+/* OS-level dark mode (unless overridden by data-theme light) */
+@media screen and (prefers-color-scheme: dark) and (forced-colors: none) {
+  :root:not(.is-dark):not([data-theme*='"appearance":"light"']) {
+    @apply darkTheme;
+  }
+}
+
+/* OS-level high contrast (only applies when user hasn't set contrast preference) */
+@media screen and (prefers-contrast: more) and (forced-colors: none) {
+  /* Light theme + OS high contrast (no user contrast override) */
+  :root:not(.is-dark):not(.is-moreContrast):not(.is-normalContrast) {
+    @apply lightTheme-highcontrast;
+  }
+
+  /* Dark theme via class + OS high contrast (no user contrast override) */
+  :root.is-dark:not(.is-moreContrast):not(.is-normalContrast) {
+    @apply darkTheme-highcontrast;
+  }
+
+  /* OS dark mode + OS high contrast (no user overrides) */
+  @media screen and (prefers-color-scheme: dark) {
+    :root:not(.is-dark):not(.is-moreContrast):not(.is-normalContrast):not(
+        [data-theme*='"appearance":"light"']
+      ) {
+      @apply darkTheme-highcontrast;
+    }
+  }
+}
+
+/* High contrast borders - applies when high contrast is actually being used */
+*,
+:after,
+:before {
+  @apply more-contrast:border-gray-400 more-contrast:![--button-outline-color:theme(colors.gray.400)];
+}

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

@@ -0,0 +1,93 @@
+/* Styleguide */
+.ThemeBundleEditor-stage {
+  @apply fixed bottom-0 left-[var(--pageNav-w)] right-0 top-[--page-header-h] z-[100] translate-y-full flex-col border-s border-t bg-white transition-transform duration-300;
+
+  /* Styleguide and its toggle button are hidden at small breakpoints */
+  @apply hidden lg:flex;
+
+  &.is-open {
+    @apply translate-y-0;
+  }
+}
+
+/* "Open styleguide" button */
+.ThemeBundleEditor-top {
+  @apply hidden pt-6 lg:block;
+}
+.ThemeBundleEditor-toggle {
+  @apply hidden lg:btu-button lg:btu-button-gray lg:btu-button-md;
+}
+
+/* Frame that holds the styleguide itself */
+.ThemeBundleEditor-stage-main {
+  @apply size-full;
+
+  iframe {
+    @apply flex size-full;
+  }
+}
+
+/* The buttons that appear above the stylgeuide frame */
+.ThemeBundleEditor-stage-top {
+  @apply flex w-full items-center justify-between bg-white px-4 py-3;
+
+  > a {
+    @apply btu-button btu-button-fill-none btu-button-gray before:btu-icon;
+  }
+
+  .ThemeBundleEditor-close {
+    @apply before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
+  }
+
+  .ThemeBundleEditor-openNewTab {
+    @apply before:btu-icon-external-link;
+  }
+}
+
+/* Carryover from v4 */
+.Styleguide .Page.is-inIframe {
+  @apply h-full;
+}
+
+/* Styles related to theme bundle edit form */
+.Page.has-theme-styleguide {
+  .ContentEdit-left {
+    @apply grid grid-cols-subgrid;
+
+    &:has(.Tab[data-tab='Styleguide']:not(.TC-unselected)) {
+      @apply grid-rows-subgrid;
+    }
+  }
+
+  .ContentEdit-main {
+    &:has(.Tab[data-tab='Styleguide']:not(.TC-unselected)) {
+      @apply grid-rows-subgrid;
+    }
+  }
+
+  .CIG {
+    @apply content-start;
+  }
+
+  .Tab[data-tab='Styleguide']:not(.TC-unselected) {
+    --tab-bar-h: calc(theme(lineHeight.4) + theme(padding.6) + 1px);
+
+    @apply -mx-6 flex h-[calc(100%_-_var(--tab-bar-h))] w-[calc(100%_+_2_*_theme(spacing.6))] flex-col overflow-clip;
+
+    > .StyleguideFrame {
+      @apply w-full flex-shrink-0 flex-grow;
+    }
+
+    > .Message {
+      @apply flex-none;
+
+      > a {
+        @apply -order-1;
+      }
+
+      .Message-icon {
+        @apply before:btu-icon-external-link;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+.TimedContentPlayerNote {
+  @apply relative max-w-[350px];
+}
+
+/* Preview with thumbnail */
+.TimedContentPlayerNote-thumbnail-link {
+  @apply relative inline-block overflow-hidden rounded-lg border border-solid border-gray-300 before:btu-icon before:btu-icon-play before:absolute before:left-1/2 before:top-1/2 before:rounded-full before:border before:border-gray-300 before:bg-white before:p-3 before:text-gray-700 before:[transform:translate(-50%,-50%)];
+}
+
+/* Preview with no thumbnail */
+.TimedContentPlayerNote-thumbnail-noimage {
+  @apply block h-[250px] w-[350px] bg-black;
+}
+
+/* Player (hidden until user clicks on preview) */
+.TimedContentPlayerNote-player,
+.TimedContentPlayerNote-player-control {
+  @apply hidden;
+}
+
+.inputContainer-TimedContentPlayerNote-player-visible
+  .TimedContentPlayerNote-player-control {
+  @apply [display:inherit];
+}
+
+.TimedContentPlayerNote-player-frame {
+  @apply flex h-[250px] w-[350px] max-w-full items-center justify-center overflow-hidden rounded-lg border border-gray-300 bg-gray-50;
+}
+
+.TimedContentPlayerNote-player-frame .frame {
+  @apply flex-grow;
+}
+
+.TimedContentPlayerNote-player-close {
+  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-xs absolute -top-[34px] right-0 cursor-pointer before:btu-icon before:btu-icon-x;
+}
+
+.CIG-note:has(.TimedContentPlayerNote) {
+  @apply pointer-events-auto order-[0] w-full;
+}
+
+/* IframeToolPlayerServlet */
+.TimedContentIframeToolPlayer iframe {
+  @apply size-full;
+}
+
+/* Companion Content */
+.ContentEdit-left:has(.TimedContent-companions) {
+  @apply @container/content-left;
+}
+
+.TimedContent-companions:has(.CIG-note .TimedContentPlayerNote) {
+  @apply block gap-x-10 [grid-template-areas:"label_label"_"companions_note"] [grid-template-columns:1fr_auto] @content-left-md/content-left:grid;
+
+  &.TC-unselected {
+    @apply hidden;
+  }
+
+  > .CIG-label {
+    @apply [grid-area:label];
+  }
+
+  > .CIG-note {
+    @apply mb-12 [grid-area:note] @content-left-md/content-left:mb-0;
+  }
+
+  > .CIG-large {
+    @apply [grid-area:companions];
+  }
+}
+
+.TimedCompanionSelector-controls {
+  @apply gap-2;
+}