[breadboard-web] Start styling of steps

seeds/breadboard-web/public/styles/global.css

@@ -14,6 +14,12 @@ html {
   --bb-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   --bb-font-color: rgb(23, 23, 23);
   --bb-main-bg: rgb(244, 247, 252);
+  --bb-highlight-color: rgb(211, 170, 255);
+  --bb-progress-color: rgb(223, 195, 253);
+  --bb-progress-color-faded: rgb(244, 235, 255);
+  --bb-warning-color: rgb(251, 137, 3);
+  --bb-error-color: rgb(251, 3, 3);
+  --bb-done-color: rgb(51, 235, 168);
   --bb-text-baseline: calc(var(--bb-grid-size) * 4);
   --bb-text-xx-large: 3rem;
   --bb-text-x-large: 2rem;
@@ -81,3 +87,13 @@ header a {
     min-height: calc(var(--bb-grid-size) * 30);
   }
 }
+
+@keyframes rotate {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

seeds/breadboard-web/src/ui/done.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export class Done extends HTMLElement {
+  constructor(message = "Done.") {
+    super();
+    const root = this.attachShadow({ mode: "open" });
+    root.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <span>${message}</span>
+    `;
+  }
+}

seeds/breadboard-web/src/ui/error.ts

@@ -12,7 +12,7 @@ export class ErrorMessage extends HTMLElement {
       <style>
         :host {
           display: block;
-          color: red;
+          color: var(--bb-error-color);
         }
       </style>
       ${message}

seeds/breadboard-web/src/ui/index.ts

@@ -18,8 +18,11 @@ import {
   MultipartInputText,
 } from "./input-multipart.js";
 import { Toast } from "./toast.js";
+import { ResponseContainer } from "./response-container.js";
+import { Done } from "./done.js";
 
 export const register = () => {
+  customElements.define("bb-response-container", ResponseContainer);
   customElements.define("bb-ui", UIController);
   customElements.define("bb-start", Start);
   customElements.define("bb-load", Load);
@@ -28,6 +31,7 @@ export const register = () => {
   customElements.define("bb-output", Output);
   customElements.define("bb-progress", Progress);
   customElements.define("bb-result", Result);
+  customElements.define("bb-done", Done);
   customElements.define("bb-multipart-input", MultipartInput);
   customElements.define("bb-multipart-input-image", MultipartInputImage);
   customElements.define("bb-multipart-input-text", MultipartInputText);

seeds/breadboard-web/src/ui/output.ts

@@ -26,6 +26,9 @@ export class Output extends HTMLElement {
         * {
           white-space: pre-wrap;
         }
+        pre {
+          margin: 0;
+        }
       </style>
     `;
   }

seeds/breadboard-web/src/ui/progress.ts

@@ -13,9 +13,6 @@ export class Progress extends HTMLElement {
         :host {
           display: block;
         }
-        span {
-          color: var(--bb-progress-color, gray);
-        }
       </style>
       <span>${message}</span>
     `;

seeds/breadboard-web/src/ui/response-container.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export class ResponseContainer extends HTMLElement {
+  constructor() {
+    super();
+
+    const root = this.attachShadow({ mode: "open" });
+    root.innerHTML = `
+      <style>
+        ::slotted(*) {
+          position: relative;
+          padding: calc(var(--bb-grid-size) * 3) 0 calc(var(--bb-grid-size) * 4)
+          calc(var(--bb-grid-size) * 6); 
+        }
+
+        ::slotted(*)::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: var(--bb-grid-size);
+          height: 100%;
+          background: rgb(244, 244, 244);
+          translate: -50% 0;
+        }
+
+        ::slotted(:first-child)::before {
+          height: calc(100% - var(--bb-grid-size) * 3);
+          top: calc(var(--bb-grid-size) * 3);
+        }
+
+        ::slotted(:last-child)::before {
+          height: calc(var(--bb-grid-size) * 4);
+        }
+
+        ::slotted(:only-child)::before {
+          display: none;
+        }
+
+        ::slotted(*)::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          translate: -50% calc(var(--bb-grid-size) * 3.5);
+          width: calc(var(--bb-grid-size) * 4);
+          height: calc(var(--bb-grid-size) * 4);
+          border-radius: 50%;
+          background: var(--bb-highlight-color);
+        }
+
+        ::slotted(bb-done)::after {
+          background: var(--bb-done-color);
+        }
+
+        ::slotted(bb-error)::after {
+          background: var(--bb-error-color);
+        }
+
+        ::slotted(bb-progress)::after {
+          background: radial-gradient(
+                var(--bb-progress-color) 0%,
+                var(--bb-progress-color) 40%,
+                var(--bb-progress-color-faded) 40%,
+                var(--bb-progress-color-faded) 58%,
+                transparent 58.1%,
+                transparent 100%
+              )
+              no-repeat,
+            conic-gradient(var(--bb-progress-color) 0deg, var(--bb-progress-color) 90deg, transparent 91deg)
+              no-repeat,
+            linear-gradient(var(--bb-progress-color-faded), var(--bb-progress-color-faded)) no-repeat;
+
+          animation: rotate 1s linear infinite;
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+
+  clearContents() {
+    const children = this.querySelectorAll("*");
+    for (const child of children) {
+      child.remove();
+    }
+  }
+}

seeds/breadboard-web/src/ui/result.ts

@@ -25,6 +25,7 @@ export class Result extends HTMLElement {
 
         details pre {
           padding-left: 1rem;
+          margin: 0;
         }
       </style>
       <details>

seeds/breadboard-web/src/ui/toast.ts

@@ -42,11 +42,11 @@ export class Toast extends HTMLElement {
         }
 
         :host(.warning) {
-          color: #FB8903;
+          color: var(--bb-warning-color);
         }
 
         :host(.error) {
-          color: #FB0303;
+          color: var(--bb-error-color);
         }
 
         :host(.toasted) {

seeds/breadboard-web/src/ui/ui-controller.ts

@@ -13,6 +13,8 @@ import { Result, ResultArgs } from "./result.js";
 import { Start, type StartArgs } from "./start.js";
 import { StartEvent, type ToastType } from "./events.js";
 import { Toast } from "./toast.js";
+import { ResponseContainer } from "./response-container.js";
+import { Done } from "./done.js";
 
 export interface UI {
   progress(message: string): void;
@@ -28,6 +30,7 @@ const getBoardFromUrl = () => {
 
 export class UIController extends HTMLElement implements UI {
   #start!: Start;
+  #responseContainer = new ResponseContainer();
 
   constructor() {
     super();
@@ -191,6 +194,8 @@ export class UIController extends HTMLElement implements UI {
         </div>
       </div>
     `;
+
+    this.appendChild(this.#responseContainer);
   }
 
   setActiveBreadboard(url: string) {
@@ -220,17 +225,18 @@ export class UIController extends HTMLElement implements UI {
   }
 
   #clearBoardContents() {
+    this.#responseContainer.clearContents();
+
     const root = this.shadowRoot;
     if (!root) {
       throw new Error("Unable to locate shadow root in UI Controller");
     }
 
     const children = Array.from(this.querySelectorAll("*"));
     for (const child of children) {
-      if (child === this.#start) {
+      if (child === this.#start || child === this.#responseContainer) {
         continue;
       }
-
       child.remove();
     }
   }
@@ -281,18 +287,19 @@ export class UIController extends HTMLElement implements UI {
 
     const load = new Load(info);
     load.slot = "load";
-    this.append(load);
+    this.appendChild(load);
   }
 
   progress(message: string) {
     this.removeProgress();
-    this.append(new Progress(message));
+    const progress = new Progress(message);
+    this.#responseContainer.appendChild(progress);
   }
 
   async output(values: OutputArgs) {
     this.removeProgress();
     const output = new Output();
-    this.append(output);
+    this.#responseContainer.appendChild(output);
     await output.display(values);
   }
 
@@ -312,7 +319,7 @@ export class UIController extends HTMLElement implements UI {
       },
       { remember: true, secret: true }
     );
-    this.append(input);
+    this.#responseContainer.appendChild(input);
     const data = (await input.ask()) as Record<string, string>;
     input.remove();
     return data.secret;
@@ -321,23 +328,28 @@ export class UIController extends HTMLElement implements UI {
   result(value: ResultArgs) {
     const before = this.querySelector("bb-progress");
     const result = new Result(value);
-    before ? before.before(result) : this.append(result);
+    before
+      ? before.before(result)
+      : this.#responseContainer.appendChild(result);
   }
 
   async input(id: string, args: InputArgs): Promise<Record<string, unknown>> {
     this.removeProgress();
     const input = new Input(id, args);
-    this.append(input);
+    this.#responseContainer.appendChild(input);
     return (await input.ask()) as Record<string, unknown>;
   }
 
   error(message: string) {
     this.removeProgress();
-    this.append(new ErrorMessage(message));
+    const error = new ErrorMessage(message);
+    this.#responseContainer.appendChild(error);
   }
 
   done() {
-    this.progress("Done. Reload this page to restart.");
+    this.removeProgress();
+    const done = new Done("Board finished.");
+    this.#responseContainer.appendChild(done);
   }
 
   removeProgress() {