@brightspot/ui 3.0.1 → 5.0.1

package/src/legacy/tool-ui/src/main/webapp/v4/ViewMirror.less

@@ -0,0 +1,42 @@
+.ViewMirror {
+  display: grid;
+  grid-template:
+    'title' auto
+    'content' 1fr ~'/'
+    1fr;
+  height: 100vh;
+  width: 100vw;
+
+  .ViewMirror-content {
+    grid-area: content;
+  }
+
+  .PreviewFrame {
+    height: 100%;
+  }
+
+  .PreviewFrame-typeDisplay {
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    > iframe {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}
+
+.ViewMirror-title {
+  background: var(--color-dominant7);
+  color: var(--color-white);
+  grid-area: title;
+  padding: var(--gap-s) var(--gap-l);
+}
+
+.ViewMirror-controls {
+  display: none;
+}

package/src/legacy/tool-ui/src/main/webapp/v4/ViewPreview.less

@@ -0,0 +1,147 @@
+.PreviewFrame {
+  background: var(--color-gray1);
+  display: grid;
+  grid-template:
+    'typeActions typeActions' auto
+    'typeControls typeControls' auto
+    'previewDisplay previewDisplay' 1fr ~'/'
+    minmax(0, 1fr) minmax(0, 1fr);
+  height: 100%;
+  width: 100%;
+
+  .ComboInput {
+    --ComboInput-listPadding: calc(var(--gap-l) / 2);
+
+    min-height: calc(var(--ComboInput-listPadding) * 2 + var(--Text-height));
+    width: auto;
+
+    &::before {
+      display: none;
+    }
+
+    .ComboInput-icon::after {
+      bottom: calc(
+        var(--ComboInput-listPadding) + (var(--Text-height) - var(--Icon-size)) /
+          2
+      );
+      right: var(--ComboInput-listPadding);
+    }
+
+    &,
+    &:focus {
+      padding: var(--ComboInput-listPadding);
+      padding-right: calc(
+        var(--gap-xs) + var(--Icon-size) + var(--ComboInput-listPadding)
+      );
+    }
+
+    &:hover,
+    &:focus {
+      background: var(--color-gray2);
+    }
+  }
+}
+
+.PreviewFrame-types {
+  border-bottom: 1px solid var(--color-gray3);
+  grid-area: types;
+  padding-left: calc(var(--gap-l) / 2);
+}
+
+.PreviewFrame-typeFrame {
+  display: contents;
+}
+
+.PreviewFrame-typeFrame > *:only-child {
+  background: var(--color-white);
+  grid-area: previewDisplay;
+}
+
+.PreviewFrame-typeControlsContainer {
+  display: contents;
+
+  > form {
+    display: contents;
+  }
+}
+
+.PreviewFrame-typeControls {
+  border-bottom: 1px solid var(--color-gray3);
+  grid-area: typeControls;
+  padding: 0 calc(var(--gap-l) / 2);
+}
+
+.PreviewFrame-typeActions {
+  align-items: center;
+  border-bottom: 1px solid var(--color-gray3);
+  display: flex;
+  grid-area: typeActions;
+  justify-content: end;
+  padding-left: var(--gap-l);
+  padding-right: calc(var(--gap-l) - var(--gap-s));
+
+  .DateTimeInput {
+    &.is-empty {
+      .IconButton;
+
+      --IconButton-name: 'date_range';
+
+      padding-top: 0;
+    }
+
+    &::before {
+      border: none;
+    }
+  }
+
+  .action-share {
+    .IconButton;
+
+    --IconButton-name: 'open_in_new';
+
+    order: 0;
+  }
+
+  .action-refresh {
+    .IconButton;
+
+    --IconButton-name: 'refresh';
+
+    order: 0;
+  }
+}
+
+.PreviewFrame-typeDisplay {
+  background: var(--color-white);
+  grid-area: previewDisplay;
+}
+
+.PreviewFrame.HasPreviewSelect {
+  grid-template:
+    'typeActions typeActions' auto
+    'types typeControls' auto
+    'previewDisplay previewDisplay' 1fr ~'/'
+    minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.PreviewFrame-previewToEditToggle {
+  margin-right: auto;
+  white-space: nowrap;
+
+  & > label {
+    align-items: center;
+    display: flex;
+    gap: var(--gap-s);
+  }
+
+  & input {
+    .Checkbox;
+    .Checkbox.is-toggle;
+  }
+}
+
+.PreviewFrame:has(.PreviewFrame-previewToEditToggle input:not(:checked)) {
+  & .Preview-overlayFrame {
+    display: none;
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Viewers.less

@@ -0,0 +1,70 @@
+.Viewers {
+  --Avatar-size: var(--iconSize-m);
+
+  padding-left: calc(var(--Avatar-size) / 5);
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform var(--time-xl);
+
+  > .Viewers-some,
+  > .Viewers-none {
+    backface-visibility: hidden;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  > .Viewers-some {
+    display: flex;
+    position: relative;
+    transform: rotateX(180deg);
+    white-space: nowrap;
+
+    > .Viewers-viewer {
+      margin-left: calc(0px - var(--Avatar-size) / 5);
+      position: relative;
+
+      &::before {
+        background: var(--color-white);
+        border-radius: 50%;
+        bottom: -1px;
+        content: '';
+        left: -1px;
+        position: absolute;
+        right: -1px;
+        top: -1px;
+      }
+
+      &[data-editing]::before {
+        background: var(--color-yellow4);
+        bottom: -4px;
+        left: -4px;
+        right: -4px;
+        top: -4px;
+      }
+
+      &[data-locked] {
+        order: 1;
+        z-index: 1;
+      }
+
+      &[data-locked]::after {
+        .Icon;
+
+        background: transparent;
+        bottom: 0;
+        content: 'lock';
+        font-size: var(--fontSize-xs);
+        left: var(--fontSize-s);
+        position: absolute;
+        top: inherit;
+      }
+    }
+  }
+
+  &[data-some] {
+    transform: rotateX(180deg);
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Week.less

@@ -0,0 +1,32 @@
+.Week-row {
+  display: flex;
+
+  &:not(:first-child) {
+    border-top: var(--borderWidth-thin) solid var(--color-gray3);
+  }
+}
+
+.Week-day {
+  background: var(--color-gray1);
+  flex: none;
+  padding: var(--gap-m) var(--gap-l);
+  width: calc(var(--gap-m) * 2 + var(--lineHeight-xs) + var(--lineHeight-xl));
+}
+
+.Week-dow {
+  .Text.is-xs;
+
+  display: block;
+}
+
+.Week-dom {
+  .Text.is-xl;
+
+  display: block;
+}
+
+.Week-content {
+  .Text.is-s;
+
+  padding: 0 var(--gap-l);
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Widget.less

@@ -0,0 +1,224 @@
+@import (reference) url('./Dropdown.less');
+@import (reference) url('../v4/Icon.less');
+@import (reference) url('../v4/IconButton.less');
+
+.Widget {
+  --Widget-padding: var(--gap-l);
+
+  background: var(--color-white);
+  padding: var(--Widget-padding);
+  position: relative;
+}
+
+.Widget
+  :is(
+    .widget-urls.is-readOnly,
+    .widget-urlsRepeatable.is-readOnly,
+    .ContentEditSites-owner.is-readOnly,
+    .ContentEditSites-access.is-readOnly,
+
+  ) {
+  opacity: 0.7;
+  pointer-events: none;
+  user-select: none;
+}
+
+.Widget .is-readOnly .UrlsWidget-itemLabel a,
+.widget .is-readOnly .RCIG-title::after,
+.widget .is-readOnly .ContentSummary-info,
+.widget .is-readOnly .ContentSelector-edit {
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.Widget-title {
+  .Text.is-m;
+
+  background: var(--color-gray2);
+  font-weight: bold;
+  margin: 0;
+  overflow: hidden;
+  padding: var(--gap-m) var(--gap-l);
+  position: sticky;
+  text-overflow: ellipsis;
+  top: 0;
+  white-space: nowrap;
+  z-index: 10;
+}
+
+.Widget-heading {
+  .Text.is-s;
+
+  font-weight: bold;
+  margin: var(--gap-l) 0;
+}
+
+.Widget-controls {
+  align-items: center;
+  display: flex;
+  height: calc(var(--gap-m) * 2 + var(--Text-height));
+  position: absolute;
+  right: var(--gap-l);
+  top: 0;
+  z-index: 11;
+
+  > *:not(:first-child) {
+    margin-left: var(--gap-l);
+  }
+
+  &.is-locked {
+    display: none !important;
+  }
+}
+
+.Widget-actions {
+  margin-left: var(--gap-l);
+}
+
+.Widget-restoreButton {
+  .Button;
+  .Text.is-m;
+
+  background: transparent;
+}
+
+.Widget-actionsToggle {
+  .Link;
+  .IconButton;
+
+  --IconButton-name: 'settings';
+
+  margin: 0 calc(0px - var(--gap-s));
+}
+
+.Widget-actionsList {
+  .Dropdown;
+
+  z-index: 10000;
+
+  [role='menuitem'] {
+    .Dropdown-item;
+  }
+}
+
+.Widget-actions.is-open {
+  .Widget-actionsToggle {
+    --IconButton-name: 'close';
+
+    background: var(--color-black);
+    border-radius: 50%;
+    color: var(--color-white);
+  }
+
+  .Widget-actionsList {
+    .Dropdown.is-open;
+  }
+}
+
+// Things that should be full bleed when directly inside Widget.
+.Widget,
+.Widget > form,
+.Widget > form > .fixedScrollable {
+  > .Widget-title,
+  > .TabBar,
+  > .Message,
+  > * > .Message {
+    margin: calc(0px - var(--Widget-padding));
+    margin-bottom: var(--Widget-padding);
+  }
+
+  > .Message:last-child {
+    margin-bottom: calc(0px - var(--Widget-padding));
+  }
+
+  > .TC,
+  > .CIG {
+    margin: calc(0px - var(--Widget-padding));
+    margin-bottom: 0;
+  }
+
+  > .ActionBar {
+    margin: 0 calc(0px - var(--Widget-padding))
+      calc(0px - var(--Widget-padding));
+    padding: var(--Widget-padding);
+  }
+
+  > .inputContainer ~ .ActionBar {
+    margin-top: var(--gap-xl);
+  }
+
+  // CIG rows which exist outside of TC and CIG containers
+  // use margin instead of padding so that the Widget title's margin will collapse into it.
+  > .CIG-row {
+    margin-top: var(--gap-xl);
+    padding-top: 0;
+  }
+}
+
+.Widget-filters {
+  background-color: var(--color-gray3);
+  margin-left: calc(var(--Widget-padding) * -1);
+  margin-right: calc(var(--Widget-padding) * -1);
+  margin-top: calc(var(--Widget-padding) * -1);
+  min-height: calc(var(--gap-l) * 2);
+  padding: 0 var(--Widget-padding);
+}
+
+.Widget-filters,
+.Widget-filter {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.Widget-filter {
+  width: 100%;
+}
+
+btu-widget {
+  display: block;
+
+  .Widget-title {
+    cursor: pointer;
+
+    .Widget-collapse {
+      .IconButton;
+
+      --IconButton-name: 'keyboard_arrow_up' !important;
+
+      margin: 0 calc(0px - var(--gap-s));
+      transition: transform var(--time-xs);
+    }
+  }
+
+  &.is-error > .Widget-title {
+    color: var(--color-red6);
+
+    .Widget-expand {
+      &::after {
+        .Icon;
+
+        content: 'error';
+        margin-left: var(--gap-s);
+      }
+    }
+  }
+
+  &.is-collapsed {
+    height: calc(var(--gap-m) * 2 + var(--lineHeight-m));
+    overflow: hidden;
+
+    .Widget-title {
+      position: static;
+    }
+
+    .Widget-collapse {
+      transform: rotate(180deg);
+    }
+
+    > div,
+    > table {
+      display: none;
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Workflow.less

@@ -0,0 +1,153 @@
+.Workflow-ui {
+  .Icon.is-s;
+  .Text.is-s;
+
+  background: var(--color-gray1);
+  margin-top: var(--gap-s);
+  min-height: 360px;
+  position: relative;
+
+  // Reserve space to the right for the remove button.
+  input[type] {
+    background: var(--color-white);
+    display: block;
+    padding-left: var(--gap-s);
+    padding-right: calc(var(--gap-s) + var(--Icon-size));
+
+    &.Workflow-stateName {
+      padding-left: calc(var(--Text-height) + var(--gap-xs) * 2);
+      padding-right: calc(var(--Icon-size) + var(--gap-xs) * 3);
+    }
+  }
+}
+
+// Every box is absolutely positioned via JS.
+.Workflow-state,
+.Workflow-transition {
+  box-shadow: var(--shadow-2);
+  position: absolute;
+}
+
+// State box is movable.
+.Workflow-state {
+  background: var(--color-gray2);
+  cursor: move;
+  padding: var(--gap-m);
+
+  &.is-intermediate {
+    height: calc(
+      var(--gap-m) * 2 + var(--gap-s) * 3 + var(--Text-height) +
+        var(--Icon-size)
+    );
+    width: calc(200px + var(--gap-m) * 2);
+  }
+
+  .sp-replacer {
+    padding: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .sp-dd {
+    display: none;
+  }
+
+  .sp-preview-inner {
+    left: var(--gap-xs);
+    top: var(--gap-s);
+  }
+
+  .sp-preview {
+    overflow: inherit;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  // ...except initial and final states.
+  &[data-id='initial'],
+  &[data-id='final'] {
+    cursor: default;
+  }
+
+  // Initial state at top left.
+  &[data-id='initial'] {
+    left: var(--gap-l);
+    top: calc(var(--gap-l) * 2 + var(--Text-height));
+
+    .Workflow-addTransition {
+      display: block;
+    }
+  }
+
+  // Final state at bottom right.
+  &[data-id='final'] {
+    bottom: var(--gap-l);
+    right: var(--gap-l);
+  }
+
+  .ComboInput {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
+
+// Remove button is overlaid on top of the input.
+.Workflow-removeState,
+.Workflow-removeTransition {
+  .IconButton;
+  .IconButton.is-red;
+
+  --IconButton-name: 'remove_circle';
+
+  position: absolute;
+
+  &:hover,
+  &:focus {
+    --IconButton-name: 'remove';
+  }
+}
+
+.Workflow-removeState {
+  right: var(--gap-m);
+  top: calc(var(--gap-m) + var(--Text-height) / 2 - var(--Icon-size) / 2);
+}
+
+.Workflow-removeTransition {
+  right: 0;
+  top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
+}
+
+// Add state and transition link.
+.Workflow-addState,
+.Workflow-addTransition {
+  &::before {
+    .Icon;
+
+    content: 'add_circle';
+    margin-right: var(--gap-xs);
+  }
+}
+
+.Workflow-addState {
+  display: inline-block;
+  padding: var(--gap-l) 0 0 var(--gap-l);
+}
+
+.Workflow-addTransition {
+  display: inline-block;
+  padding-top: var(--gap-s);
+}
+
+@media (@mq-xl) {
+  .Workflow-state.is-intermediate {
+    width: calc(222px + var(--gap-m) * 2);
+  }
+}