Implemented parameters skeleton

apps/web/src/_variables.scss

+$container-shadow-color: #909090;
+
 $timestamp-text-color: #757575;
 $request-status-page-border-light: #d4d4d4;
 $request-status-page-border-dark: #bdbdbd;
@@ -20,7 +22,6 @@ $running-status-bg-gradient: linear-gradient(
   $running-status-bg-light 100%
 );
 
-
 // QUEUED status color
 $running-status-bg-light: #5fb2f4;
 $running-status-bg-dark: #2196f3;
@@ -29,3 +30,7 @@ $running-status-bg-gradient: linear-gradient(
     $running-status-bg-dark 0%,
     $running-status-bg-light 100%
 );
+
+// Capability request parameters
+$parameters-container-bg: #f7f7f7;
+$parameters-pill-color: #d9d8d8;

apps/web/src/app/workspaces/components/capability-request/capability-request.component.html

 <header>
   <app-request-header></app-request-header>
 </header>
-<div id="definition-parameters-and-versions">
-  <div id="capability-definition-container">
-    <span id="capability-label">Capability</span>
-    <app-capability-definition id="capability-definition" class="w-100"></app-capability-definition>
+<div id="definition-parameters-and-versions" class="container-fluid">
+  <div class="row">
+    <div id="capability-definition-container" class="col">
+      <span id="capability-label">Capability</span>
+      <app-capability-definition id="capability-definition"></app-capability-definition>
+    </div>
+    <div id="parameters-container" class="col">
+      <span id="parameters-label">Parameters</span>
+      <app-parameters id="parameters"></app-parameters>
+    </div>
   </div>
-  <h1 id="parameters">PARAMETERS!!!!!!!!!!!!</h1>
 </div>

apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss

 @import "src/variables.scss";
 
-div {
-  width: 100%;
+#definition-parameters-and-versions {
   padding: 0.5rem 3rem;
-  display: inline-grid;
 }
 
 #definition-parameters-and-versions {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
   background: $capability-request-bg-gradient;
 }
-
-#capability-definition {
-  justify-self: left;
-}
-#parameters {
-  justify-self: right;
-}

apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html

@@ -4,13 +4,13 @@
   <div id="step-sequence">
     <div class="container-fluid">
       <div class="row bg-primary rounded rounded-lg mb-1 text-white py-2 align-items-center">
-        <div class="col">Step 1</div>
+        <div class="col">RUN WORKFLOW null</div>
         <div class="col-auto">
           <span class="fas fa-play-circle fa-2x"></span>
         </div>
       </div>
       <div class="row bg-secondary rounded rounded-lg mb-1 text-white py-2 align-items-center">
-        <div class="col">Step 2</div>
+        <div class="col">AWAIT WORKFLOW</div>
         <div class="col-auto"><span class="fa fa-circle fa-2x"></span></div>
       </div>
     </div>

apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss

 @import "src/variables";
 
 #definition-container {
-  background-color: #ffffff;
+  background-color: white;
   border-radius: 10px;
-  border-top: 4px #909090 solid;
+  border-top: 4px $container-shadow-color solid;
 
   padding: 0.25rem 0.5rem;
 }

apps/web/src/app/workspaces/components/capability-request/components/parameters/parameters.component.html

+<div id="parameters-container" class="container-fluid rounded-top rounded-3 p-3">
+  <div class="row">
+    <div class="col">
+      <span class="rounded-pill px-2 py-1 argument-key">arguments</span>
+      <span class="px-1"> = </span>
+      <span class="rounded-pill px-2 py-1 argument-value">null</span>
+    </div>
+  </div>
+</div>

apps/web/src/app/workspaces/components/capability-request/components/parameters/parameters.component.scss

+@import "src/variables";
+
+.argument-key,
+.argument-value {
+  background-color: $parameters-pill-color;
+}
+
+#parameters-container {
+  background-color: $parameters-container-bg;
+}

apps/web/src/app/workspaces/components/capability-request/components/parameters/parameters.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParametersComponent } from './parameters.component';
+
+describe('ParametersComponent', () => {
+  let component: ParametersComponent;
+  let fixture: ComponentFixture<ParametersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ParametersComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParametersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/web/src/app/workspaces/components/capability-request/components/parameters/parameters.component.ts

+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-parameters",
+  templateUrl: "./parameters.component.html",
+  styleUrls: ["./parameters.component.scss"],
+})
+export class ParametersComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

apps/web/src/app/workspaces/workspaces.module.ts

@@ -7,6 +7,7 @@ import { CapabilityRequestComponent } from "./components/capability-request/capa
 import { RequestHeaderComponent } from "./components/capability-request/components/request-header/request-header.component";
 import { RunningStatusButtonComponent } from "./components/capability-request/components/status-buttons/running-status-button/running-status-button.component";
 import { CapabilityDefinitionComponent } from "./components/capability-request/components/capability-definition/capability-definition.component";
+import { ParametersComponent } from "./components/capability-request/components/parameters/parameters.component";
 
 @NgModule({
   declarations: [
@@ -15,6 +16,7 @@ import { CapabilityDefinitionComponent } from "./components/capability-request/c
     RequestHeaderComponent,
     RunningStatusButtonComponent,
     CapabilityDefinitionComponent,
+    ParametersComponent,
   ],
   imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
 })