prop heading level throws necessary warnings if not stastified

learningequality · Feb 25, 2024 · 9a60b73 · 9a60b73
1 parent fdb2149
commit 9a60b73
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -25,8 +25,6 @@
     <!-- Play around with your component here: -->
 
 
-
-
   </div>
 
 </template>

diff --git a/lib/KCard/BaseCard.vue b/lib/KCard/BaseCard.vue
@@ -1,15 +1,48 @@
 <template>
 
-  <li class="remove-list-style">
-    <h2
-      v-if="title !== null"
-      :headerLevelTag="headerLevelTag"
-    >
-      <a :href="to">
-        <KTextTruncator :text="title" :maxLines="1" />
-      </a>
-    </h2>
-  </li>
+  <div
+    :class="$computedClass({ ':focus': $coreOutline })"
+  >
+    <li class="remove-list-style">
+
+      <h2
+        v-if="title !== null && headingLevel === 2"
+      >
+        <a :href="to">
+          <KTextTruncator :text="title" :maxLines="1" />
+        </a>
+      </h2>
+      <h3
+        v-if="title !== null && headingLevel === 3"
+      >
+        <a :href="to">
+          <KTextTruncator :text="title" :maxLines="1" />
+        </a>
+      </h3>
+      <h4
+        v-if="title !== null && headingLevel === 4"
+      >
+        <a :href="to">
+          <KTextTruncator :text="title" :maxLines="1" />
+        </a>
+      </h4>
+      <h5
+        v-if="title !== null && headingLevel === 5"
+      >
+        <a :href="to">
+          <KTextTruncator :text="title" :maxLines="1" />
+        </a>
+      </h5>
+      <h6
+        v-if="title !== null && headingLevel === 6"
+      >
+        <a :href="to">
+          <KTextTruncator :text="title" :maxLines="1" />
+        </a>
+      </h6>
+
+    </li>
+  </div>
 
 </template>
 

diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
@@ -2,7 +2,6 @@
 
   <div
     class="card"
-    :class="$computedClass({ ':focus': $coreOutline })"
     tabindex="0"
     @focus="cardFocus"
     @hover="cardHover"
@@ -41,7 +40,13 @@
             console.error(`Missing headinglevel ${value}`);
             return false;
           } else {
-            return true;
+            const headingLevelRange = [2, 3, 4, 5, 6];
+            if (!headingLevelRange.includes(value)) {
+              console.error(`Headinglevel ${value} is not in range 2-6`);
+              return false;
+            } else {
+              return true;
+            }
           }
         },
       },
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,8 +25,6 @@
		<!-- Play around with your component here: -->




		</div>

		</template>
Expand Down