From 851da9c220aad26c06466aa79ecb667264c9c6a9 Mon Sep 17 00:00:00 2001
From: Will Dower <wdower@mitre.org>
Date: Thu, 12 Jan 2023 12:49:57 -0500
Subject: [PATCH] addresses #400 -- adds Plan column to homepage with links to
 Vulcan

Signed-off-by: Will Dower <wdower@mitre.org>
---
 src/assets/data/howitworks.json               | 167 +++++++-----------
 src/assets/img/svg/Plan Icon-Dark.svg         |   1 +
 src/assets/img/svg/Plan Icon-Light.svg        |   1 +
 .../home/wwdComponents/HowItWorks.vue         |  16 +-
 4 files changed, 76 insertions(+), 109 deletions(-)
 create mode 100644 src/assets/img/svg/Plan Icon-Dark.svg
 create mode 100644 src/assets/img/svg/Plan Icon-Light.svg

diff --git a/src/assets/data/howitworks.json b/src/assets/data/howitworks.json
index 49633b03b..6ffd2c4d1 100644
--- a/src/assets/data/howitworks.json
+++ b/src/assets/data/howitworks.json
@@ -4,20 +4,21 @@
       "name": "GOAL",
       "data": [
         {
+          "svg": "Plan Icon",
+          "title": {
+            "text" : "<b>PLAN</b>",
+            "size" : "2rem"
+          },
+          "subtitle": "Choose, tailor, and create <b>security guidance</b> appropriate for your mission",
+          "link" : "https://vulcan.mitre.org/"
+        },{
           "svg": "Harden Icon",
           "title": {
             "text" : "<b>HARDEN</b>",
             "size" : "2rem"
           },
           "subtitle": "<b>Implement security baselines</b> using our Ansible, Chef, and Terraform content",
-          "router_link" : "/harden",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "router_link" : "/harden"
         },
         {
           "svg": "Validate Icon",
@@ -26,14 +27,7 @@
             "size" : "2rem"
           },
           "subtitle": "<b>Generate detailed security testing results</b> throughout the lifecycle of a system via <b>automated tests</b> and <b>manual attestation</b>",
-          "router_link" : "/validate",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "router_link" : "/validate"
         },
         {
           "svg": "Normalize Icon",
@@ -42,14 +36,7 @@
             "size" : "2rem"
           },
           "subtitle": "<b>Convert security results</b> from all your security tools into a common data format",
-          "router_link" : "/normalize",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "router_link" : "/normalize"
         },
         {
           "svg": "Visualize Icon",
@@ -58,14 +45,7 @@
             "size" : "2rem"
           },
           "subtitle": "<b>Identify overall security status</b> and deep-dive to solve specific security defects",
-          "link" : "https://heimdall-lite.mitre.org",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "link" : "https://heimdall-lite.mitre.org"
         }
       ],
       "row_height": "10rem"
@@ -78,42 +58,21 @@
             "text" : "<b>Based On Standards</b>",
             "size" : "1.5rem"
           },
-          "subtitle": "(STIGs, CIS Benchmarks, Agency Baselines)",
-          "cols": {
-            "xl" : "6",
-            "lg" : "6",
-            "md" : "6",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "subtitle": "(STIGs, CIS Benchmarks, Agency Baselines)"
         },
         {
           "title": {
             "text" : "<b>Security Tool Output</b>",
             "size" : "1.5rem"
           },
-          "subtitle": "(Code Analysis, Continuous Monitoring, Security Operations)",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "3",
-            "xs" : "12"
-          }
+          "subtitle": "(Code Analysis, Continuous Monitoring, Security Operations)"
         },
         {
           "title": {
             "text" : "<b>Aggregated Data</b>",
             "size" : "1.5rem"
           },
-          "subtitle": "(Compile All Results For Analysis)",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "3",
-            "xs" : "12"
-          }
+          "subtitle": "(Compile All Results For Analysis)"
         }
       ],
       "row_height": "9rem"
@@ -121,6 +80,51 @@
     {
       "name": "TOOLS",
       "data": [
+        {
+          "subcards": [
+            {
+              "title": "Vulcan",
+              "subtitle": [
+                {
+                  "type": "text",
+                  "contents": "<b>Author standards</b> to create "
+                },
+                {
+                  "type": "svg",
+                  "contents": "InSpec Icon"
+                },
+                {
+                  "type": "svg",
+                  "contents": "InSpec Typemark"
+                },
+                {
+                  "type": "text",
+                  "contents": " validation code"
+                }
+              ],
+              "link" : "https://vulcan.mitre.org"
+            },
+            {
+              "title": "Unite Guidance with Automation",
+              "subtitle" : [
+                {
+                  "type": "text",
+                  "contents": "Develop automated compliance-as-code alongside standards"
+                }
+              ]
+            },
+            {
+              "title": "Bake in Compliance",
+              "subtitle" : [
+                {
+                  "type": "text",
+                  "contents": "Ensure all automated tests have a metadata binding to the requirement they validate"
+                }
+              ]
+            }
+          ],
+          "min_height" : "500px"
+        },
         {
           "subcards": [
             {
@@ -142,13 +146,6 @@
               "link" : "https://www.ansible.com/"
             }
           ],
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         },
         {
@@ -169,28 +166,6 @@
               ],
               "link" : "https://saf-cli.mitre.org/#attest"
             },
-            {
-              "title": "Vulcan",
-              "subtitle": [
-                {
-                  "type": "text",
-                  "contents": "<b>Author standards</b> to create "
-                },
-                {
-                  "type": "svg",
-                  "contents": "InSpec Icon"
-                },
-                {
-                  "type": "svg",
-                  "contents": "InSpec Typemark"
-                },
-                {
-                  "type": "text",
-                  "contents": " validation code"
-                }
-              ],
-              "link" : "https://vulcan.mitre.org"
-            },
             {
               "title": "saf generate",
               "subtitle": [
@@ -219,13 +194,6 @@
               "link" : "https://saf-cli.mitre.org/#validate"
             }
           ],
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         },
         {
@@ -247,13 +215,6 @@
               "link" : "https://saf-cli.mitre.org/#hdf-to-splunk"
             }
           ],
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         },
         {
@@ -279,14 +240,6 @@
               "link" : "https://saf-cli.mitre.org/#view"
             }
           ],
-
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         }
       ],
diff --git a/src/assets/img/svg/Plan Icon-Dark.svg b/src/assets/img/svg/Plan Icon-Dark.svg
new file mode 100644
index 000000000..5c839ca41
--- /dev/null
+++ b/src/assets/img/svg/Plan Icon-Dark.svg	
@@ -0,0 +1 @@
+<svg width="528" height="522" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1562" y="238" width="528" height="522"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1562 -238)"><path d="M1825.5 240C1680.43 240 1563 355.645 1563 498.5 1563 641.355 1680.43 757 1825.5 757 1970.57 757 2088 641.355 2088 498.5 2088 355.645 1970.57 240 1825.5 240ZM1825.5 280.816C1947.08 280.816 2046.55 378.774 2046.55 498.5 2046.55 618.226 1947.08 716.184 1825.5 716.184 1703.92 716.184 1604.45 618.226 1604.45 498.5 1604.45 378.774 1703.92 280.816 1825.5 280.816" fill="#D9D9D9" fill-rule="evenodd" fill-opacity="1"/><path d="M1718 605 1869.87 543.742 1932 394 1780.13 456.619 1718 605ZM1825.69 485.206C1833.97 485.206 1839.5 490.652 1839.5 498.82 1839.5 506.987 1833.97 512.432 1825.69 512.432 1817.41 512.432 1811.88 506.987 1811.88 498.82 1811.88 490.652 1817.41 485.206 1825.69 485.206" fill="#027FE9" fill-rule="evenodd" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/svg/Plan Icon-Light.svg b/src/assets/img/svg/Plan Icon-Light.svg
new file mode 100644
index 000000000..5c839ca41
--- /dev/null
+++ b/src/assets/img/svg/Plan Icon-Light.svg	
@@ -0,0 +1 @@
+<svg width="528" height="522" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1562" y="238" width="528" height="522"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1562 -238)"><path d="M1825.5 240C1680.43 240 1563 355.645 1563 498.5 1563 641.355 1680.43 757 1825.5 757 1970.57 757 2088 641.355 2088 498.5 2088 355.645 1970.57 240 1825.5 240ZM1825.5 280.816C1947.08 280.816 2046.55 378.774 2046.55 498.5 2046.55 618.226 1947.08 716.184 1825.5 716.184 1703.92 716.184 1604.45 618.226 1604.45 498.5 1604.45 378.774 1703.92 280.816 1825.5 280.816" fill="#D9D9D9" fill-rule="evenodd" fill-opacity="1"/><path d="M1718 605 1869.87 543.742 1932 394 1780.13 456.619 1718 605ZM1825.69 485.206C1833.97 485.206 1839.5 490.652 1839.5 498.82 1839.5 506.987 1833.97 512.432 1825.69 512.432 1817.41 512.432 1811.88 506.987 1811.88 498.82 1811.88 490.652 1817.41 485.206 1825.69 485.206" fill="#027FE9" fill-rule="evenodd" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/components/home/wwdComponents/HowItWorks.vue b/src/components/home/wwdComponents/HowItWorks.vue
index fdd2fd312..620b6a6f1 100644
--- a/src/components/home/wwdComponents/HowItWorks.vue
+++ b/src/components/home/wwdComponents/HowItWorks.vue
@@ -19,8 +19,17 @@
       <v-col xs="12" smAndUp="11">
         <v-container fluid>
           <v-row justify="center">
-            <p v-if="$vuetify.breakpoint.xs" class="primary--text" style="font-size:2rem">{{row.name}}</p>
-            <v-col v-for="(item, index) in row.data" class="pa-1" :key="index" :xl="item.cols.xl" :lg="item.cols.lg" :md="item.cols.md" :sm="item.cols.sm" :cols="item.cols.xs">
+            <v-col cols="12">
+              <p v-if="$vuetify.breakpoint.xs" class="primary--text" style="font-size:2rem">{{row.name}}</p>
+            </v-col>
+            
+            <v-col v-for="(item, index) in row.data" class="pa-1" :key="index"
+              :cols="$vuetify.breakpoint.xs ? 12 : ''"
+              sm="4"
+              md="4"
+              lg=""
+              xl=""
+            >
               <v-hover v-slot:default="{ hover }">
                 <v-card
                   :class="hover && (item.link || item.router_link) ? getHighlight() : ''"
@@ -150,6 +159,9 @@ export default {
       data: howitworks.rows,
     };
   },
+  mounted () {
+      console.log(this.$vuetify.breakpoint.width)
+    },
   // created() {
   //   imgVersion : '-Dark'
   // },