Diagnostics: Add skeleton of diagnostics card

- Styling wrapper for diagnostic cards
- No styling is applied yet

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I21df9d3311aa54f8a21ef1f501a517c3e1a22e1a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2403901Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805979}

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -9,10 +9,20 @@ import("//tools/polymer/html_to_js.gni")
 
 js_type_check("closure_compile_module") {
   is_polymer3 = true
-  deps = [ ":diagnostics_app" ]
+  deps = [
+    ":diagnostics_app",
+    ":diagnostics_card",
+  ]
 }
 
 js_library("diagnostics_app") {
+  deps = [
+    ":diagnostics_card",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
+js_library("diagnostics_card") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -21,6 +31,7 @@ js_library("diagnostics_app") {
 html_to_js("web_components") {
   js_files = [
     "diagnostics_app.js",
+    "diagnostics_card.js",
     "diagnostics_shared_css.js",
   ]
 }

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

+<style include="diagnostics-shared">
+</style>
+
+<div id="card-wrapper">
+  <div id="title" class="title-container">
+    <slot name="title"></slot>
+  </div>
+
+  <div id="body" class="body-container">
+    <slot name="body"></slot>
+  </div>
+</div>

chromeos/components/diagnostics_ui/resources/diagnostics_card.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import './diagnostics_shared_css.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * @fileoverview
+ * 'diagnostics-card' is a styling wrapper for each component's diagnostic
+ * card.
+ */
+Polymer({
+  is: 'diagnostics-card',
+
+  _template: html`{__html_template__}`,
+
+});