From d487a8540901829282c96cb715477bdcecfdc355 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 18 Mar 2021 14:42:50 -0700
Subject: [PATCH] KCheckbox new description, simplified logic around slot vs
 label showing

---
 lib/KCheckbox.vue | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue
index fc427e49b..56243df7a 100644
--- a/lib/KCheckbox.vue
+++ b/lib/KCheckbox.vue
@@ -44,15 +44,18 @@
       </div>
 
       <div
-        v-if="!label && $slots.default"
+        v-if="$slots.default"
         class="k-checkbox-label"
       >
-        <!-- @slot Slot alternative to the `label` prop -->
         <slot></slot>
+        <div v-if="description" class="description"> 
+          {{ description }} 
+        </div>
       </div>
 
+      <!-- In this case, we presume that there is a `label` prop given -->
       <label
-        v-else-if="label && !$slots.default"
+        v-else
         dir="auto"
         class="k-checkbox-label"
         :for="id"
@@ -61,6 +64,9 @@
         @click.prevent
       >
         {{ label }}
+        <div v-if="description" class="description"> 
+          {{ description }} 
+        </div>
       </label>
 
     </div>
@@ -112,6 +118,14 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * Description - subtext to the label
+       */
+      description: {
+        type: String,
+        default: null,
+        required: false,
+      },
     },
     data: () => ({
       isCurrentlyChecked: false,
@@ -241,4 +255,9 @@
     height: $checkbox-height;
   }
 
+  .description {
+    font-size: 12px;
+    line-height: normal;
+  }
+
 </style>