Submit Requirements - rest-api, types

Change-Id: Ie80b59fffc13ac68b56a31a6e75661439420a941

polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts

diff --git a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
index 16e176c..c7c9612 100644
--- a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
+++ b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
@@ -15,25 +15,63 @@
  * limitations under the License.
  */
 import {GrLitElement} from '../../lit/gr-lit-element';
-import {css, customElement, html} from 'lit-element';
+import {css, customElement, html, property} from 'lit-element';
+import {ParsedChangeInfo} from '../../../types/types';
 
 @customElement('gr-submit-requirements')
 export class GrSubmitRequirements extends GrLitElement {
+  @property({type: Object})
+  change?: ParsedChangeInfo;
+
   static get styles() {
     return [
       css`
+        :host {
+          display: table;
+          width: 100%;
+        }
         .metadata-title {
           font-size: 100%;
           font-weight: var(--font-weight-bold);
           color: var(--deemphasized-text-color);
           padding-left: var(--metadata-horizontal-padding);
         }
+        section {
+          display: table-row;
+        }
+        .title {
+          min-width: 10em;
+          padding: var(--spacing-s) var(--spacing-m) 0
+            var(--requirements-horizontal-padding);
+        }
+        .value {
+          padding: var(--spacing-s) 0 0 0;
+        }
+        .title,
+        .value {
+          display: table-cell;
+          vertical-align: top;
+        }
       `,
     ];
   }
 
   render() {
-    return html`<h3 class="metadata-title">Submit Requirements</h3>`;
+    const submit_requirements = this.change?.submit_requirements ?? [];
+    return html`<h3 class="metadata-title">Submit Requirements</h3>
+
+      ${submit_requirements.map(
+        requirement => html`<section>
+          <div class="title">
+            <gr-limited-text
+              class="name"
+              limit="25"
+              text="${requirement.name}"
+            ></gr-limited-text>
+          </div>
+          <div class="value">${requirement.status}</div>
+        </section>`
+      )}`;
   }
 }