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

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

@@ -0,0 +1,239 @@
+.message,
+.Message {
+  @apply relative flex h-fit justify-start gap-3 border-b border-gray-200 bg-gray-25 p-4 text-sm text-gray-600 [--link-color:theme(colors.gray.700)] max-md:flex-col max-md:gap-0;
+
+  > .Message-icon {
+    @apply order-[-1] text-[--link-color] before:btu-icon before:btu-icon-info max-md:mb-2;
+  }
+
+  &:has(ol, ul) {
+    @apply flex-wrap;
+  }
+
+  ol,
+  ul {
+    &:not(:has(li:only-child)) {
+      @apply ms-8 w-full;
+    }
+
+    li:only-child {
+      @apply list-none;
+    }
+  }
+
+  ol {
+    @apply list-decimal;
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  p {
+    @apply m-0;
+  }
+
+  a {
+    @apply order-3 ms-auto font-semibold text-[--link-color] decoration-solid decoration-auto max-md:ms-0;
+  }
+
+  .is-emphasis {
+    @apply mx-2 my-0 font-semibold uppercase;
+  }
+}
+
+.Message.no-gap {
+  @apply gap-0;
+
+  .Message-icon {
+    @apply me-2;
+  }
+}
+
+.Message.is-grid {
+  @apply grid;
+
+  > .Message-icon {
+    /* Place the icon in the first column */
+    @apply col-start-1;
+  }
+
+  > .Message-body {
+    @apply col-start-2;
+  }
+}
+
+.Message.is-error,
+.Message.is-success {
+  @apply text-white;
+}
+
+.Message.is-success p {
+  @apply contents;
+}
+
+.Message.is-error {
+  @apply border-error-200 bg-error-25 text-error-600 [--link-color:theme(colors.error.700)] more-contrast:text-error-700 more-contrast:[--link-color:theme(colors.error.800)];
+
+  > .Message-icon {
+    @apply before:btu-icon-circle-alert;
+  }
+}
+
+.Message.is-warning {
+  @apply border-warning-200 bg-warning-25 text-warning-700 [--link-color:theme(colors.warning.800)] more-contrast:text-warning-800;
+
+  > .Message-icon {
+    @apply before:btu-icon-triangle-alert;
+  }
+
+  .WorkInProgressRestoredMessage-actions {
+    @apply contents;
+  }
+}
+
+.Message.is-success {
+  @apply border-success-200 bg-success-25 text-success-600 [--link-color:theme(colors.success.700)] more-contrast:text-success-700 more-contrast:[--link-color:theme(colors.success.800)];
+
+  > .Message-icon {
+    @apply before:btu-icon-circle-check-big;
+  }
+}
+
+.Message.is-revision {
+  --Revision-revisionColor: theme(colors.purple.200);
+  --Revision-revisionTextColor: theme(colors.purple.600);
+  --Revision-revisionEmphasisColor: theme(colors.purple.700);
+  --Revision-revisionBackgroundColor: theme(colors.purple.25);
+
+  @apply flex flex-wrap justify-start gap-2 rounded-none border-b border-l-0 border-r-0 border-t-0 border-b-[--Revision-revisionColor] bg-[--Revision-revisionBackgroundColor] text-[--Revision-revisionTextColor] max-md:gap-0 md:items-center;
+
+  > .Message-icon {
+    @apply text-[--Revision-revisionEmphasisColor] before:btu-icon;
+  }
+
+  a {
+    @apply text-inherit;
+  }
+}
+
+.Message.is-upload {
+  @apply relative mt-6 grid w-full grid-cols-[auto_auto_auto] items-center justify-center justify-items-center gap-[12px_4px] rounded-lg border border-gray-200 bg-white px-6 py-4 text-gray-500 hover:border-gray-300 hover:bg-gray-100 hover:text-primary-600;
+
+  &:hover {
+    a {
+      @apply underline;
+    }
+
+    .Message-icon {
+      @apply bg-gray-200 before:bg-gray-700 before:bg-none;
+    }
+  }
+
+  /* Make the entire container clickable (not just the link). */
+  .uploadableLink {
+    @apply before:absolute before:inset-0;
+  }
+
+  a {
+    @apply order-none text-sm font-semibold text-primary-700 no-underline;
+  }
+
+  .Message-icon {
+    @apply relative col-span-3 max-w-fit rounded-full bg-gray-100 p-2 text-transparent before:btu-icon-via-mask-upload before:btu-icon-gradient-primary;
+  }
+}
+
+.Message.is-workflow {
+  @apply flex md:items-center;
+
+  a {
+    @apply text-[--Revision-revisionTextColor];
+  }
+}
+
+.Message .ActionBar {
+  @apply bg-transparent;
+}
+
+/* If it has a ComboInput, let the CI wrap when it runs out of room. */
+.Message:has(> p .ComboInput) {
+  @apply md:flex-wrap md:items-center;
+
+  p {
+    @apply contents;
+  }
+
+  a {
+    @apply order-[0] ms-0;
+  }
+
+  .ComboInput {
+    @apply mt-2 md:mt-0;
+    &:not([aria-expanded='true']) {
+      @apply max-w-min;
+    }
+  }
+}
+
+/* It's unnecessary to render the message icon when displaying a Slack auth button. */
+.Message:has(> [data-dynamic-html*='writeSlackButtonHtml']) {
+  .Message-icon {
+    @apply hidden;
+  }
+}
+
+/* Numbered Lists have their own styles */
+.Message > ol.NumberedList {
+  @apply ms-0 basis-full;
+}
+
+.Message .NumberedList:has(> li > .NumberedList) {
+  @apply ms-8;
+}
+
+/* Configuration Status variant */
+.Message.is-configStatus {
+  @apply flex-wrap items-baseline;
+
+  p {
+    @apply m-0 flex flex-1 flex-col gap-0.5 pb-3;
+  }
+
+  /* Add border when followed by issues */
+  p:has(+ .Message-issues) {
+    @apply mb-3 border-b;
+  }
+
+  p strong {
+    @apply text-base font-bold;
+  }
+
+  .Message-meta {
+    @apply text-sm font-semibold text-gray-600;
+  }
+
+  .Message-issues {
+    @apply w-full basis-full list-disc text-sm opacity-90;
+
+    li {
+      @apply py-0.5;
+
+      &.is-error {
+        @apply font-bold;
+      }
+    }
+  }
+}
+
+.Message.is-configStatus.is-success p:has(+ .Message-issues) {
+  @apply border-success-200;
+}
+
+.Message.is-configStatus.is-warning p:has(+ .Message-issues) {
+  @apply border-warning-200;
+}
+
+.Message.is-configStatus.is-error p:has(+ .Message-issues) {
+  @apply border-error-200;
+}

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

@@ -0,0 +1,65 @@
+.Month {
+  @apply grid gap-[1px] overflow-auto rounded-lg border bg-gray-200 [grid-template-columns:repeat(7,_minmax(36px,_1fr))];
+}
+
+.Month-header,
+.Month-body,
+.Month-row {
+  @apply contents;
+}
+
+.Month-dowLabel {
+  @apply flex aspect-square items-center justify-center text-sm font-medium text-gray-900;
+}
+
+.Month-day {
+  @apply relative flex aspect-square cursor-pointer items-center justify-center bg-white text-md text-gray-700 hover:bg-primary-25 hover:font-medium hover:text-primary-700;
+
+  &.is-selected {
+    @apply bg-primary-100 font-medium text-primary-700 hover:bg-primary-200 hover:text-primary-700;
+  }
+}
+
+.Month-row:not(:first-child) .Month-dow {
+  @apply hidden;
+}
+
+.Month-row:first-child .Month-day:has(.Month-dow) {
+  @apply aspect-auto flex-col;
+
+  > * {
+    @apply w-full;
+  }
+
+  .Month-dom {
+    @apply inline-flex aspect-square items-center justify-center;
+  }
+
+  .calendarEvents {
+    @apply after:mx-auto after:mt-[14px];
+  }
+}
+
+.Month-dow {
+  @apply border-b border-gray-200 bg-gray-50 py-1 text-center text-sm text-gray-700;
+}
+
+.other-month {
+  @apply text-gray-400;
+
+  &.is-selected {
+    @apply bg-gray-50 font-normal text-gray-400 hover:font-medium;
+  }
+}
+
+.calendarEvents {
+  @apply absolute top-[calc(50%_+_theme(lineHeight.5)_/_2)] inline-flex text-[0] leading-[0.25rem] after:inline-block after:size-1 after:rounded-full after:bg-primary-500;
+}
+
+.calendarDay-today.Month-day {
+  @apply bg-primary-600 font-medium text-white hover:bg-primary-700;
+
+  > .calendarEvents {
+    @apply after:bg-white;
+  }
+}

package/src/legacy/tool-ui/src/NavRail/index.css

@@ -0,0 +1,47 @@
+btu-nav-rail {
+  --item-h: 36px;
+  --item-fixed-h: 68px;
+
+  @apply flex h-full flex-col overflow-hidden overflow-y-auto !bg-gray-50 text-sm font-semibold @container;
+
+  > ul {
+    @apply contents;
+  }
+
+  /* All the interactive elements in the nav rail. */
+  * > :is(a, button) {
+    @apply flex min-h-[--item-h] w-full flex-nowrap place-content-center items-center gap-2 rounded-lg px-2 font-semibold text-gray-700 no-underline focus-within:text-gray-700 hover:bg-gray-100 hover:text-gray-900 @[80px]:items-start @[80px]:pb-1.5 @[80px]:pt-2 @[80px]:[place-content:normal];
+
+    /* Counter the 2px center-origin shift from btu-icon's gradient-fill scale. */
+    > btu-icon {
+      @apply @[80px]:-mt-[2px];
+    }
+  }
+
+  /* Interactive elements which are in an expanded state. */
+  * > :is(a, button)[aria-expanded='true'] {
+    @apply bg-primary-50 text-gray-900 more-contrast:bg-primary-900 more-contrast:text-white;
+
+    btu-icon {
+      @apply more-contrast:bg-white more-contrast:bg-none;
+    }
+  }
+
+  /* The interactive elements of fixed items in the nav rail. */
+  > ul > li:not(:has(ul)) :is(a, button) {
+    @apply gap-3 text-sm;
+  }
+
+  /* Fills the remaining vertical space. */
+  > ul > li:first-of-type {
+    @apply flex-1 overflow-auto overscroll-contain;
+  }
+
+  > ul > li:first-of-type > ul {
+    @apply grid auto-rows-min gap-2 overscroll-contain p-4;
+  }
+
+  > ul > li:not(:has(ul)) {
+    @apply h-[--item-fixed-h] w-full place-content-center border-t border-t-gray-200 p-4 [flex:0_0_auto];
+  }
+}

package/src/legacy/tool-ui/src/NavRail/index.ts

@@ -0,0 +1,40 @@
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { ComponentStatesMixin } from '../ComponentStatesMixin'
+import { EventEmitterMixin } from '../EventEmitterMixin'
+import './index.css'
+
+@customElement('btu-nav-rail')
+export default class NavRail extends ComponentStatesMixin(
+  EventEmitterMixin(LitElement),
+) {
+  static get tagName() {
+    return 'BTU-NAV-RAIL'
+  }
+
+  public addItem(item: HTMLElement) {
+    const list = this.querySelector(':scope > ul')
+    if (!list) return
+    if (!(item instanceof HTMLLIElement)) {
+      const li = document.createElement('li')
+      li.append(item)
+      list.appendChild(li)
+    } else {
+      list.appendChild(item)
+    }
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    return html``
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'btu-nav-rail': NavRail
+  }
+}

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

@@ -0,0 +1,197 @@
+.Notification {
+  @apply grid gap-4 @container/notification;
+}
+
+.Notification-day + .Notification-day {
+  .Notification-date {
+    @apply before:absolute before:-left-[--space] before:top-0 before:w-[calc(100%_+_var(--space)*2)] before:border-b;
+  }
+}
+
+.Notification-item {
+  @apply relative py-4 after:absolute after:-left-[--space] after:bottom-0 after:w-[calc(100%_+_var(--space)*2)] after:border-b [&:last-child]:pb-0 [&:last-child]:after:content-none;
+}
+
+.Notification-date {
+  @apply relative py-2 text-xs font-medium text-gray-500 after:absolute after:-left-[--space] after:bottom-0 after:w-[calc(100%_+_var(--space)*2)] after:border-b;
+}
+
+.Notification-info {
+  @apply relative flex w-[100cqw] items-center gap-2 text-xs text-gray-500;
+}
+
+.Notification-info:has(.Notification-new) {
+  @apply after:size-[0.625rem] after:bg-success-500 after:[clip-path:circle()];
+}
+
+.Notification-info:has(.Notification-error) {
+  @apply before:btu-icon before:btu-icon-circle-alert before:me-1 before:text-error-700;
+}
+
+.Notification-title {
+  @apply flex overflow-hidden;
+}
+
+.Notification-clear {
+  @apply order-1 ms-auto;
+
+  .Button-clearSingle {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error opacity-0 before:btu-icon before:btu-icon-x;
+  }
+}
+
+.Notification-item:hover,
+.Notification-item:focus-within {
+  .Button-clearSingle {
+    @apply opacity-100;
+  }
+}
+
+.Notification-content {
+  @apply mt-1 text-sm text-gray-500 [overflow-wrap:anywhere];
+}
+
+.Notification-pagination {
+  @apply flex justify-end;
+}
+
+.Notification-actionBar {
+  @apply mt-3 flex items-center justify-end gap-2;
+
+  > .Notification-action button.Link {
+    @apply btu-button btu-button-primary btu-button-sm;
+  }
+
+  a:not(.Actions-controlsList a) {
+    @apply btu-button btu-button-primary btu-button-sm;
+  }
+
+  .Additional-actionsToggle {
+    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-ellipsis aria-expanded:btu-button-pressed;
+  }
+
+  /* The preview link */
+  > form.Notification-action {
+    @apply -order-1 me-auto;
+  }
+}
+
+.Notification-actionRefresh {
+  @apply hidden;
+}
+
+.Notification-controls-toggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none before:btu-icon before:btu-icon-settings aria-expanded:btu-button-pressed;
+}
+
+.Notification-controls-menu.is-open {
+  .Notification-controls-toggle {
+    &:hover,
+    &:focus {
+      @apply before:btu-icon-circle-x;
+    }
+  }
+
+  .Notification-controls-list.Dropdown {
+    @apply Dropdown-is-open;
+  }
+}
+
+.Popup[name='notifications'] {
+  min-width: 360px;
+
+  .Message.message-info {
+    @apply mb-4;
+  }
+}
+
+.Popup[name='notifications-pause-until'] {
+  .Widget.ToolUserNotifications {
+    @apply w-auto;
+  }
+}
+
+.Notification-new,
+.Notification-error {
+  @apply flex items-center overflow-hidden;
+}
+
+.Notification-error .Notification-type,
+.Notification-info:has(.Notification-error) a {
+  @apply text-error-700;
+}
+
+.Actions-controls.is-open .Actions-controlsList {
+  @apply Dropdown-is-open;
+}
+
+.Actions-controlsList > li > form.Notification-action {
+  @apply contents;
+}
+
+.Actions-controlsList [role='menuitem'] {
+  @apply Dropdown-item;
+}
+
+.Notification-type {
+  @apply truncate;
+}
+
+.Notification-time {
+  @apply flex before:size-[1.125rem] before:bg-gray-500 before:[clip-path:circle(0.1rem)];
+}
+
+.Notification-details {
+  @apply mt-2 rounded-lg bg-gray-50 p-2 text-sm text-gray-500;
+}
+
+.Notification-contentError-errorInfoButton {
+  &.is-active {
+    @apply opacity-100;
+  }
+  .error-message {
+    @apply hidden;
+  }
+}
+.Notification-contentError {
+  @apply max-h-[5dvh] overflow-y-scroll;
+
+  &:hover {
+    .Notification-contentError-errorInfoButton {
+      @apply opacity-100;
+    }
+  }
+}
+
+.ToolUserNotifications .ActionBar .Button {
+  @apply btu-button btu-button-fill-none btu-button-error btu-button-container-none;
+}
+
+/* Hides the add/remove buttons on Automatic Subscriptions */
+.inputContainer[data-field='cms.notification.automaticSubscriptions/subscriptionOptions']
+  > .RCIG
+  > .RCIG-controls {
+  @apply hidden;
+}
+
+.inputContainer[data-field='cms.notification.automaticSubscriptions/subscriptionOptions']
+  > .RCIG
+  > .RCIG-list
+  > .RCIG-item {
+  @apply grid-cols-[auto];
+
+  > .RCIG-title {
+    @apply bg-none;
+  }
+
+  > .RCIG-remove,
+  > btu-dropdown {
+    @apply hidden;
+  }
+}
+
+/* Hides the effectively read-only subscription field needed to power other dynamic texts. */
+[data-type='com.psddev.cms.notification.AutomaticToolSubscriptionOption']
+  > [data-field-name='subscription'] {
+  @apply hidden;
+}