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

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);
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

package/src/legacy/tool-ui/src/main/webapp/v4/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

package/src/legacy/tool-ui/src/main/webapp/v4/__mocks__/textArea.mock.js

@@ -0,0 +1,20 @@
+const createTextArea = (toolbar, numLines) => {
+  const textareaContainer = document.createElement('div')
+  const textAreaEle = document.createElement('textarea')
+  textAreaEle.setAttribute('data-rte-toolbar', toolbar)
+  textAreaEle.setAttribute('data-rte-lines', numLines)
+  textareaContainer.appendChild(textAreaEle)
+  return textareaContainer
+}
+
+const largetextArea = createTextArea(
+  'brightspot.core.tool.LargeRichTextToolbar',
+  '10',
+)
+
+const smallTextArea = createTextArea(
+  'brightspot.core.tool.SmallRichTextToolbar',
+  '10',
+)
+
+export { largetextArea, smallTextArea }