@brightspot/ui 3.0.1-cms-ui-migration.4 → 3.0.1

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

@@ -1,239 +0,0 @@
-.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

@@ -1,65 +0,0 @@
-.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

@@ -1,47 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,197 +0,0 @@
-.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;
-}