component styling and expand funcitonality

src/plugins/conditionSet/components/ConditionCollection.vue

@@ -1,13 +1,18 @@
 <template>
-<section id="conditionCollection">
+<section id="conditionCollection"
-    <div class="c-sw-edit__ui__header">
+         class="c-cs__ui_section"
+>
+    <div class="c-cs__ui__header">
+        <span class="c-cs__ui__header-label">Conditions</span>
         <span
-            class="c-disclosure-triangle is-enabled flex-elem"
+            class="c-cs__disclosure-triangle is-enabled flex-elem"
-            :class="{'c-disclosure-triangle--expanded': expanded}"
+            :class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]"
+            @click="expanded = !expanded"
         ></span>
-        <span class="c-sw-edit__ui__header-label">Conditions</span>
     </div>
-    <div class="t-test-data-config">
+    <div v-if="expanded"
+         class="c-cs__ui_content"
+    >
         <div id="conditionArea"
              class="c-cs-editui__conditions widget-condition"
         >

src/plugins/conditionSet/components/ConditionSet.vue

@@ -2,7 +2,7 @@
 <div class="c-object-view u-contents">
     <div class="c-sw-edit w-summary-widget">
         <div class="c-sw-edit__ui holder">
-            <CurrentOutput :currentOutput="mockCurrentOutput"/>
+            <CurrentOutput :current-output="mockCurrentOutput" />
             <TestData :is-editing="isEditing" />
             <ConditionCollection :is-editing="isEditing" />
         </div>
@@ -27,7 +27,7 @@ export default {
     },
     data() {
         return {
-            mockCurrentOutput: 'DATA_PRESENT'
+            mockCurrentOutput: 'Data_Present'
         }
     }
 };

src/plugins/conditionSet/components/CurrentOutput.vue

@@ -1,15 +1,16 @@
 <template>
-<section id="current-output"
+<section id="current-output">
-         class="current-output"
->
     <div class="c-cs__ui__header">
         <span class="c-cs__ui__header-label">Current Output</span>
         <span
             class="c-cs__disclosure-triangle is-enabled flex-elem"
-            :class="{'c-cs__disclosure-triangle--expanded': expanded}"
+            :class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]"
+            @click="expanded = !expanded"
         ></span>
     </div>
-    <div class="c-cs__ui_text">
+    <div v-if="expanded"
+         class="c-cs__ui_content"
+    >
         <span>{{ currentOutput }}</span>
     </div>
 </section>
@@ -19,15 +20,20 @@
 export default {
     inject: ['openmct'],
     props: {
-        currentOutput: String,
+        currentOutput: {
+            type: String,
+            default: ''
+        },
+
         isEditing: Boolean
     },
     data() {
         return {
-            expanded: true,
+            expanded: true
         };
     },
     methods: {
+
     }
 }
-</script>
+</script>

src/plugins/conditionSet/components/TestData.vue

@@ -7,27 +7,30 @@
         <span class="c-cs__ui__header-label">Test Data</span>
         <span
             class="c-cs__disclosure-triangle is-enabled flex-elem"
-            :class="{'c-cs__disclosure-triangle--expanded': expanded}"
+            :class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]"
+            @click="expanded = !expanded"
         ></span>
     </div>
-    <div class="l-enable">
+    <div v-if="expanded"
+         class="c-cs__ui_content"
+    >
         <label class="checkbox custom">
             Apply Test Values
             <input type="checkbox"
                    class="t-test-data-checkbox"
             >
         </label>
-    </div>
+        <div class="t-test-data-config">
-    <div class="t-test-data-config">
+            <div class="c-sw-editui__rules widget-rules">
-        <div class="c-sw-editui__rules widget-rules">
+                <span>[data]</span>
-            <span>[data]</span>
+            </div>
-        </div>
+            <div class="holder add-condition-button-wrapper align-right">
-        <div class="holder add-condition-button-wrapper align-right">
+                <button id="addRule"
-            <button id="addRule"
+                        class="c-button c-button--major add-condition-button icon-plus"
-                    class="c-button c-button--major add-condition-button icon-plus"
+                >
-            >
+                    <span class="c-button__label">Add Test Value</span>
-                <span class="c-button__label">Add Test Value</span>
+                </button>
-            </button>
+            </div>
         </div>
     </div>
 </section>
@@ -41,11 +44,11 @@ export default {
     },
     data() {
         return {
-            expanded: true,
+            expanded: true
         };
     },
     methods: {
-        
+
     }
 }
 </script>

src/plugins/conditionSet/components/condition-set.scss

@@ -1,3 +1,7 @@
+section {
+    padding-bottom: 10px;
+}
+
 .c-cs__ui__header {
     background-color: #D0D1D3;
     padding: .3em .5em;
@@ -7,6 +11,7 @@
     color: #7C7D80;
     display: flex;
     justify-content: stretch;
+    margin-bottom: 5px;
 }
 
 .c-cs__ui__header-label {
@@ -14,12 +19,12 @@
     width: 100%;
 }
 
-.c-cs__ui_text {
+.c-cs__ui_content {
-    padding: .5em .5em;
     text-transform: uppercase;
     font-size: 0.8em;
     font-weight: bold;
     color: #7C7D80;
+    padding-left: 0.5em;
 }
 
 .c-cs__disclosure-triangle {

src/plugins/conditionSet/pluginSpec.js

@@ -23,7 +23,7 @@
 import { createOpenMct } from 'testTools';
 import ConditionSetPlugin from './plugin';
 
-fdescribe('The plugin', () => {
+describe('The plugin', () => {
     let openmct;
     let conditionSetDefinition;
     let element;